/* ═══════════════════════════════════════════════════
   oncoFISIO® — Hoja de estilos
   Paleta y tipografía según Manual de Marca 2025.
   (Los textos NO se editan aquí: ver js/contenido.js)
   ═══════════════════════════════════════════════════ */

:root {
  /* Paleta principal — Manual de Marca 2025 */
  --azul-oscuro: #314E71;
  --azul-medio:  #629bbd;
  --celeste:     #b1d1de;
  /* Paleta secundaria */
  --purpura:  #654590;
  --lila:     #c991bc;
  --royal:    #3f5ca3;
  --petroleo: #4c8693;
  --verde:    #68ab6b;
  --amarillo: #f6dd37;
  --naranja:  #c37022;
  /* Derivados funcionales */
  --tinta:      #314E71;
  --texto:      #43536b;   /* gris azulado, contraste AA */
  --texto-suave:#5b6b84;
  --fondo:      #ffffff;
  --crema:      #F2F7FB;
  --niebla:     #E9F1F6;
  --petroleo-palido: #EBF4F6;
  --wa:   #25D366;
  --wa-d: #1DA851;
  --radio: 16px;
  --sombra: 0 4px 20px rgba(49,78,113,.08);
  --sombra-alta: 0 16px 48px rgba(49,78,113,.14);
}

/* ── Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Nunito', system-ui, sans-serif;
  font-size:16px; line-height:1.75; color:var(--texto);
  background:var(--fondo); padding-top:68px;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:none; background:none; cursor:pointer; }
h1,h2,h3,h4 { font-family:'Poppins', system-ui, sans-serif; color:var(--tinta); line-height:1.22; }
h1 { font-size:clamp(30px,5.2vw,52px); font-weight:700; letter-spacing:-.01em; }
h2 { font-size:clamp(24px,3.6vw,38px); font-weight:600; margin-bottom:12px; }
h3 { font-size:clamp(17px,2.2vw,21px); font-weight:600; }
p  { margin-bottom:0; }
.destacado { color:var(--azul-medio); }

/* Accesibilidad */
:focus-visible { outline:3px solid var(--royal); outline-offset:3px; border-radius:4px; }
.solo-lector { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.saltar {
  position:absolute; left:-9999px; top:0; z-index:1200;
  background:var(--azul-oscuro); color:#fff; padding:12px 22px;
  border-radius:0 0 10px 0; font-weight:700;
}
.saltar:focus { left:0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

/* ── Layout ── */
.contenedor { width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
.seccion { padding:56px 0; }
.seccion-crema { background:var(--crema); }
.seccion-niebla { background:var(--niebla); }
.etiqueta {
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:10px;
}
.intro-seccion { max-width:640px; margin-bottom:28px; }

/* ── Cabecera ── */
.cabecera {
  position:fixed; inset:0 0 auto 0; z-index:1000; height:68px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(49,78,113,.1);
}
.cabecera-interna {
  max-width:1120px; margin:0 auto; height:100%; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo-enlace img { height:44px; width:auto; }
.menu { display:flex; align-items:center; gap:4px; list-style:none; }
.menu a {
  display:block; padding:10px 14px; border-radius:10px;
  font-weight:700; font-size:15px; color:var(--tinta);
}
.menu a:hover { background:var(--petroleo-palido); color:var(--petroleo); }
.menu a[aria-current="page"] { color:var(--petroleo); background:var(--petroleo-palido); }
.boton-menu { display:none; }
.cta-cabecera {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:50px; white-space:nowrap;
  background:linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio));
  color:#fff; font-weight:700; font-size:14.5px;
  box-shadow:0 4px 14px rgba(49,78,113,.3);
}

@media (max-width: 900px) {
  .boton-menu {
    display:flex; flex-direction:column; gap:5px;
    width:44px; height:44px; align-items:center; justify-content:center;
    border-radius:10px;
  }
  .boton-menu span { width:22px; height:2.5px; background:var(--tinta); border-radius:2px; transition:.25s; }
  .boton-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .boton-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .boton-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .menu {
    position:fixed; top:68px; left:0; right:0; z-index:999;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid rgba(49,78,113,.12);
    box-shadow:0 20px 40px rgba(49,78,113,.12);
    padding:8px 16px 16px; display:none;
  }
  .menu.abierto { display:flex; }
  .menu a { padding:14px 12px; font-size:16px; }
  .cta-cabecera span.texto-cta { display:none; }
  .cta-cabecera { padding:10px 14px; }
}

/* ── Botones ── */
.boton-wa {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:50px;
  background:linear-gradient(135deg, var(--wa), var(--wa-d));
  color:#fff; font-weight:800; font-size:16px;
  box-shadow:0 8px 26px rgba(37,211,102,.35);
  transition:transform .18s, box-shadow .18s;
}
.boton-wa:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,.42); }
.boton-secundario {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:50px;
  border:2px solid var(--azul-oscuro); color:var(--azul-oscuro);
  font-weight:700; font-size:15px; transition:background .18s, color .18s;
}
.boton-secundario:hover { background:var(--azul-oscuro); color:#fff; }
.nota-cta { font-size:13.5px; color:var(--texto-suave); display:flex; align-items:center; gap:6px; }

/* ── Hero ── */
.hero { background:linear-gradient(180deg, var(--crema) 0%, #fff 100%); overflow:hidden; }
.hero-rejilla {
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px;
  align-items:center; padding:52px 0 60px;
}
.hero-medalla {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--celeste);
  padding:7px 16px; border-radius:50px; margin-bottom:18px;
  box-shadow:var(--sombra); font-size:12.5px; font-weight:800;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--petroleo);
}
.hero-medalla::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--verde); animation:latido 2.2s infinite;
}
@keyframes latido { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero p.bajada { font-size:clamp(16px,2vw,18.5px); margin:16px 0 26px; max-width:560px; }
.hero-acciones { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px; }
.hero-garantias { display:flex; flex-wrap:wrap; gap:10px 22px; }
.garantia { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--texto-suave); }
.garantia svg { color:var(--petroleo); flex-shrink:0; }

.hero-tarjeta {
  background:#fff; border-radius:24px; overflow:hidden;
  box-shadow:var(--sombra-alta); border:1px solid rgba(49,78,113,.08);
}
.hero-tarjeta-foto img,
.hero-tarjeta-foto video { width:100%; height:320px; object-fit:cover; object-position:center 18%; background:#0c1a24; display:block; }
.hero-tarjeta-pie { padding:16px 20px 18px; border-top:4px solid var(--celeste); }
.hero-tarjeta-pie .nombre { font-family:'Poppins',sans-serif; font-weight:600; color:var(--tinta); font-size:16px; }
.hero-tarjeta-pie .rol { font-size:13px; color:var(--texto-suave); margin-top:2px; }
.hero-tarjeta-pie .colegiatura {
  display:inline-block; margin-top:8px; font-size:12px; font-weight:800;
  color:var(--petroleo); background:var(--petroleo-palido);
  padding:4px 12px; border-radius:50px; letter-spacing:.6px;
}

/* ── Cifras ── */
.cifras { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cifra {
  background:#fff; border-radius:var(--radio); padding:22px 16px; text-align:center;
  border-top:4px solid var(--color-cifra, var(--celeste)); box-shadow:var(--sombra);
}
.cifra .numero { font-family:'Poppins',sans-serif; font-size:clamp(26px,3.4vw,36px); font-weight:700; color:var(--tinta); display:block; line-height:1.1; }
.cifra .rotulo { font-size:13px; color:var(--texto-suave); font-weight:700; display:block; margin-top:6px; line-height:1.45; }

/* ── Tarjetas de servicio ── */
.rejilla-servicios { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tarjeta-servicio {
  background:#fff; border-radius:var(--radio); padding:24px 22px;
  border:1px solid rgba(49,78,113,.09); box-shadow:var(--sombra);
  transition:transform .18s, box-shadow .18s;
}
.tarjeta-servicio:hover { transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.icono-servicio {
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  background:color-mix(in srgb, var(--color-servicio) 14%, white);
  color:var(--color-servicio);
}
.tarjeta-servicio h3 { margin-bottom:8px; font-size:17.5px; }
.tarjeta-servicio p { font-size:14.5px; line-height:1.7; }
.tarjeta-servicio .detalle { margin-top:10px; font-size:14.5px; }
/* Colores de servicio */
.color-petroleo { --color-servicio:var(--petroleo); }
.color-lila     { --color-servicio:#a9539b; }   /* lila oscurecido para contraste */
.color-purpura  { --color-servicio:var(--purpura); }
.color-verde    { --color-servicio:#4c8850; }   /* verde oscurecido para contraste */
.color-naranja  { --color-servicio:#a85e1a; }   /* naranja oscurecido para contraste */
.color-royal    { --color-servicio:var(--royal); }

/* ── Lista con checks ── */
.lista-checks { list-style:none; margin-top:20px; display:grid; gap:12px; }
.lista-checks li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; }
.lista-checks .marca-check {
  width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-top:3px;
  background:var(--petroleo-palido); color:var(--petroleo);
  display:flex; align-items:center; justify-content:center;
}

/* ── Proceso ── */
.pasos { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.paso {
  background:#fff; border-radius:var(--radio); padding:24px 18px; text-align:center;
  border:1px solid rgba(49,78,113,.09); box-shadow:var(--sombra);
}
.paso .numero-paso {
  width:48px; height:48px; border-radius:50%; margin:0 auto 14px;
  background:var(--azul-oscuro); color:#fff;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.paso h3 { font-size:16px; margin-bottom:6px; }
.paso p { font-size:13.5px; color:var(--texto-suave); }

/* ── Testimonios ── */
.rejilla-testimonios { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testimonio {
  background:#fff; border-radius:var(--radio); padding:24px 22px;
  border:1px solid rgba(49,78,113,.09); box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.estrellas { color:var(--naranja); display:flex; gap:2px; margin-bottom:12px; }
.testimonio blockquote { font-size:14.5px; line-height:1.8; font-style:italic; flex:1; }
.testimonio footer { margin-top:16px; display:flex; align-items:center; gap:10px; }
.avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--petroleo-palido); color:var(--petroleo);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:600;
}
.testimonio .nombre { font-weight:800; font-size:14px; color:var(--tinta); }
.testimonio .detalle { font-size:12.5px; color:var(--texto-suave); }

/* ── Fotos del centro ── */
.rejilla-fotos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.foto-centro { position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.foto-centro img { width:100%; height:300px; object-fit:cover; }
.foto-rotulo {
  position:absolute; bottom:12px; left:12px;
  background:rgba(255,255,255,.94); border-radius:8px; padding:5px 14px;
  font-size:13px; font-weight:800; color:var(--tinta);
}

/* ── FAQ ── */
.faq-lista { display:grid; gap:12px; max-width:820px; }
.faq-item {
  background:#fff; border:1px solid rgba(49,78,113,.12);
  border-radius:14px; overflow:hidden;
}
.faq-item summary {
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:16px;
  color:var(--tinta); position:relative;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--petroleo); transition:transform .2s;
}
.faq-item[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq-item .respuesta { padding:0 20px 18px; font-size:15px; }

/* ── Bloque contacto / mapa ── */
.rejilla-contacto { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.mapa-marco { border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); position:relative; }
.mapa-marco img { width:100%; height:100%; min-height:320px; object-fit:cover; }
.mapa-boton {
  position:absolute; top:12px; right:12px;
  background:#fff; border-radius:10px; padding:8px 14px;
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:800; color:var(--petroleo);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.fichas-contacto { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ficha {
  background:#fff; border-radius:14px; padding:16px;
  border:1px solid rgba(49,78,113,.1);
}
.ficha .titulo-ficha {
  font-size:11.5px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:5px;
}
.ficha .dato { font-weight:800; color:var(--tinta); font-size:15.5px; }
.ficha .sub { font-size:13.5px; color:var(--texto-suave); margin-top:2px; }
.ficha a.dato:hover { color:var(--petroleo); }

/* ── CTA final ── */
.caja-cta {
  background:linear-gradient(135deg, var(--azul-oscuro) 0%, #3c5f88 60%, var(--petroleo) 100%);
  border-radius:24px; padding:clamp(32px,6vw,64px); text-align:center; color:#fff;
}
.caja-cta h2, .caja-cta p { color:#fff; }
.caja-cta p { opacity:.92; max-width:560px; margin:0 auto 26px; }
.pildoras { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pildora {
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  border-radius:50px; padding:7px 16px; font-size:13px; font-weight:700;
}

/* ── Pie de página ── */
.pie { background:var(--azul-oscuro); color:rgba(255,255,255,.85); padding:52px 0 24px; }
.pie-rejilla { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; }
.pie-logo img { height:60px; width:auto; background:#fff; border-radius:12px; padding:8px 12px; margin-bottom:16px; }
.pie p { font-size:14px; line-height:1.8; }
.pie h4 { color:#fff; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; }
.pie ul { list-style:none; display:grid; gap:9px; }
.pie ul a { font-size:14.5px; color:rgba(255,255,255,.85); }
.pie ul a:hover { color:#fff; text-decoration:underline; }
.pie-redes { display:flex; gap:10px; margin-top:18px; }
.pie-redes a {
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
}
.pie-redes a:hover { background:rgba(255,255,255,.12); }
.pie-legal {
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px; color:rgba(255,255,255,.7); text-align:center; line-height:1.8;
}
.pie-legal a { text-decoration:underline; }

/* ── WhatsApp flotante ── */
.wa-flotante {
  position:fixed; bottom:22px; right:22px; z-index:990;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg, var(--wa), var(--wa-d));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45); color:#fff;
}

/* ── Página interior: cabecera de página ── */
.cabecera-pagina { background:linear-gradient(180deg, var(--crema), #fff); padding:48px 0 36px; }
.cabecera-pagina p { max-width:640px; margin-top:10px; font-size:17px; }

/* ── Responsivo ── */
@media (max-width: 900px) {
  .hero-rejilla { grid-template-columns:1fr; gap:28px; padding:36px 0 44px; }
  .rejilla-servicios, .rejilla-testimonios { grid-template-columns:1fr 1fr; }
  .pasos { grid-template-columns:1fr 1fr; }
  .rejilla-contacto { grid-template-columns:1fr; }
  .pie-rejilla { grid-template-columns:1fr 1fr; }
  .cifras { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .seccion { padding:44px 0; }
  .rejilla-servicios, .rejilla-testimonios, .rejilla-fotos, .fichas-contacto { grid-template-columns:1fr; }
  .boton-wa { width:100%; }
  .hero-tarjeta-foto img,
  .hero-tarjeta-foto video { height:260px; }
  .pie-rejilla { grid-template-columns:1fr; gap:28px; }
  .foto-centro img { height:220px; }
}