/* Salud en Casa Digital — sistema visual tomado del brandbook SECD 2026 */

:root{
  --verde:#003628;
  --verde-2:#0A4A39;
  --verde-3:#012A1F;
  --fluor:#E0FF00;
  --hueso:#F2F2F2;
  --negro:#241F20;
  --cielo:#A9D9D9;
  --zanahoria:#F15A24;
  --texto-claro:#F2F2F2;
  --texto-claro-2:#C9D6CF;
  --texto-oscuro:#241F20;
  --texto-oscuro-2:#4A5A52;
  --display:"Saira","Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --texto:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1120px;
  --corte:16px;
  color-scheme:dark;
}

*,*::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-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--verde);
  color:var(--texto-claro);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit}

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

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding-inline:22px}

/* ---------- tipografía ---------- */

h1,h2,h3,.display{
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  font-stretch:112%;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(38px,7.4vw,68px)}
h2{font-size:clamp(29px,4.6vw,46px);margin-bottom:20px}
h3{font-size:clamp(20px,2.4vw,25px);line-height:1.02;margin-bottom:9px}

p{margin:0 0 16px;max-width:62ch}
p:last-child{margin-bottom:0}

.entradilla{
  font-size:clamp(18px,2.1vw,21px);
  line-height:1.5;
  color:var(--texto-claro-2);
  max-width:54ch;
}

.claro .entradilla{color:var(--texto-oscuro-2)}

strong{font-weight:700}

/* enlaces dentro de texto corrido */
.destacado{
  color:var(--fluor);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:rgba(224,255,0,.45);
}
.destacado:hover{text-decoration-color:var(--fluor)}
.claro .destacado{color:#1E6B4F;text-decoration-color:rgba(30,107,79,.4)}
.claro .destacado:hover{text-decoration-color:#1E6B4F}
.cielo .destacado{color:var(--verde);text-decoration-color:rgba(0,54,40,.45)}
.cielo .destacado:hover{text-decoration-color:var(--verde)}

/* ---------- botones con el corte de la marca ---------- */

.boton{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:13px 28px;
  font-family:var(--texto);
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  color:var(--negro);
  cursor:pointer;
  transition:transform .18s ease;
}
.boton::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--fluor);
  clip-path:polygon(var(--corte) 0,100% 0,100% calc(100% - var(--corte)),calc(100% - var(--corte)) 100%,0 100%,0 var(--corte));
  transition:background .18s ease;
}
.boton:hover{transform:translateY(-2px)}
.boton:hover::before{background:#EEFF4D}

.boton.hueco{color:var(--fluor)}
.boton.hueco::before{background:transparent;box-shadow:inset 0 0 0 2px var(--fluor)}
.boton.hueco:hover::before{background:rgba(224,255,0,.12)}

.claro .boton.hueco{color:var(--verde)}
.claro .boton.hueco::before{box-shadow:inset 0 0 0 2px var(--verde)}
.claro .boton.hueco:hover::before{background:rgba(0,54,40,.08)}

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

/* ---------- barra superior ---------- */

.barra{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--verde-3);
  border-bottom:1px solid rgba(169,217,217,.18);
}
.barra .envoltura{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:70px;
  flex-wrap:wrap;
  padding-block:10px;
}
.marca{display:flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;color:var(--fluor);flex-shrink:0}
.marca svg{width:34px;height:auto}
.marca b{
  font-family:var(--display);font-style:italic;font-weight:800;font-stretch:112%;
  text-transform:uppercase;font-size:16px;line-height:.95;color:var(--texto-claro);letter-spacing:.01em;
  max-width:13ch;
}
.menu-nav{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  list-style:none;margin:0;padding:0;
  font-size:15px;font-weight:600;
}
.menu-nav a{
  display:inline-flex;align-items:center;min-height:40px;
  text-decoration:none;color:var(--texto-claro-2);
}
.menu-nav a:hover{color:var(--fluor)}
.menu-nav a[aria-current="page"]{color:var(--fluor)}
.barra .acciones{margin-left:auto}

@media (max-width:860px){
  .barra{position:static}
  .barra .envoltura{min-height:0;gap:10px 12px;padding-block:12px}
  .marca{order:1}
  .marca svg{width:30px}
  .marca b{font-size:14px;max-width:13ch}
  .barra .acciones{order:2;margin-left:auto}
  .barra .acciones .boton{padding:11px 18px;font-size:14.5px;min-height:46px}
  .menu-nav{
    order:3;width:100%;
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:20px;scrollbar-width:none;
  }
  .menu-nav::-webkit-scrollbar{display:none}
  .menu-nav li{flex:0 0 auto}
  .menu-nav a{min-height:34px}
}
@media (max-width:460px){
  .marca b{display:none}
}

/* ---------- secciones ---------- */

section{padding-block:clamp(54px,7vw,88px);position:relative}

.claro{background:var(--hueso);color:var(--texto-oscuro)}
.claro h1,.claro h2,.claro h3{color:var(--verde)}

.cielo{background:var(--cielo);color:var(--verde)}
.cielo h2,.cielo h3{color:var(--verde)}
.cielo p{color:#113F31}

.patron{
  background-color:var(--verde);
  background-image:url("img/patron-s.svg");
  background-size:260px auto;
}

/* separador: el corte de la marca, no una línea cualquiera */
section + section:not(.claro):not(.cielo)::before{
  content:"";
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:min(760px,88%);height:2px;
  background:linear-gradient(90deg,transparent,rgba(169,217,217,.4) 20%,rgba(169,217,217,.4) 80%,transparent);
}

.marcador{
  display:block;
  width:26px;height:26px;
  margin-bottom:14px;
  color:var(--fluor);
}
.claro .marcador,.cielo .marcador{color:var(--verde)}

/* ---------- portada ---------- */

.portada{
  background-color:var(--verde);
  background-image:url("img/patron-s.svg");
  background-size:300px auto;
  padding-block:clamp(56px,9vw,104px);
  border-bottom:3px solid var(--fluor);
}
.portada h1{color:var(--fluor);max-width:16ch}
.portada .entradilla{margin-top:20px}
.portada .acciones{margin-top:30px}

.bandera{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--zanahoria);color:var(--negro);
  font-weight:800;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 15px;margin-bottom:20px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}

.firma{
  margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(169,217,217,.28);
  display:flex;flex-wrap:wrap;gap:10px 30px;
  font-size:15px;color:var(--texto-claro-2);
}
.firma span{display:inline-flex;align-items:center;gap:8px}

/* ---------- rejillas y fichas ---------- */

.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:20px;
  list-style:none;margin:26px 0 0;padding:0;
}

.ficha{
  background:var(--verde-2);
  padding:26px 24px 28px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.ficha h3{color:var(--fluor);margin-bottom:10px}
.ficha p{color:var(--texto-claro-2);font-size:16px}

.claro .ficha{background:#FFFFFF}
.claro .ficha h3{color:var(--verde)}
.claro .ficha p{color:var(--texto-oscuro-2)}

.cielo .ficha{background:#C4E5E5}
.cielo .ficha h3{color:var(--verde)}
.cielo .ficha p{color:#113F31}

.doble{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
  margin-top:26px;
}

/* ---------- pasos numerados (sí es una secuencia) ---------- */

.pasos{list-style:none;margin:30px 0 0;padding:0;counter-reset:paso;display:grid;gap:18px}
.pasos li{
  counter-increment:paso;
  display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;
}
.pasos li::before{
  content:counter(paso);
  font-family:var(--display);font-style:italic;font-weight:800;font-stretch:112%;
  font-size:34px;line-height:1;
  color:var(--verde);background:var(--fluor);
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.pasos h3{margin-bottom:7px}
.pasos p{font-size:16px;color:var(--texto-claro-2)}
.claro .pasos p{color:var(--texto-oscuro-2)}

/* ---------- lista con el corte de la marca ---------- */

.lista{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;max-width:60ch}
.lista li{position:relative;padding-left:28px;font-size:16.5px}
.lista li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:13px;height:13px;background:var(--fluor);
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.claro .lista li::before,.cielo .lista li::before{background:var(--verde)}

/* ---------- datos de contacto ---------- */

.datos{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:620px}
.datos li{
  display:grid;grid-template-columns:132px 1fr;gap:6px 16px;
  padding-bottom:12px;border-bottom:1px solid rgba(169,217,217,.2);
  font-size:16px;
}
.datos .et{
  font-family:var(--display);font-style:italic;font-weight:800;font-stretch:112%;
  text-transform:uppercase;font-size:15px;color:var(--fluor);letter-spacing:.02em;
}
.claro .datos li{border-bottom-color:rgba(0,54,40,.16)}
.claro .datos .et{color:var(--verde)}
@media (max-width:560px){.datos li{grid-template-columns:1fr}}

/* ---------- preguntas ---------- */

.preguntas{margin-top:26px;max-width:760px}
.preguntas details{
  border-bottom:1px solid rgba(169,217,217,.22);
}
.claro .preguntas details{border-bottom-color:rgba(0,54,40,.16)}
.preguntas summary{
  cursor:pointer;list-style:none;
  padding:18px 34px 18px 0;position:relative;
  font-weight:700;font-size:17.5px;
  min-height:44px;display:flex;align-items:center;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{
  content:"";position:absolute;right:4px;top:50%;
  width:12px;height:12px;margin-top:-9px;
  border-right:2.5px solid var(--fluor);border-bottom:2.5px solid var(--fluor);
  transform:rotate(45deg);transition:transform .2s ease;
}
.claro .preguntas summary::after{border-color:var(--verde)}
.preguntas details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.preguntas p{padding-bottom:20px;color:var(--texto-claro-2);font-size:16.5px}
.claro .preguntas p{color:var(--texto-oscuro-2)}

/* ---------- llamada final ---------- */

.cierre{
  background-color:var(--verde-3);
  background-image:url("img/patron-s.svg");
  background-size:230px auto;
  border-top:3px solid var(--fluor);
}
.cierre h2{color:var(--fluor);max-width:18ch}
.cierre .acciones{margin-top:26px}

/* ---------- pie ---------- */

footer{background:var(--negro);padding-block:52px 34px;font-size:15px}
footer .columnas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;
}
footer h3{font-size:17px;color:var(--fluor);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--texto-claro-2)}
footer li{padding-block:4px}
footer a:hover{color:var(--fluor);text-decoration:underline}
footer li{color:var(--texto-claro-2)}
footer .marca-pie{display:flex;align-items:center;gap:11px;color:var(--fluor);margin-bottom:14px}
footer .marca-pie svg{width:40px}
footer p{color:var(--texto-claro-2);font-size:14.5px;max-width:34ch}
.legal{
  margin-top:34px;padding-top:18px;
  border-top:1px solid rgba(242,242,242,.14);
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:14px;color:#9AA8A0;
}

/* ---------- aviso ---------- */

.aviso{
  font-size:15px;color:var(--texto-claro-2);
  border-left:3px solid var(--cielo);padding-left:14px;max-width:58ch;
}
.claro .aviso{color:var(--texto-oscuro-2);border-left-color:var(--verde)}

.salto{
  position:absolute;left:12px;top:-60px;z-index:60;
  background:var(--fluor);color:var(--negro);
  font-weight:700;font-size:15px;text-decoration:none;
  padding:12px 18px;transition:top .15s ease;
}
.salto:focus{top:12px}

/* ---------- fotos reales ---------- */

.con-foto{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(26px,4vw,54px);
  align-items:center;
}
@media (max-width:900px){.con-foto{grid-template-columns:1fr;gap:30px}}

.foto{width:100%;max-width:370px;margin-inline:auto}
/* en portada la foto se alinea al borde derecho, como el botón de la barra */
.portada .foto{margin-inline:auto 0}
section .con-foto .video{margin-inline:auto 0}
.foto img{
  width:100%;
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
}

.con-retrato{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:clamp(24px,4vw,46px);
  align-items:start;
}
@media (max-width:760px){.con-retrato{grid-template-columns:1fr}}
.con-retrato .foto{max-width:290px;margin-inline:0}

.video{width:100%;max-width:470px}
.video video{
  width:100%;height:auto;display:block;background:var(--verde-3);
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
}
.pie-foto{
  margin-top:12px;font-size:14.5px;color:var(--texto-claro-2);max-width:40ch;
}
.claro .pie-foto,.cielo .pie-foto{color:var(--texto-oscuro-2)}

/* ---------- planes de prueba gratis ---------- */

.planes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
  gap:20px;margin:28px 0 0;padding:0;list-style:none;
}
.plan{
  background:var(--verde-2);
  padding:28px 26px 30px;
  display:flex;flex-direction:column;
  clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);
}
.plan h3{color:var(--fluor)}
.plan p{color:var(--texto-claro-2);font-size:16px}
.plan .boton{margin-top:auto;align-self:flex-start}
.plan .lista{margin-top:14px;margin-bottom:22px}
.plan .lista li{font-size:15.5px;color:var(--texto-claro-2)}

.claro .plan{background:#FFFFFF}
.claro .plan h3{color:var(--verde)}
.claro .plan p,.claro .plan .lista li{color:var(--texto-oscuro-2)}
.claro .plan .lista li::before{background:var(--verde)}

.cielo .plan{background:#C4E5E5}
.cielo .plan h3{color:var(--verde)}
.cielo .plan p,.cielo .plan .lista li{color:#113F31}

.claro .video video,.cielo .video video{background:var(--hueso)}
.cielo .aviso{color:#113F31;border-left-color:var(--verde)}

#planes{scroll-margin-top:96px}
@media (max-width:860px){#planes{scroll-margin-top:16px}}

/* el video es vertical: se muestra más angosto para no desbordar la sección */
.video{max-width:330px}
.video video{aspect-ratio:662/834;object-fit:cover}

/* dentro del cuerpo, el texto arranca arriba junto a la foto o el video */
section .con-foto{align-items:start}