/* Valsol - estilos v3. Usa solo tokens de tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-fondo);color:var(--color-texto);
  font-family:var(--font-texto);font-size:var(--fs-m);line-height:var(--lh-texto);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
p{font-weight:var(--fw-parrafo)}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-acento);outline-offset:3px;border-radius:4px}
.portada-frase :focus-visible,.contacto-texto :focus-visible{outline-color:var(--color-sobre-marca)}
.contenedor{width:100%;max-width:var(--ancho-max);margin-inline:auto;padding-inline:var(--gutter)}
.contenedor-ancho{max-width:var(--ancho-max-portada)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Menu ---------- */
.menu{background:var(--color-fondo);color:var(--color-texto);position:relative;z-index:10}
.menu .contenedor{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding-block:var(--s-3);
}
.logo{display:block;line-height:0}
.logo img{height:52px;width:auto}
.menu-links{
  display:flex;gap:var(--s-1);padding:var(--s-1);
  border:1px solid var(--color-linea);border-radius:var(--radio-pill);
}
.menu-links a{
  font-size:var(--fs-s);text-decoration:none;padding:6px 16px;border-radius:var(--radio-pill);
  transition:background-color .25s, color .25s;
}
.menu-links a:hover{background:var(--color-apoyo)}
.idioma{display:flex;gap:2px;padding:3px;border-radius:var(--radio-pill);background:var(--color-apoyo)}
.idioma a{
  font-size:var(--fs-xs);font-weight:600;text-decoration:none;padding:5px 11px;border-radius:var(--radio-pill);
  color:var(--color-texto-suave);transition:background-color .25s, color .25s;
}
.idioma a[aria-current="true"]{background:var(--color-marca);color:var(--color-sobre-marca)}
.idioma a:not([aria-current="true"]):hover{color:var(--color-marca)}
/* Menu de la portada: flota sobre la foto, sin logo (el logo grande esta en la portada) */
.menu-portada{position:absolute;inset:0 0 auto 0;z-index:3;background:transparent}
.menu-portada .contenedor{padding-block:var(--s-4)}
.menu-portada .menu-links{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9)}

/* ---------- Portada a pantalla completa: foto, logo grande y frase sobre el azul ---------- */
.portada{
  position:relative;isolation:isolate;background:var(--color-fondo);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
}
.portada-fondo,.portada-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2}
.portada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(255,255,255,var(--velo-arriba)) 0%,
    rgba(255,255,255,var(--velo-arriba)) 30%,
    rgba(255,255,255,var(--velo-medio)) 55%,
    rgba(255,255,255,var(--velo-abajo)) 75%);
}
.portada-logo{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  padding-top:calc(var(--alto-menu) + var(--s-3));padding-bottom:var(--s-5);
}
.portada-logo img{width:100%;max-width:var(--ancho-logo-portada);height:auto}
.portada-frase{
  /* El degradado sube desde el azul y se funde con la foto */
  --deg: clamp(140px, 22vw, 340px);
  position:relative;z-index:1;
  padding-top:calc(var(--deg) * .78);
  padding-bottom:clamp(56px, 7vw, 104px);
  max-width:none;text-align:center;color:var(--color-sobre-marca);
  background:linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--color-marca) 4%, transparent) calc(var(--deg) * 0.08),
    color-mix(in srgb, var(--color-marca) 12%, transparent) calc(var(--deg) * 0.18),
    color-mix(in srgb, var(--color-marca) 24%, transparent) calc(var(--deg) * 0.3),
    color-mix(in srgb, var(--color-marca) 40%, transparent) calc(var(--deg) * 0.42),
    color-mix(in srgb, var(--color-marca) 58%, transparent) calc(var(--deg) * 0.54),
    color-mix(in srgb, var(--color-marca) 74%, transparent) calc(var(--deg) * 0.66),
    color-mix(in srgb, var(--color-marca) 87%, transparent) calc(var(--deg) * 0.78),
    color-mix(in srgb, var(--color-marca) 96%, transparent) calc(var(--deg) * 0.9),
    var(--color-marca) var(--deg),
    var(--color-marca) 100%);
}
.portada h1{
  /* Dos lineas en celular, una sola linea en escritorio.
     Proporciones medidas con Proza Libre 500: linea mas larga = 10.0em (2 lineas) y 18.5em (1 linea). */
  font-family:var(--font-display);font-weight:var(--fw-titulo);
  font-size:calc((100vw - 2 * var(--gutter)) / 10.3);
  line-height:var(--lh-hero);letter-spacing:-.03em;margin:0 auto;white-space:nowrap;
}
.portada .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.portada .ln>span{display:block}
@supports (font-size:1cqi){
  .portada-frase{container-type:inline-size}
  .portada h1{font-size:calc(100cqi / 10.3)}
}
@media (min-width: 900px){
  .portada h1{font-size:calc((100vw - 2 * var(--gutter)) / 18.8)}
  @supports (font-size:1cqi){ .portada h1{font-size:calc(100cqi / 18.8)} }
  .portada .ln{display:inline-block;vertical-align:bottom}
}
.portada-frase p{
  margin:var(--s-4) auto 0;font-size:var(--fs-l);line-height:var(--lh-parrafo-grande);
  color:var(--color-sobre-marca-suave);max-width:40ch;text-wrap:balance;
}
/* Entrada orquestada (solo si JS cargo) */
.js .portada:not(.play) .portada-logo img{opacity:0;transform:translateY(28px)}
.js .portada:not(.play) .ln>span{transform:translateY(110%)}
.js .portada:not(.play) .portada-frase p{opacity:0}
.portada-logo img{transition:opacity 1s var(--ease), transform 1s var(--ease)}
.portada .ln>span{transition:transform .9s var(--ease) .25s}
.portada .ln:nth-child(2)>span{transition-delay:.34s}
.portada-frase p{transition:opacity .8s var(--ease) .55s}

/* ---------- Para quien ---------- */
.para-quien{
  padding-block:var(--s-7);
  background:color-mix(in srgb, var(--color-marca) 7%, var(--color-fondo));
}
.para-quien h2{
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-xxl);
  line-height:var(--lh-titulo);letter-spacing:-.02em;margin:0 0 var(--s-6);text-align:center;
}
.columnas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);max-width:1080px;margin-inline:auto}
.columna{
  display:flex;flex-direction:column;overflow:hidden;
  padding:var(--s-5) var(--s-4) 0;
  background:rgba(255,255,255,.72);
  border:1px solid var(--color-fondo);border-radius:var(--radio-tarjeta-chica);
  box-shadow:0 1px 2px rgba(20,31,67,.05), 0 18px 36px -24px rgba(20,31,67,.35);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.columna:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(20,31,67,.05), 0 24px 44px -24px rgba(20,31,67,.45)}
.columna h3{
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-l2);
  line-height:var(--lh-tarjeta);letter-spacing:-.01em;margin:0 0 var(--s-2);color:var(--color-texto);
}
.columna p{margin:0;color:var(--color-texto-suave);max-width:28ch;font-size:var(--fs-m)}
.columna-grafico{margin:var(--s-5) calc(var(--s-4) * -1) 0;margin-top:auto;padding-top:var(--s-5)}
.columna-grafico img{width:100%;height:auto}

/* ---------- Sobre ---------- */
.sobre{background:var(--color-fondo);padding-block:var(--s-7)}
.sobre .contenedor{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s-6);align-items:start}
.sobre h2{
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-xl);
  line-height:var(--lh-titulo);letter-spacing:-.015em;margin:0;color:var(--color-texto);
}
.sobre-intro p{
  margin:var(--s-4) 0 0;max-width:34ch;
  font-size:var(--fs-l);line-height:1.4;color:var(--color-texto);
}
.sobre-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-texto)}
.sobre-lista li{padding-block:var(--s-4);border-bottom:1px solid var(--color-linea)}
.sobre-lista h3{
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-l2);
  line-height:var(--lh-tarjeta);letter-spacing:-.01em;margin:0 0 var(--s-2);color:var(--color-marca);
}
.sobre-lista p{margin:0;max-width:46ch;color:var(--color-texto-suave)}

/* ---------- Contacto y formulario ---------- */
.contacto{padding-block:0 var(--s-7)}
.contacto-panel{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:var(--s-6);
  background:var(--color-marca);color:var(--color-sobre-marca);border-radius:var(--radio-panel);
  padding:clamp(28px, 5vw, 72px);
}
.contacto-texto h2{
  font-family:var(--font-texto);font-weight:600;font-size:var(--fs-s);line-height:var(--lh-texto);
  letter-spacing:0;margin:0 0 var(--s-3);color:var(--color-sobre-marca-suave);
}
.contacto-texto p{
  margin:0;max-width:26ch;
  font-family:var(--font-display);font-weight:400;font-size:var(--fs-l);
  line-height:var(--lh-parrafo-grande);color:var(--color-sobre-marca-suave);
}
.correo{
  display:inline-block;margin-top:var(--s-4);
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-xl);
  line-height:var(--lh-tarjeta);letter-spacing:-.01em;
  color:var(--color-sobre-marca);text-decoration:none;
  background:linear-gradient(var(--color-sobre-marca),var(--color-sobre-marca)) left bottom/100% 2px no-repeat;
  padding-bottom:6px;transition:background-size .45s var(--ease);
  white-space:nowrap;
}
.correo:hover,.correo:focus-visible{background-size:0% 2px}
.contacto-texto .contacto-nota{margin-top:var(--s-5);font-family:var(--font-texto);font-weight:var(--fw-parrafo);font-size:var(--fs-m)}

.formulario{
  background:var(--color-fondo);color:var(--color-texto);
  border-radius:var(--radio-tarjeta);padding:clamp(24px, 3vw, 36px);
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.campo{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-s);font-weight:400;color:var(--color-texto)}
.campo em{font-style:normal;font-weight:var(--fw-parrafo);color:var(--color-texto-suave)}
.campo-ancho{grid-column:1 / -1}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--font-texto);font-size:var(--fs-campo);font-weight:var(--fw-parrafo);
  color:var(--color-texto);background:var(--color-fondo);
  border:1px solid var(--color-linea);border-radius:var(--radio-campo);padding:12px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.campo textarea{resize:vertical;min-height:110px;line-height:var(--lh-texto)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:none;border-color:var(--color-marca);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-marca) 18%, transparent);
}
.boton{
  margin-top:var(--s-4);width:100%;
  font-family:var(--font-texto);font-weight:600;font-size:var(--fs-m);line-height:1;
  color:var(--color-sobre-marca);background:var(--color-acento);
  border:0;border-radius:var(--radio-pill);padding:17px 28px;cursor:pointer;
  transition:background-color .25s, transform .25s var(--ease);
}
.boton:hover{background:color-mix(in srgb, var(--color-acento) 82%, var(--color-texto));transform:translateY(-2px)}
.boton[disabled]{opacity:.6;cursor:wait;transform:none}
.form-legal{margin:var(--s-3) 0 0;font-size:var(--fs-xs);color:var(--color-texto-suave);text-align:center}
.form-aviso{
  display:none;margin:0 0 var(--s-4);padding:12px 16px;border-radius:var(--radio-campo);
  font-size:var(--fs-s);font-weight:400;outline:none;
}
.form-ok{background:color-mix(in srgb, var(--color-marca) 9%, var(--color-fondo));color:var(--color-marca)}
.form-error{background:color-mix(in srgb, var(--color-acento) 9%, var(--color-fondo));color:var(--color-acento)}
.form-aviso:target,.form-aviso.visible{display:block}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Pie ---------- */
.pie{background:var(--color-apoyo);color:var(--color-texto-suave);padding-block:var(--s-6) var(--s-5);border-top:1px solid var(--color-linea)}
.pie-arriba{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-end}
.pie .logo img{height:44px}
.pie-arriba p{margin:var(--s-3) 0 0;font-size:var(--fs-s)}
.pie a{text-decoration:none}
.pie a:hover{color:var(--color-acento)}
.pie-abajo{
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--color-linea);
  display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-xs);
}

/* ---------- Aviso de privacidad ---------- */
.aviso-cabecera{background:var(--color-marca);color:var(--color-sobre-marca);padding:var(--s-7) 0 var(--s-6)}
.aviso-cabecera h1{font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-xxl);margin:0;line-height:var(--lh-titulo);letter-spacing:-.02em}
.aviso-cuerpo{padding-block:var(--s-6) var(--s-7)}
.aviso-cuerpo .contenedor>*{max-width:70ch}
.aviso-fecha{font-size:var(--fs-s);color:var(--color-texto-suave);margin:0 0 var(--s-5)}
.aviso-cuerpo h2{
  font-family:var(--font-display);font-weight:var(--fw-titulo);font-size:var(--fs-l);
  line-height:var(--lh-tarjeta);color:var(--color-marca);margin:var(--s-5) 0 var(--s-2);
}
.aviso-cuerpo p{margin:0;color:var(--color-texto)}

/* ---------- Revelado ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .contacto-panel{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (max-width: 860px){
  .columnas{grid-template-columns:1fr}
  .columna-grafico img{max-width:360px;margin-left:auto}
  .sobre .contenedor{grid-template-columns:1fr;gap:var(--s-5)}
  .para-quien,.sobre{padding-block:var(--s-6)}
  .contacto{padding-bottom:var(--s-6)}
  .para-quien h2{text-align:left;margin-bottom:var(--s-5)}
  .portada-frase p{font-size:var(--fs-m)}
  .contacto-texto p{font-size:var(--fs-m)}
  .correo{font-size:clamp(1.1rem, 6.4vw, 1.75rem);margin-top:var(--s-3)}
  .contacto-texto .contacto-nota{margin-top:var(--s-4)}
}
@media (max-width: 600px){
  .menu:not(.menu-portada) .menu-links{display:none}
  .menu-portada .menu-links a{padding:6px 12px}
  .logo img{height:38px}
  .pie .logo img{height:36px}
  .campos{grid-template-columns:1fr}
  .contacto-panel{border-radius:var(--radio-tarjeta);padding:var(--s-5) var(--s-3) var(--s-3)}
  .contacto-texto{padding-inline:var(--s-2)}
  .formulario{padding:var(--s-4) var(--s-3)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .portada .ln>span,.portada-frase p,.portada-logo img{transition-duration:.3s;transition-delay:0s}
}