/* =========================================================================
   VearCare — Dirección "Tejado"
   Sistema visual: un arco de protección sobre la comunidad educativa.
   Mobile-first. Sin dependencias externas: las tipografías están en assets/fonts/.
   ========================================================================= */

/* Tipografías alojadas en el propio dominio: la web no se conecta con terceros. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/outfit-400.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/outfit-500.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/outfit-600.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/outfit-700.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/karla-400.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/karla-500.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/karla-700.woff2") format("woff2");}

:root{
  /* Color */
  --noche:#2B3A67;        /* marca, texto, arco */
  --noche-90:#3A4A7C;
  --sol:#F4B740;          /* acento cálido */
  --sol-claro:#FDF0D3;
  --agua:#5BC0A8;
  --agua-claro:#E3F4EF;
  --frambuesa:#E8697D;
  --frambuesa-claro:#FBE7EA;
  --blanco:#FFFFFF;
  --nube:#F5F7FB;         /* fondo alterno */
  --borde:#DDE3EF;
  --texto:#1F2942;
  --texto-2:#5C6785;
  --error:#C0392B;

  /* Tipografía */
  --display:"Outfit","Segoe UI",Helvetica,Arial,sans-serif;
  --texto-ff:"Karla","Segoe UI",Helvetica,Arial,sans-serif;

  /* Métrica */
  --ancho:1160px;
  --gutter:20px;
  --radio:14px;
  --radio-lg:24px;

  color-scheme:light;
}

@media (min-width:768px){ :root{ --gutter:32px; } }

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--blanco);
  color:var(--texto);
  font-family:var(--texto-ff);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;}
a{color:var(--noche);}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.06;
  color:var(--noche);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,6.4vw,3.85rem);}
h2{font-size:clamp(1.7rem,4.4vw,2.7rem);}
h3{font-size:clamp(1.12rem,2.2vw,1.35rem);letter-spacing:-.024em;}
h4{font-size:1.02rem;letter-spacing:-.02em;}
p{margin:0;}

:focus-visible{
  outline:3px solid var(--noche);
  outline-offset:3px;
  border-radius:4px;
}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--noche);color:#fff;padding:12px 18px;border-radius:0 0 var(--radio) 0;
  font-family:var(--display);font-weight:600;
}
.saltar:focus{left:0;}

.contenedor{
  width:100%;max-width:var(--ancho);margin-inline:auto;
  padding-inline:var(--gutter);
}

.seccion{padding-block:clamp(56px,9vw,104px);}
.seccion--nube{background:var(--nube);}

.intro-seccion{max-width:680px;display:flex;flex-direction:column;gap:16px;}
.intro-seccion p{color:var(--texto-2);font-size:1.06rem;max-width:58ch;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:1rem;
  padding:15px 26px;border-radius:12px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
}
.btn--principal{background:var(--noche);color:#fff;border-color:var(--noche);}
.btn--principal:hover{background:#22305a;border-color:#22305a;}
.btn--sol{background:var(--sol);color:var(--noche);border-color:var(--sol);}
.btn--sol:hover{background:#EFA92A;border-color:#EFA92A;}
.btn--linea{background:transparent;color:var(--noche);border-color:var(--borde);}
.btn--linea:hover{border-color:var(--noche);}
.btn--peq{padding:11px 18px;font-size:.94rem;}
.acciones{display:flex;flex-wrap:wrap;gap:12px;}
.acciones--seccion{margin-top:clamp(34px,5vw,48px);}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--borde);
}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:70px;
}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.marca__nombre{
  font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.03em;color:var(--noche);
  line-height:1;
}
.marca__nombre span{font-weight:400;color:var(--texto-2);}

.nav{display:none;}
@media (min-width:1000px){
  .nav{display:flex;align-items:center;gap:26px;}
}
.nav a{
  font-family:var(--display);font-weight:500;font-size:.98rem;color:var(--texto-2);
  text-decoration:none;
}
.nav a:hover{color:var(--noche);}

.cabecera__acciones{display:flex;align-items:center;gap:12px;}

.idiomas{display:flex;align-items:center;gap:4px;font-family:var(--display);font-size:.88rem;}
.idiomas a{
  color:var(--texto-2);text-decoration:none;padding:5px 8px;border-radius:7px;font-weight:600;
}
.idiomas a[aria-current="true"]{background:var(--nube);color:var(--noche);}
.idiomas span{color:var(--borde);}

.cabecera .btn{display:none;}
@media (min-width:600px){ .cabecera .btn{display:inline-flex;} }

/* ---------- Hero ---------- */
.hero{padding-top:clamp(40px,7vw,72px);padding-bottom:0;text-align:center;overflow:hidden;}
/* La medida se fija sobre el propio h1: en "ch" del cuerpo saldría
   una columna estrechísima para un titular de 60 px. */
.hero__texto{max-width:940px;margin-inline:auto;}
.hero__texto h1{max-width:15ch;margin-inline:auto;}
.hero__entrada{
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--agua);
  margin-bottom:14px;
}
.hero__lead{
  margin:20px auto 0;max-width:52ch;font-size:1.14rem;color:var(--texto-2);line-height:1.6;
}
.hero .acciones{justify-content:center;margin-top:28px;}
.hero__apoyo{
  margin:20px auto 0;font-size:.92rem;color:var(--texto-2);max-width:46ch;
}
.hero__arte{margin-top:clamp(28px,5vw,48px);}
.hero__arte svg{display:block;width:100%;height:auto;}

/* Un único momento de animación: el arco se dibuja al cargar. */
.arco-trazo{
  stroke-dasharray:1200;
  stroke-dashoffset:0;
}
@media (prefers-reduced-motion:no-preference){
  .js .arco-trazo{
    stroke-dashoffset:1200;
    animation:dibujar 1.5s cubic-bezier(.22,.61,.36,1) .15s forwards;
  }
  .js .figura{opacity:0;animation:aparecer .5s ease forwards;}
  .js .figura:nth-of-type(1){animation-delay:.75s;}
  .js .figura:nth-of-type(2){animation-delay:.83s;}
  .js .figura:nth-of-type(3){animation-delay:.91s;}
  .js .figura:nth-of-type(4){animation-delay:.99s;}
  .js .figura:nth-of-type(5){animation-delay:1.07s;}
  .js .figura:nth-of-type(6){animation-delay:1.15s;}
  .js .figura:nth-of-type(7){animation-delay:1.23s;}
  .js .figura:nth-of-type(8){animation-delay:1.31s;}
  .js .figura:nth-of-type(9){animation-delay:1.39s;}
}
@keyframes dibujar{to{stroke-dashoffset:0;}}
@keyframes aparecer{to{opacity:1;}}

/* ---------- Arco separador ---------- */
.arco-sep{display:block;width:100%;height:clamp(40px,5vw,72px);}

/* ---------- El problema ---------- */
.problema{background:var(--nube);}
.problema__grid{
  display:grid;grid-template-columns:1fr;gap:34px;margin-top:38px;
}
@media (min-width:860px){ .problema__grid{grid-template-columns:repeat(4,1fr);gap:26px;} }
.consecuencia{display:flex;flex-direction:column;gap:11px;}
.consecuencia__icono{
  width:44px;height:44px;border-radius:13px;background:var(--blanco);
  display:grid;place-items:center;border:1px solid var(--borde);
}
.consecuencia p{color:var(--texto-2);font-size:.98rem;}
.problema__cita{
  margin-top:40px;padding-top:28px;border-top:2px solid var(--borde);
  font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,3vw,1.75rem);
  line-height:1.28;letter-spacing:-.028em;color:var(--noche);max-width:30ch;
}

/* ---------- La solución ---------- */
.solucion__grid{
  display:grid;grid-template-columns:1fr;gap:34px;align-items:start;margin-top:40px;
}
@media (min-width:900px){ .solucion__grid{grid-template-columns:1fr 1fr;gap:56px;} }
.solucion__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.solucion__lista li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;}
.marca-punto{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
}
.solucion__lista p{color:var(--texto-2);font-size:.99rem;margin-top:4px;}
.panel-arco{
  background:var(--noche);border-radius:var(--radio-lg);padding:32px 28px;color:#fff;
  position:relative;overflow:hidden;
}
.panel-arco h3{color:#fff;}
.panel-arco p{color:#C5CDE4;margin-top:12px;font-size:1rem;}
.panel-arco__dato{
  display:flex;flex-direction:column;gap:4px;padding-top:20px;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.18);
}
.panel-arco__dato b{font-family:var(--display);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:var(--sol);}
.panel-arco__dato span{font-size:.92rem;color:#C5CDE4;}

/* ---------- Beneficios ---------- */
.beneficios{display:grid;grid-template-columns:1fr;gap:28px;margin-top:40px;}
@media (min-width:640px){ .beneficios{grid-template-columns:1fr 1fr;gap:30px 34px;} }
@media (min-width:1000px){ .beneficios{grid-template-columns:repeat(3,1fr);} }
.beneficio{display:flex;flex-direction:column;gap:10px;}
.beneficio__icono{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;}
.beneficio p{color:var(--texto-2);font-size:.98rem;}

.familias__grid{display:grid;grid-template-columns:1fr;gap:38px;margin-top:40px;align-items:start;}
@media (min-width:900px){ .familias__grid{grid-template-columns:.92fr 1.08fr;gap:56px;} }
.familias__lista{list-style:none;margin:0;padding:0;}
.familias__lista li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--borde);
}
.familias__lista li:first-child{padding-top:0;}
.familias__lista li:last-child{border-bottom:0;padding-bottom:0;}
.familias__lista p{color:var(--texto-2);font-size:.98rem;margin-top:3px;}
.punto-color{width:12px;height:12px;border-radius:50%;margin-top:7px;flex:none;}

/* ---------- Cómo funciona ---------- */
.pasos{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:44px;
}
@media (min-width:760px){
  .pasos{grid-template-columns:repeat(4,1fr);border-top:3px solid var(--borde);gap:24px;}
}
.paso{
  position:relative;padding-left:32px;padding-bottom:30px;
  border-left:3px solid var(--borde);
}
.paso:last-child{padding-bottom:0;border-left-color:transparent;}
@media (min-width:760px){
  .paso{padding-left:0;padding-top:26px;padding-bottom:0;padding-right:20px;border-left:0;}
  .paso:last-child{padding-right:0;}
}
.paso__punto{
  position:absolute;left:-10px;top:2px;width:17px;height:17px;border-radius:50%;
  border:3px solid var(--blanco);
}
@media (min-width:760px){
  .paso__punto{left:0;top:-10px;}
}
.seccion--nube .paso__punto{border-color:var(--nube);}
.paso__orden{
  font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--texto-2);
  display:block;margin-bottom:5px;
}
.paso p{color:var(--texto-2);font-size:.97rem;margin-top:8px;}

/* ---------- Para quién es ---------- */
.tipologias{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;}
@media (min-width:600px){ .tipologias{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .tipologias{grid-template-columns:repeat(3,1fr);} }
.tipologia{
  border:1px solid var(--borde);border-radius:var(--radio);padding:24px 22px;
  background:var(--blanco);display:flex;flex-direction:column;gap:9px;
}
.tipologia__arco{width:46px;height:24px;}
.tipologia p{color:var(--texto-2);font-size:.95rem;}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;max-width:78ch;}
.faq details{border-bottom:1px solid var(--borde);}
.faq details:first-of-type{border-top:1px solid var(--borde);}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--noche);
  letter-spacing:-.02em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";flex:none;width:15px;height:15px;margin-top:5px;
  border-right:2.5px solid var(--noche);border-bottom:2.5px solid var(--noche);
  transform:rotate(45deg);transform-origin:center;
}
@media (prefers-reduced-motion:no-preference){
  .faq summary::after{transition:transform .2s ease;}
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq__respuesta{padding:0 0 24px;color:var(--texto-2);max-width:68ch;}
.faq__respuesta p + p{margin-top:12px;}

/* ---------- CTA final y formulario ---------- */
.cierre{background:var(--noche);color:#fff;position:relative;}
.cierre h2{color:#fff;}
.cierre__grid{display:grid;grid-template-columns:1fr;gap:40px;}
@media (min-width:940px){ .cierre__grid{grid-template-columns:.85fr 1.15fr;gap:64px;} }
.cierre__texto p{color:#C5CDE4;margin-top:18px;font-size:1.06rem;max-width:44ch;}
.cierre__contacto{
  margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:8px;font-size:.98rem;color:#C5CDE4;
}
.cierre__contacto a{color:var(--sol);text-decoration:none;font-weight:700;}
.cierre__contacto a:hover{text-decoration:underline;}

.formulario{
  background:var(--blanco);border-radius:var(--radio-lg);padding:28px 24px;
}
@media (min-width:600px){ .formulario{padding:36px 34px;} }
.formulario__cabeza{display:flex;flex-direction:column;gap:6px;margin-bottom:24px;}
.formulario__cabeza p{color:var(--texto-2);font-size:.95rem;}

.campos{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:620px){ .campos{grid-template-columns:1fr 1fr;} }
.campo{display:flex;flex-direction:column;gap:7px;}
.campo--ancho{grid-column:1 / -1;}
.campo label{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--noche);}
.campo label .opt{font-weight:400;color:var(--texto-2);}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto-ff);font-size:1rem;color:var(--texto);
  border:1.5px solid var(--borde);border-radius:10px;padding:13px 14px;
  background:var(--blanco);width:100%;
}
.campo textarea{resize:vertical;min-height:110px;}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:3px solid var(--noche);outline-offset:1px;border-color:var(--noche);
}
.campo--error input,.campo--error select,.campo--error textarea{border-color:var(--error);}
.campo__error{color:var(--error);font-size:.86rem;min-height:0;}
.campo__error:empty{display:none;}

.consentimiento{
  grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:.9rem;color:var(--texto-2);
}
.consentimiento input{width:20px;height:20px;margin-top:2px;accent-color:var(--noche);}
.consentimiento a{color:var(--noche);}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.formulario .btn{width:100%;margin-top:24px;}
@media (min-width:620px){ .formulario .btn{width:auto;} }
.formulario__nota{margin-top:16px;font-size:.86rem;color:var(--texto-2);}

.aviso{
  margin-top:20px;border-radius:12px;padding:16px 18px;font-size:.95rem;
  display:none;
}
.aviso--ok{background:var(--agua-claro);color:#12594A;border:1px solid #9FD9C9;}
.aviso--ko{background:var(--frambuesa-claro);color:#8E2233;border:1px solid #F0B4BE;}
.aviso[data-visible="true"]{display:block;}

/* ---------- Pie ---------- */
.pie{background:var(--noche);color:#C5CDE4;padding-block:36px;border-top:1px solid rgba(255,255,255,.14);}
.pie__fila{display:flex;flex-direction:column;gap:20px;}
@media (min-width:760px){ .pie__fila{flex-direction:row;justify-content:space-between;align-items:center;} }
.pie a{color:#C5CDE4;text-decoration:none;}
.pie a:hover{color:#fff;text-decoration:underline;}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;}
.pie__legal{font-size:.86rem;color:#8E99BC;}
.pie .marca__nombre{color:#fff;}
.pie .marca__nombre span{color:#8E99BC;}
.pie__identidad{display:flex;align-items:center;gap:16px;min-width:0;}
.pie__identidad .pie__legal{margin:4px 0 0;}
.pie__corporativo{flex:0 0 auto;display:block;padding:6px;background:#fff;border-radius:8px;}
.pie__corporativo img{display:block;width:110px;height:auto;}
@media (min-width:760px){.pie__corporativo img{width:122px;}}

/* ---------- Página legal ---------- */
.legal{max-width:76ch;padding-block:clamp(48px,8vw,88px);}
.legal h2{margin-top:40px;font-size:clamp(1.3rem,3vw,1.7rem);}
.legal p,.legal li{color:var(--texto-2);margin-top:14px;}
.legal ul{padding-left:20px;}
.legal .pendiente{
  background:var(--sol-claro);border:1px solid #EBCE8C;border-radius:var(--radio);
  padding:18px 20px;color:#6B4E0E;margin-top:24px;
}
.legal .pendiente strong{color:#4E390A;}

/* ---------- Grupo Galilea ---------- */
.sobre-nosotros{background:var(--blanco);}
.seccion-etiqueta{font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--agua)!important;}
.sobre-nosotros__cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;}
.sobre-nosotros__cabecera .intro-seccion{flex:1 1 500px;}
.sobre-nosotros__marca{flex:0 0 auto;padding:12px;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);}
.sobre-nosotros__logo{display:block;width:110px;height:141px;overflow:hidden;}
.sobre-nosotros__logo img{display:block;width:200px;height:141px;max-width:none;}
.cifras{display:grid;grid-template-columns:1fr;gap:14px;margin-top:40px;}
@media (min-width:560px){.cifras{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.cifras{grid-template-columns:repeat(4,1fr);}}
.cifra{min-height:210px;padding:27px 25px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--nube);}
.cifra::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--agua);margin-bottom:24px;}
.cifra:nth-child(2)::before{background:var(--sol);}
.cifra:nth-child(3)::before{background:var(--frambuesa);}
.cifra:nth-child(4)::before{background:var(--noche);}
.cifra strong{display:block;font-family:var(--display);font-size:clamp(2.8rem,5vw,4.2rem);line-height:1;letter-spacing:-.05em;color:var(--noche);white-space:nowrap;}
.cifra strong span{font-size:.3em;font-weight:600;letter-spacing:.01em;text-transform:uppercase;}
.cifra strong .cifra__valor{font-size:1em;font-weight:inherit;letter-spacing:inherit;text-transform:none;}
.cifra p{margin-top:22px;max-width:22ch;color:var(--texto-2);line-height:1.4;}
.cifras__fuente{margin-top:17px;color:var(--texto-2);font-size:.82rem;}