/* ===========================================================================
   4PM.Institute — hoja de estilo única
   Paleta institucional. Sin dependencias externas, sin fuentes de terceros.
   =========================================================================== */

:root{
  --azul-profundo:#082E5D;
  --azul:#0B4B8C;
  --turquesa:#0EA8B5;
  --verde:#64C832;
  --naranja:#FF850F;
  --blanco:#FFFFFF;
  --gris:#EEF3F6;
  --grafito:#253746;
  --turquesa-texto:#08727B;   /* turquesa oscurecido: contraste AA en texto */

  --texto:#253746;
  --texto-suave:#4a5a68;
  --borde:#d7e1e8;

  --ancho:1120px;
  --radio:14px;
  --sombra:0 1px 2px rgba(8,46,93,.06), 0 8px 24px rgba(8,46,93,.07);
  --sombra-alta:0 2px 4px rgba(8,46,93,.08), 0 16px 40px rgba(8,46,93,.12);

  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           "Noto Sans", Arial, sans-serif;
}

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

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  font-family:var(--fuente);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}

h1,h2,h3,h4{
  color:var(--azul-profundo);
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 .6em;
  font-weight:700;
}
h1{font-size:clamp(2rem, 5.2vw, 3.1rem)}
h2{font-size:clamp(1.55rem, 3.6vw, 2.15rem)}
h3{font-size:clamp(1.15rem, 2.2vw, 1.35rem)}
p{margin:0 0 1.15em; max-width:72ch}
.centrado p, .seccion__intro p, .caja p, .par-item p, td p{max-width:none}
ul,ol{margin:0 0 1.1em; padding-left:1.15em}
li{margin-bottom:.4em}

a{color:var(--azul); text-underline-offset:3px}
a:hover{color:var(--azul-profundo)}
:focus-visible{outline:3px solid var(--turquesa); outline-offset:3px; border-radius:4px}

strong{font-weight:700; color:var(--azul-profundo)}

.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px}

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--azul-profundo); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.saltar:focus{left:0}

/* ---------------------------------------------------------------- cabecera */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--borde);
  backdrop-filter:saturate(160%) blur(8px);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:74px; flex-wrap:wrap;
}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; padding:8px 0}
.marca img{width:46px; height:46px; margin-right:4px}
.marca__texto{
  font-weight:800; font-size:1.22rem; color:var(--azul-profundo); letter-spacing:-.02em;
}
.marca__punto{color:var(--turquesa)}

.menu ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.menu a{
  display:block; padding:9px 12px; border-radius:8px;
  color:var(--grafito); text-decoration:none; font-weight:600; font-size:.97rem;
}
.menu a:hover{background:var(--gris); color:var(--azul-profundo)}
.menu a[aria-current="page"]{color:var(--azul); box-shadow:inset 0 -2px 0 var(--turquesa)}
.menu__destacado{margin-left:8px}
.menu__destacado a{padding:0}
.menu__destacado a:hover{background:none}

.menu-boton{display:none}

body.con-js .menu-boton{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--azul-profundo); color:#fff; border:0; cursor:pointer;
  padding:10px 16px; border-radius:10px; font:inherit; font-weight:600; font-size:.95rem;
}
.menu-boton__barras{
  width:18px; height:2px; background:#fff; position:relative; display:block;
}
.menu-boton__barras::before,.menu-boton__barras::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.menu-boton__barras::before{top:-6px}
.menu-boton__barras::after{top:6px}

@media (min-width:981px){
  body.con-js .menu-boton{display:none}
}
@media (max-width:980px){
  body.con-js .menu{display:none; width:100%; padding-bottom:14px}
  body.con-js .menu--abierto{display:block}
  .menu ul{flex-direction:column; align-items:stretch; gap:2px}
  .menu a{padding:12px 14px; border-radius:10px}
  .menu__destacado{margin:10px 0 0}
  .menu__destacado a{display:block; text-align:center}
}

/* ----------------------------------------------------------------- botones */
.boton{
  display:inline-block; padding:14px 26px; border-radius:11px;
  font-weight:700; font-size:1rem; text-decoration:none; text-align:center;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.boton:hover{transform:translateY(-1px)}
.boton--wa{background:var(--naranja); color:#1d2a35; box-shadow:0 4px 14px rgba(255,133,15,.3)}
.boton--wa:hover{background:#f07a00; color:#1d2a35; box-shadow:0 6px 20px rgba(255,133,15,.38)}
.boton--principal{background:var(--azul); color:#fff}
.boton--principal:hover{background:var(--azul-profundo); color:#fff}
.boton--linea{border-color:currentColor; color:var(--azul-profundo); background:transparent}
.boton--linea:hover{background:var(--gris); color:var(--azul-profundo)}
.boton--claro{background:#fff; color:var(--azul-profundo)}
.boton--claro:hover{background:var(--gris); color:var(--azul-profundo)}
.botonera{display:flex; flex-wrap:wrap; gap:14px; margin:1.6em 0 0}
.botonera > *{margin-right:2px}

/* -------------------------------------------------------------- secciones */
.seccion{padding:clamp(60px, 8.5vw, 110px) 0}
.seccion--gris{background:var(--gris)}
.seccion--borde{border-top:1px solid var(--borde)}
.seccion__intro{max-width:720px; margin:0 auto; text-align:center}
.seccion__intro p{font-size:1.14rem; color:var(--texto-suave)}
.seccion__intro .antetitulo::after{margin-left:auto; margin-right:auto}
.seccion__intro--izq{margin:0; text-align:left}
.seccion__intro--izq .antetitulo::after{margin-left:0}

.antetitulo{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em;
  font-size:.76rem; font-weight:800; color:var(--turquesa-texto); margin-bottom:.9em;
}
.antetitulo::after{
  content:""; display:block; width:38px; height:3px; background:var(--verde); margin-top:.7em;
}

/* ------------------------------------------------------------------- hero */
.hero{
  background:linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 58%, #0d5f9e 100%);
  color:#fff; padding:clamp(56px, 9vw, 104px) 0;
}
.hero h1{color:#fff; max-width:17ch}
.hero__texto{font-size:clamp(1.05rem,2.2vw,1.22rem); color:#dce9f5; max-width:60ch}
.hero .antetitulo{color:#a9eef5}
.hero .antetitulo::after{background:var(--verde)}
.hero__sello{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  padding:11px 18px; border-radius:999px; font-size:.95rem; color:#fff;
}
.hero__sello span{width:9px; height:9px; border-radius:50%; background:var(--verde); flex:none; margin-right:4px}

/* ----------------------------------------------------------------- iconos */
.icono{width:28px; height:28px; display:block; color:var(--azul); flex:none}
.caja__icono{margin-bottom:16px}
.caja--verde .caja__icono .icono, .caja--verde .icono{color:#3f9c14}

/* Lista con icono en lugar de viñeta */
.lista-icono{list-style:none; padding:0; margin:0 0 1.1em}
.lista-icono li{display:flex; gap:13px; align-items:flex-start; margin-bottom:.85em}
.lista-icono .icono{width:22px; height:22px; margin-top:3px; color:var(--verde)}
.destacado .lista-icono .icono{color:#9fe870}
.lista-icono span{flex:1}

/* ------------------------------------------------------------------ cajas */
.rejilla{display:grid; gap:30px}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.caja{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  padding:34px 32px; box-shadow:var(--sombra);
}
.caja--acento{border-top:4px solid var(--azul)}
.caja--verde{border-top:4px solid var(--verde)}
.caja--naranja{border-top:4px solid var(--azul)}
.caja h3{margin-bottom:.5em}
.caja p{font-size:.99rem; color:var(--texto-suave)}
.caja strong{color:var(--azul-profundo)}
.caja p:last-child{margin-bottom:0}
.caja__numero{
  font-size:.8rem; font-weight:800; color:var(--turquesa-texto);
  letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:.6em;
}

.destacado{
  background:var(--azul-profundo); color:#fff; border-radius:var(--radio);
  padding:clamp(28px,4vw,44px); box-shadow:var(--sombra-alta);
}
.destacado h2,.destacado h3{color:#fff}
.destacado p{color:#dce9f5}
.destacado p:last-child{margin-bottom:0}

.nota{
  background:var(--gris); border-left:4px solid var(--turquesa);
  padding:20px 24px; border-radius:0 var(--radio) var(--radio) 0;
}
.nota p:last-child{margin-bottom:0}
.nota--verde{border-left-color:var(--verde)}

.lista-limpia{list-style:none; padding:0}
.lista-limpia li{
  padding-left:30px; position:relative; margin-bottom:.75em;
}
.lista-limpia li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--verde);
}

.par{display:grid; gap:44px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start}

/* ---------------------------------------------------------------- tablas */
.tabla-envoltura{overflow-x:auto; margin-bottom:1.2em}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:.98rem}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--borde); vertical-align:top}
th{background:var(--gris); color:var(--azul-profundo); font-weight:700}

/* -------------------------------------------------------------- formulario */
.formulario{display:grid; gap:18px; max-width:620px}
.campo{display:grid; gap:7px}
.campo label{font-weight:700; color:var(--azul-profundo); font-size:.97rem}
.campo .ayuda{font-size:.87rem; color:var(--texto-suave); font-weight:400}
input[type=text],input[type=email],textarea,select{
  width:100%; padding:13px 15px; font:inherit; font-size:1rem; color:var(--texto);
  background:#fff; border:2px solid var(--borde); border-radius:10px;
}
input:focus,textarea:focus,select:focus{border-color:var(--turquesa); outline:none}
textarea{min-height:150px; resize:vertical}
.consentimiento{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--gris); padding:16px 18px; border-radius:10px; font-size:.95rem;
}
.consentimiento input{margin-top:4px; width:19px; height:19px; flex:none; accent-color:var(--azul)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aviso{padding:16px 20px; border-radius:10px; margin-bottom:22px; font-weight:600}
.aviso--error{background:#fdecec; border-left:4px solid #c0392b; color:#7d1f16}
.aviso--ok{background:#eaf7e3; border-left:4px solid var(--verde); color:#2c5e13}

/* --------------------------------------------------------------- contenido */
.contenido-legal{max-width:760px}
.contenido-legal h2{margin-top:1.8em; padding-top:.3em}
.contenido-legal h3{margin-top:1.5em}
.contenido-legal li{margin-bottom:.55em}
.contenido-legal .fecha{color:var(--texto-suave); font-size:.95rem}

/* -------------------------------------------------------------------- pie */
.pie{background:var(--grafito); color:#cdd8e0; padding:56px 0 26px; margin-top:0}
.pie__rejilla{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.pie__marca{font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:.35em}
.pie__lema{color:#9fe870; font-weight:600; margin-bottom:.6em}
.pie__titulo{font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color:#7fe3ed; margin-bottom:1em}
.pie__lista{list-style:none; padding:0; margin:0 0 1em}
.pie__lista li{margin-bottom:.55em}
.pie a{color:#e4ecf2; text-decoration:none; border-bottom:1px solid rgba(228,236,242,.3)}
.pie a:hover{color:#fff; border-bottom-color:#fff}
.pie__nota{font-size:.88rem; color:#9fadb8; margin-bottom:0}
.pie__cierre{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:.86rem; color:#9fadb8; display:grid; gap:6px;
}
.pie__cierre p{margin:0}

/* ---------------------------------------------------------------- declara */
.declara{
  display:grid; gap:20px; grid-template-columns:minmax(220px,1fr) 2fr;
  align-items:center;
  background:linear-gradient(135deg, var(--azul-profundo), var(--azul));
  color:#fff; border-radius:var(--radio); padding:clamp(26px,3.6vw,40px);
}
.declara__frase{font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:800; margin:0; line-height:1.25}
.declara p{color:#dce9f5; margin:0}
@media (max-width:720px){ .declara{grid-template-columns:1fr} }

/* ------------------------------------------------------- problema → resultado */
.pares{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.par-item{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:20px 22px;
}
.par-item__mal{color:var(--texto-suave); font-size:.97rem; margin:0}
.par-item__flecha{color:var(--azul); font-weight:800; flex:none}
.par-item__bien{color:var(--azul-profundo); font-weight:700; font-size:.99rem; margin:0}
@media (max-width:560px){
  .par-item{grid-template-columns:1fr; gap:8px}
  .par-item__flecha{display:none}
  .par-item__bien{padding-left:16px; border-left:3px solid var(--verde)}
}

/* ------------------------------------------------------------------ varios */
.centrado{text-align:center}
.cinta{
  background:linear-gradient(135deg, var(--azul-profundo), var(--azul));
  color:#fff; padding:clamp(40px,6vw,66px) 0;
}
.cinta h2{color:#fff}
.cinta p{color:#dce9f5; max-width:58ch}
.cinta .botonera{justify-content:flex-start}

@media print{
  .cabecera,.pie,.botonera,.saltar{display:none}
  body{font-size:11pt; color:#000}
  a{text-decoration:underline}
}

/* ===========================================================================
   Utilidades de separación y color.
   Existen para no usar atributos style= en el HTML: la política de seguridad
   del sitio bloquea los estilos en línea, y con razón.
   =========================================================================== */
.sep-xs{margin-top:10px}
.sep-s{margin-top:22px}
.sep-m{margin-top:28px}
.sep-l{margin-top:34px}
.sep-xl{margin-top:42px}
.sep-abajo{margin-bottom:28px}
.sep-cero-abajo{margin:0 0 .5em}
.suave{color:var(--texto-suave)}
.normal{font-weight:400}
.verde-claro{color:#9fe870}
.turquesa-claro{color:#7fe3ed}
.botonera--centro{justify-content:center}
.lista-aviso{margin:0; padding-left:1.1em; font-weight:400}
.pie-tabla{text-align:left; margin-bottom:10px; color:var(--texto-suave)}
.cita-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.93rem}

/* --------------------------------------------------- listas de los ejes */
.lista-eje{list-style:none; padding:0; margin:0}
.lista-eje li{
  display:grid; gap:2px; padding:9px 0;
  border-bottom:1px solid var(--borde);
  font-size:.96rem; color:var(--texto-suave); line-height:1.45;
}
.lista-eje li:last-child{border-bottom:0; padding-bottom:0}
.eje-clave{
  font-weight:800; color:var(--azul); letter-spacing:.04em;
  font-size:.82rem; text-transform:uppercase;
}