/* =========================================================
   Centro de Especialidades de la Mujer — Dra. Brenda Torres
   Hoja de estilos compartida
   ========================================================= */

:root{
  /* ===== V2 — paleta y estilo extraídos EN VIVO (DevTools) de
     ginecologaoncologa.com, no aproximados. Los NOMBRES de variable
     (--teal-*, --pink-*, etc.) se conservan para que todo el sistema de
     componentes (botones, tarjetas, chips, iconos...) se re-pinte solo con
     este bloque; lo que cambia es el valor real detrás de cada nombre.

     Azul-gris "secundario" real del sitio de referencia: #a4b3cb
     (bg-primary/bg-secondary, textos de nav, subtítulos, botón de teléfono).
     Rosa empolvado real del sitio de referencia: #dda29f
     (barra superior, footer, títulos de acento, textos "Médico certificado"). */
  --teal-700:#7c8699;
  --teal-600:#8b98ad;
  --teal-500:#a4b3cb;
  --teal-400:#bbc6d8;
  --teal-100:#dae0ea;
  --teal-50:#f1f4f7;

  --pink-700:#a67977;
  --pink-600:#dda29f;
  --pink-500:#e6b4b1;
  --pink-400:#eecbc9;
  --pink-100:#faebea;
  --pink-50:#fdf5f4;

  --ink-900:#33404f;
  --ink-700:#4b5866;
  --ink-500:#848e9f;
  --ink-300:#aab3bf;

  --cream-50:#ffffff;
  --cream-100:#f4f6f9;
  --white:#ffffff;

  --whatsapp:#25d366;
  --whatsapp-dark:#1ea952;

  /* Tipografía real de ginecologaoncologa.com: Titillium Web (700) en todos
     los títulos, Roboto en cuerpo de texto — confirmado vía getComputedStyle
     sobre h1/h2/body en el sitio en vivo. */
  --font-display:'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* El sitio de referencia usa botones casi cuadrados (border-radius: 3px
     medido en vivo) en vez de píldora — variables de radio reducidas en
     consecuencia; --radius-pill se conserva solo para chips/badges. */
  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:18px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px rgba(51,64,79,.08);
  --shadow-md:0 10px 30px rgba(51,64,79,.12);
  --shadow-lg:0 20px 50px rgba(51,64,79,.16);

  --container:1220px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-700);
  background:var(--cream-50);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
/* Titillium Web a peso 700 — coincide con el font-weight computado real
   (700) de h1/h2 en ginecologaoncologa.com; ahí la tipografía sans-serif en
   negrita (no un serif a peso normal) es la que da el carácter de marca. */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);line-height:1.15;margin:0 0 .5em;font-weight:700;}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
/* Los títulos de sección usan el rosa empolvado real del sitio de referencia
   (#dda29f, medido en "Especialista en Ginecología..." y "Nuestras clientas
   opinan"), tal como allí sobre fondo blanco. */
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--pink-600);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{padding:64px 0;}
@media(max-width:768px){ section{padding:44px 0;} }

/* Avada's kicker/eyebrow text is dark neutral, not colored — only the serif
   headline below it (h2) carries the brand magenta. Matches e.g. "WHY NOT
   BOOK A" (dark) sitting above "class or workshop" (magenta serif). */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;color:var(--ink-700);margin-bottom:12px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--pink-500);display:inline-block;}
.section-head{max-width:720px;margin:0 auto 32px;text-align:center;}
.section-head p{color:var(--ink-500);font-size:1.05rem;}
/* Teal is reserved for lines/separators/icon strokes — never for background washes,
   so alternating section backgrounds use a neutral cream tone instead of teal. */
.section-head::after{content:'';display:block;width:56px;height:2px;background:var(--teal-400);margin:16px auto 0;}
.bg-tint{background:var(--cream-100);}
/* Avada's own equivalent sections (e.g. "qualified instructors") are plain
   white — they never wash a whole content section in a flat accent color.
   Differentiation there comes from the hills divider + typography, not a
   color block, so this is now the same white/cream as everything else. */
.bg-pink-tint{background:var(--white);}
.bg-dark{background:var(--ink-900);color:#cfe0e6;}
.bg-dark h2,.bg-dark h3{color:#fff;}

/* ---------- Full-bleed CTA band ----------
   ginecologaoncologa.com usa una franja azul-gris sólida (bg-secondary,
   #a4b3cb medido en vivo) con una textura de líneas onduladas muy sutil de
   fondo — no un degradado rosa. Replicado aquí con SVG inline en vez de
   imagen para mantener la carpeta V2 autocontenida. */
.cta-wrap{
  position:relative;overflow:hidden;
  background:var(--teal-500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300'%3E%3Cpath d='M0 60 C200 120 300 0 500 60 S800 120 800 60' stroke='rgba(255,255,255,0.12)' stroke-width='2' fill='none'/%3E%3Cpath d='M0 160 C200 220 300 100 500 160 S800 220 800 160' stroke='rgba(255,255,255,0.10)' stroke-width='2' fill='none'/%3E%3Cpath d='M0 260 C200 320 300 200 500 260 S800 320 800 260' stroke='rgba(255,255,255,0.08)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size:800px 300px;
  padding:70px 0 78px;margin:0;
}
.cta-wrap .cta-banner{position:relative;z-index:1;}

/* ---------- Buttons ---------- */
/* Botones casi cuadrados (3px medidos en vivo en .btn-primary/.btn-white de
   ginecologaoncologa.com) en vez de píldora, sin mayúsculas forzadas —
   coincide con su propia tipografía de botón (Roboto 700, sin uppercase). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.9rem;text-transform:none;letter-spacing:.01em;cursor:pointer;border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--pink-600);color:#fff;box-shadow:0 10px 24px rgba(221,162,159,.4);}
.btn-primary:hover{background:var(--pink-700);}
.btn-outline{background:transparent;border-color:currentColor;color:var(--ink-900);}
.btn-outline:hover{background:var(--ink-900);color:#fff;}
.btn-white{background:#fff;color:var(--pink-600);}
.btn-white:hover{background:var(--pink-50);}
.btn-whatsapp{background:var(--whatsapp);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.35);}
.btn-whatsapp:hover{background:var(--whatsapp-dark);}
.btn-teal{background:#fff;color:var(--teal-700);border-color:var(--teal-500);}
.btn-teal:hover{background:var(--teal-500);color:#fff;}
.btn-sm{padding:10px 20px;font-size:.85rem;}
.btn-block{width:100%;}
.icon-16{width:16px;height:16px;flex:none;}
.icon-20{width:20px;height:20px;flex:none;}

/* ---------- Sticky head wrapper (topbar + header) ----------
   En escritorio, la barra superior y el menú viajan juntos pegados arriba
   (un solo elemento sticky que envuelve a ambos, así no hace falta calcular
   la altura exacta de la topbar para desplazar el header). En móvil/tablet
   (<=1080px, mismo punto de quiebre donde el menú pasa a modo hamburguesa)
   la barra superior se oculta por completo y solo el menú queda pegado. Las
   páginas sin topbar (p. ej. Aviso de Privacidad) no usan este wrapper y el
   propio header conserva su sticky individual. */
.sticky-head{position:sticky;top:0;z-index:1000;}
.sticky-head header.site-header{position:static;}
@media(max-width:1080px){
  .sticky-head .topbar{display:none;}
}

/* ---------- Topbar ---------- */
/* Barra superior en rosa empolvado sólido — el color y la posición exactos
   (franja fija arriba del header blanco, con teléfono/dirección/horario)
   medidos en vivo en ginecologaoncologa.com. */
.topbar{
  background:var(--pink-600);color:#fff;font-size:.85rem;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.topbar a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:600;}
.topbar a:hover{color:var(--pink-100);}
.topbar .topbar-keyword{color:#fdf1f0;font-weight:500;}
.topbar .topbar-info{display:flex;align-items:center;gap:7px;color:#fdf1f0;}
.topbar strong{color:#fff;}
.topbar-left > * + *,.topbar-right > * + *{padding-left:18px;border-left:1px solid rgba(255,255,255,.35);}
@media(max-width:900px){.topbar-left > * + *{border-left:none;padding-left:0;}}
@media(max-width:900px){
  .topbar .topbar-info{display:none;}
}
@media(max-width:600px){
  .topbar .topbar-keyword{display:none;}
  .topbar .container{justify-content:center;}
}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(51,64,79,.06);
  transition:box-shadow .2s ease;
}
header.site-header.scrolled{box-shadow:0 8px 24px rgba(51,64,79,.08);}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;}
/* Ancho fijo (no alto) para que el logo real, más ancho que alto, no se
   dispare de tamaño: se limita a 180px de ancho y la altura se ajusta sola
   manteniendo su proporción. */
.brand img{width:180px;max-width:100%;height:auto;}
@media(max-width:560px){.brand img{width:150px;}}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-family:var(--font-display);font-size:1.05rem;color:var(--ink-900);}
.brand-text span{font-size:.72rem;color:var(--teal-600);font-weight:600;letter-spacing:.04em;}

nav.main-nav{display:flex;align-items:center;gap:6px;}
nav.main-nav > ul{display:flex;align-items:center;gap:2px;}
nav.main-nav a.nav-link{
  padding:10px 14px;border-radius:var(--radius-pill);font-weight:600;font-size:.94rem;color:var(--ink-700);
  display:flex;align-items:center;gap:6px;
}
nav.main-nav a.nav-link{border-bottom:2px solid transparent;}
nav.main-nav a.nav-link:hover{color:var(--teal-700);border-bottom-color:var(--teal-500);}
.has-dropdown{position:relative;}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;background:#fff;min-width:280px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s ease;
}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:flex;flex-direction:column;padding:10px 14px;border-radius:10px;gap:2px;}
.dropdown a:hover{background:var(--pink-50);}
.dropdown a strong{font-size:.92rem;color:var(--ink-900);}
.dropdown a small{color:var(--ink-500);font-size:.78rem;}
.header-cta{display:flex;align-items:center;gap:10px;}
/* Copia de Llamar/Agendar cita que vive DENTRO del cajón del menú móvil —
   oculta en escritorio; se muestra solo en el punto de quiebre móvil, para
   que la barra fija en móvil solo tenga logo + hamburguesa (ver abajo). */
.header-cta--mobile{display:none;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:26px;height:3px;background:var(--ink-900);margin:5px 0;border-radius:3px;}
.nav-close{display:none;position:absolute;top:18px;right:20px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;}
.nav-close span{position:absolute;top:50%;left:50%;width:22px;height:3px;background:var(--ink-900);border-radius:3px;}
.nav-close span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.nav-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}

@media(max-width:1080px){
  nav.main-nav{position:fixed;inset:0;width:100%;height:100vh;background:#fff;
    flex-direction:column;align-items:stretch;padding:100px 26px 40px;
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;overflow-y:auto;z-index:1000;}
  nav.main-nav.open{opacity:1;visibility:visible;}
  nav.main-nav > ul{flex-direction:column;align-items:stretch;gap:4px;}
  nav.main-nav a.nav-link{padding:14px 16px;}
  .dropdown{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;padding:0 0 0 14px;min-width:0;}
  .has-dropdown.open .dropdown{display:flex;flex-direction:column;}
  .hamburger{display:block;}
  .nav-close{display:block;}
  .nav-overlay{position:fixed;inset:0;background:rgba(28,42,50,.4);opacity:0;visibility:hidden;transition:.2s;z-index:999;}
  .nav-overlay.open{opacity:1;visibility:visible;}
  /* Barra fija en móvil = solo logo + hamburguesa: el header-cta de
     escritorio (Llamar/Agendar cita junto al menú) se oculta por completo
     aquí, y su equivalente vive dentro del cajón del menú (header-cta--mobile). */
  .nav-wrap > .header-cta{display:none;}
  .header-cta--mobile{
    display:flex;flex-direction:column;gap:10px;
    margin-top:24px;padding-top:20px;border-top:1px solid rgba(51,64,79,.1);
  }
  .header-cta--mobile .btn{width:100%;}
  /* "Solo logo + hamburguesa" en la barra: el texto junto al logo (nombre +
     especialidad) también se oculta aquí, no solo en phones muy angostos. */
  .brand-text{display:none;}
  /* Barra más delgada en móvil: menos padding vertical alrededor del logo. */
  .nav-wrap{padding:8px 0;}
  /* El logo recortado no trae aire propio a la izquierda, así que en la
     barra angosta de móvil (logo + hamburguesa) se le da un empujón extra
     además del padding del container, para que no se sienta pegado al borde. */
  .brand{padding-left:6px;}
}

/* ---------- Hero ----------
   Split layout: text on a clean light background, photo on the other side.
   Both columns are forced to equal visual weight the same way as .split
   (row stretches to the tallest column, media fills it with object-fit:cover),
   so there is never a mismatch between a long headline and a short photo. */
.hero{
  position:relative;overflow:hidden;
  background:var(--cream-50);
}
.hero .container{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:stretch;padding:28px 0 40px;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:24px;padding:20px 0 32px;}}
.hero-content{display:flex;flex-direction:column;justify-content:center;}
.hero .eyebrow::before{background:var(--pink-500);}
.hero h1{color:var(--ink-900);font-size:clamp(1.9rem,3.6vw,2.7rem);}
.hero h1 em{font-style:italic;color:var(--pink-600);}
.hero p.lead{font-size:1.05rem;color:var(--ink-500);max-width:520px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(164,179,203,.3);}
.hero-badge{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--ink-700);font-weight:600;}
.hero-badge svg{width:18px;height:18px;flex:none;color:var(--teal-500);}
/* COFEPRIS: cédula profesional/especialidad + adscripción hospitalaria, visibles y
   legibles en el Hero de cada landing (no solo en "Acerca de mí"). */
.hero-institutions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--ink-500);}
.hero-institutions svg{width:15px;height:15px;flex:none;color:var(--teal-500);}
/* Leyenda legal COFEPRIS, justo debajo de instituciones/cédulas del Hero. */
.hero-cofepris{margin-top:6px;font-size:.72rem;color:var(--ink-500);opacity:.85;}

/* ginecologaoncologa.com enmarca su foto de "Acerca de mí" con una mancha
   ("blob") pastel sólida detrás, más un contorno rosa fino que se asoma por
   una esquina — no un simple aro de línea. Replicado aquí: relleno azul
   claro sólido detrás + contorno rosa superpuesto. */
.hero-media-wrap{position:relative;height:100%;}
.hero-media-wrap::before{
  content:'';position:absolute;top:-16px;right:-16px;width:88%;height:72%;z-index:0;
  background:var(--teal-100);border-radius:42% 58% 56% 44%/46% 40% 60% 54%;
}
.hero-media-wrap::after{
  content:'';position:absolute;bottom:-18px;left:-18px;width:60%;height:46%;z-index:0;
  border:2px solid var(--pink-500);border-radius:58% 42% 44% 56%/54% 46% 60% 40%;
}
.hero-media{position:relative;z-index:1;min-height:300px;height:100%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){.hero-media{min-height:230px;}}

/* ---------- Home hero: full-bleed photo, avatar badge, motion ----------
   A different device from the split hero used on the other 7 landings: a
   full-bleed stock photo sets the atmosphere, a light (never dark) brand-pink
   wash keeps the left side legible, the doctor appears as a small circular
   "avatar" badge (not the dominant image) with a scalloped ring around it,
   and two subtle CSS animations (a slow-turning dashed ring + a gentle float)
   give it real, literal movement rather than just a busier layout. */
/* Velo del hero recoloreado al rosa empolvado de marca de V2 (antes magenta
   oscuro heredado de V1) — mismo propósito de legibilidad, tono alineado
   con la paleta extraída de ginecologaoncologa.com. */
.hero--photo{
  background-image:linear-gradient(100deg,rgba(166,121,119,.92) 0%,rgba(166,121,119,.82) 42%,rgba(166,121,119,.5) 62%,rgba(166,121,119,.14) 82%,rgba(166,121,119,0) 96%),
                    url("hero-stock-bg.jpg");
  background-size:cover;background-position:center;
  min-height:560px;display:flex;align-items:center;
}
.hero--photo::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;z-index:1;pointer-events:none;
  height:clamp(50px,9vw,90px);background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 182' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M0 182.086h1024V41.593c-28.058-21.504-60.109-37.581-97.075-37.581-112.845 0-198.144 93.798-289.792 93.798S437.658 6.777 351.846 6.777s-142.234 82.125-238.49 82.125c-63.078 0-75.776-31.744-113.357-53.658L0 182.086z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.75' d='M0 182.086h1024V90.028C966.451 59.103 907.059 16.3 824.115 15.071 690.278 13.023 665.19 102.93 482.099 102.93S202.138-1.62 74.24.019C46.49.326 21.811 4.217 0 9.849v172.237z'/%3E%3Cpath fill='%23ffffff' d='M0 182.086h1024v-77.312c-49.05 20.07-120.525 42.394-193.229 42.086-128.922-.512-159.846-72.294-255.795-72.294-89.088 0-134.656 80.179-245.043 82.022S169.063 99.346 49.971 97.401C32.768 97.094 16.077 99.244 0 103.135v78.951z'/%3E%3C/svg%3E");
}
@media(max-width:900px){.hero--photo{min-height:0;}}
.hero--photo .hero-grid{grid-template-columns:1.2fr .8fr;padding:52px 0 64px;}
@media(max-width:900px){.hero--photo .hero-grid{grid-template-columns:1fr;padding:36px 0 44px;}
  .hero--photo .hero-grid .hero-avatar-block{order:-1;}
  .hero--photo .hero-grid .hero-content{order:1;}
  .hero--photo .hero-avatar-block .hero-avatar-caption,.hero--photo .hero-avatar-block .hero-trust-card{display:none;}
}
.hero--photo .eyebrow{color:#fce8f1;}
.hero--photo .eyebrow::before{background:#fff;}
.hero--photo h1{color:#fff;}
.hero--photo h1 em{color:#ffd9e9;}
.hero--photo p.lead{color:#fbe4ee;}
/* Badges/institutions need a translucent "frosted glass" chip to stay legible
   sitting directly on top of a photo, instead of the plain-text style used
   where the background is a flat cream/white (the other 7 heroes). */
.hero--photo .hero-badges{border-top-color:rgba(255,255,255,.35);}
.hero--photo .hero-badge{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;padding:7px 12px;border-radius:var(--radius-pill);}
.hero--photo .hero-badge svg{color:#fff;}
.hero--photo .hero-institutions{color:#fce8f1;}
.hero--photo .hero-institutions svg{color:#fff;}
.hero--photo .hero-cofepris{color:#fce8f1;}

/* Avatar column: circular badge with a scalloped dashed ring that slowly
   rotates, plus a gentle vertical float — literal motion, not just visual
   density. Reduced/removed for users who've asked the OS for less motion. */
.hero-avatar-block{display:flex;flex-direction:column;align-items:center;gap:16px;justify-self:center;animation:heroFloat 5s ease-in-out infinite;}
.hero-avatar-ring{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;}
.hero-avatar-ring::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.65);
  animation:heroSpin 40s linear infinite;
}
.hero-avatar-ring::after{
  content:'';position:absolute;inset:-28px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.3);
  animation:heroSpin 60s linear infinite reverse;
}
.hero-avatar-photo{width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-lg);border:4px solid #fff;}
.hero-avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-avatar-caption{text-align:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:var(--radius-md);padding:10px 20px;}
.hero-avatar-caption strong{display:block;color:#fff;font-family:var(--font-display);font-size:1.05rem;}
.hero-avatar-caption span{color:#fce8f1;font-size:.78rem;}
@keyframes heroSpin{to{transform:rotate(360deg);}}
@keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media(prefers-reduced-motion:reduce){
  .hero-avatar-block,.hero-avatar-ring::before,.hero-avatar-ring::after{animation:none;}
}
@media(max-width:900px){
  .hero-avatar-ring{width:150px;height:150px;}
}

.hero-trust-card{
  position:relative;z-index:2;margin-top:22px;
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:14px 20px;display:inline-flex;align-items:center;gap:12px;max-width:280px;
}
.hero-trust-card .stars{color:#f4a825;font-size:.95rem;letter-spacing:1px;line-height:1;}
.hero-trust-card strong{display:block;font-size:.92rem;color:var(--ink-900);line-height:1.2;}
.hero-trust-card small{color:var(--ink-500);font-size:.74rem;}
.hero-trust-card .quote-mark{font-family:var(--font-display);font-size:2.2rem;color:var(--pink-100);line-height:1;flex:none;}

/* ---------- Differentiators ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px;}
@media(max-width:980px){.diff-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.diff-grid{grid-template-columns:1fr;}}
.diff-card{
  background:#fff;border-radius:var(--radius-md);padding:30px 24px;text-align:center;
  box-shadow:var(--shadow-sm);border:1px solid rgba(28,42,50,.05);transition:transform .2s ease, box-shadow .2s ease;
}
.diff-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
/* Insignias hexagonales — el motivo de icono más reconocible del sitio de
   referencia ("Chequeo Médico", "Médico certificado", "Amplia experiencia":
   hexágonos blancos con icono azul-gris flotando sobre la foto de portada). */
.diff-icon{
  width:64px;height:64px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0% 50%);
  background:var(--teal-50);color:var(--teal-500);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.diff-icon svg{width:26px;height:26px;}
.diff-card h3{font-size:1.05rem;margin-bottom:8px;}
.diff-card p{font-size:.92rem;color:var(--ink-500);margin:0;}

/* ---------- Feature / content split ---------- */
/* Both columns are forced to the same visual weight: the grid row stretches
   to the tallest column and the media column always fills that height with
   object-fit:cover, so text length never leaves the photo short/cropped. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:24px;}}
.split.reverse .split-media{order:2;}
.split-content{display:flex;flex-direction:column;justify-content:center;}
/* Mancha pastel detrás de la foto — mismo lenguaje visual "blob" que
   .hero-media-wrap. Sin wrapper extra en el HTML: el pseudo-elemento vive en
   .split-media mismo, con z-index negativo para quedar detrás de la imagen
   (que ya trae su propio border-radius, así que no depende de overflow:hidden
   en el contenedor). */
.split-media{position:relative;min-height:320px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
/* ::after (no ::before) a propósito: .split-media--tint ya usa ::before para
   su velo duotono sobre la imagen, así que el blob decorativo necesita su
   propio pseudo-elemento para no chocar con esa regla. */
.split-media::after{
  content:'';position:absolute;top:-14px;left:-14px;width:60%;height:55%;z-index:-1;
  background:var(--pink-100);border-radius:44% 56% 58% 42%/50% 44% 56% 50%;
}
.split-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-lg);}
@media(max-width:900px){.split-media{min-height:280px;}}
@media(max-width:560px){.split-media{min-height:230px;}}
.split-media .float-card{
  position:absolute;bottom:20px;right:20px;background:#fff;border-radius:var(--radius-md);
  padding:16px 20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;max-width:230px;
}
@media(max-width:560px){.split-media .float-card{padding:12px 16px;}}
.float-card .num{font-family:var(--font-display);font-size:1.7rem;color:var(--pink-600);font-weight:700;}
.float-card small{color:var(--ink-500);font-size:.78rem;}

/* Tinted variant: washes a strong/graphic photo (e.g. a cellular/pathology
   illustration) in a brand-pink duotone so it reads as an artistic, on-brand
   accent rather than a literal clinical close-up — used where the image
   content could otherwise feel intense out of context. */
.split-media--tint::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(166,121,119,.6) 0%,rgba(124,134,153,.55) 100%);
  mix-blend-mode:multiply;
}

.check-list{margin-top:18px;}
.check-list li{display:flex;gap:12px;padding:9px 0;align-items:flex-start;}
.check-list svg{width:22px;height:22px;color:var(--teal-500);flex:none;margin-top:2px;}

/* ---------- Symptoms grid ---------- */
.symptom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.symptom-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.symptom-grid{grid-template-columns:1fr;}}
.symptom-card{
  background:#fff;border:1px solid rgba(28,42,50,.07);border-radius:var(--radius-md);
  padding:22px;display:flex;gap:14px;align-items:flex-start;transition:.2s;
}
.symptom-card:hover{border-color:var(--pink-300, var(--pink-400));box-shadow:var(--shadow-sm);transform:translateY(-3px);}
.symptom-card .dot{width:10px;height:10px;border-radius:50%;background:var(--pink-500);margin-top:8px;flex:none;}
.symptom-card strong{display:block;color:var(--ink-900);margin-bottom:4px;}
.symptom-card span{font-size:.86rem;color:var(--ink-500);}

/* ---------- Specialty cards ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:980px){.spec-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.spec-grid{grid-template-columns:1fr;}}
.spec-card{
  position:relative;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;border:1px solid rgba(51,64,79,.05);
}
.spec-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
/* Triángulo diagonal rosa en la esquina — decoración de tarjeta calcada de
   las tarjetas de "Servicios" en ginecologaoncologa.com. */
.spec-card::before{
  content:'';position:absolute;top:0;right:0;width:64px;height:64px;z-index:0;
  background:var(--pink-100);clip-path:polygon(100% 0,0 0,100% 100%);
}
.spec-card .spec-top{position:relative;z-index:1;padding:26px 24px 0;}
.spec-card .spec-icon{
  width:52px;height:52px;border-radius:14px;background:#fff;color:var(--teal-600);
  border:2px solid var(--teal-400);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.spec-card .spec-icon svg{width:26px;height:26px;}
.spec-card .spec-body{padding:0 24px 26px;flex:1;display:flex;flex-direction:column;}
.spec-card p{color:var(--ink-500);font-size:.92rem;flex:1;}
.spec-card .spec-link{color:var(--pink-600);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;margin-top:8px;}
.spec-card .spec-link svg{width:16px;height:16px;transition:transform .2s;}
.spec-card:hover .spec-link svg{transform:translateX(4px);}

/* ---------- Pricing ---------- */
.price-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.price-table td{background:#fff;padding:16px 22px;font-size:.95rem;}
.price-table tr td:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-weight:600;color:var(--ink-900);}
.price-table tr td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;text-align:right;font-family:var(--font-display);font-weight:700;color:var(--pink-600);white-space:nowrap;}
.price-note{font-size:.82rem;color:var(--ink-500);margin-top:14px;}
@media(max-width:600px){
  .price-table td{padding:12px 14px;font-size:.86rem;}
}

/* ---------- Sedes ---------- */
.sede-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:820px){.sede-grid{grid-template-columns:1fr;}}
.sede-card{background:#fff;border-radius:var(--radius-md);padding:30px;box-shadow:var(--shadow-sm);border:1px solid rgba(28,42,50,.05);}
.sede-card .sede-tag{display:inline-block;background:#fff;color:var(--teal-700);border:1.5px solid var(--teal-400);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:14px;}
.sede-card h3{margin-bottom:6px;}
.sede-row{display:flex;gap:12px;margin:14px 0;align-items:flex-start;font-size:.92rem;color:var(--ink-700);}
.sede-row svg{width:20px;height:20px;color:var(--pink-600);flex:none;margin-top:2px;}
.sede-card .btn{margin-top:12px;}

/* ---------- Reviews ---------- */
.reviews-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;margin-bottom:40px;}
.review-stat{text-align:center;}
.review-stat .num{font-family:var(--font-display);font-size:2.4rem;color:var(--pink-600);font-weight:700;}
.stars{color:#ffb648;font-size:1.1rem;letter-spacing:2px;}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:980px){.review-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.review-grid{grid-template-columns:1fr;}}
.review-card{background:#fff;border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow-sm);border:1px solid rgba(28,42,50,.05);display:flex;flex-direction:column;gap:10px;}
.review-card .stars{font-size:.9rem;}
.review-card p{font-size:.92rem;color:var(--ink-700);flex:1;}
.review-card footer{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--ink-500);}
.review-source{display:inline-flex;align-items:center;gap:6px;font-weight:700;}
.review-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px;}
.review-tag{background:var(--pink-50);color:var(--pink-700);font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:var(--radius-pill);}
.review-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:36px;}
.review-badge{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(28,42,50,.08);padding:10px 18px;border-radius:var(--radius-pill);font-size:.82rem;font-weight:700;color:var(--ink-700);}
.review-badge svg{width:18px;height:18px;color:var(--teal-500);}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin:0 auto;}
.faq-item{border-bottom:1px solid rgba(164,179,203,.3);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:22px 6px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;color:var(--ink-900);
}
.faq-q svg{width:20px;height:20px;flex:none;transition:transform .25s ease;color:var(--pink-600);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a p{padding:0 6px 22px;color:var(--ink-500);margin:0;}

/* ---------- Contact / form ---------- */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
/* Landings sin tarjeta de datos de contacto: la tarjeta del formulario es hija
   única de .contact-wrap. En vez de dejarla pegada a la primera columna con
   la segunda vacía, ocupa el ancho completo y se centra. */
.contact-wrap > .contact-info-card:only-child{grid-column:1/-1;max-width:640px;width:100%;justify-self:center;}
.contact-info-card{background:var(--ink-900);color:#e6eef1;border-radius:var(--radius-lg);padding:40px;}
.contact-info-card h3{color:#fff;}
.contact-info-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(164,179,203,.25);}
.contact-info-row:last-child{border-bottom:none;}
.contact-info-row svg{width:22px;height:22px;color:var(--pink-400);flex:none;margin-top:2px;}
.contact-info-row strong{display:block;color:#fff;font-size:.95rem;}
.contact-info-row span{font-size:.86rem;color:#b9cbd2;}

.form-card{background:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-md);border:1px solid rgba(28,42,50,.05);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-900);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1.5px solid rgba(28,42,50,.15);
  font-family:var(--font-body);font-size:.95rem;background:var(--cream-50);color:var(--ink-900);
  transition:border-color .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-500);background:#fff;}
.field textarea{resize:vertical;min-height:100px;}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.form-disclaimer{font-size:.76rem;color:var(--ink-300);margin-top:14px;}

/* ---------- Gallery (instalaciones) ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid img{border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-sm);}

/* ---------- CTA banner (content block inside .cta-wrap) ---------- */
.cta-banner{
  color:#fff;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:680px;margin:0 auto;
}
.cta-banner h2{color:#fff;}
.cta-banner .btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ---------- Footer ---------- */
/* Rosa empolvado sólido (mismo #dda29f de la barra superior) con texto
   blanco y una franja inferior de copyright en un tono más oscuro — layout
   y paleta calcados del footer real de ginecologaoncologa.com. */
footer.site-footer{background:var(--pink-600);color:#fff;padding-top:70px;overflow-x:hidden;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px;}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:#fff;font-family:var(--font-body);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
.footer-grid li{margin-bottom:10px;font-size:.9rem;color:#fdf1f0;}
.footer-grid a{color:#fdf1f0;}
.footer-grid a:hover{color:#fff;}
.footer-brand img{height:62px;margin-bottom:14px;filter:brightness(0) invert(1);}
.footer-brand p{font-size:.86rem;color:#fbe8e6;max-width:280px;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;}
.footer-social a:hover{background:var(--teal-500);}
.footer-social svg{width:16px;height:16px;color:#fff;}
.footer-bottom{
  background:var(--pink-700);border-top:1px solid rgba(255,255,255,.15);
  padding:22px calc(50vw - 50%);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.82rem;color:#fbe8e6;margin:24px calc(50% - 50vw) 0;width:100vw;
}
.footer-bottom a{font-weight:700;color:#fff;}
.footer-bottom .heart{color:#fff;}

/* ---------- Floating bubbles ---------- */
.float-bubbles{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;flex-direction:column;gap:14px;align-items:center;}
.bubble{
  width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.25);color:#fff;position:relative;
}
.bubble svg{width:28px;height:28px;}
.bubble-whatsapp{background:var(--whatsapp);}
.bubble-call{background:var(--pink-600);display:none;}
.bubble-ping{position:absolute;inset:0;border-radius:50%;background:var(--whatsapp);opacity:.6;animation:ping 2.2s infinite;}
@keyframes ping{0%{transform:scale(1);opacity:.55;}100%{transform:scale(1.9);opacity:0;}}
@media(max-width:768px){
  .bubble-call{display:flex;}
  .float-bubbles{right:16px;bottom:16px;}
  .bubble{width:54px;height:54px;}
}

/* ---------- Utilities ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.tag-pill{display:inline-block;background:var(--pink-100);color:var(--pink-700);font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;}
.cofepris-note{margin-top:10px;font-size:.76rem;color:var(--ink-500);opacity:.85;}

.breadcrumb{font-size:.82rem;color:var(--ink-500);padding:18px 0;}
.breadcrumb a{color:var(--teal-600);font-weight:600;}

.page-hero{
  padding:56px 0 0;background:var(--cream-100);
}
.page-hero .container{padding-bottom:44px;}
.page-hero-inner{max-width:760px;}
.page-hero .eyebrow{color:var(--pink-600);}

.mini-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#fff;border:1.5px dashed var(--pink-400);border-radius:var(--radius-md);padding:22px 26px;margin:34px 0;
}
.mini-cta strong{font-size:1rem;color:var(--ink-900);}
.mini-cta span{color:var(--ink-500);font-size:.88rem;}