/* ==========================================================================
   Karonchi — sistema de diseño "Puente"
   Paleta Pompadour (Peach Studio) + acento lima de su Instagram.
   Los tonos --taupe-texto y --pomp-tinta se agregaron por contraste:
   los originales no alcanzan el mínimo legible de 4.5:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Respaldo de la tipografía de títulos.

   Instrument Serif llega de Google con display=swap: la página pinta primero
   con la fuente de respaldo y después la cambia. Georgia es un 32% más ancha,
   así que el titular ocupaba más líneas y, al llegar la fuente buena, todo el
   hero se acomodaba de golpe hacia arriba (un salto de 92px, bien visible).

   Esta familia es Georgia condensada al ancho real de Instrument Serif, medido
   en el navegador. Con esto el texto ocupa casi lo mismo antes y después, y el
   cambio de fuente deja de mover la página.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Display respaldo";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:76%;
  ascent-override:105%;
  descent-override:26%;
  line-gap-override:0%;
}

@font-face{
  font-family:"Cuerpo respaldo";
  src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:105%;
  ascent-override:95%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  /* neutros */
  --marfil:#F8F4EC;
  --champagne:#EAE0CF;
  --blanco:#FFFDF8;
  --taupe:#A89C8C;        /* SOLO filetes, bordes e íconos. Nunca texto. */
  --carbon:#2A2420;

  /* acento rosa */
  --pomp-claro:#F5E3E8;
  --pomp:#E3AFC0;         /* fondo de botón; siempre con texto carbón */
  --pomp-oscuro:#B97E93;
  --pomp-tinta:#8E4A62;   /* links y texto rosa — 5.79:1 sobre marfil */

  /* texto */
  --taupe-texto:#6B6153;  /* texto secundario — 5.53:1 sobre marfil */

  /* puente con Instagram */
  --lima:#D9E04B;
  --lima-hondo:#B5BC30;

  /* tipografía */
  --display:"Instrument Serif","Display respaldo",Georgia,serif;
  --cuerpo:"Figtree","Cuerpo respaldo",-apple-system,BlinkMacSystemFont,sans-serif;

  /* escala de espacio */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:7rem;

  /* elevación en capas, tinte del acento */
  --e1:0 1px 2px rgba(42,36,32,.05), 0 4px 14px -6px rgba(142,74,98,.14);
  --e2:0 2px 6px rgba(42,36,32,.07), 0 18px 40px -14px rgba(142,74,98,.24);
  --e3:0 6px 15px rgba(42,36,32,.09), 0 38px 76px -28px rgba(142,74,98,.34);

  --resorte:cubic-bezier(.34,1.45,.64,1);
  --suave:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--marfil);color:var(--carbon);
  font-family:var(--cuerpo);font-weight:300;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
p{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;
  letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}

.env{width:min(1220px,100% - var(--s6));margin-inline:auto}
@media(max-width:700px){.env{width:min(1220px,100% - var(--s4))}}

.et{font-family:var(--cuerpo);font-weight:600;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--taupe-texto)}

.salta-al-contenido{position:absolute;left:-9999px;top:0;background:var(--carbon);color:var(--marfil);
  padding:var(--s3) var(--s5);z-index:200}
.salta-al-contenido:focus{left:var(--s4);top:var(--s4)}

/* ---------- destello: elemento de marca ---------- */
.destello{display:inline-block;color:var(--lima)}
.destello svg{display:block;width:100%;height:100%;fill:currentColor}
.d-flota{position:absolute;pointer-events:none;animation:latir 5s var(--suave) infinite}
@keyframes latir{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(9deg)}}

/* subrayado a mano */
.subra{position:relative;display:inline-block}
.subra::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.36em;
  background:var(--lima);z-index:-1;border-radius:2px}

/* ---------- barra de estado del lanzamiento ---------- */
.estado{background:var(--lima);color:var(--carbon);font-size:.8rem;font-weight:500}
.estado--cerrado{background:var(--champagne)}
.estado--proximo{background:var(--pomp-claro)}
.estado-in{display:flex;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s3) var(--s4);flex-wrap:wrap;text-align:center}
.estado b{font-weight:700}
.estado a{color:var(--carbon);text-decoration:none;font-weight:700;
  border-bottom:1.5px solid var(--carbon);transition:opacity .25s linear}
.estado a:hover{opacity:.62}
.estado a:focus-visible{outline:2px solid var(--carbon);outline-offset:3px;border-radius:2px}

/* ---------- navegación: dos puertas ---------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(248,244,236,.93);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--champagne)}
.nav-in{position:relative;display:flex;align-items:center;gap:var(--s5);padding:var(--s4) 0}
.marca{font-family:var(--display);font-size:1.65rem;letter-spacing:-.03em;
  text-decoration:none;color:var(--carbon);margin-right:auto}
.marca img{max-height:40px;width:auto}
.enlaces{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
.enlaces a{text-decoration:none;color:var(--taupe-texto);font-size:.9rem;font-weight:500;
  min-height:44px;display:inline-flex;align-items:center;position:relative;
  transition:color .25s linear}
.enlaces a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;height:3px;
  background:var(--lima);border-radius:2px;transition:right .34s var(--suave)}
.enlaces a:hover,.enlaces .current-menu-item>a{color:var(--carbon)}
.enlaces a:hover::after,.enlaces .current-menu-item>a::after{right:0}
.enlaces a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:4px;
  border-radius:3px;color:var(--carbon)}

.puertas{display:flex;gap:var(--s3)}
.puerta{font-size:.8rem;font-weight:600;text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;padding:0 var(--s5);border-radius:999px;
  transition:transform .32s var(--resorte),box-shadow .32s var(--suave),
             background .25s linear,color .25s linear}
.puerta-1{background:var(--pomp);color:var(--carbon);box-shadow:var(--e1)}
.puerta-1:hover{background:var(--pomp-oscuro);color:var(--carbon);transform:translateY(-2px);box-shadow:var(--e2)}
.puerta-1:active{transform:translateY(0)}
.puerta-1:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:3px}
.puerta-2{border:1px solid var(--taupe);color:var(--carbon)}
.puerta-2:hover{border-color:var(--carbon);background:var(--lima);transform:translateY(-2px)}
.puerta-2:active{transform:translateY(0)}
.puerta-2:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:3px}

.hamb{display:none;background:none;border:0;padding:var(--s2);cursor:pointer}
.hamb span{display:block;width:24px;height:2px;background:var(--carbon);margin:5px 0;
  border-radius:2px;transition:transform .3s var(--suave),opacity .2s linear}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:960px){
  .hamb{display:block;order:4}
  .enlaces{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--marfil);max-height:0;overflow:hidden;
    transition:max-height .42s var(--suave);border-bottom:1px solid var(--champagne)}
  .enlaces li{border-top:1px solid var(--champagne)}
  .enlaces a{padding:var(--s4) 0;width:100%;font-size:1rem}
  .enlaces a::after{display:none}
  .enlaces.abierto{max-height:70vh}
  .puertas{order:3}
  .puerta{padding:0 var(--s4);font-size:.75rem}
  .marca{font-size:1.4rem}
}
@media(max-width:560px){
  .puerta-2{display:none}
  .nav-in{gap:var(--s3)}
  .marca{font-size:1.1rem}
  .puerta{padding:0 var(--s3);font-size:.7rem}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--cuerpo);font-weight:600;font-size:.88rem;min-height:54px;
  padding:0 var(--s6);border:2px solid transparent;border-radius:999px;cursor:pointer;
  text-decoration:none;background:var(--pomp);color:var(--carbon);box-shadow:var(--e1);
  transition:transform .32s var(--resorte),box-shadow .32s var(--suave),
             background .25s linear,color .25s linear}
.btn:hover{background:var(--pomp-oscuro);color:var(--carbon);transform:translateY(-3px);box-shadow:var(--e2)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:3px}
.btn-lima{background:var(--lima);color:var(--carbon)}
.btn-lima:hover{background:var(--lima-hondo);color:var(--carbon)}
.btn-linea{background:transparent;color:var(--carbon);border-color:var(--carbon);box-shadow:none}
.btn-linea:hover{background:var(--carbon);color:var(--marfil);box-shadow:none}
.btn-ancho{width:100%}

/* ---------- hero ---------- */
.hero{padding:var(--s8) 0;position:relative;overflow:hidden}
/* Alineado arriba, no centrado: la columna de texto es más baja que la foto,
   y al centrarla quedaba flotando ~80px por debajo del borde superior de la
   imagen, con un hueco muerto entre el menú y el titular. */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:start}
/* La volanta hereda el interlineado del cuerpo (1.7), que le suma aire arriba
   y la dejaba unos píxeles por debajo del borde de la foto. */
.hero .et{display:block;line-height:1.2}
.hero h1{font-size:clamp(1.95rem,7.4vw,5.6rem);line-height:1.02}
.hero h1 em{font-style:italic}
.hero .bajada,.ct-cab .bajada{margin-top:var(--s6);max-width:44ch;
  font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--taupe-texto)}
.hero-acciones{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.hero-foto{position:relative}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:6px}
.hero-foto::after{content:"";position:absolute;inset:0;background:var(--pomp);
  mix-blend-mode:multiply;opacity:.12;border-radius:6px;pointer-events:none}
.hero .d-flota.uno{width:64px;height:64px;top:2%;right:6%}
.hero .d-flota.dos{width:38px;height:38px;bottom:14%;left:-14px;animation-delay:1.1s}
.chapa{position:absolute;z-index:3;bottom:var(--s5);left:calc(var(--s5) * -1);
  background:var(--blanco);padding:var(--s4) var(--s5);box-shadow:var(--e2);
  border-left:4px solid var(--lima)}
.chapa b{font-family:var(--display);font-size:1.25rem;display:block;line-height:1.15;
  font-weight:400;max-width:11ch;font-variant-numeric:tabular-nums}
.chapa span{font-size:.76rem;color:var(--taupe-texto);letter-spacing:.06em}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .hero-foto{order:-1}
  .hero-foto img{aspect-ratio:4/3;object-position:50% 15%}
  .chapa{left:auto;right:var(--s4);bottom:var(--s4)}
  .hero-acciones .btn{flex:1 1 100%}
  .hero .d-flota.dos{display:none}
}

/* ---------- secciones ---------- */
.seccion{padding:var(--s9) 0;position:relative}
.seccion h2{font-size:clamp(1.7rem,4.8vw,3.6rem);line-height:1.06}
.seccion--rosa{background:var(--pomp-claro)}
.seccion--champagne{background:var(--champagne)}
.cab{margin-bottom:var(--s7);max-width:32ch}
.cab .et{display:block;margin-bottom:var(--s4)}
.cab p{margin-top:var(--s5);color:var(--taupe-texto);max-width:46ch}

/* quién soy */
.soy-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.soy-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%;border-radius:6px}
.soy-frase{font-family:var(--display);font-size:clamp(1.4rem,2.9vw,2.1rem);
  line-height:1.28;margin:var(--s5) 0}
.soy-cuerpo{color:var(--taupe-texto);max-width:48ch;margin-bottom:var(--s4)}
@media(max-width:900px){.soy-grid{grid-template-columns:1fr;gap:var(--s6)}}

/* programa */
.prog-grid{display:grid;grid-template-columns:1fr .88fr;gap:var(--s8);align-items:start}
.incluye{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.incluye li{display:flex;gap:var(--s4);align-items:center;background:var(--blanco);
  padding:var(--s4) var(--s5);border-radius:8px;box-shadow:var(--e1);font-size:1rem;
  transition:transform .34s var(--resorte),box-shadow .34s var(--suave)}
.incluye li:hover{transform:translateX(6px);box-shadow:var(--e2)}
.incluye .tic{flex:0 0 auto;width:28px;height:28px;border-radius:999px;
  background:var(--lima);color:var(--carbon);display:grid;place-items:center;
  font-weight:700;font-size:.85rem}

.panel{background:var(--carbon);color:var(--marfil);padding:var(--s7) var(--s6);
  border-radius:10px;box-shadow:var(--e3)}
.panel .tarifa{padding:var(--s4) 0;border-bottom:1px solid rgba(248,244,236,.18)}
.panel .tarifa:last-of-type{border-bottom:0}
.panel .lugar{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pomp);font-weight:700;margin-bottom:var(--s2)}
.panel .monto{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.2rem);
  line-height:1.06;font-variant-numeric:tabular-nums}
.panel .otro{font-size:.9rem;color:rgba(248,244,236,.66);margin-top:var(--s2)}
.panel .btn{width:100%;margin-top:var(--s2)}
.nota-btn{text-align:center;font-size:.8rem;color:rgba(248,244,236,.6);margin-top:var(--s3)}

/* cupos como objeto */
.cupos{margin:var(--s6) 0 var(--s5)}
.cupos .fila{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);margin-bottom:var(--s3)}
.cupos .fila .et{color:rgba(248,244,236,.6)}
.cupos b{font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--lima);
  font-variant-numeric:tabular-nums}
.marcas{display:flex;gap:4px}
.marcas i{flex:1;height:22px;background:rgba(248,244,236,.16);border-radius:2px;display:block}
.marcas i.on{background:var(--lima)}
@media(max-width:900px){.prog-grid{grid-template-columns:1fr;gap:var(--s6)}}

/* academia */
.aca-cab{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7)}
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3);
  list-style:none;margin:0;padding:0}
.modulos a,.modulos .mod{display:flex;gap:var(--s3);align-items:center;background:var(--blanco);
  padding:var(--s4);border-radius:8px;font-size:.93rem;text-decoration:none;
  color:var(--carbon);box-shadow:var(--e1);
  transition:transform .32s var(--resorte),box-shadow .3s var(--suave)}
.modulos a:hover{transform:translateY(-4px);box-shadow:var(--e2)}
.modulos a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:3px}
.modulos b{font-family:var(--display);font-weight:400;font-size:.88rem;
  color:var(--pomp-tinta);font-variant-numeric:tabular-nums}
.acceso{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);
  flex-wrap:wrap;background:var(--blanco);border-radius:10px;padding:var(--s6);
  margin-top:var(--s6);box-shadow:var(--e1)}
.acceso h3{font-size:1.5rem;margin-bottom:var(--s2)}
.acceso p{color:var(--taupe-texto);font-size:.94rem;max-width:42ch}
@media(max-width:640px){.acceso{flex-direction:column;align-items:stretch}.acceso .btn{width:100%}}

/* contacto */
.contacto{text-align:center}
.contacto h2{max-width:20ch;margin-inline:auto}
.contacto p{color:var(--taupe-texto);margin:var(--s5) auto 0;max-width:44ch}
.contacto-vias{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s7)}
.contacto .d-flota{width:50px;height:50px;top:12%;left:12%}
@media(max-width:560px){.contacto-vias .btn{width:100%}.contacto .d-flota{display:none}}

/* ---------- página interior genérica ---------- */
.pagina{padding:var(--s8) 0 var(--s9)}
.pagina h1{font-size:clamp(2rem,5.4vw,3.6rem);margin-bottom:var(--s6)}
.entrada{max-width:70ch}
.entrada h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:var(--s7) 0 var(--s4)}
.entrada h3{font-size:1.3rem;margin:var(--s6) 0 var(--s3)}
.entrada p{margin-bottom:var(--s4);color:var(--taupe-texto)}
.entrada a{color:var(--pomp-tinta);text-underline-offset:3px}
.entrada ul,.entrada ol{color:var(--taupe-texto);padding-left:var(--s5);margin-bottom:var(--s4)}
.entrada li{margin-bottom:var(--s2)}
.entrada img{border-radius:6px;margin:var(--s5) 0}
.entrada blockquote{border-left:3px solid var(--lima);padding-left:var(--s5);
  margin:var(--s6) 0;font-family:var(--display);font-size:1.3rem;line-height:1.4}

/* ---------- pie ---------- */
.pie{background:var(--carbon);color:var(--marfil);padding:var(--s8) 0 var(--s5)}
.pie-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s7);
  padding-bottom:var(--s7);border-bottom:1px solid rgba(248,244,236,.16)}
.pie-marca{font-family:var(--display);font-size:2.1rem;letter-spacing:-.03em;margin-bottom:var(--s3)}
.pie p{color:rgba(248,244,236,.62);font-size:.94rem}
.pie h4{font-family:var(--cuerpo);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(248,244,236,.45);margin:0 0 var(--s4);font-weight:700}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.pie a{color:rgba(248,244,236,.85);text-decoration:none;font-size:.94rem;min-height:40px;
  display:inline-flex;align-items:center;
  transition:color .22s linear,transform .3s var(--resorte)}
.pie a:hover{color:var(--lima);transform:translateX(3px)}
.pie a:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:3px;color:var(--marfil)}
.pie-bajo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);
  padding-top:var(--s5);font-size:.78rem;color:rgba(248,244,236,.45)}
@media(max-width:780px){.pie-grid{grid-template-columns:1fr;gap:var(--s6)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- pastilla de cuenta, reemplaza la barra de WordPress ---------- */
.cuenta{position:relative}
.cuenta summary{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s3) 0 var(--s2);
  border:1px solid var(--taupe);border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--carbon);
  cursor:pointer;list-style:none;user-select:none;
  transition:border-color .25s linear,background .25s linear,transform .3s var(--resorte);
}
.cuenta summary::-webkit-details-marker{display:none}
.cuenta summary:hover{border-color:var(--carbon);background:var(--blanco);transform:translateY(-1px)}
.cuenta summary:focus-visible{outline:3px solid var(--pomp-tinta);outline-offset:3px}
.cuenta-inicial{
  width:28px;height:28px;flex:0 0 auto;border-radius:999px;
  background:var(--pomp);color:var(--carbon);
  display:grid;place-items:center;
  font-family:var(--display);font-size:.95rem;line-height:1;text-transform:uppercase;
}
.cuenta-nombre{white-space:nowrap;max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.cuenta-flecha{font-size:.7rem;color:var(--taupe-texto);transition:transform .3s var(--suave)}
.cuenta[open] .cuenta-flecha{transform:rotate(180deg)}

.cuenta-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:120;
  min-width:200px;display:grid;
  background:var(--blanco);border:1px solid var(--champagne);border-radius:12px;
  padding:var(--s2);box-shadow:var(--e2);
}
.cuenta-menu a{
  display:block;padding:var(--s3) var(--s4);border-radius:8px;
  text-decoration:none;color:var(--carbon);font-size:.92rem;font-weight:500;
  min-height:44px;line-height:1.5;
  transition:background .2s linear,color .2s linear;
}
.cuenta-menu a:hover{background:var(--pomp-claro);color:var(--pomp-tinta)}
.cuenta-menu a:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:-2px}
.cuenta-menu .cuenta-salir{
  border-top:1px solid var(--champagne);border-radius:0 0 8px 8px;
  margin-top:var(--s1);padding-top:var(--s3);color:var(--taupe-texto);
}
.cuenta-menu .cuenta-salir:hover{background:var(--champagne);color:var(--carbon)}

@media(max-width:560px){
  .cuenta-nombre{display:none}
  .cuenta-flecha{display:none}
  .cuenta summary{padding:0 var(--s2)}
  .cuenta-menu{right:auto;left:0;min-width:180px}
}

/* ---------- contacto ---------- */
/* Contacto entero corre sobre un solo eje: título, tarjetas, preguntas y
   formulario comparten el mismo borde izquierdo. */
.env--angosto{width:min(760px,100% - var(--s6));margin-inline:auto}
.ic{width:26px;height:26px;flex:none}

.ct-cab{padding:var(--s8) 0 var(--s6);position:relative;overflow:hidden}
.ct-cab h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;max-width:16ch;margin:var(--s4) 0 0}
.ct-cab .bajada{max-width:46ch}
.ct-cab .d-flota{width:56px;height:56px;top:8%;right:8%}
.vias-seccion{padding-top:var(--s5)}

.vias{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.via{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);
  background:var(--blanco);border:1px solid var(--champagne);border-radius:10px;
  text-decoration:none;color:var(--carbon);box-shadow:var(--e1);
  transition:transform .3s var(--resorte),box-shadow .3s var(--suave),border-color .22s linear}
.via .ic{color:var(--taupe);transition:color .22s linear}
.via b{font-size:1.06rem;font-weight:600}
.via span{font-size:.9rem;color:var(--taupe-texto);overflow-wrap:anywhere}
.via:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--pomp)}
.via:hover .ic{color:var(--pomp-tinta)}
.via:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:3px}
.via--fuerte{background:var(--pomp-claro);border-color:var(--pomp)}
.via--fuerte .ic{color:var(--pomp-tinta)}

/* preguntas frecuentes */
.faq h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin-bottom:var(--s6)}
.faq-lista{display:grid;gap:var(--s2)}
.faq-item{background:var(--blanco);border:1px solid var(--champagne);border-radius:8px}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);cursor:pointer;font-weight:600;list-style:none;min-height:56px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--pomp-tinta);outline-offset:-2px;border-radius:8px}
.faq-mas{position:relative;width:14px;height:14px;flex:none}
.faq-mas::before,.faq-mas::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1.5px;background:var(--pomp-tinta);transition:transform .3s var(--suave)}
.faq-mas::after{transform:rotate(90deg)}
.faq-item[open] .faq-mas::after{transform:rotate(0)}
.faq-resp{padding:0 var(--s5) var(--s5);color:var(--taupe-texto);max-width:60ch}
.faq-resp p{margin:0 0 var(--s3)}
.faq-resp p:last-child{margin-bottom:0}

/* formulario */
.form{margin-top:var(--s6)}
.campo{display:grid;gap:var(--s2);margin:0 0 var(--s5)}
.campo label{font-size:.86rem;font-weight:600;letter-spacing:.01em}
.campo small{font-size:.8rem;color:var(--taupe-texto)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:1rem;color:var(--carbon);background:var(--blanco);
  border:1px solid var(--taupe);border-radius:8px;padding:var(--s3) var(--s4);
  min-height:48px;width:100%;
  transition:border-color .22s linear,box-shadow .22s linear}
.campo textarea{min-height:150px;resize:vertical;line-height:1.55}
.campo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--taupe) 50%),
                   linear-gradient(135deg,var(--taupe) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--s7)}
.campo :is(input,select,textarea):focus{outline:none;border-color:var(--pomp-tinta);
  box-shadow:0 0 0 3px var(--pomp-claro)}
/* La trampa se saca del flujo sin display:none, que algunos robots detectan. */
.campo--trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-nota{font-size:.82rem;color:var(--taupe-texto);margin-top:var(--s4);text-align:center}
.form-nota a{color:var(--pomp-tinta);text-underline-offset:3px}

.aviso{border-radius:8px;padding:var(--s5);margin-bottom:var(--s5)}
.aviso b{display:block;margin-bottom:var(--s2)}
.aviso p,.aviso li{color:var(--taupe-texto);font-size:.94rem;margin:0}
.aviso ul{margin:0;padding-left:var(--s5)}
.aviso a{color:var(--pomp-tinta)}
.aviso--bien{background:var(--pomp-claro);border-left:3px solid var(--pomp-tinta)}
.aviso--mal{background:var(--blanco);border-left:3px solid var(--lima-hondo);border:1px solid var(--champagne);border-left:3px solid var(--lima-hondo)}

@media(max-width:560px){
  .vias{grid-template-columns:1fr}
  .faq-item summary{padding:var(--s4)}
  .faq-resp{padding:0 var(--s4) var(--s4)}
}