/* =====================================================================
   CDE FUNNEL — shared styles for the multi-step lead funnel
   Extracted from mc.css. Scoped under .cde-funnel so it can be dropped
   into Tailwind-based landing pages without clashing with their styles.
   Load Fraunces/Archivo (Google Fonts) on the page if not already present.
   ===================================================================== */
:root{
  --verde:#2C3E2D;
  --rojo:#B13A2C;
  --dorado:#B8860B;
  --beige:#F5F1E8;
  --crema:#FBF8F1;
  --tinta:#222b1c;
  --humo:#6f6a5e;
  --linea:rgba(44,62,45,.14);
  --sombra:0 18px 50px -22px rgba(44,62,45,.55);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.cde-funnel{font-family:var(--sans);color:var(--tinta);line-height:1.55}
.cde-funnel *,.cde-funnel *::before,.cde-funnel *::after{box-sizing:border-box}
.cde-funnel img{max-width:100%;display:block}
.cde-funnel a{color:inherit;text-decoration:none}

/* buttons */
.cde-funnel .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:1.02rem;min-height:58px;padding:0 28px;border:none;border-radius:999px;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;width:100%;max-width:380px}
.cde-funnel .btn:active{transform:scale(.99)}
.cde-funnel .btn-primary{background:var(--rojo);color:#fff;box-shadow:0 12px 26px -12px rgba(177,58,44,.9)}
.cde-funnel .btn-primary:hover{transform:translateY(-2px)}
.cde-funnel .btn-outline{background:#fff;color:var(--verde);border:1.6px solid var(--linea)}
.cde-funnel .btn-outline:hover{border-color:var(--dorado)}
.cde-funnel .btn-wa{background:#1f9d59;color:#fff;box-shadow:0 14px 30px -12px rgba(31,157,89,.9);font-size:1.1rem;min-height:64px}
.cde-funnel .btn-wa:hover{transform:translateY(-2px)}
.cde-funnel .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* card / progress */
.cde-funnel .card{background:#fff;border:1px solid var(--linea);border-radius:24px;box-shadow:var(--sombra);max-width:540px;margin:0 auto;overflow:hidden;transition:opacity .2s ease}
.cde-funnel .progress{height:6px;background:var(--beige)}
.cde-funnel .progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dorado),var(--rojo));transition:width .45s cubic-bezier(.4,0,.2,1)}
.cde-funnel .card-body{padding:30px 26px 32px}

/* step meta / question */
.cde-funnel .step-meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);font-weight:600;margin-bottom:14px}
.cde-funnel .step-meta .back{cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--verde);opacity:.7;transition:opacity .15s}
.cde-funnel .step-meta .back:hover{opacity:1}
.cde-funnel .step-meta .back.hide{visibility:hidden}
.cde-funnel .q{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,5.4vw,1.7rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:22px;min-height:2.2em}

/* options */
.cde-funnel .opts{display:flex;flex-direction:column;gap:11px}
.cde-funnel .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--crema);border:1.5px solid var(--linea);border-radius:15px;padding:17px 18px;font-family:var(--sans);font-size:1.04rem;font-weight:500;color:var(--tinta);cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.cde-funnel .opt:hover{border-color:var(--dorado);background:#fff}
.cde-funnel .opt:active{transform:scale(.99)}
.cde-funnel .opt.sel{border-color:var(--rojo);background:#fff;box-shadow:inset 0 0 0 1px var(--rojo)}
.cde-funnel .opt .dot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--linea);transition:.15s;position:relative}
.cde-funnel .opt.sel .dot{border-color:var(--rojo);background:var(--rojo)}
.cde-funnel .opt.sel .dot::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}

/* contact fields */
.cde-funnel .field{margin-bottom:15px}
.cde-funnel .field label{display:block;font-size:.82rem;font-weight:600;color:var(--verde);margin-bottom:6px}
.cde-funnel .field input{width:100%;font-family:var(--sans);font-size:1.05rem;color:var(--tinta);background:var(--crema);border:1.5px solid var(--linea);border-radius:13px;padding:15px 16px;transition:border-color .15s}
.cde-funnel .field input:focus{outline:none;border-color:var(--dorado);background:#fff}
.cde-funnel .field .err{color:var(--rojo);font-size:.78rem;margin-top:5px;display:none}
.cde-funnel .field.invalid .err{display:block}
.cde-funnel .field.invalid input{border-color:var(--rojo)}
.cde-funnel .consent{font-size:.78rem;color:var(--humo);margin:6px 0 18px;line-height:1.45}

/* scheduling */
.cde-funnel .sched-help{font-size:.92rem;color:var(--humo);margin:0 0 16px}
.cde-funnel .q:has(+ .skip){margin-bottom:12px;min-height:0}
.cde-funnel .skip + .sched-help{margin-top:4px}
.cde-funnel .dates{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:thin}
.cde-funnel .dates::-webkit-scrollbar{height:5px}
.cde-funnel .dates::-webkit-scrollbar-thumb{background:var(--linea);border-radius:9px}
.cde-funnel .datepill{flex:0 0 auto;min-width:74px;text-align:center;background:var(--crema);border:1.5px solid var(--linea);border-radius:14px;padding:10px 8px;cursor:pointer;transition:.15s}
.cde-funnel .datepill:hover{border-color:var(--dorado);background:#fff}
.cde-funnel .datepill .dn{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--humo);font-weight:600}
.cde-funnel .datepill .dd{display:block;font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.15;color:var(--verde)}
.cde-funnel .datepill .dm{display:block;font-size:.7rem;color:var(--humo)}
.cde-funnel .datepill.sel{border-color:var(--rojo);background:#fff;box-shadow:inset 0 0 0 1px var(--rojo)}
.cde-funnel .datepill.sel .dd{color:var(--rojo)}

.cde-funnel .appointment-types{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;padding:6px;background:rgba(44,62,45,.08);border:1px solid var(--linea);border-radius:18px;box-shadow:inset 0 1px 2px rgba(44,62,45,.08)}
.cde-funnel .appointment-types::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 9px);border-radius:14px;background:linear-gradient(135deg,var(--verde),#1b2616);box-shadow:0 12px 28px -18px rgba(44,62,45,.9), inset 0 1px 0 rgba(255,255,255,.16);transition:transform .28s cubic-bezier(.2,.9,.2,1),background .2s;z-index:0;pointer-events:none}
.cde-funnel .appointment-types[data-active="visita_presencial"]::before{transform:translateX(calc(100% + 6px));background:linear-gradient(135deg,var(--rojo),#8d2b21)}
.cde-funnel .apptype{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;min-height:0;padding:11px 10px;border:0;border-radius:14px;background:transparent;font-family:var(--sans);font-weight:700;color:var(--verde);cursor:pointer;text-align:left;transition:color .2s,transform .14s}
.cde-funnel .apptype:hover{transform:translateY(-1px)}
.cde-funnel .apptype:focus-visible{outline:3px solid rgba(184,134,11,.28);outline-offset:3px}
.cde-funnel .apptype.sel{color:#fff}
.cde-funnel .apptype-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.55);color:var(--dorado);transition:background .2s,color .2s}
.cde-funnel .apptype.sel .apptype-icon{background:rgba(255,255,255,.18);color:#fff}
.cde-funnel .apptype-copy{flex:1;min-width:0}
.cde-funnel .apptype-title{display:block;font-size:.88rem;line-height:1.2}
.cde-funnel .apptype-copy small{display:block;margin-top:4px;font-size:.68rem;font-weight:500;color:var(--humo);line-height:1.3;transition:color .2s}
.cde-funnel .apptype.sel .apptype-copy small{color:rgba(255,255,255,.82)}

.cde-funnel .slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}
@media (max-width:520px){.cde-funnel .slots{grid-template-columns:repeat(3,1fr)}}
.cde-funnel .slot{background:var(--crema);border:1.5px solid var(--linea);border-radius:12px;padding:14px 6px;text-align:center;font-weight:600;font-size:1rem;color:var(--tinta);cursor:pointer;transition:.15s}
.cde-funnel .slot:hover{border-color:var(--dorado);background:#fff}
.cde-funnel .slot.sel{border-color:var(--rojo);background:#fff;box-shadow:inset 0 0 0 1px var(--rojo);color:var(--rojo)}
.cde-funnel .slot:disabled{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.cde-funnel .slot:disabled:hover{border-color:var(--linea);background:var(--crema)}
.cde-funnel .schedule-status{min-height:1.2em;margin:-7px 0 14px;color:var(--humo);font-size:.84rem}
.cde-funnel .schedule-status.err{color:var(--rojo)}
.cde-funnel #contBtn,.cde-funnel #confirmBtn{width:100%;max-width:none}
.cde-funnel #confirmBtn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.cde-funnel .skip{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 14px;padding:15px 20px;border:none;border-radius:999px;background:linear-gradient(135deg,#f0a020 0%,#e8b84a 45%,#d4920a 100%);color:#1b2616;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;line-height:1.25;text-decoration:none;cursor:pointer;box-shadow:0 12px 28px -10px rgba(212,146,10,.85),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .15s ease,box-shadow .2s ease,filter .15s ease}
.cde-funnel .skip:hover{color:#1b2616;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 32px -10px rgba(212,146,10,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.cde-funnel .skip:active{transform:scale(.99)}

/* success */
.cde-funnel .success{display:none;padding:40px 28px 38px;text-align:center}
.cde-funnel .success.show{display:block;animation:cdeFadeup .5s ease both}
@keyframes cdeFadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cde-funnel .success .seal{width:84px;height:84px;border-radius:50%;background:var(--beige);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--rojo)}
.cde-funnel .success h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,6vw,2.05rem);line-height:1.08;margin-bottom:12px}
.cde-funnel .success p{color:#3c4434;font-size:1.02rem;max-width:42ch;margin:0 auto 24px}
.cde-funnel .success .actions{display:flex;flex-direction:column;gap:11px;align-items:center;max-width:380px;margin:0 auto}
.cde-funnel .success .actions .btn{width:100%;max-width:none}

/* locked state (federation pages before faena/sindicato unlock) */
.cde-funnel.is-locked .card{opacity:.55;pointer-events:none;filter:grayscale(.15)}

@media (max-width:520px){
  .cde-funnel .card-body{padding:26px 20px 28px}
  .cde-funnel .apptype{padding:10px 8px;gap:7px}
  .cde-funnel .apptype-title{font-size:.82rem}
  .cde-funnel .apptype-copy small{font-size:.64rem;line-height:1.25}
  .cde-funnel .apptype-icon{width:24px;height:24px}
}

/* microreward toast — stays global/fixed, like mc.php */
.reward{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 32px));transform:translate(-50%,calc(100% + 28px)) scale(.96);opacity:0;background:rgba(44,62,45,.96);color:#fff;font-weight:600;font-size:.95rem;line-height:1.35;padding:14px 18px 14px 14px;border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:0 22px 55px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);z-index:60;display:flex;align-items:center;gap:12px;text-align:left;transition:transform .42s cubic-bezier(.2,.9,.2,1), opacity .25s ease;pointer-events:none;backdrop-filter:blur(10px);font-family:var(--sans)}
.reward.show{transform:translate(-50%,0) scale(1);opacity:1}
.reward .hex{width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(231,184,90,.16);color:#f0c66b;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(240,198,107,.22)}
.reward span{display:block;min-width:0}

@media (max-width:520px){
  .reward{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100vw - 24px);padding:13px 15px 13px 12px;border-radius:16px;font-size:.9rem}
  .reward .hex{width:32px;height:32px;padding:7px}
}
@media (prefers-reduced-motion:reduce){.cde-funnel *,.reward{animation:none!important;transition:none!important}}