/* =====================================================================
   SAL · Tipografías alojadas en el propio servidor
   (así no dependemos de Google Fonts: carga más rápido y evita enviar
   la IP de tus visitantes a un tercero, que es mejor para el RGPD)
   ===================================================================== */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/jost-latin-200-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}

/* =====================================================================
   SAL · Hoja de estilos
   Paleta tomada del logotipo: azul #082F57 · dorado #A3804B · crema #FDF7EF
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root{
  --azul:#082F57;
  --azul-medio:#143F6E;
  --azul-claro:#3D6B98;
  --oro:#A3804B;
  --oro-claro:#C6A66B;
  --oro-suave:#E4D6BF;
  --crema:#FDF7EF;
  --crema-2:#F7EEE1;
  --crema-3:#F0E4D2;
  --tinta:#1B3348;
  --tinta-suave:#5C6B79;
  --arena:#8A7A64;
  --blanco:#FFFFFF;
  --error:#9B2C2C;
  --exito:#2F6B4F;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;

  --ancho:1180px;
  --ancho-estrecho:760px;
  --radio:3px;
  --sombra:0 1px 2px rgba(8,47,87,.04),0 8px 28px rgba(8,47,87,.07);
  --sombra-alta:0 2px 6px rgba(8,47,87,.06),0 20px 48px rgba(8,47,87,.13);
  --transicion:.42s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--oro)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:-.01em;margin:0 0 .5em;color:var(--azul)}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.3vw,1.7rem)}
h4{font-size:1.1rem;font-family:var(--sans);font-weight:500;letter-spacing:.02em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
hr{border:0;border-top:1px solid var(--oro-suave);margin:3rem 0}
::selection{background:var(--azul);color:var(--crema)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

/* ---------- 3. Estructura -------------------------------------------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}
.contenedor--estrecho{max-width:var(--ancho-estrecho)}
.seccion{padding:clamp(64px,9vw,116px) 0}
.seccion--crema{background:var(--crema-2)}
.seccion--azul{background:var(--azul);color:#DCE6EF}
.seccion--azul h1,.seccion--azul h2,.seccion--azul h3{color:var(--crema)}
.seccion--fina{padding:clamp(40px,5vw,64px) 0}
.centrado{text-align:center}
main{min-height:60vh}

/* ---------- 4. Tipografía de apoyo ------------------------------------ */
.kicker{
  font-family:var(--sans);font-size:.72rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--oro);
  margin:0 0 1.1rem;display:block;
}
.seccion--azul .kicker{color:var(--oro-claro)}
.entradilla{font-size:1.12rem;color:var(--tinta-suave);max-width:56ch}
.centrado .entradilla{margin-inline:auto}
.seccion--azul .entradilla{color:#A9C0D4}
.serif-italic{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--oro);line-height:1.4}
.pequeno{font-size:.86rem;color:var(--arena);line-height:1.6}

/* Filete dorado decorativo */
.filete{width:56px;height:1px;background:var(--oro);margin:0 0 1.6rem;opacity:.8}
.centrado .filete{margin-inline:auto}

/* ---------- 5. Botones ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.8rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;padding:1.05em 2.2em;border:1px solid var(--azul);
  background:var(--azul);color:var(--crema);border-radius:var(--radio);
  cursor:pointer;transition:var(--transicion);position:relative;overflow:hidden;
  text-align:center;
}
.btn:hover{background:var(--azul-medio);border-color:var(--azul-medio);color:var(--crema);transform:translateY(-2px);box-shadow:var(--sombra)}
.btn:active{transform:translateY(0)}
.btn--fantasma{background:transparent;color:var(--azul);border-color:rgba(8,47,87,.35)}
.btn--fantasma:hover{background:rgba(8,47,87,.05);color:var(--azul);border-color:var(--azul)}
.btn--oro{background:var(--oro);border-color:var(--oro);color:#fff}
.btn--oro:hover{background:var(--oro-claro);border-color:var(--oro-claro)}
.btn--claro{background:var(--crema);border-color:var(--crema);color:var(--azul)}
.btn--claro:hover{background:var(--blanco);border-color:var(--blanco);color:var(--azul)}
.btn--bloque{width:100%}
.btn--pequeno{padding:.75em 1.5em;font-size:.72rem}
.btn[disabled],.btn.desactivado{opacity:.45;pointer-events:none}
.enlace-flecha{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);display:inline-flex;align-items:center;gap:.5em;transition:gap .3s ease;
}
.enlace-flecha::after{content:"→";transition:transform .3s ease}
.enlace-flecha:hover{color:var(--azul)}
.enlace-flecha:hover::after{transform:translateX(4px)}

/* ---------- 6. Cabecera ---------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:60;
  background:rgba(253,247,239,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease;
}
.cabecera.compacta{border-bottom-color:var(--oro-suave);background:rgba(253,247,239,.95)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marca__texto{
  font-family:var(--serif);font-size:1.85rem;letter-spacing:.26em;color:var(--azul);
  line-height:1;padding-left:.26em;
}
.marca__claim{
  display:none;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oro);white-space:nowrap;
}
/* En escritorio el botón de registro vive en .cabecera__acciones */
.nav .btn{display:none}
@media(min-width:1080px){.marca__claim{display:block;border-left:1px solid var(--oro-suave);padding-left:.9rem;margin-left:.3rem}}

.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  font-family:var(--sans);font-size:.82rem;letter-spacing:.1em;color:var(--tinta);
  position:relative;padding:.2em 0;transition:color .25s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--oro);transition:width .3s ease;
}
.nav a:hover{color:var(--azul)}
.nav a:hover::after,.nav a.activo::after{width:100%}
.nav a.activo{color:var(--azul)}
.cabecera__acciones{display:flex;align-items:center;gap:1rem}
.idioma{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--arena);
  border:1px solid var(--oro-suave);padding:.42em .8em;border-radius:2px;transition:var(--transicion);
}
.idioma:hover{border-color:var(--oro);color:var(--oro)}
.hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.hamburguesa span{display:block;width:24px;height:1.5px;background:var(--azul);margin:5px 0;transition:.3s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:1000px){
  .hamburguesa{display:block;order:3}
  .nav,.cabecera__acciones .btn{display:none}
  .cabecera__acciones{gap:.6rem}
  .nav.abierto{
    display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;
    position:absolute;top:100%;left:0;right:0;background:var(--crema);
    border-top:1px solid var(--oro-suave);border-bottom:1px solid var(--oro-suave);
    padding:2rem 24px 2.4rem;box-shadow:var(--sombra);
  }
  .nav.abierto a{font-size:1.15rem;font-family:var(--serif);letter-spacing:.04em}
  .nav.abierto .btn{display:inline-flex;width:100%;margin-top:.6rem}
}

/* ---------- 7. Hero --------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--crema);padding:clamp(70px,11vw,140px) 0 clamp(60px,9vw,110px)}
.hero__fondo{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__fondo svg{position:absolute;bottom:-2px;left:0;width:140%;min-width:900px;opacity:.5}
.hero__brillo{
  position:absolute;width:88vw;height:88vw;max-width:1100px;max-height:1100px;
  right:-30vw;top:-40vw;border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(198,166,107,.26) 0%,rgba(198,166,107,.10) 52%,rgba(198,166,107,0) 76%);
}
.hero__contenido{position:relative;z-index:1}
.hero__contenido > *{max-width:760px}

/* --- Hero con foto: texto a la izquierda, la gente a la derecha --------- */
.hero__rejilla{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,68px);align-items:center;
}
.hero__foto{position:relative;margin:0}
.hero__foto img{
  display:block;width:100%;height:auto;border-radius:3px;
  box-shadow:0 34px 64px -34px rgba(8,47,87,.55);
}
/* Filete dorado desplazado, del mismo lenguaje que .marco-oro */
.hero__foto::before{
  content:"";position:absolute;z-index:-1;
  inset:-14px -14px 14px 14px;border:1px solid var(--oro-suave);border-radius:3px;
}
.hero__foto .hero__gemas{
  position:absolute;top:auto;right:auto;bottom:-34px;left:-46px;
  width:104px;height:120px;z-index:2;
}
.hero h1{margin-bottom:.32em}
.hero h1 em{font-style:italic;color:var(--oro)}
.hero__texto{font-size:clamp(1.05rem,1.9vw,1.28rem);color:var(--tinta-suave);max-width:52ch;margin-bottom:2.2rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.4rem}
.hero__nota{font-size:.85rem;color:var(--arena);display:flex;align-items:center;gap:.5rem}
.hero__nota::before{content:"";width:22px;height:1px;background:var(--oro)}
.hero__gemas{position:absolute;top:8%;right:8%;z-index:1;opacity:.9}
@media(max-width:900px){.hero__gemas{display:none}}

/* Cifras bajo el hero */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--oro-suave);border-block:1px solid var(--oro-suave)}
.cifra{background:var(--crema);padding:2rem 1.4rem;text-align:center}
.cifra__n{font-family:var(--serif);font-size:2.5rem;color:var(--azul);line-height:1;display:block}
.cifra__t{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--arena);margin-top:.6rem;display:block}

/* ---------- 8. Rejillas y tarjetas ------------------------------------ */
.rejilla{display:grid;gap:clamp(20px,3vw,34px)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cabecera-seccion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.4rem;margin-bottom:clamp(32px,4vw,54px)}
.cabecera-seccion h2{margin-bottom:0}
.cabecera-seccion > div{max-width:60ch}

/* Pasos numerados */
.paso{position:relative;padding-top:2.6rem}
.paso__n{
  position:absolute;top:0;left:0;font-family:var(--serif);font-size:3.2rem;
  color:var(--oro);opacity:.32;line-height:1;
}
.paso h3{font-size:1.28rem;margin-bottom:.5rem}
.paso p{color:var(--tinta-suave);font-size:.98rem;margin:0}

/* Tarjeta de evento */
.evento{
  background:var(--crema);border:1px solid var(--oro-suave);border-radius:var(--radio);
  display:flex;flex-direction:column;overflow:hidden;transition:var(--transicion);position:relative;
}
.evento:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:var(--oro)}
.evento__media{position:relative;aspect-ratio:16/10;background:var(--azul);overflow:hidden}
.evento__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.evento:hover .evento__media img{transform:scale(1.05)}
.evento__media--vacia{display:grid;place-items:center;background:linear-gradient(150deg,var(--azul) 0%,var(--azul-medio) 100%)}
.evento__fecha{
  position:absolute;top:14px;left:14px;background:var(--crema);color:var(--azul);
  padding:.55rem .8rem;text-align:center;border-radius:2px;box-shadow:var(--sombra);line-height:1.1;
}
.evento__fecha b{display:block;font-family:var(--serif);font-size:1.5rem}
.evento__fecha span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.evento__cuerpo{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.evento__cat{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.evento h3{font-size:1.4rem;margin:0}
.evento__sub{color:var(--tinta-suave);font-size:.95rem;margin:0;flex:1}
.evento__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.83rem;color:var(--arena);padding-top:.4rem}
.evento__meta span{display:inline-flex;align-items:center;gap:.4em}
.evento__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--oro-suave);margin-top:.8rem;padding-top:1.1rem}
.evento__precio{font-family:var(--serif);font-size:1.5rem;color:var(--azul)}
.evento__precio small{font-family:var(--sans);font-size:.7rem;color:var(--arena);letter-spacing:.1em;display:block}

.etiqueta{
  display:inline-block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.35em .8em;border-radius:2px;border:1px solid currentColor;
}
.etiqueta--pocas{color:#8C5A1E}
.etiqueta--agotado{color:var(--error)}
.etiqueta--libre{color:var(--exito)}
.etiqueta--destacado{background:var(--oro);color:#fff;border-color:var(--oro)}

/* ---------- 9. Avatares ----------------------------------------------- */
.avatar-tarjeta{
  background:var(--crema);border:1px solid var(--oro-suave);border-radius:var(--radio);
  padding:2rem 1.7rem;text-align:center;transition:var(--transicion);
}
.avatar-tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--oro)}
.avatar-tarjeta .sal-avatar-svg{margin:0 auto .9rem;width:96px;height:96px}
.avatar-tarjeta h3{font-size:1.35rem;margin-bottom:.2rem}
.avatar-tarjeta .lema{font-family:var(--serif);font-style:italic;color:var(--oro);font-size:1.02rem;margin-bottom:.8rem}
.avatar-tarjeta p{font-size:.93rem;color:var(--tinta-suave);margin:0}

.avatar-hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.avatar-hero .sal-avatar-svg{width:min(230px,42vw);height:auto;flex-shrink:0;filter:drop-shadow(0 14px 32px rgba(8,47,87,.14))}

/* Barras de ejes */
.ejes{display:grid;gap:1rem;margin:2rem 0}
.eje__fila{display:grid;grid-template-columns:minmax(120px,1fr) 3fr auto;gap:1rem;align-items:center;font-size:.86rem}
.eje__nombre{color:var(--tinta-suave)}
.eje__barra{display:block;height:5px;background:var(--crema-3);border-radius:99px;overflow:hidden}
.eje__valor{display:block;height:100%;background:linear-gradient(90deg,var(--oro) 0%,var(--azul) 100%);border-radius:99px;width:0;transition:width 1.1s cubic-bezier(.22,.61,.36,1)}
.eje__num{font-family:var(--serif);color:var(--azul);font-size:1rem;min-width:2.5ch;text-align:right}

/* ---------- 10. Cuestionario ------------------------------------------ */
.cuestionario{max-width:760px;margin-inline:auto}
.progreso{position:sticky;top:78px;z-index:20;background:var(--crema);padding:1rem 0 1.2rem;border-bottom:1px solid var(--oro-suave)}
.progreso__cabecera{display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--arena);margin-bottom:.65rem}
.progreso__pista{height:2px;background:var(--crema-3);border-radius:99px;overflow:hidden}
.progreso__relleno{height:100%;background:var(--oro);width:0;transition:width .5s cubic-bezier(.22,.61,.36,1)}

.pregunta{display:none;animation:aparecer .5s cubic-bezier(.22,.61,.36,1) both}
.pregunta.activa{display:block}
.pregunta__bloque{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:1rem}
.pregunta h2{font-size:clamp(1.5rem,3.2vw,2.15rem);margin-bottom:1.8rem;line-height:1.25}
.opciones{display:grid;gap:.75rem;margin-bottom:2.2rem}
.opcion{
  display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 1.35rem;
  border:1px solid var(--oro-suave);border-radius:var(--radio);background:var(--crema);
  cursor:pointer;transition:.25s ease;position:relative;
}
.opcion:hover{border-color:var(--oro);background:var(--crema-2);transform:translateX(3px)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion__letra{
  flex-shrink:0;width:30px;height:30px;border:1px solid var(--oro-suave);border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;letter-spacing:.04em;color:var(--oro);
  transition:.25s ease;
}
.opcion__texto{font-size:1rem;line-height:1.55;color:var(--tinta)}
.opcion:has(input:checked){border-color:var(--azul);background:var(--crema-2);box-shadow:inset 0 0 0 1px var(--azul)}
.opcion:has(input:checked) .opcion__letra{background:var(--azul);border-color:var(--azul);color:var(--crema)}
.cuestionario__botones{display:flex;justify-content:space-between;gap:1rem;align-items:center}

/* ---------- 11. Formularios ------------------------------------------- */
.tarjeta-form{
  background:var(--crema);border:1px solid var(--oro-suave);border-radius:var(--radio);
  padding:clamp(28px,4vw,48px);box-shadow:var(--sombra);
}
.campo{margin-bottom:1.3rem}
.campo label{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--arena);margin-bottom:.5rem}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=tel],.campo input[type=date],.campo input[type=number],
.campo input[type=datetime-local],.campo input[type=url],
.campo select,.campo textarea{
  width:100%;padding:.85em 1em;background:var(--blanco);color:var(--tinta);
  border:1px solid var(--oro-suave);border-radius:var(--radio);
  font-size:1rem;font-weight:300;transition:border-color .25s ease,box-shadow .25s ease;
}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(8,47,87,.09);
}
.campo .ayuda{font-size:.8rem;color:var(--arena);margin-top:.4rem}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:560px){.campo-doble{grid-template-columns:1fr}}
.check{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.9rem;font-size:.92rem;line-height:1.55;color:var(--tinta-suave);cursor:pointer}
.check input{width:19px;height:19px;margin:.2rem 0 0;accent-color:var(--azul);flex-shrink:0}
.check a{color:var(--oro);text-decoration:underline;text-underline-offset:2px}

.aviso{padding:1rem 1.2rem;border-radius:var(--radio);margin-bottom:1.4rem;font-size:.95rem;border-left:3px solid}
.aviso--error{background:#FBEDED;border-color:var(--error);color:#6E2020}
.aviso--exito{background:#EDF5F0;border-color:var(--exito);color:#204734}
.aviso--info{background:var(--crema-2);border-color:var(--oro);color:#6A5636}

/* ---------- 12. Tablas ------------------------------------------------ */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--oro-suave);border-radius:var(--radio);background:var(--crema)}
table.tabla{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
table.tabla th,table.tabla td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--oro-suave)}
table.tabla th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--arena);font-weight:400;background:var(--crema-2)}
table.tabla tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:var(--crema-2)}

/* ---------- 13. Acordeón / FAQ ---------------------------------------- */
.faq{border-top:1px solid var(--oro-suave)}
.faq details{border-bottom:1px solid var(--oro-suave)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:var(--serif);font-size:1.28rem;color:var(--azul);transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--oro);transition:transform .3s ease;font-family:var(--sans);font-weight:300;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--oro)}
.faq__cuerpo{padding:0 2.5rem 1.7rem 0;color:var(--tinta-suave)}
.faq__cuerpo p:last-child{margin-bottom:0}

/* ---------- 14. Cita / destacado -------------------------------------- */
.cita{
  font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.35;
  color:var(--azul);font-style:italic;max-width:22ch;
}
.marco-oro{border:1px solid var(--oro-suave);border-radius:var(--radio);padding:clamp(24px,3.5vw,40px);background:var(--crema)}

/* ---------- 15. Pie ---------------------------------------------------- */
.pie{background:var(--azul);color:#A9C0D4;padding:clamp(56px,7vw,84px) 0 2rem;font-size:.92rem}
.pie a{color:#CBDAE7}
.pie a:hover{color:var(--oro-claro)}
.pie__rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.6rem;padding-bottom:3rem;border-bottom:1px solid rgba(198,166,107,.24)}
@media(max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr;gap:2.2rem}}
@media(max-width:520px){.pie__rejilla{grid-template-columns:1fr}}
.pie__marca{font-family:var(--serif);font-size:2rem;letter-spacing:.26em;color:var(--crema);padding-left:.26em;display:block;margin-bottom:.5rem}
.pie__claim{font-family:var(--serif);font-style:italic;color:var(--oro-claro);font-size:1.05rem}
.pie h4{color:var(--crema);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:400}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.65rem}
.pie__abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.8rem;font-size:.8rem;color:#7E98AF}

/* ---------- 16. Cookies ------------------------------------------------ */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:520px;
  background:var(--crema);border:1px solid var(--oro-suave);border-radius:var(--radio);
  padding:1.4rem 1.5rem;box-shadow:var(--sombra-alta);
  transform:translateY(140%);transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.cookies.visible{transform:translateY(0)}
.cookies p{font-size:.88rem;color:var(--tinta-suave);margin-bottom:1rem}
.cookies__botones{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- 17. Animaciones ------------------------------------------- */
@keyframes aparecer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.revelar{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.revelar.visible{opacity:1;transform:none}
.revelar[data-retraso="1"]{transition-delay:.1s}
.revelar[data-retraso="2"]{transition-delay:.2s}
.revelar[data-retraso="3"]{transition-delay:.3s}
.revelar[data-retraso="4"]{transition-delay:.4s}
.flotar{animation:flotar 7s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .revelar{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 18. Utilidades -------------------------------------------- */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--azul);color:var(--crema);padding:.8em 1.4em;z-index:200}
.saltar:focus{left:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.migas{font-size:.78rem;color:var(--arena);margin-bottom:1.6rem;letter-spacing:.04em}
.migas a{color:var(--arena)}
.migas a:hover{color:var(--oro)}
.migas span{margin:0 .5em;opacity:.5}

/* Cabecera interior de página */
.portada{padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,52px);background:var(--crema-2);border-bottom:1px solid var(--oro-suave)}
.portada h1{margin-bottom:.3em}
.portada .entradilla{margin-bottom:0}

/* ---- Añadidos de páginas de contenido ---- */

/* Pasos largos de "Cómo funciona" */
.paso--largo{padding-top:3.4rem;margin-bottom:clamp(38px,5vw,66px)}
.paso--largo:last-child{margin-bottom:0}
.paso--largo h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem}
.paso--largo p{color:var(--tinta-suave);font-size:1.02rem}
.paso--largo p:last-child{margin-bottom:0}

/* Ficha larga de avatar */
.avatar-ficha{
  display:grid;grid-template-columns:190px 1fr;gap:clamp(20px,3vw,44px);
  align-items:start;padding:clamp(26px,3.4vw,44px) 0;
  border-top:1px solid var(--oro-suave);
}
.avatar-ficha:last-child{border-bottom:1px solid var(--oro-suave)}
.avatar-ficha__figura{position:sticky;top:110px}
.avatar-ficha__figura .sal-avatar-svg{width:150px;height:150px;filter:drop-shadow(0 12px 28px rgba(8,47,87,.12))}
.avatar-ficha__cuerpo{max-width:66ch}
.avatar-ficha__cuerpo h3{margin-bottom:.15rem}
.avatar-ficha__cuerpo h4{margin:1.6rem 0 .6rem;color:var(--oro);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.avatar-ficha__lema{font-family:var(--serif);font-style:italic;color:var(--oro);font-size:1.12rem;margin-bottom:1rem}
.avatar-ficha__dato{font-size:.95rem;color:var(--tinta-suave);margin-bottom:.5rem}
.avatar-ficha__dato strong{color:var(--azul);font-weight:400}
@media(max-width:720px){
  .avatar-ficha{grid-template-columns:1fr}
  .avatar-ficha__figura{position:static}
}

/* Lista con signo dorado en lugar de viñeta */
.lista-signo{list-style:none;padding-left:0;margin-bottom:1.2rem}
.lista-signo li{position:relative;padding-left:1.4rem;margin-bottom:.45rem;font-size:.96rem;color:var(--tinta-suave)}
.lista-signo li::before{content:"—";position:absolute;left:0;top:0;color:var(--oro)}

/* Formulario de contacto con columna lateral */
.rejilla--contacto{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
@media(max-width:900px){.rejilla--contacto{grid-template-columns:1fr}}

/* Campo trampa antispam: fuera de la vista y del foco */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Texto legal */
.texto-legal{max-width:72ch}
.texto-legal h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:2.8rem;margin-bottom:.8rem}
.texto-legal h2:first-of-type{margin-top:1.6rem}
.texto-legal h3{font-size:1.12rem;font-family:var(--sans);font-weight:500;letter-spacing:.01em;margin-top:1.8rem;margin-bottom:.5rem}
.texto-legal p,.texto-legal li{font-size:1rem;color:var(--tinta-suave)}
.texto-legal li{margin-bottom:.5rem}
.texto-legal ul,.texto-legal ol{padding-left:1.3rem}
.texto-legal a{color:var(--oro);text-decoration:underline;text-underline-offset:2px}
.texto-legal a:hover{color:var(--azul)}
.texto-legal code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--crema-2);border:1px solid var(--oro-suave);border-radius:2px;padding:.1em .4em;color:var(--azul)}
.texto-legal .tabla-envoltura{margin-bottom:1.6rem}
.texto-legal table.tabla td{vertical-align:top;font-size:.86rem;color:var(--tinta-suave)}

/* ---- Añadidos del flujo de usuario y ficha de evento ---- */
.rejilla--ficha{grid-template-columns:1.6fr 1fr}
@media(max-width:900px){
  .rejilla--ficha{grid-template-columns:1fr}
  .rejilla--ficha aside .tarjeta-form{position:static!important}
}
.progreso{top:0}
@media(min-width:1001px){.progreso{top:78px}}
.cuestionario__botones{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(253,247,239,0) 0%,var(--crema) 40%);padding:1.2rem 0 1.6rem;z-index:10}
.avatar-hero{align-items:center}
@media(max-width:720px){.avatar-hero{flex-direction:column;text-align:center}.avatar-hero .filete{margin-inline:auto}}
.evento__precio small{margin-top:.15rem}

/* =====================================================================
   Legibilidad en el móvil
   ---------------------------------------------------------------------
   SAL es para gente de 45 a 65 años y más de la mitad va a entrar desde
   el teléfono. A esa edad la vista de cerca cansa, así que en pantallas
   pequeñas se sube el cuerpo del texto secundario y se agrandan los
   sitios donde hay que dar con el dedo. Nada de esto cambia el diseño
   en el ordenador.
   ===================================================================== */

/* Los textos de ayuda son demasiado pequeños en cualquier pantalla */
.campo .ayuda{font-size:.86rem}

@media(max-width:720px){
  /* Todo lo que está medido en rem sube de golpe */
  html{font-size:17px}

  .pequeno{font-size:.92rem;line-height:1.65}
  .campo .ayuda{font-size:.88rem}
  .migas{font-size:.85rem}
  .check{font-size:.98rem;line-height:1.6}
  .evento__sub{font-size:1rem}
  .evento__meta{font-size:.9rem}
  .hero__nota{font-size:.92rem}
  .paso p{font-size:1.02rem}
  .pie li{margin-bottom:.9rem}

  /* Casillas y radios más grandes: se marcan con el pulgar */
  .check input{width:23px;height:23px}

  /* Sitios donde hay que dar con el dedo: mínimo 44 px de alto */
  .idioma{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .migas a{display:inline-block;padding:.4em .15em}
  .enlace-flecha{display:inline-flex;align-items:center;min-height:44px}
  .evento__cuerpo h3 a,
  .marco-oro h3 a{display:inline-block;padding:.2em 0}
  details > summary{min-height:44px;display:flex;align-items:center}
  .pie a{display:inline-block;padding:.3em 0}

  /* En el móvil la foto va arriba del todo: se entiende antes de leer nada */
  .hero__rejilla{grid-template-columns:1fr;gap:clamp(26px,7vw,40px)}
  .hero__foto{order:-1}
  .hero__foto::before{inset:-9px -9px 9px 9px}
  .hero__foto .hero__gemas{width:74px;height:86px;bottom:-22px;left:-14px}

  /* La barra del cuestionario se queda pegada abajo. En un móvil pequeño
     las cuatro opciones no caben en pantalla, así que hay que dejar hueco
     por debajo para que ninguna se quede escondida detrás de la barra. */
  .opciones{margin-bottom:.75rem}
  .pregunta.activa{padding-bottom:1rem}
  .cuestionario{padding-bottom:1rem}
  .cuestionario__botones{
    background:var(--crema);
    box-shadow:0 -14px 22px -12px rgba(11,31,58,.18);
    margin-inline:-24px;
    padding:.9rem 24px calc(.9rem + env(safe-area-inset-bottom,0px));
  }
  .enlace-peligro,
  .check a,
  a[href^="mailto:"]{display:inline-block;padding:.3em 0}
}

/* Teléfonos estrechos: que los botones ocupen el ancho y no se partan */
@media(max-width:400px){
  .hero__acciones .btn,
  .cuestionario__botones .btn{width:100%;justify-content:center}
  .evento__pie{flex-direction:column;align-items:flex-start;gap:.9rem}
  .evento__pie .btn{width:100%;justify-content:center}
}