/* doctorfugas.cl — hoja de estilos única.
   Los colores y las tipografías NO son una interpretación: se midieron sobre el sitio
   anterior leyendo los estilos computados del navegador, no el CSS. */

/* ------------------------------------------------------------------ fichas */
:root {
  --marino: #02152b;          /* fondo de las bandas oscuras */
  --marino-hondo: #091335;    /* pie */
  --marino-titulo: #0b1e38;   /* títulos sobre blanco */
  --verde: #02ab83;           /* color de marca */
  --verde-oscuro: #019271;
  --dorado: #b2860d;          /* banda del descuento */
  --celeste: #6ec1e4;
  --texto: #333;
  --texto-claro: #fff;
  --whatsapp: #25d366;

  --titulo: "Cairo", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --tarjeta: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --ancho: 1140px;
  --radio: 10px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Los botones "¡Agenda ya!" bajan al formulario: que el salto se vea, no teletransporte. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: #fff;
  /* El sitio anterior desbordaba a lo ancho en móvil (414 px de contenido en una
     pantalla de 390). Aquí no puede pasar. */
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--titulo);
  margin: 0 0 .5em;
  line-height: 1.2;
}

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

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ botones */
.boton {
  display: inline-block;
  font-family: var(--tarjeta);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 4px;
  transition: background-color .18s ease, transform .18s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton--oscuro { background: #000; color: #fff; }
.boton--oscuro:hover { background: #1b1b1b; }
.boton--verde { background: var(--verde); color: #fff; }
/* Sobre el panel verde un botón verde no se ve: el de llamar va en blanco. */
.boton--claro { background: #fff; color: var(--marino); }
.boton--claro:hover { background: #eef6f3; }
.boton__icono { margin-right: 8px; }
/* El botón de llamar lleva el rótulo grande y el número debajo, en pequeño: Google
   necesita el número VISIBLE para poder reemplazarlo por el de reenvío. */
.boton--claro .boton__texto { display: block; }
.boton__numero {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .78;
}
.boton--verde:hover { background: var(--verde-oscuro); }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: grid;
  /* El panel verde arranca más a la izquierda que en el sitio anterior (340 px):
     el mensaje es lo que vende y así entra antes en el ojo. */
  grid-template-columns: 1fr 520px;
  /* El alto lo manda el CONTENEDOR, no la foto. Con la imagen dentro del flujo su alto
     natural ganaba siempre (1177 px en un monitor de 1920) por mucho clamp que se
     pusiera; por eso la foto va posicionada y fuera del flujo. Y es min-height, no
     height: con altura fija el texto del panel se salía de su caja y se pintaba encima
     de la sección siguiente. */
  min-height: clamp(380px, 54vh, 580px);
  overflow: hidden;
  background: #0e2233;
}
/* La foto va como <img> y no como fondo: así puede pedirse con prioridad alta (es lo
   primero que se ve) y lleva sus medidas, que es lo que evita el salto al cargar.
   Se usa el recorte SIN el panel verde: la imagen original lo traía pintado dentro y en
   el móvil aparecía como una franja verde suelta. */
.hero__imagen {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 520px);
  object-fit: cover;
  /* Encuadre por arriba: al acortar el bloque, centrar cortaba la pantalla de la
     cámara, que es lo que hay que ver. */
  object-position: center 28%;
  display: block;
}
/* Con la foto fuera del flujo, la primera columna queda vacía: el panel se manda
   explícitamente a la segunda o se colocaría debajo de la foto. */
.hero__panel { grid-column: 2; }
.hero__panel {
  background: var(--verde);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 32px;
  text-align: center;
  font-family: var(--titulo);
}
.hero__grito { font-size: 1.6rem; font-weight: 700; margin: 0; }
.hero__texto { font-size: 1.15rem; margin: 0; }
.hero__remate { font-size: 1.2rem; font-weight: 700; margin: 0; }
.hero__accion {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;          /* en pantallas estrechas se apilan en vez de desbordar */
  gap: 10px;
  justify-content: center;
}
.hero__accion .boton { padding: 11px 22px; font-size: .95rem; }

/* --------------------------------------------------------------- expertos */
.expertos {
  background: var(--marino) url("../img/Textura-gotas-servicio-doctor-fugas.png") center/auto repeat;
  color: #fff;
  padding: 54px 0 48px;
  text-align: center;
}
.expertos__titulo {
  font-size: clamp(1.9rem, 4.5vw, 2.95rem);
  font-weight: 400;
  margin-bottom: 36px;
}
.ventajas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-bottom: 34px;
}
.ventaja img { margin: 0 auto 14px; width: 100px; height: 100px; }
.ventaja h3 {
  font-family: var(--tarjeta);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.sec { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sec__nota {
  font-family: "Roboto", var(--cuerpo);
  font-size: .75rem;
  color: var(--verde);
  max-width: 640px;
  margin: 0;
}

/* -------------------------------------------------------------- descuento */
.descuento {
  background: var(--dorado);
  padding: 24px 0;
}
.descuento .contenedor {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr auto;
  align-items: center;
  gap: 28px;
}
.descuento__titulo {
  font-size: 1.45rem;
  font-weight: 800;
  color: #000;
  margin: 0 0 6px;
}
.descuento__nota { font-size: .8rem; color: #fff; margin: 0; }
.descuento__acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------- destacados */
.destacados { padding: 46px 0 0; text-align: center; }
.destacados__titulo {
  font-size: clamp(1.9rem, 4.5vw, 2.95rem);
  font-weight: 600;
  color: var(--marino);
  margin-bottom: 28px;
}
.destacados__caja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 430px;
}
.destacados__foto {
  background: #d7d7d7 center/cover no-repeat;
  min-height: 300px;
}
.destacados__texto {
  background: var(--verde);
  color: #fff;
  text-align: left;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.destacados__texto h3 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600;
  color: #000;
  margin: 0;
}
.destacados__texto p { font-size: .95rem; margin: 0; }
.destacados__texto img { width: 116px; height: 33px; }

/* ---------------------------------------------------------------- clientes */
.clientes { padding: 0 0 40px; }
.clientes__banda {
  background: var(--marino);
  color: #fff;
  text-align: center;
  padding: 34px 0;
  margin-bottom: 34px;
}
.clientes__titulo {
  font-size: clamp(1.9rem, 4.5vw, 2.95rem);
  font-weight: 500;
  margin: 0;
}
.clientes__tira {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  flex-wrap: wrap;
  padding-inline: 20px;
}
.clientes__tira img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------- contacto */
.contacto {
  padding: 20px 0 56px;
  text-align: center;
  /* Sin esto el título queda pegado al borde de arriba al llegar desde el botón. */
  scroll-margin-top: 24px;
}
.contacto__titulo {
  font-size: clamp(1.9rem, 4.5vw, 2.95rem);
  font-weight: 600;
  color: var(--marino-titulo);
  margin-bottom: 4px;
}
.contacto__sub {
  font-family: var(--tarjeta);
  font-size: 1.35rem;
  color: var(--verde);
  margin: 0 0 28px;
}
.contacto__formulario { max-width: 760px; margin-inline: auto; text-align: left; }

/* --------------------------------------------------------------------- pie */
.pie {
  background: var(--marino-hondo);
  color: #fff;
  padding: 44px 0 0;
  font-size: .9rem;
}
.pie .contenedor {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.pie h3 {
  font-family: var(--tarjeta);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__logo { width: 150px; }
.pie__dato { margin: 0 0 8px; }
.pie__copyright {
  margin-top: 36px;
  padding: 14px 0;
  font-size: .78rem;
  color: #b9c0cc;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------- flotante wa */
.wasap {
  position: fixed;
  right: 20px;      /* 28/09/2026: WhatsApp a la derecha y el chat de HubSpot a la izquierda */
  bottom: 20px;
  z-index: 40;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.wasap svg { width: 34px; height: 34px; fill: #fff; }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 1024px) {
  .ventajas { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .hero { grid-template-columns: 1fr 420px; }
  .hero__imagen { width: calc(100% - 420px); }
  .pie .contenedor { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;   /* en vertical manda el contenido */
  }
  /* Apilados: la foto vuelve al flujo, encima del panel. */
  .hero__imagen { position: static; width: 100%; height: auto; }
  .hero__panel { grid-column: auto; }
  /* En vertical la foto se queda a 4:3: en 16:10 la cámara salía cortada por abajo. */
  .hero__imagen { aspect-ratio: 4 / 3; height: auto; }
  .descuento .contenedor { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .destacados__caja { grid-template-columns: 1fr; }
  .destacados__texto { padding: 32px 24px; }
  .ventajas { grid-template-columns: repeat(2, 1fr); }
  .clientes__tira { gap: 26px; }
  .clientes__tira img { width: 110px; }
  .pie .contenedor { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .ventajas { grid-template-columns: 1fr; }
}

/* El chat de HubSpot se coloca solo abajo a la derecha, donde ahora va WhatsApp.
   Su contenedor lo inyecta su propio script, así que hay que ganarle en especificidad:
   de ahí el !important, que aquí no es pereza sino la única forma. */
#hubspot-messages-iframe-container,
#hubspot-messages-iframe-container.widget-align-right {
  left: 20px !important;
  right: auto !important;
}

/* ===================================================================
   PÁGINAS DE TEXTO (silos y artículos)
   La portada es de bloques; estas son de leer. Se añaden el 16/10/2026
   al reconstruir las 24 páginas que faltaban del WordPress viejo.
   =================================================================== */

/* Banda del título, con el marino de la marca. Sustituye al <h1> suelto que
   traía el sitio anterior, que empezaba la página sin nada que la encabezara. */
.cabecera-pagina { background: var(--marino); color: var(--texto-claro); padding: 48px 0 40px; }
.cabecera-pagina h1 { font-family: var(--titulo); font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15; margin: 0; }
.cabecera-pagina .ruta { font-size: .85rem; opacity: .75; margin: 0 0 10px; }
.cabecera-pagina .ruta a { color: var(--texto-claro); }

/* 68 caracteres es el ancho donde el ojo no se pierde al saltar de línea.
   Más ancho se lee peor aunque quepa, y estas páginas son de 9.000 caracteres. */
.prosa { max-width: 68ch; margin: 0 auto; padding: 40px 20px 56px; font-size: 1.02rem; line-height: 1.75; color: var(--texto); }
.prosa > h2 { font-family: var(--titulo); color: var(--marino-titulo); font-size: 1.5rem;
  line-height: 1.25; margin: 38px 0 14px; }
.prosa > h3, .prosa h3 { font-family: var(--titulo); color: var(--marino-titulo); font-size: 1.15rem; margin: 26px 0 8px; }
.prosa h3 b { font-weight: inherit; }   /* venían con <b> dentro del <h3> */
.prosa p { margin: 0 0 16px; }
.prosa b, .prosa strong { color: var(--marino-titulo); }
.prosa a { color: var(--verde-oscuro); text-decoration: underline; text-underline-offset: 2px; }
.prosa a:hover { color: var(--verde); }
.prosa ul, .prosa ol { margin: 0 0 16px; padding-left: 22px; }
.prosa li { margin-bottom: 7px; }
/* ⚠️ `width:100%` aquí era un error: estiraba los ICONOS de 200 px a los 680 del
   texto, y un icono al 340 % se ve como una mancha de color gigante (pasó en
   /servicios/, con 13 iconos). Con `width:auto` manda el tamaño real del archivo y
   `max-width` solo impide que una foto grande se salga. `height:auto` con el
   width/height del HTML sigue evitando el salto al cargar. */
.prosa img { display: block; width: auto; height: auto; max-width: 100%;
  border-radius: var(--radio); margin: 26px 0; }
/* Las fotos de contenido (anchas) sí ocupan todo el ancho de lectura. */
.prosa img[width]:not([width="200"]) { width: 100%; }
/* Tablas largas (las de la política de cookies): se desplazan dentro de su caja en
   vez de empujar la página entera a lo ancho. */
.prosa table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 20px 0; display: block; overflow-x: auto; }
.prosa th, .prosa td { border: 1px solid #e0e7ec; padding: 8px 10px; text-align: left; vertical-align: top; }
.prosa th { background: #f4f7f9; font-family: var(--tarjeta); }
.prosa figure { margin: 26px 0; }

/* Listado de artículos del silo. Lo generaba un plugin que ya no está: ahora se
   escribe en la página, que además es un enlace interno real para Google. */
.silo { background: #f4f7f9; padding: 44px 0; }
.silo__titulo { font-family: var(--titulo); color: var(--marino-titulo); text-align: center;
  font-size: 1.4rem; margin: 0 0 24px; }
.silo__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; list-style: none; margin: 0; padding: 0; }
.silo__lista a { display: block; background: #fff; border-radius: var(--radio); padding: 16px 18px;
  text-decoration: none; color: var(--marino-titulo); font-family: var(--tarjeta);
  font-weight: 600; line-height: 1.4; box-shadow: 0 1px 3px rgba(2,21,43,.09);
  transition: box-shadow .15s, transform .15s; }
.silo__lista a:hover { box-shadow: 0 6px 18px rgba(2,21,43,.14); transform: translateY(-2px); }

/* Llamada final, para que una página de lectura no termine sin salida. */
.cierre-pagina { background: var(--verde); color: var(--texto-claro); text-align: center; padding: 40px 20px; }
.cierre-pagina h2 { font-family: var(--titulo); font-size: 1.45rem; margin: 0 0 8px; }
.cierre-pagina p { margin: 0 0 18px; }
.cierre-pagina .hero__accion { justify-content: center; }

/* ===================================================================
   CABECERA (16/10/2026). Repuesta cuando las 7 páginas del menú
   existieron de verdad; antes llevaba a redirecciones a la portada.
   =================================================================== */
.cab { background: #fff; border-bottom: 1px solid #e6ecf1; position: sticky; top: 0; z-index: 40; }
.cab__fila { display: flex; align-items: center; gap: 18px; padding: 10px 20px; }
.cab__logo { flex: none; line-height: 0; }
.cab__logo img { width: auto; height: 46px; }
.cab__nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.cab__nav a { font-family: var(--tarjeta); font-size: .9rem; font-weight: 600; color: var(--marino-titulo);
  text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.cab__nav a:hover { color: var(--verde-oscuro); border-bottom-color: var(--verde); }
.cab__tel { display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--verde); color: var(--texto-claro); font-family: var(--tarjeta); font-weight: 700;
  font-size: .9rem; text-decoration: none; padding: 9px 15px; border-radius: 999px; }
.cab__tel:hover { background: var(--verde-oscuro); }

/* El menú del celular es un <details>: abre y cierra sin una línea de JavaScript.
   En un sitio al que se llega con una fuga en casa, el menú no puede depender de
   que cargue un script. */
.cab__movil { display: none; margin-left: auto; }
.cab__movil summary { list-style: none; cursor: pointer; width: 48px; height: 48px;
  display: grid; align-content: center; gap: 5px; justify-items: center; }
.cab__movil summary::-webkit-details-marker { display: none; }
.cab__movil summary span { display: block; width: 24px; height: 2px; background: var(--marino); border-radius: 2px; }
.cab__movil[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__movil[open] summary span:nth-child(2) { opacity: 0; }
.cab__movil[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cab__movil summary span { transition: transform .15s, opacity .15s; }
.cab__movil nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-bottom: 1px solid #e6ecf1; display: grid; padding: 6px 0 10px; box-shadow: 0 10px 20px rgba(2,21,43,.08); }
.cab__movil nav a { font-family: var(--tarjeta); font-weight: 600; color: var(--marino-titulo);
  text-decoration: none; padding: 14px 20px; border-top: 1px solid #f0f4f7; }
.cab__movil nav a:last-child { color: var(--verde-oscuro); }

@media (max-width: 980px) {
  .cab__nav { display: none; }
  .cab__movil { display: block; }
  .cab__fila { position: relative; }
  .cab__tel span.gads-llamar { display: none; }   /* solo el icono, para que quepa */
  .cab__tel { padding: 11px 14px; }
}