/* ============================================================
   HELADOS COLAVITA — Hoja de estilos global
   Paleta:  Berry #C81D4F · Soft Pink #F6B7C8
            Light Cream #FFE6EE · Cone Beige #C98A57
   Tipos:   Outfit (títulos) + Jost (texto)
   ============================================================ */

:root{
  /* Paleta de marca */
  --berry:#C81D4F;
  --pink:#F6B7C8;
  --cream:#FFE6EE;
  --beige:#C98A57;

  /* Derivados */
  --berry-dark:#A81640;
  --berry-light:#DE4B75;
  --beige-text:#9A6535;      /* Beige con contraste AA para texto pequeño */
  --cream-lite:#FFF5F8;
  --ink:#3A2229;
  --muted:#8B6B74;
  --body:#5C424B;
  --line:#F5D8E1;
  --grad:linear-gradient(135deg,#C81D4F 0%,#DE4B75 100%);
  --shadow:0 18px 40px -28px rgba(58,34,41,.45);
  --shadow-lg:0 30px 70px -34px rgba(58,34,41,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:400;color:var(--ink);background:#fff;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.serif{
  font-family:'Outfit',system-ui,sans-serif;font-optical-sizing:auto;
  font-variation-settings:"SOFT" 40;letter-spacing:-.015em;line-height:1.15;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:880px}

/* --- Ornamentos --- */
.eyebrow{
  font-weight:500;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--beige-text);display:block;margin-bottom:14px;
}
.rule{width:56px;height:2px;background:var(--beige);border-radius:2px;margin:18px auto 0;opacity:.7}

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Jost',sans-serif;font-weight:500;font-size:1rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:999px;cursor:pointer;border:0;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-solid{background:var(--grad);color:#fff;box-shadow:0 12px 26px -12px rgba(200,29,79,.7)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(200,29,79,.75)}
.btn-outline{background:#fff;color:var(--berry);border:1.5px solid var(--pink)}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--berry);background:var(--cream-lite)}
.btn-block{width:100%}

/* --- Botones de WhatsApp (verde de marca) --- */
.btn-wa{
  background:linear-gradient(135deg,#149E52 0%,#0B7A42 100%);
  color:#fff;font-weight:600;
  box-shadow:0 12px 26px -12px rgba(11,122,66,.7);
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(11,122,66,.75)}
.btn-wa-outline{background:#fff;color:#0B7A42;border:1.5px solid #149E52;font-weight:600}
.btn-wa-outline:hover{transform:translateY(-2px);border-color:#0B7A42;background:#F0FBF4}

/* --- Header / Navegación --- */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo{
  width:44px;height:44px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;font-size:1.35rem;
  box-shadow:0 8px 18px -8px rgba(200,29,79,.65);
}
.brand-name{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:1.35rem;color:var(--berry);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-links a{font-size:.96rem;color:var(--body);position:relative;padding:4px 0;transition:color .18s ease}
.nav-links a:hover{color:var(--berry)}
.nav-links a.active{color:var(--berry);font-weight:500}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--beige);border-radius:2px;
}
.nav-wa{padding:11px 22px;font-size:.94rem;flex:0 0 auto}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.5rem;color:var(--berry);padding:6px}

/* --- Hero de página interior --- */
.page-hero{background:linear-gradient(180deg,#FFF9FB 0%,var(--cream) 100%);text-align:center;padding:70px 0 62px}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
.page-hero p{max-width:620px;margin:20px auto 0;font-size:1.12rem;font-weight:300;color:#6B4B55}

/* --- Secciones --- */
section.block{padding:88px 0}
.tint{background:var(--cream-lite)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 54px}
.sec-head h2{font-size:clamp(1.95rem,4.4vw,2.8rem);font-weight:800}
.sec-head p{color:var(--muted);font-size:1.1rem;font-weight:300;margin-top:14px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.card h3{font-size:1.4rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.checklist{list-style:none;display:grid;gap:13px}
.checklist li{position:relative;padding-left:24px;color:var(--body);font-weight:300}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--berry);font-weight:600}

/* ============================================================
   TARJETAS DE PROGRAMA (homepage) — VARIANTE A: foto de fondo
   ============================================================ */
/* Rejilla a ancho completo: ocupa toda la pantalla, no los 1120px */
.programs-wrap{width:100%;padding:0 clamp(16px,3vw,48px)}
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,32px)}

.pcard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(460px,38vw,700px);border-radius:24px;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-lg);color:#fff;
  /* Si la foto falta o aún no se ha subido, queda este degradado de marca */
  background:linear-gradient(160deg,#C81D4F 0%,#7A1130 100%);
  transition:transform .3s ease,box-shadow .3s ease;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 38px 80px -36px rgba(58,34,41,.65)}
.pcard-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard-bg{transform:scale(1.06)}
.pcard::after{ /* velo de marca para legibilidad del texto */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(58,34,41,.15) 0%,rgba(58,34,41,.55) 45%,rgba(140,20,52,.92) 100%);
}
.pcard-body{padding:clamp(30px,2.6vw,52px) clamp(26px,2.4vw,46px)}
.pcard .tag{
  display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  padding:6px 15px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(4px);
}
.pcard h3{font-size:clamp(1.6rem,1.9vw,2.35rem);font-weight:800;margin-bottom:14px;line-height:1.18}
.pcard p{font-size:clamp(.98rem,1.02vw,1.18rem);font-weight:300;color:rgba(255,255,255,.9);margin-bottom:24px;max-width:46ch}
.pcard ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.pcard ul li{
  font-size:.82rem;font-weight:400;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.28);padding:6px 13px;border-radius:999px;
}
.pcard .go{
  display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:.98rem;
  background:#fff;color:var(--berry);padding:15px 30px;border-radius:999px;
  align-self:flex-start;transition:gap .2s ease;
}
.pcard:hover .go{gap:14px}
.pcard-link{position:absolute;inset:0;z-index:3} /* enlace de área completa */

/* ============================================================
   VARIANTE B: tarjeta clara, sin foto (paleta + ornamento)
   ============================================================ */
.pcard-b{
  position:relative;display:flex;flex-direction:column;min-height:clamp(460px,38vw,700px);
  background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.pcard-b:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--pink)}
.pcard-b .top{
  height:150px;background:var(--grad);position:relative;
  display:grid;place-items:center;overflow:hidden;
}
.pcard-b .top::before{ /* textura de puntos sutil */
  content:"";position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:16px 16px;
}
.pcard-b .top .ico{font-size:3.1rem;position:relative;filter:drop-shadow(0 6px 12px rgba(0,0,0,.22))}
.pcard-b .num{
  position:absolute;top:16px;right:20px;font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:2.4rem;color:rgba(255,255,255,.32);line-height:1;
}
.pcard-b .body{padding:38px 34px 36px;display:flex;flex-direction:column;flex:1}
.pcard-b .tag{
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--beige-text);margin-bottom:10px;
}
.pcard-b h3{font-size:1.7rem;font-weight:800;margin-bottom:14px}
.pcard-b p{font-size:1.02rem;font-weight:300;color:var(--body);margin-bottom:22px}
.pcard-b ul{list-style:none;display:grid;gap:9px;margin-bottom:24px}
.pcard-b ul li{display:flex;gap:10px;font-size:.92rem;font-weight:300;color:var(--body)}
.pcard-b ul li::before{content:"◆";color:var(--beige);font-size:.6rem;margin-top:.45em}
.pcard-b .foot{margin-top:auto}

/* ============================================================
   TESTIMONIOS (con foto)
   ============================================================ */
.t-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.t-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.t-photo{display:block;position:relative;background:var(--cream);overflow:hidden}
.t-photo img{
  width:100%;height:clamp(290px,24vw,390px);
  object-fit:cover;display:block;transition:transform .5s ease;
}
.t-card:hover .t-photo img{transform:scale(1.05)}

.t-body{padding:26px 30px 30px;display:flex;flex-direction:column;flex:1}
.stars{color:var(--beige);letter-spacing:3px;margin-bottom:12px;font-size:.95rem}
.t-card .quote{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:1.06rem;
  color:var(--body);line-height:1.6;margin-bottom:20px;
}
/* empuja nombre y ciudad al fondo: las 3 tarjetas quedan alineadas
   aunque las citas midan distinto */
.t-name{font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.05rem;margin-top:auto}
.t-loc{color:var(--muted);font-size:.88rem;font-weight:300}

/* ============================================================
   PESTAÑAS (tabs)
   ============================================================ */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.tab{
  font-family:'Jost',sans-serif;font-size:.98rem;font-weight:500;color:var(--body);
  background:#fff;border:1.5px solid var(--line);padding:13px 26px;border-radius:999px;
  cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:9px;
}
.tab:hover{border-color:var(--pink);color:var(--berry)}
.tab[aria-selected="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -14px rgba(200,29,79,.8)}
.tab:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.panel[hidden]{display:none}
.panel{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Cabecera del panel */
.panel-head{text-align:center;max-width:720px;margin:0 auto 40px}
.panel-head h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800}
.panel-head p{color:var(--muted);font-size:1.08rem;font-weight:300;margin-top:14px}

/* Disposición info + formulario */
.panel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}

/* Bloque de costo */
.cost{
  background:var(--cream-lite);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;margin-top:26px;text-align:center;
}
.cost .label{font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--beige-text)}
.cost .amount{font-family:'Outfit',system-ui,sans-serif;font-size:2.9rem;font-weight:800;color:var(--berry);line-height:1.05;margin-top:8px}
.cost .note{color:var(--muted);font-size:.92rem;font-weight:300;margin-top:6px}

/* ============================================================
   FORMULARIO → WHATSAPP
   ============================================================ */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;
  box-shadow:var(--shadow);position:sticky;top:98px;
}
.form-card h3{font-size:1.35rem;font-weight:800;margin-bottom:6px}
.form-card .sub{color:var(--muted);font-size:.94rem;font-weight:300;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:500;margin-bottom:7px;color:var(--ink)}
.field .req{color:var(--berry)}
.field input,.field select,.field textarea{
  width:100%;font-family:'Jost',sans-serif;font-size:.97rem;font-weight:300;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--berry);box-shadow:0 0 0 3px rgba(200,29,79,.12);
}
.field input::placeholder,.field textarea::placeholder{color:#C3A9B1}
.field textarea{resize:vertical;min-height:82px}
.field.invalid input,.field.invalid select{border-color:var(--berry);background:#FFF7F9}
.err{color:var(--berry);font-size:.82rem;margin-top:5px;display:none}
.field.invalid .err{display:block}
.form-note{color:var(--muted);font-size:.84rem;font-weight:300;text-align:center;margin-top:14px;line-height:1.5}
.wa-preview{
  background:var(--cream-lite);border:1px dashed var(--pink);border-radius:12px;
  padding:14px 16px;margin-top:16px;font-size:.84rem;font-weight:300;color:var(--body);
  white-space:pre-wrap;max-height:170px;overflow:auto;display:none;
}
.wa-preview.show{display:block}
.wa-preview b{font-weight:600;color:var(--ink)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--cream);text-align:center;padding:56px 22px}
footer .fbrand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
footer .brand-name{color:#fff}
footer .fline{width:46px;height:2px;background:var(--beige);margin:0 auto 18px;opacity:.8}
footer .flinks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-bottom:18px}
footer .flinks a{color:var(--cream);font-size:.94rem;font-weight:300;opacity:.85;transition:opacity .18s}
footer .flinks a:hover{opacity:1;color:#fff}
footer p{color:#C4A3AD;font-size:.9rem;font-weight:300;margin-top:6px}

/* WhatsApp flotante */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#149E52 0%,#0B7A42 100%);display:grid;place-items:center;font-size:1.65rem;
  box-shadow:0 14px 28px -10px rgba(37,211,102,.65);transition:transform .18s ease;
}
.fab:hover{transform:scale(1.08)}

/* ============================================================
/* ============================================================
   TESTIMONIOS — CAPTURAS REALES DE WHATSAPP
   Se dibujan solos desde assets/config.js
   ============================================================ */
/* Una tarjeta por columna, cada una con su altura natural: las capturas
   de WhatsApp vienen con proporciones muy distintas (una alta, otra una
   tira ancha) y forzarlas a la misma altura las deformaría. */
.wa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}

.wa-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.wa-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* Marco tipo chat: el fondo rosado de los propios chats hace que se lea
   al instante como "esto es un mensaje real, no una frase de marketing" */
.wa-shot{
  background:#F7E4EC;
  padding:22px 30px;
  border-bottom:1px solid var(--line);
}
.wa-shot img{
  width:100%;height:auto;display:block;
  border-radius:10px;
  box-shadow:0 6px 18px -10px rgba(58,34,41,.45);
}

.wa-meta{padding:22px 26px 26px}
.wa-resumen{
  font-weight:300;font-size:1.02rem;color:var(--body);
  line-height:1.6;margin-bottom:16px;
}
.wa-name{font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.05rem}
.wa-loc{color:var(--muted);font-size:.88rem;font-weight:300;margin-top:2px}

/* Sello de verificación de la sección */
.wa-sello{
  display:inline-flex;align-items:center;gap:9px;
  background:#F0FBF4;border:1px solid #BFE7CE;color:#0B7A42;
  border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:500;
  margin-top:20px;
}

/* ============================================================
   PREGUNTAS FRECUENTES
   Responden por adelantado lo que hoy llega por WhatsApp
   ============================================================ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}

.faq details{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:var(--pink);box-shadow:var(--shadow)}

.faq summary{
  list-style:none;cursor:pointer;
  font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:1.05rem;
  color:var(--ink);padding:20px 56px 20px 24px;position:relative;
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--berry)}
.faq summary:focus-visible{outline:3px solid var(--pink);outline-offset:-3px;border-radius:16px}

/* Flecha */
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--berry);border-bottom:2px solid var(--berry);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}

.faq .faq-body{
  padding:0 24px 22px;color:var(--body);font-weight:300;line-height:1.7;
}
.faq .faq-body p + p{margin-top:12px}
.faq .faq-body strong{font-weight:600;color:var(--ink)}
.faq .faq-body a{color:var(--berry);text-decoration:underline}

/* ============================================================
   FILTRO DE MOMENTO  (el campo que ordena tu WhatsApp)
   ============================================================ */
.momento{
  background:var(--cream-lite);border:1px solid var(--line);
  border-radius:14px;padding:16px 16px 6px;margin-bottom:16px;
}
.momento > label{font-weight:600;font-size:.9rem}
.momento .hint{
  display:block;color:var(--muted);font-size:.82rem;font-weight:300;
  margin:-3px 0 10px;line-height:1.45;
}

/* ============================================================
   CANDADO "YA LEÍ"  — evita consultas de quien no leyó nada
   ============================================================ */
.gate{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--cream-lite);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin:4px 0 18px;
  transition:border-color .2s ease,background .2s ease;
}
.gate input{
  width:19px;height:19px;flex:0 0 auto;margin-top:2px;
  accent-color:var(--berry);cursor:pointer;
}
.gate label{font-size:.88rem;font-weight:400;color:var(--body);cursor:pointer;line-height:1.5}
.gate.invalid{border-color:var(--berry);background:#FFF7F9}
.gate.invalid label{color:var(--berry)}

/* Botón bloqueado hasta que se tilde el candado */
.btn:disabled,.btn.is-locked{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.35);
}
.btn:disabled:hover,.btn.is-locked:hover{transform:none}

/* ============================================================
   PANTALLA DE GRACIAS
   Se muestra a quien está "averiguando": queda registrado en la
   planilla sin interrumpir tu WhatsApp.
   ============================================================ */
.form-gracias{text-align:center;padding:18px 4px}
.form-gracias .fg-icon{font-size:2.6rem;line-height:1}
.form-gracias h3{font-size:1.4rem;font-weight:800;margin:14px 0 10px;justify-content:center}
.form-gracias p{color:var(--body);font-weight:300;line-height:1.65}
.form-gracias .fg-mini{
  color:var(--muted);font-size:.86rem;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line);
}
.form-gracias .fg-mini a{color:#0B7A42;font-weight:600;text-decoration:underline}

/* --- Relato de la marca (Quiénes somos) --- */
.relato{max-width:680px;margin:0 auto 40px;text-align:center}
.relato p{color:var(--body);font-weight:300;font-size:1.08rem;line-height:1.75}
.relato p + p{margin-top:16px}
.relato strong{font-weight:600;color:var(--ink)}

/* --- Cifras de respaldo --- */
.hechos{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  max-width:920px;margin:0 auto 44px;
}
.hecho{
  flex:1 1 200px;max-width:280px;
  background:var(--cream-lite);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;text-align:center;
}
.hecho .cifra{
  display:block;font-family:'Outfit',system-ui,sans-serif;
  font-weight:800;font-size:2.1rem;color:var(--berry);line-height:1;
}
.hecho .detalle{
  display:block;color:var(--muted);font-size:.92rem;font-weight:300;
  line-height:1.45;margin-top:8px;
}
/* ============================================================
   QUIÉNES ENSEÑAN
   Las fotos son opcionales: si el archivo no existe, queda el
   círculo con las iniciales y no se rompe nada.
   ============================================================ */
.equipo{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}

.persona{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px 32px;box-shadow:var(--shadow);text-align:center;
}
.persona .retrato{
  width:112px;height:112px;border-radius:50%;object-fit:cover;
  margin:0 auto 18px;display:block;
  border:3px solid var(--cream);box-shadow:0 10px 26px -14px rgba(200,29,79,.6);
}
.persona .iniciales{
  width:112px;height:112px;border-radius:50%;background:var(--grad);
  margin:0 auto 18px;display:grid;place-items:center;
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:2.1rem;
  color:#fff;letter-spacing:.02em;
  box-shadow:0 10px 26px -14px rgba(200,29,79,.6);
}
.persona h3{font-size:1.4rem;font-weight:800;margin-bottom:6px;justify-content:center}
.persona .rol{
  color:var(--beige-text);font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
}
.persona p{color:var(--body);font-weight:300;line-height:1.65}
/* ============================================================
   AVISO DE LECTURA  (antes del formulario)
   ============================================================ */
.leer-antes{
  display:flex;gap:13px;align-items:flex-start;
  background:#FFFBEB;border:1px solid #FCE7A2;border-radius:14px;
  padding:15px 18px;margin-bottom:22px;
}
.leer-antes .ico{font-size:1.15rem;line-height:1.4;flex:0 0 auto}
.leer-antes p{font-size:.9rem;font-weight:300;color:#7A5B14;line-height:1.55;margin:0}
.leer-antes strong{font-weight:600;color:#5E4508}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .programs{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .pcard,.pcard-b{min-height:clamp(420px,50vw,560px)}
  .panel-grid{grid-template-columns:1fr}
  .form-card{position:static}
}
@media(max-width:880px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .nav-toggle{display:block;order:3}
  .nav-links{
    display:none;position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 18px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a.active::after{display:none}
  .nav-wa{display:none}
}
@media(max-width:620px){
  .grid-2,.grid-4{grid-template-columns:1fr}
  section.block{padding:62px 0}
  .page-hero{padding:54px 0 48px}
  .card,.form-card{padding:26px 22px}
  .t-body{padding:24px 24px 26px}
  .t-photo img{height:270px}
  .programs-wrap{padding:0 18px}
  .pcard,.pcard-b{min-height:clamp(430px,118vw,540px)}
  .pcard-body{padding:30px 26px 28px}
  .pcard h3{font-size:1.6rem}
  .pcard-b{min-height:auto}
  .pcard-b .body{padding:28px 24px 26px}
  .tabs{gap:8px}
  .tab{padding:11px 18px;font-size:.9rem}
}

/* --- Responsive de los componentes nuevos --- */
@media(max-width:1000px){
  .wa-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .wa-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media(max-width:620px){
  .wa-meta{padding:20px 22px 24px}
  .faq summary{font-size:1rem;padding:18px 50px 18px 20px}
  .faq .faq-body{padding:0 20px 20px}
  .equipo{grid-template-columns:1fr;max-width:460px}
}

/* Precio todavía sin definir: se ve como texto, no como cifra */
.cost .amount.a-consultar{font-size:1.75rem;font-weight:700}

/* En pantallas chicas la captura se aprovecha mejor a ancho completo */
@media(max-width:620px){
  .wa-shot{padding:14px 16px}
}

/* ============================================================
   LOGO DE LA MARCA
   El PNG ya viene recortado en círculo y con el fondo
   transparente, así que no necesita máscara.
   ============================================================ */
.logo-img{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  display:block;object-fit:contain;background:#fff;
  box-shadow:0 4px 14px -7px rgba(58,34,41,.55);
}
footer .logo-img{box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
@media(max-width:620px){ .logo-img{width:40px;height:40px} }

/* ============================================================
   AVISO DE PRÓXIMA FECHA
   Barra fina debajo del menú. Se dibuja desde config.js y
   desaparece sola cuando no hay fecha cargada.
   ============================================================ */
.aviso{color:#fff}
.aviso-berry{background:var(--grad)}
.aviso-oscuro{background:linear-gradient(135deg,#3A2229 0%,#241318 100%)}
.aviso-oscuro .aviso-punto{background:var(--beige)}
.aviso-oscuro strong{color:#FFD9A8}
.aviso + .aviso{border-top:1px solid rgba(255,255,255,.14)}
.aviso-fila{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px 16px;padding:11px 22px;
}
.aviso p{font-size:.95rem;font-weight:300;margin:0}
.aviso strong{font-weight:600}
.aviso a{
  font-size:.92rem;font-weight:600;color:#fff;
  border-bottom:1.5px solid rgba(255,255,255,.55);
  padding-bottom:1px;transition:border-color .18s ease;
}
.aviso a:hover{border-color:#fff}

/* Punto que late, para que la fecha se note sin gritar */
.aviso-punto{
  width:8px;height:8px;border-radius:50%;background:#fff;
  flex:0 0 auto;box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:latido 2.4s ease-out infinite;
}
@keyframes latido{
  0%   {box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%  {box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100% {box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){ .aviso-punto{animation:none} }

@media(max-width:620px){
  .aviso-fila{padding:10px 18px;gap:6px 12px}
  .aviso p,.aviso a{font-size:.87rem}
}

/* Qué agrega cada modalidad, dentro de la tarjeta "Incluye" */
.mod-extra{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:grid;gap:10px;
}
.mod-extra p{
  font-size:.92rem;font-weight:300;color:var(--body);line-height:1.55;margin:0;
}
.mod-extra strong{font-weight:600;color:var(--ink)}

/* El punto de la barra oscura late en beige, no en blanco */
.aviso-oscuro .aviso-punto{animation-name:latido-beige}
@keyframes latido-beige{
  0%   {box-shadow:0 0 0 0 rgba(201,138,87,.8)}
  70%  {box-shadow:0 0 0 9px rgba(201,138,87,0)}
  100% {box-shadow:0 0 0 0 rgba(201,138,87,0)}
}

/* ============================================================
   OFERTA DEL MES
   ============================================================ */
.oferta{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}

.oferta-precio{
  background:linear-gradient(150deg,#3A2229 0%,#241318 100%);
  color:#fff;border-radius:22px;padding:34px 30px;text-align:center;
  box-shadow:var(--shadow-lg);position:relative;
}
.etiqueta-desc{
  display:inline-block;background:var(--grad);color:#fff;
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:7px 18px;border-radius:999px;margin-bottom:20px;
  box-shadow:0 10px 24px -12px rgba(200,29,79,.9);
}
.oferta-precio .antes{color:#C4A3AD;font-size:1rem;font-weight:300}
.oferta-precio .antes s{opacity:.85}
.oferta-precio .ahora{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.8rem,5vw,3.8rem);line-height:1.05;margin:4px 0 10px;
  color:#FFD9A8;
}
.oferta-precio .nota{color:#C4A3AD;font-size:.88rem;font-weight:300;line-height:1.5}

.oferta-ficha{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
}
.oferta-ficha .dato{
  display:block;font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:1.2rem;color:#fff;
}
.oferta-ficha .pie{
  display:block;color:#C4A3AD;font-size:.82rem;font-weight:300;
  line-height:1.4;margin-top:3px;
}

.oferta-lista{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:34px;box-shadow:var(--shadow);
}
.oferta-lista h3{font-size:1.3rem;font-weight:800;margin-bottom:22px}
.oferta-lista .checklist li{font-weight:300}
.oferta-lista strong{font-weight:600;color:var(--ink)}

/* Fotos de lo que produce */
/* Las fotos conservan su proporción original (3:4), así no se recorta
   el producto. Solo la de la máquina es apaisada y se ajusta sola. */
.oferta-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.oferta-fotos figure{margin:0}
.oferta-fotos img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:18px;box-shadow:var(--shadow);
}
.oferta-fotos figcaption{
  text-align:center;color:var(--muted);font-size:.86rem;
  font-weight:300;margin-top:10px;
}

@media(max-width:900px){
  .oferta{grid-template-columns:1fr}
  .oferta-fotos{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .oferta-lista{padding:26px 22px}
  .oferta-precio{padding:28px 22px}
}

/* ============================================================
   CURSO SIN MÁQUINA (helado tipo cono)
   ============================================================ */
.destacado-cono{
  display:flex;gap:13px;align-items:flex-start;
  background:#F0FBF4;border:1px solid #BFE7CE;border-radius:16px;
  padding:18px 20px;margin-bottom:26px;
}
.destacado-cono .ico{font-size:1.15rem;line-height:1.4;flex:0 0 auto}
.destacado-cono p{font-size:.95rem;font-weight:300;color:#1C5B36;line-height:1.6;margin:0}
.destacado-cono strong{font-weight:600;color:#0B7A42}

/* Foto dentro de un curso */
.foto-curso{margin:0 auto;max-width:360px}
.foto-curso img{
  width:100%;border-radius:18px;display:block;
  box-shadow:var(--shadow);
}
.foto-curso figcaption{
  color:var(--muted);font-size:.87rem;font-weight:300;
  text-align:center;margin-top:10px;
}

/* La máquina: foto apaisada, a todo el ancho de la sección */
.foto-maquina{margin:38px auto 0;max-width:720px}
.foto-maquina img{
  width:100%;height:auto;display:block;
  border-radius:20px;box-shadow:var(--shadow-lg);
}
.foto-maquina figcaption{
  text-align:center;color:var(--muted);font-size:.88rem;
  font-weight:300;margin-top:12px;
}

/* ============================================================
   CÓMO ENSEÑAMOS (promesa de los cursos)
   ============================================================ */
.promesa{max-width:760px;margin:0 auto;text-align:center}
.promesa h2{
  font-size:clamp(1.9rem,4.2vw,2.7rem);font-weight:800;
  margin-bottom:26px;line-height:1.18;
}
.promesa p{
  color:var(--body);font-weight:300;font-size:1.08rem;line-height:1.75;
}
.promesa p + p{margin-top:16px}
.promesa strong{font-weight:600;color:var(--ink)}

.promesa-clave{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--berry);
  border-radius:16px;padding:24px 28px;margin-top:30px;text-align:left;
  box-shadow:var(--shadow);
}
.promesa-clave p{font-size:1.02rem;margin:0}

@media(max-width:620px){
  .promesa-clave{padding:20px 22px}
}

/* ============================================================
   PLAN DE PAGOS (autofinanciamiento)
   ============================================================ */
.plan-pago{
  background:var(--cream-lite);border:1px solid var(--line);
  border-radius:20px;padding:26px 28px;margin-top:26px;
}
.plan-fila{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.plan-label{
  display:block;font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:1.02rem;color:var(--ink);
}
.plan-sub{
  display:block;color:var(--muted);font-size:.85rem;
  font-weight:300;line-height:1.45;margin-top:3px;
}
.plan-cifra{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:1.8rem;color:var(--berry);line-height:1;flex:0 0 auto;
}
.plan-cifra small{font-size:.9rem;font-weight:500;color:var(--muted)}

.plan-total{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;
}
.plan-total .plan-cifra{font-size:2.1rem}

.plan-nota{
  color:var(--muted);font-size:.86rem;font-weight:300;
  line-height:1.55;margin-top:16px;text-align:center;
}

@media(max-width:620px){
  .plan-pago{padding:22px 20px}
  .plan-cifra{font-size:1.55rem}
  .plan-total .plan-cifra{font-size:1.8rem}
}

/* ============================================================
   LISTA DE CURSOS (desplegables anidados)
   Nivel 1: el curso · Nivel 2: cada módulo del temario
   ============================================================ */
.cursos-lista{display:grid;gap:14px}

/* --- Nivel 1: el curso --- */
.curso{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.curso[open]{border-color:var(--pink);box-shadow:var(--shadow)}

.curso > summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 56px 22px 26px;
}
.curso > summary::-webkit-details-marker{display:none}
.curso > summary:hover .curso-nombre{color:var(--berry)}
.curso > summary:focus-visible{outline:3px solid var(--pink);outline-offset:-3px;border-radius:18px}

.curso-familia{
  display:block;font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--beige-text);margin-bottom:5px;
}
.curso-nombre{
  display:block;font-family:'Outfit',system-ui,sans-serif;
  font-weight:700;font-size:1.18rem;color:var(--ink);
  transition:color .18s ease;line-height:1.25;
}
.curso-insignia{
  display:inline-block;vertical-align:middle;
  background:#F0FBF4;border:1px solid #BFE7CE;color:#0B7A42;
  font-family:'Jost',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;margin-left:8px;
}
.curso-precio{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:1.55rem;color:var(--berry);flex:0 0 auto;line-height:1;
}

/* Flecha del curso */
.curso > summary::after{
  content:"";position:absolute;right:26px;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--berry);border-bottom:2px solid var(--berry);
  transform:rotate(45deg);transition:transform .25s ease;
}
.curso[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}

.curso-cuerpo{padding:0 26px 28px;border-top:1px solid var(--line);padding-top:24px}
.curso-resumen{color:var(--body);font-weight:300;font-size:1.04rem;line-height:1.7}
.curso-para{
  color:var(--body);font-weight:300;font-size:.98rem;line-height:1.65;
  background:var(--cream-lite);border-radius:12px;padding:14px 18px;margin-top:16px;
}
.curso-para strong{font-weight:600;color:var(--ink)}
.curso .foto-curso{margin:22px auto 0}

.curso-sub{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:1.15rem;margin:28px 0 4px;
}
.curso-pista{color:var(--muted);font-size:.88rem;font-weight:300;margin-bottom:14px}

/* --- Nivel 2: los módulos del temario --- */
.modulos{display:grid;gap:8px}

.modulo{
  background:var(--cream-lite);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
}
.modulo[open]{background:#fff;border-color:var(--pink)}
.modulo > summary{
  list-style:none;cursor:pointer;position:relative;
  padding:14px 44px 14px 16px;
}
.modulo > summary::-webkit-details-marker{display:none}
.modulo > summary:hover .modulo-titulo{color:var(--berry)}
.modulo > summary:focus-visible{outline:3px solid var(--pink);outline-offset:-3px;border-radius:12px}
.modulo > summary::after{
  content:"";position:absolute;right:18px;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--berry);border-bottom:2px solid var(--berry);
  transform:rotate(45deg);transition:transform .25s ease;
}
.modulo[open] > summary::after{transform:rotate(-135deg);margin-top:-2px}

.modulo-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.modulo-num{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--berry);color:#fff;
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:.76rem;
  display:inline-grid;place-items:center;align-self:center;
}
.modulo-titulo{
  font-family:'Outfit',system-ui,sans-serif;font-weight:600;
  font-size:1rem;color:var(--ink);transition:color .18s ease;
}
.modulo-eti{
  font-family:'Jost',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--berry);
  background:var(--cream);padding:3px 9px;border-radius:999px;
}
.modulo-texto{padding:0 16px 16px 48px}
.modulo-texto p{color:var(--body);font-weight:300;font-size:.97rem;line-height:1.7}
.modulo-texto p + p{margin-top:12px}

/* Módulo sin descripción todavía */
.modulo-simple{padding:14px 16px}
.modulo-simple .modulo-titulo{color:var(--body);font-weight:500}
.modulo-nota{
  color:var(--muted);font-size:.88rem;font-weight:300;
  line-height:1.55;margin-top:6px;padding-left:32px;
}
.modulo-texto .modulo-nota{padding-left:0}

/* --- Nivel opcional que se suma al curso --- */
.adicional{
  border:1px dashed var(--pink);border-radius:14px;
  padding:20px 22px;margin-top:24px;background:#FFFDFE;
}
.adicional-cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:12px;
}
.adicional-nombre{
  font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:1.05rem;
}
.adicional-precio{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:1.25rem;color:var(--berry);
}
.adicional p{color:var(--body);font-weight:300;font-size:.97rem;line-height:1.7}
.adicional p + p{margin-top:10px}

.curso-vertambien{
  color:var(--body);font-weight:300;font-size:.97rem;margin-top:20px;
}
.curso-vertambien a{color:var(--berry);text-decoration:underline;font-weight:500}

/* El formulario dentro del curso no va pegado arriba */
.curso-cuerpo .form-card{position:static;margin-top:26px}

@media(max-width:620px){
  .curso > summary{padding:18px 44px 18px 18px;gap:10px}
  .curso-nombre{font-size:1.05rem}
  .curso-precio{font-size:1.3rem}
  .curso > summary::after{right:18px}
  .curso-cuerpo{padding:22px 18px 24px}
  .modulo-texto{padding-left:16px}
  .modulo-nota{padding-left:0}
}

/* ============================================================
   MONEDA
   Nos escribe gente de varios países: "$350" a secas se puede
   leer como pesos. Todos los precios llevan USD al lado.
   ============================================================ */
.usd{
  font-family:'Jost',sans-serif;font-size:.42em;font-weight:600;
  letter-spacing:.08em;color:var(--muted);
  margin-left:.35em;vertical-align:middle;
}
.curso-precio .usd{font-size:.5em}
.plan-cifra .usd,.oferta-precio .usd{color:rgba(255,255,255,.7)}
.oferta-precio .ahora .usd{color:rgba(255,217,168,.75)}

/* País y Ciudad van uno al lado del otro para no alargar el formulario */
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:420px){ .dos-campos{grid-template-columns:1fr} }

/* Marca de campo no obligatorio */
.field .opc{
  font-weight:400;font-size:.82em;color:var(--muted);
}