/* ==========================================================================
   Dr. René Cano — Sistema de diseño
   Inspirado en: https://avada.website/recruitment
   Tipografía: Bricolage Grotesque | Paleta: verde menta + amarillo + negro
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

:root{
  /* Paleta principal (fiel a la referencia Avada Recruitment) */
  /* NOTA: los nombres de variable (--green*) se conservaron para no tocar cada
     "var(--green...)" del archivo (más de 40 usos); solo se cambió el VALOR de
     verde a azul a petición del cliente. --mint-brand también se llevó a un azul
     cielo para mantener el tono consistente, aunque el logotipo real
     (logo-rene-cano.png) sigue impreso en verde/menta — ver aviso al usuario. */
  --green: #1878C9;
  --green-hover: #135f9e;
  --green-dark: #0B2C4D;
  --green-darker: #071C33;
  --green-light: #E8F2FB;
  --green-pale: #D6E8FA;
  --mint-brand: #6FD6FF; /* antes acento menta del logo; ahora azul cielo para el nuevo tono del sitio */
  --yellow: #FBE12E;
  --yellow-hover: #f0d200;
  --ink: #1C1C1C;
  --ink-soft: #3d3d3d;
  --gray-bg: #F4F4F4;
  --gray-border: #E4E4E4;
  --white: #FFFFFF;

  --radius-pill: 999px;
  --radius-lg: 40px;
  --radius-md: 24px;
  --radius-sm: 14px;

  --shadow-card: 0 20px 45px -20px rgba(7,28,51,0.18);
  --shadow-soft: 0 10px 30px -12px rgba(7,28,51,0.12);

  --container: 1200px;
  --font: 'Bricolage Grotesque', Arial, Helvetica, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink-soft);
  background:var(--white);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
h1{ font-size:52px; font-weight:600; }
h2{ font-size:38px; }
h3{ font-size:24px; }
p{ margin:0 0 16px; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
@media (max-width:900px){
  h1{ font-size:36px; }
  h2{ font-size:28px; }
  .section{ padding:64px 0; }
  .section-sm{ padding:44px 0; }
}

/* ---------- Kicker / etiqueta resaltada ---------- */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-dark);
  background:linear-gradient(transparent 62%, var(--yellow) 62%);
  padding:0 2px;
  margin-bottom:14px;
}
.kicker.on-dark{ color:var(--white); background:linear-gradient(transparent 62%, rgba(251,225,46,.55) 62%); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font);
  font-weight:700;
  font-size:14.5px;
  padding:12px 20px;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-arrow::after{
  content:"↗";
  display:inline-flex;
  font-size:14px;
}
.btn-yellow{ background:var(--yellow); color:var(--ink); }
.btn-yellow:hover{ background:var(--yellow-hover); box-shadow:var(--shadow-soft); }
.btn-green{ background:var(--green); color:var(--white); }
.btn-green:hover{ background:var(--green-hover); box-shadow:var(--shadow-soft); }
.btn-green-pale{ background:var(--green-pale); color:var(--green-dark); }
.btn-green-pale:hover{ background:#c7e0f7; }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--white); }
.btn-outline:hover{ border-color:var(--white); }
.btn-outline-dark{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:var(--white); }
.btn-block{ width:100%; justify-content:center; }
.btn-lg{ padding:14px 24px; font-size:15px; }
.btn svg{ width:15px; height:15px; }

.btn-whatsapp{
  background:#25D366; color:#fff;
}
.btn-whatsapp:hover{ background:#1ebc59; }

/* ---------- Top bar ---------- */
.topbar{
  background:var(--green-darker);
  color:#d3e9fb;
  font-size:13.5px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:9px;
  padding-bottom:9px;
  gap:18px;
  flex-wrap:wrap;
}
.topbar-left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar a{ color:#eaf4ff; }
.topbar-item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item svg{ width:14px; height:14px; flex:none; color:var(--mint-brand); }
.topbar-keyword{ color:#a9d3f5; font-weight:600; }
.topbar-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
@media (max-width:760px){
  .topbar-keyword, .topbar-right .topbar-item:nth-child(2){ display:none; }
  .topbar .container{ justify-content:center; text-align:center; }
}

/* ---------- Header ---------- */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--gray-border);
  position:sticky; top:0; z-index:60;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:30px; }
.main-nav a{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600;
  font-size:17.5px;
  color:var(--ink);
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.main-nav a:hover, .main-nav a.active{ color:var(--green); border-color:var(--green); }
.main-nav .caret{ width:9px; height:9px; flex:none; transition:transform .15s ease; }
.main-nav .dropdown.open .caret{ transform:rotate(180deg); }
.main-nav .dropdown{ position:static; }

/* ---------- Mega menú de Servicios (estilo Avada) ---------- */
/* El panel se abre/cierra vía JS (clase .open en .dropdown, ver main.js) en vez
   de :hover puro en CSS, para evitar que se cierre al cruzar el hueco entre el
   link "Servicios" y el panel. padding-top actúa como zona de tolerancia extra. */
.dropdown-mega{
  display:none;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:18px;
  width:min(var(--container), calc(100vw - 56px));
  z-index:70;
}
.main-nav .dropdown.open .dropdown-mega{ display:block; }
.dropdown-mega-inner{
  background:var(--white);
  border:1px solid var(--gray-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:24px;
  display:grid;
  grid-template-columns:260px 300px 1fr;
  gap:26px;
}

.mega-promo{
  background:var(--green-dark);
  border-radius:var(--radius-sm);
  padding:24px 22px;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--white);
}
.mega-promo h4{ color:var(--white); font-size:19px; margin-bottom:8px; }
.mega-promo p{ color:#c9dff2; font-size:14px; margin-bottom:18px; }
.mega-promo-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; color:var(--ink);
  background:var(--yellow);
  padding:10px 16px;
  border-radius:var(--radius-pill);
  width:fit-content;
  transition:background .15s ease, transform .15s ease;
}
.mega-promo-link:hover{ background:var(--yellow-hover); transform:translateY(-1px); }

.mega-list{ display:flex; flex-direction:column; }
.mega-list a{
  display:flex; align-items:center; gap:12px;
  height:74px; flex:none;
  padding:0 4px; font-size:16.5px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--gray-border);
}
.mega-list a:last-child{ border-bottom:none; }
.mega-list a:hover{ color:var(--green-dark); }
.mega-arrow{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--green-light); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.mega-list a:hover .mega-arrow{ background:var(--green); color:var(--white); }
.mega-arrow svg{ width:12px; height:12px; transform:rotate(45deg); }
.mega-promo-link svg{ width:12px; height:12px; transform:rotate(45deg); }

.mega-images{ display:flex; flex-direction:column; gap:8px; }
.mega-images a{
  height:74px; flex:none; display:block;
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.mega-images img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.mega-images a:hover img{ transform:scale(1.06); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.menu-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:none; border:1.5px solid var(--gray-border); cursor:pointer; padding:0;
  transition:background .15s ease, border-color .15s ease;
  flex:none;
}
.menu-icon-btn:hover{ background:var(--green-light); border-color:var(--green); }
.menu-icon-btn svg{ width:19px; height:19px; color:var(--ink); }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.burger svg{ width:26px; height:26px; }

@media (max-width:980px){
  .main-nav{ display:none; }
  .burger{ display:inline-flex; }
  .header-cta .btn-lg-label{ display:none; }
  .menu-icon-btn{ display:none; }
}

/* Mobile nav drawer */
.mobile-nav{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:rgba(7,28,51,.55);
}
.mobile-nav.open{ display:block; }
.mobile-nav-panel{
  position:absolute; top:0; right:0; height:100%; width:82%; max-width:340px;
  background:var(--white); padding:26px; overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.25);
}
.mobile-nav-panel .close-btn{ background:none; border:none; float:right; font-size:26px; cursor:pointer; color:var(--ink); }
.mobile-nav-panel a{ display:block; padding:14px 4px; font-weight:600; font-size:19px; border-bottom:1px solid var(--gray-border); color:var(--ink); }
.mobile-nav-panel .sub-link{ padding-left:18px; font-weight:500; font-size:17px; color:var(--ink-soft); }

/* ---------- Hero Home v2: fondo fotográfico animado + tarjeta de doctor ---------- */
.hero-v2{
  position:relative;
  padding:100px 0 110px;
  color:var(--white);
  overflow:hidden;
  background:var(--green-dark);
}
/* Capa 1: foto con zoom lento tipo "Ken Burns" para dar sensación de movimiento */
.hero-v2-bg{
  position:absolute; inset:0; z-index:0;
  background:url('quirofano-laparoscopia-1.jpg') center 30% / cover no-repeat;
  animation:heroKenBurns 18s ease-in-out infinite alternate;
  will-change:transform;
}
/* Capa 2: degradado semitransparente con shift sutil de posición (animación en el degradado) */
.hero-v2-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(7,28,51,.94) 0%, rgba(11,44,77,.90) 55%, rgba(11,44,77,.80) 100%);
  background-size:180% 180%;
  animation:heroGradientShift 16s ease-in-out infinite alternate;
}
.hero-v2::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);
  background-size:24px 24px;
  opacity:.5;
  pointer-events:none;
}
.hero-v2::after{
  content:"";
  position:absolute; left:-10%; bottom:-30%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,214,255,.18), transparent 70%);
  pointer-events:none;
  z-index:2;
}
.hero-v2 .container{ position:relative; z-index:3; }
@keyframes heroKenBurns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.18) translate(-1.5%,-1%); } }
@keyframes heroGradientShift{ 0%{ background-position:0% 30%; } 100%{ background-position:100% 70%; } }
@media (prefers-reduced-motion: reduce){
  .hero-v2-bg, .hero-v2-overlay{ animation:none; }
}
.hero-v2-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center; }
.hero-v2-copy .kicker{ background:linear-gradient(transparent 62%, rgba(251,225,46,.6) 62%); color:var(--white); }
.hero-v2-copy h1{ color:var(--white); font-size:50px; margin-bottom:20px; }
.hero-v2-copy .lead{ font-size:18px; color:#d3e9fb; max-width:520px; margin-bottom:30px; }
.hero-v2-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-v2-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  padding:9px 16px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:700; color:var(--white);
  backdrop-filter:blur(2px);
}
.hero-v2-badge svg{ width:16px; height:16px; color:var(--mint-brand); }

/* Tarjeta flotante del doctor */
.doctor-card{
  background:var(--white);
  border-radius:28px;
  padding:34px 28px 28px;
  text-align:center;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.5);
  max-width:320px;
  margin:0 auto;
  position:relative;
}
.doctor-card .avatar{
  width:112px; height:112px; border-radius:50%;
  object-fit:cover; object-position:50% 18%;
  border:4px solid var(--green-light);
  box-shadow:0 10px 24px -10px rgba(11,44,77,.4);
  margin:0 auto 16px; display:block;
}
.doctor-card h3{ font-size:19px; margin-bottom:2px; color:var(--ink); }
.doctor-card .role{ font-size:13px; color:var(--ink-soft); margin-bottom:20px; }
.doctoralia-rating{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--gray-bg); border-radius:16px; padding:14px 16px;
}
.doctoralia-rating img{ height:30px; width:30px; border-radius:8px; flex:none; }
.doctoralia-rating .rating-text{ text-align:left; }
.doctoralia-rating .rating-score{ font-weight:800; font-size:17px; color:var(--ink); line-height:1.1; }
.doctoralia-rating .rating-stars{ color:#FBB614; font-size:13px; letter-spacing:1px; }
.doctoralia-rating .rating-count{ font-size:11px; color:var(--ink-soft); }
.doctor-card .mini-badges{ display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.doctor-card .mini-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--green-light); color:var(--green-dark);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:var(--radius-pill);
}
.doctor-card .mini-badge svg{ width:12px; height:12px; }

@media (max-width:980px){
  .hero-v2{ padding:60px 0 70px; }
  .hero-v2-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-v2-copy h1{ font-size:34px; }
  .doctor-card{ margin:0 auto; }
}

/* ---------- Bloque oscuro con muesca (banner) ---------- */
.notch-panel{
  position:relative;
  background:var(--green-dark);
  color:#d9e9fa;
  border-radius:var(--radius-lg);
  padding:64px 50px;
}
.notch-panel h2, .notch-panel h3{ color:var(--white); }
.notch-panel .eyebrow{ color:var(--mint-brand); }

/* ---------- Carrusel de aseguradoras (marquee) ---------- */
.trust-strip{ background:var(--gray-bg); padding:34px 0; overflow:hidden; }
.trust-strip .trust-label{ font-weight:700; font-size:14px; color:var(--ink); text-align:center; margin-bottom:20px; }
.marquee{ position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.marquee-track{ display:flex; align-items:center; gap:28px; width:max-content; animation:marqueeScroll 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-logo{
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--gray-border); border-radius:16px;
  height:76px; width:150px; flex:none; padding:14px 20px;
  box-shadow:var(--shadow-soft);
}
.marquee-logo img{ max-height:42px; max-width:100%; width:auto; object-fit:contain; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Diferenciadores / feature cards ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.feature-card{
  background:var(--white);
  border:1px solid var(--gray-border);
  border-radius:var(--radius-md);
  padding:34px 28px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.feature-icon{
  width:84px; height:84px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-light); color:var(--green-dark);
  margin-bottom:22px;
  box-shadow:0 10px 24px -10px rgba(11,44,77,.35);
}
.feature-icon svg{ width:40px; height:40px; }
.feature-icon.yellow{ background:#FEF6C9; color:#7a6600; }
.feature-card h3{ margin-bottom:10px; font-size:20px; }
.feature-card p{ font-size:15px; margin-bottom:0; }
.feature-card .learn{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:700; font-size:14px; color:var(--green-dark); border-bottom:2px solid var(--green); padding-bottom:3px; }

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

/* Badge "top / premium" para diferenciadores — grid 2x2 simétrico, tarjetas a color */
.trust-badges{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin:32px 0 6px;
}
@media (max-width:640px){ .trust-badges{ grid-template-columns:1fr; } }
.trust-badge{
  display:flex; align-items:center; gap:16px;
  background:var(--white); border:1px solid var(--gray-border);
  border-top:4px solid transparent;
  border-radius:var(--radius-md); padding:20px 22px;
  box-shadow:var(--shadow-soft);
  transition:box-shadow .2s ease, transform .2s ease;
  width:100%;
}
a.trust-badge:hover{ box-shadow:var(--shadow-card); transform:translateY(-3px); }
.trust-badge .tb-text{ display:flex; flex-direction:column; gap:3px; line-height:1.25; }
.trust-badge .tb-text strong{ font-size:15px; font-weight:700; color:var(--ink); }
.trust-badge .tb-text small{ font-size:12.5px; font-weight:500; color:var(--ink-soft); }
.trust-badge .icon-circle{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.3);
  overflow:hidden;
}
.trust-badge .icon-circle svg{ width:27px; height:27px; }
.trust-badge .icon-circle.logo-circle{ background:var(--white); border:1px solid var(--gray-border); }
.trust-badge .icon-circle.logo-circle svg{ width:100%; height:100%; }
.trust-badge .icon-circle.logo-circle img{ width:34px; height:34px; object-fit:contain; }

.tb-blue{ border-top-color:#4285F4; }
.tb-blue .icon-circle.logo-circle{ background:#EAF1FE; border-color:#d3e4fd; }
.tb-teal{ border-top-color:#00BFA5; }
.tb-teal .icon-circle.logo-circle{ background:#E1F7F3; border-color:#c7f0e8; }
.tb-green{ border-top-color:var(--green); }
.tb-green .icon-circle{ background:var(--green); }
.tb-green .icon-circle svg{ color:#fff; }
.tb-navy{ border-top-color:var(--green-dark); }
.tb-navy .icon-circle{ background:var(--green-dark); }
.tb-navy .icon-circle svg{ color:var(--mint-brand); }

/* Cédulas profesionales (COFEPRIS) */
.cedulas-line{ font-size:12.5px; margin-top:16px; letter-spacing:.01em; }

/* ---------- Arrow bullet list ---------- */
.arrow-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--gray-border);
  font-size:15.5px;
}
.arrow-list li:last-child{ border-bottom:none; }
.arrow-list .arrow{
  width:22px; height:22px; border-radius:50%;
  background:var(--green-light); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px;
  font-size:12px;
}

/* ---------- Precio destacado ---------- */
.price-card{
  background:var(--green-dark);
  border-radius:var(--radius-lg);
  color:var(--white);
  padding:40px;
  position:relative;
  overflow:hidden;
}
.price-card .price-tag{ font-size:15px; font-weight:700; color:var(--mint-brand); text-transform:uppercase; letter-spacing:.06em; }
.price-card .price-amount{ font-size:46px; font-weight:700; color:var(--white); margin:10px 0 6px; }
.price-card .price-note{ font-size:14px; color:#c9dff2; margin-bottom:22px; }
.price-card ul{ margin-bottom:26px; }
.price-card ul li{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:14.5px; color:#e3eefb; }
.price-card ul li svg{ width:18px; height:18px; color:var(--mint-brand); flex:none; margin-top:2px; }

/* ---------- Tarjetas de servicio / hub ---------- */
.service-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.service-card{
  border:1px solid var(--gray-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--white);
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.service-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.service-card img{ height:210px; width:100%; object-fit:cover; }
.service-card .service-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.service-card h3{ font-size:21px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; flex:1; }
.service-card .service-price{ font-weight:700; color:var(--green-dark); margin-bottom:14px; }
@media (max-width:900px){ .service-grid{ grid-template-columns:1fr; } }

/* ---------- Testimonios / Doctoralia widget ---------- */
.reviews-summary{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--gray-border); border-radius:var(--radius-md);
  padding:26px 30px; margin-bottom:34px; box-shadow:var(--shadow-soft);
}
.reviews-score{ font-size:44px; font-weight:700; color:var(--ink); }
.reviews-stars{ color:#FBB614; font-size:19px; letter-spacing:2px; }
.reviews-meta{ font-size:14px; color:var(--ink-soft); }
.reviews-source{ display:flex; align-items:center; gap:10px; margin-left:auto; font-weight:700; font-size:14px; color:var(--green-dark); }
.reviews-source img{ height:26px; width:auto; }

.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card{
  background:var(--white); border:1px solid var(--gray-border); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-soft);
}
.review-card .stars{ color:#FBB614; font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.review-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:16px; min-height:80px; }
.review-card .reviewer{ display:flex; align-items:center; gap:12px; }
.review-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--green-light);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--green-dark); flex:none;
}
.review-name{ font-weight:700; font-size:14px; color:var(--ink); }
.review-verified{ font-size:12px; color:var(--green); font-weight:600; }
@media (max-width:900px){ .review-grid{ grid-template-columns:1fr; } .reviews-source{ margin-left:0; } }

/* ---------- FAQ acordeón ---------- */
.faq-item{ border-bottom:1px solid var(--gray-border); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:22px 0; font-family:var(--font); font-size:17px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.faq-question .plus{ font-size:22px; color:var(--green); transition:transform .2s ease; flex:none; }
.faq-item.open .faq-question .plus{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:15px; color:var(--ink-soft); }
.faq-answer-inner{ padding-bottom:22px; padding-right:40px; }

/* ---------- Formulario de contacto ---------- */
.form-card{
  background:var(--white);
  border:1px solid var(--gray-border);
  border-radius:var(--radius-lg);
  padding:42px;
  box-shadow:var(--shadow-card);
}
.form-card h3{ margin-bottom:6px; }
.form-card .form-sub{ font-size:14.5px; color:var(--ink-soft); margin-bottom:26px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.form-field label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font);
  border:1.5px solid var(--gray-border);
  border-radius:14px;
  padding:14px 16px;
  font-size:15px;
  color:var(--ink);
  background:var(--gray-bg);
  transition:border-color .15s ease, background .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--green); background:var(--white);
}
.form-field textarea{ resize:vertical; min-height:110px; }
.form-disclaimer{ font-size:12.5px; color:#7a7a7a; margin-top:6px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } .form-card{ padding:28px 22px; } }

/* ---------- CTA banda (fondo verde oscuro + vectores decorativos) ---------- */
.cta-band-v2{
  position:relative;
  background:linear-gradient(135deg, var(--green-darker) 0%, var(--green-dark) 60%, #123c5e 100%);
  border-radius:var(--radius-lg);
  padding:64px 50px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.cta-band-v2::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.6px, transparent 1.6px);
  background-size:24px 24px;
  opacity:.6;
  z-index:0;
}
.cta-band-v2::after{
  content:"";
  position:absolute; right:-8%; top:-35%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,214,255,.22), transparent 70%);
  z-index:0;
}
.cta-band-content{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.cta-band-v2 h2{ color:var(--white); margin-bottom:14px; }
.cta-band-v2 .lead{ font-size:17px; color:#d3e9fb; margin-bottom:26px; }

.cta-decor{
  position:absolute; z-index:1; color:rgba(255,255,255,.07); pointer-events:none;
}
.cta-decor svg{ width:100%; height:100%; }
.cta-decor-1{ width:160px; height:160px; left:-30px; bottom:-30px; transform:rotate(-12deg); }
.cta-decor-2{ width:110px; height:110px; right:6%; bottom:10%; color:rgba(251,225,46,.14); }
.cta-decor-3{ width:90px; height:90px; left:8%; top:12%; color:rgba(111,214,255,.16); }

.cta-band-trust{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;
}
.cta-trust-item{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  padding:8px 16px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:700; color:var(--white);
}
.cta-trust-item svg{ width:15px; height:15px; color:var(--mint-brand); }

.cta-band-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band-actions .btn svg{ width:16px; height:16px; }

@media (max-width:640px){
  .cta-band-v2{ padding:44px 26px; }
  .cta-decor{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{ background:#141414; color:#c9c9c9; padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer-col h4{ color:var(--white); font-size:14px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--green); display:inline-block; }
.footer-col p, .footer-col a{ font-size:14.5px; color:#b8b8b8; line-height:1.9; }
.footer-col a:hover{ color:var(--mint-brand); }
.footer-col.brand-col img{ height:44px; margin-bottom:16px; }
.footer-phone{ color:var(--white); font-weight:700; font-size:19px; margin:10px 0 4px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:#242424;
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background:var(--green); }
.footer-social svg{ width:17px; height:17px; color:#fff; }
.footer-bottom{
  border-top:1px solid #2a2a2a; padding:26px 0; font-size:13px; color:#8f8f8f;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-bottom .credit{ color:#c9c9c9; }
.footer-bottom .credit a{ color:var(--mint-brand); font-weight:700; }
.footer-bottom .heart{ color:#ff6b8b; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; text-align:center; } }

/* ---------- Botones flotantes WhatsApp / Llamada ---------- */
.floating-actions{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; flex-direction:column; gap:14px; align-items:flex-end;
}
.fab{
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  animation:fabPulse 2.6s ease-in-out infinite;
}
.fab svg{ width:30px; height:30px; }
.fab-whatsapp{ background:#25D366; color:#fff; }
.fab-call{ background:var(--ink); color:#fff; display:none; }
@keyframes fabPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
@media (max-width:760px){
  .fab-call{ display:flex; }
  .floating-actions{ right:16px; bottom:16px; gap:12px; }
  .fab{ width:56px; height:56px; }
}

/* ---------- Utilidades ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
/* Cuando una columna es una imagen, que cubra siempre el alto completo de la fila
   (igualando el alto natural de la columna de texto) en vez de su alto natural. */
.grid-2 > img.rounded-img{ width:100%; height:100%; min-height:280px; object-fit:cover; }
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; gap:36px; }
  .grid-2 > img.rounded-img{ height:280px; min-height:0; }
}
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-720{ max-width:720px; }
.mb-0{ margin-bottom:0 !important; }
.tag-pill{
  display:inline-block; background:var(--green-light); color:var(--green-dark);
  padding:6px 14px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:700; margin-bottom:14px;
}
.divider-line{ height:1px; background:var(--gray-border); border:none; margin:0; }
.bg-soft{ background:var(--gray-bg); }
.rounded-img{ border-radius:var(--radius-md); }
.avatar-strip{ display:flex; align-items:center; }
.avatar-strip img{ width:40px; height:40px; border-radius:50%; border:3px solid #fff; margin-left:-12px; object-fit:cover; }
.avatar-strip img:first-child{ margin-left:0; }

/* Utilidad genérica: fila de CTAs (usada en el hero de Inicio y en el page-hero de subpáginas) */
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* breadcrumb */
.breadcrumb{ font-size:13.5px; color:#8a8a8a; padding:20px 0 0; }
.breadcrumb a{ color:var(--green-dark); font-weight:600; }

/* page hero (subpages) — el fondo fotográfico se compone inline por página vía
   P.pageHeroBgStyle() (ver partials.js) para no depender de custom properties CSS
   ni de que el navegador tenga la última versión cacheada de esta hoja de estilos.
   Esta regla solo deja un color de respaldo por si alguna página no trae el estilo inline. */
.page-hero{
  position:relative; padding:60px 0 74px; overflow:hidden;
  background-color:var(--green-dark);
}
.page-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.6px, transparent 1.6px);
  background-size:24px 24px;
  opacity:.5;
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ color:var(--white); max-width:760px; }
.page-hero p{ color:#c9dff2; max-width:600px; font-size:17px; }
.page-hero .hero-ctas{ margin-top:26px; }