/*
Theme Name: andrologia-chile-profesional
Text Domain: andrologia-chile-profesional
Description: Tema profesional, rápido y orientado a SEO para consulta de Urología y Andrología del Dr. José Alberto Pabón.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

:root {
  /* Paleta inspirada en RedSalud: azul + verde, aplicada a la identidad propia de Andrología Chile. */
  --navy: #123f5a;
  --blue: #0076a8;
  --blue-dark: #005b82;
  --teal: #4bb7a5;
  --ink: #183b4d;
  --muted: #617783;
  --line: #dce8eb;
  --soft: #f2f8f7;
  --white: #fff;
  --shadow: 0 14px 40px rgba(18,63,90,.09);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; height: auto; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.topbar { background: var(--navy); color:#eaf3f9; font-size:14px; }
.topbar .container { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar a { color:#fff; font-weight:600; }

.site-header { background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:20; }
.header-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; color:var(--navy); flex:0 1 300px; min-width:0; }
.brand-logo { display:block; width:300px; height:auto; max-width:100%; object-fit:contain; object-position:left center; }
.brand:hover { color:var(--navy); }

.primary-nav ul { display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.primary-nav a { color:var(--ink); font-size:14px; font-weight:650; }
.primary-nav a:hover { color:var(--blue); }
.mobile-menu-toggle { display:none; border:0; background:transparent; padding:9px; width:46px; height:46px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.mobile-menu-toggle span { display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.header-cta { display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; border-radius:9px; background:var(--blue); color:#fff!important; font-weight:700!important; box-shadow:0 6px 16px rgba(23,105,170,.2); }
.header-cta:hover { background:var(--blue-dark); }

.hero { background:linear-gradient(135deg,#f1f8fc 0%,#fff 62%); border-bottom:1px solid var(--line); padding:78px 0 72px; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:#e7f4f5; color:#126e6b; font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.hero h1 { margin:18px 0 18px; max-width:760px; color:var(--navy); font-size:clamp(38px,5vw,64px); line-height:1.08; letter-spacing:-.045em; }
.hero h1 span { color:var(--blue); }
.hero-lead { max-width:680px; margin:0; color:#496276; font-size:20px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:12px 20px; border-radius:9px; font-weight:750; border:1px solid transparent; }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 9px 22px rgba(23,105,170,.2); }
.btn-primary:hover { background:var(--blue-dark); color:#fff; }
.btn-secondary { background:#fff; color:var(--navy); border-color:#b9cad7; }
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }
.trust-row { display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:28px; color:#526b7d; font-size:14px; font-weight:600; }
.trust-row span { display:flex; align-items:center; gap:7px; }
.trust-row b { color:var(--teal); }
.hero-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow); overflow:hidden; }
.doctor-photo-wrap { width:100%; border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; }
.doctor-photo-wrap .doctor-photo { flex:0 0 auto; width:100%; }
.doctor-caption { flex:0 0 auto; }
.doctor-photo { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; object-position:center bottom; }
.doctor-caption { padding:16px 8px 2px; text-align:left; }
.doctor-caption strong { display:block; color:var(--navy); font-size:22px; line-height:1.25; }
.doctor-caption span { display:block; margin-top:4px; color:#536b7b; font-size:15px; line-height:1.4; }


.section { padding:76px 0; }
.section-soft { background:var(--soft); }
.section-heading { max-width:760px; margin-bottom:38px; }
.section-heading.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-kicker { color:var(--teal); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
.section h2 { margin:8px 0 12px; color:var(--navy); font-size:clamp(30px,4vw,43px); line-height:1.16; letter-spacing:-.035em; }
.section-heading p { margin:0; color:var(--muted); font-size:17px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#bfd1df; }
.card-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:#eaf4fa; color:var(--blue); font-weight:900; margin-bottom:18px; }
.card h3 { margin:0 0 8px; color:var(--navy); font-size:21px; line-height:1.25; }
.card p { margin:0 0 16px; color:var(--muted); font-size:15px; }
.card-link { font-weight:800; font-size:14px; }

.vasectomy-video { background:#fff; }
.video-card { max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow); }
.video-frame { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:16px; background:#0b2134; }
.map-card { max-width:1100px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow); }
.map-frame { width:100%; aspect-ratio:16 / 7; overflow:hidden; border-radius:16px; background:#e8f3f6; }
.map-frame iframe { width:100%; height:100%; border:0; display:block; }
.map-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.map-address { display:flex; flex-wrap:wrap; gap:8px 18px; padding:16px 6px 2px; color:var(--muted); }
.map-address strong { color:var(--ink); }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:1000; display:inline-flex; align-items:center; gap:9px; min-height:54px; padding:0 18px; border-radius:999px; background:#1fa855; color:#fff!important; box-shadow:0 10px 28px rgba(18,63,90,.22); font-size:15px; font-weight:800; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.whatsapp-float:hover { color:#fff!important; background:#168f46; transform:translateY(-2px); box-shadow:0 13px 32px rgba(18,63,90,.27); }
.whatsapp-float svg { width:27px; height:27px; fill:currentColor; }
@media (max-width:700px) {
  .whatsapp-float { right:16px !important; bottom:calc(16px + env(safe-area-inset-bottom)) !important; width:56px !important; height:56px !important; min-height:56px !important; min-width:56px !important; padding:0 !important; justify-content:center !important; }
  .whatsapp-float span { display:none !important; }
  .whatsapp-float svg { width:29px !important; height:29px !important; }
}
@media (max-width: 700px) { .map-card { padding:12px; border-radius:18px; } .map-frame { aspect-ratio:4 / 3; border-radius:12px; } .map-address { padding:14px 4px 2px; font-size:14px; } }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.about-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:54px; align-items:center; }
.about-box { background:linear-gradient(145deg,#edf7fa,#fff); border:1px solid var(--line); border-radius:22px; padding:34px; }
.about-box .mini { color:var(--teal); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.about-box h3 { margin:9px 0 12px; color:var(--navy); font-size:27px; }
.about-box p { color:var(--muted); }
.check-list { list-style:none; padding:0; margin:25px 0 0; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:29px; color:#40596b; font-weight:600; }
.check-list li:before { content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:900; }

.cta { padding:62px 0; }
.cta-box { border-radius:22px; padding:44px 48px; background:linear-gradient(135deg,var(--navy),#174e73); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta-box h2 { color:#fff; margin:0 0 9px; font-size:34px; }
.cta-box p { margin:0; color:#dceaf3; max-width:700px; }
.cta-box .btn-secondary { background:#fff; border-color:#fff; }

.site-footer { margin-top:auto; background:#0b2134; color:#cbdbe5; padding:54px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:45px; }
.site-footer h3 { color:#fff; font-size:17px; margin:0 0 13px; }
.site-footer p { margin:0; color:#b7cad7; font-size:14px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.site-footer a { color:#d9e7ef; font-size:14px; }
.site-footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.13); margin-top:38px; padding-top:18px; display:flex; justify-content:space-between; gap:20px; font-size:12px; color:#9db2c0; }

.entry-content { max-width:850px; margin:0 auto; padding:70px 0; }
.entry-content h1,.entry-content h2,.entry-content h3 { color:var(--navy); line-height:1.2; }
.entry-content h1 { font-size:clamp(34px,5vw,52px); }
.entry-content h2 { font-size:32px; margin-top:42px; }
.entry-content p,.entry-content li { color:#40596b; }
.entry-content a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

@media (max-width: 980px) {
  .header-inner { padding:14px 0; }
  .hero-grid,.about-grid { grid-template-columns:1fr; gap:35px; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .cta-box { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  /* Navegación móvil: se activa por ancho y también en teléfonos táctiles que pueden reportar un viewport CSS cercano a 980px. */
  .container { width:min(100% - 28px,1180px); }
  .topbar .container { min-height:36px; }
  .topbar .container span:last-child { display:none; }
  .header-inner { min-height:72px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 0; }
  .brand { flex:none; min-width:0; width:100%; }
  .brand-logo { width:235px; max-width:100%; height:auto; object-fit:contain; object-position:left center; }
  .mobile-menu-toggle { display:flex; justify-self:end; }
  .primary-nav { display:none; grid-column:1 / -1; width:100%; padding:8px 0 4px; }
  .primary-nav.is-open { display:block; }
  .primary-nav ul { display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; padding:4px 0 8px; }
  .primary-nav li { border-top:1px solid var(--line); }
  .primary-nav li:last-child { border-bottom:1px solid var(--line); }
  .primary-nav a { display:block; padding:13px 8px; font-size:16px; line-height:1.35; white-space:normal; color:var(--navy); }
  .primary-nav a:hover { background:#f2f8fa; }
  .header-cta { display:none; }
  .hero { padding:44px 0 50px; }
  .eyebrow { font-size:11px; padding:7px 10px; }
  .hero h1 { font-size:clamp(32px,9vw,38px); line-height:1.12; letter-spacing:-.035em; margin:16px 0 16px; }
  .hero-lead { font-size:18px; line-height:1.62; color:#3f5d70; }
  .hero-actions { margin-top:24px; }
  .btn { width:100%; min-height:50px; font-size:16px; }
  .trust-row { display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px; font-size:15px; }
  .hero-card { padding:18px; border-radius:18px; }
  .doctor-placeholder { min-height:260px; padding:20px; }
  .doctor-placeholder strong { font-size:20px; }
  .section { padding:54px 0; }
  .section h2 { font-size:clamp(29px,8vw,36px); line-height:1.18; }
  .section-heading p { font-size:17px; line-height:1.6; }
  .cards { grid-template-columns:1fr; gap:16px; }
  .card { padding:22px; }
  .card h3 { font-size:20px; }
  .card p { font-size:16px; line-height:1.6; }
  .cta-box { padding:30px 22px; }
  .cta-box h2 { font-size:28px; line-height:1.2; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-bottom { flex-direction:column; }
}

/* Fallback para móviles que reportan un viewport CSS de escritorio. */
html.mobile-device .container { width:min(100% - 28px,1180px); }
html.mobile-device .topbar .container { min-height:36px; }
html.mobile-device .topbar .container span:last-child { display:none; }
html.mobile-device .header-inner { min-height:72px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 0; }
html.mobile-device .brand { flex:none; min-width:0; width:100%; }
html.mobile-device .brand-logo { width:235px; max-width:100%; height:auto; object-fit:contain; object-position:left center; }
html.mobile-device .mobile-menu-toggle { display:flex; justify-self:end; }
html.mobile-device .primary-nav { display:none; grid-column:1 / -1; width:100%; padding:8px 0 4px; }
html.mobile-device .primary-nav.is-open { display:block; }
html.mobile-device .primary-nav ul { display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; padding:4px 0 8px; }
html.mobile-device .primary-nav li { border-top:1px solid var(--line); }
html.mobile-device .primary-nav li:last-child { border-bottom:1px solid var(--line); }
html.mobile-device .primary-nav a { display:block; padding:13px 8px; font-size:16px; line-height:1.35; color:var(--navy); }
html.mobile-device .header-cta { display:none; }

/* WhatsApp flotante: visible y accesible en todas las pantallas, incluido móvil. */
.whatsapp-float {
  position: fixed !important;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 52px;
  height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none !important;
  background: #25D366;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.20);
  font-weight: 700;
  line-height: 1;
}
.whatsapp-float svg { width: 28px; height: 28px; fill: currentColor; flex: 0 0 28px; }
.whatsapp-float span { display: inline; }
@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    min-width: 54px;
    padding: 0;
    border-radius: 50%;
  }
  .whatsapp-float span { display: none; }
  .whatsapp-float svg { width: 30px; height: 30px; }
}
html.mobile-device .whatsapp-float {
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 54px;
  height: 54px;
  min-width: 54px;
  padding: 0;
  border-radius: 50%;
}
html.mobile-device .whatsapp-float span { display:none; }
html.mobile-device .whatsapp-float svg { width:30px; height:30px; }

/* WhatsApp flotante: circular y separado del aviso de cookies. */
.whatsapp-float {
  position:fixed !important;
  right:22px !important;
  bottom:104px !important;
  z-index:2147483647 !important;
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:50% !important;
  text-decoration:none !important;
  background:#25d366 !important;
  color:#fff !important;
  box-shadow:0 7px 22px rgba(0,0,0,.24);
  font-weight:800;
  line-height:1;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateZ(0);
}
.whatsapp-float svg { width:34px !important; height:34px !important; fill:currentColor; flex:0 0 34px; }
.whatsapp-float span { display:none !important; }
.whatsapp-float:hover { color:#fff !important; transform:translateY(-2px); }
.map-directions { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-left:auto; font-weight:800; color:#fff; background:var(--blue); padding:11px 16px; border-radius:10px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.map-directions:hover { color:#fff; transform:translateY(-1px); }
.social-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.social-links li { margin:0; }
.social-links a { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.social-links a svg { width:20px; height:20px; flex:0 0 20px; }
.social-links a:hover { text-decoration:underline; }
@media (max-width:640px) {
  .whatsapp-float {
    right:16px !important;
    bottom:calc(118px + env(safe-area-inset-bottom)) !important;
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
  }
  .whatsapp-float svg { width:31px !important; height:31px !important; }
  .map-directions { width:100%; margin-left:0; margin-top:4px; }
}