/* ==========================================================================
   CEPEFA — Clínica de la Familia
   Paleta basada en el logo: celeste/turquesa, gris pizarra, blanco
   ========================================================================== */

:root {
  --color-teal: #2bb8ae;
  --color-teal-dark: #1f9c93;
  --color-teal-light: #e6f7f6;
  --color-gray: #4a5560;
  --color-gray-dark: #333d47;
  --color-white: #ffffff;
  --color-bg: #f7f9f9;
  --color-text: #333d47;
  --color-text-muted: #6b7680;
  --color-gold: #c9a227;
  --color-gold-light: #faf3dc;

  --font-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 4px 16px rgba(51, 61, 71, 0.08);
  --container-width: 1200px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Pantalla de carga ---------- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}

.page-loader-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: page-loader-pulse 1.4s ease-in-out infinite;
}

.page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--color-teal-light);
  border-top-color: var(--color-teal);
  animation: page-loader-spin 0.9s linear infinite;
}

@keyframes page-loader-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

a {
  color: inherit;
  text-decoration: none;
}

/* Foco consistente con la marca solo para navegación por teclado (no
   aparece con clic de mouse), en vez del contorno azul por defecto. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--color-gray-dark);
  color: var(--color-white);
  font-size: 0.78rem;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar a {
  color: var(--color-white);
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar-icon {
  width: 13px;
  height: 13px;
  color: var(--color-teal);
  flex-shrink: 0;
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--color-white);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 48px;
  padding-right: 48px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  height: 34px;
  width: auto;
}

.brand-text .brand-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gray-dark);
}

.brand-text span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-weight: 600;
  color: var(--color-gray-dark);
  font-size: 0.92rem;
}

.main-nav a:hover {
  color: var(--color-teal);
}

.main-nav .nav-cta {
  padding: 8px 18px;
  border: 2px solid var(--color-teal);
  border-radius: 999px;
  color: var(--color-teal-dark);
}

.main-nav .nav-cta:hover {
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
}

/* Solo visible en móvil, donde el menú principal se oculta */
.header-mobile-contact {
  display: none;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--color-teal);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-teal-dark);
}

.btn-outline {
  background: transparent;
  color: var(--color-teal);
  border: 2px solid var(--color-teal);
}

.btn-outline:hover {
  background: var(--color-teal-light);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-teal-light), var(--color-white));
  padding: 72px 0;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-eyebrow {
  color: var(--color-teal-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.hero h1 {
  font-size: 2.4rem;
  color: var(--color-gray-dark);
  margin: 12px 0 16px;
}

.hero p {
  color: var(--color-text-muted);
  margin-bottom: 28px;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Encabezado compacto (página de contacto): sin foto de fondo, no
   necesita el alto de un hero normal; sube todo lo útil bien arriba. ---- */
.hero--compact {
  padding: 28px 0 32px;
}

.hero--compact .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
}

.hero--compact h1 {
  font-size: 1.7rem;
  margin: 6px 0 8px;
}

.hero--compact p {
  max-width: 60ch;
  margin-bottom: 0;
}

.hero-compact-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

#contacto-info {
  padding-top: 32px;
}

/* ---- Hero dividido: panel de texto sólido + foto real sin cubrir (home) ----
   El doctor debe verse nítido, sin overlay encima; el texto vive en su propio
   panel de color, no "flotando" sobre la cara. */
/* Hero de una sola pieza: la foto ocupa todo el bloque y el texto va
   directamente encima, con un velo oscuro (no una caja aparte) que se
   funde con la propia imagen para que siga legible. */
.hero--photo {
  position: relative;
  overflow: hidden;
  min-height: 534px;
  display: flex;
  align-items: center;
  padding: 0;
  background: var(--color-gray-dark);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(0, 20, 20, 0.75) 0%,
    rgba(0, 20, 20, 0.3) 50%,
    transparent 100%
  );
}

.hero-scrim::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 55%;
  height: 65%;
  background: radial-gradient(circle, rgba(43, 184, 174, 0.22), transparent 70%);
  pointer-events: none;
}

.hero-copy-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 36px clamp(24px, 6vw, 80px);
}

.hero--photo .hero-copy {
  max-width: min(460px, 100%);
}

.hero--photo h1 {
  font-family: "Inter", var(--font-base);
  color: var(--color-white);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.4rem + 1.7vw, 2.3rem);
  line-height: 1.12;
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

.hero-accent {
  color: var(--color-teal);
}

.hero--photo .hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: none;
  overflow-wrap: break-word;
}

.hero-experience {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-experience-number {
  font-family: "Inter", var(--font-base);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-teal);
  font-variant-numeric: tabular-nums;
}

.hero-experience-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero--photo .hero-actions .btn {
  padding: 13px 24px;
  font-size: 0.92rem;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Indicador sutil de "hay más contenido abajo" — fijo sobre toda la página,
   visible desde que carga, sin depender del alto del hero. Solo escritorio. */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-teal);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(43, 184, 174, 0.45);
  color: var(--color-white);
  animation: scrollCueBlink 2.4s ease-in-out infinite;
  transition: background 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-cue--hidden {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.scroll-cue:hover {
  background: var(--color-teal-dark);
}

.scroll-cue svg {
  width: 16px;
  height: 16px;
}

@keyframes scrollCueBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Curva de transición al pie del hero: evita el corte seco entre la foto
   oscura y el fondo claro de la sección siguiente. Se apoya sobre la foto
   (por eso va detrás del panel de texto, z-index 1) y su relleno es el
   mismo color de fondo que #vasectomia, así continúan sin costura. */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(32px, 5.5vw, 56px);
  z-index: 1;
  pointer-events: none;
  line-height: 0;
}

.hero-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-wave path {
  fill: var(--color-bg);
}

/* ---------- Section generic ---------- */
.section {
  padding: 64px 0;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section-eyebrow {
  color: var(--color-teal-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.section-header h2 {
  font-size: 1.8rem;
  color: var(--color-gray-dark);
  margin: 8px 0 0;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ---------- Vasectomía sin bisturí: destacados ---------- */
#vasectomia {
  padding-top: 8px;
  padding-bottom: 32px;
}

#vasectomia .section-header {
  max-width: 900px;
  margin-bottom: 24px;
}

#vasectomia .section-header h2 {
  font-size: 1.15rem;
}

@media (min-width: 901px) {
  #vasectomia .section-header h2 {
    font-family: "Inter", var(--font-base);
    font-size: 1.75rem;
    font-weight: 800;
    white-space: nowrap;
  }

  /* La tarjeta destacada ocupa toda la altura de la columna izquierda;
     las otras dos se apilan a la derecha — así la mirada va primero a
     la vasectomía sin bisturí, que es el procedimiento insignia. */
  #vasectomia .cards-grid {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto auto;
  }

  .card--featured {
    grid-row: 1 / 3;
  }
}

/* ---------- Cards grid (servicios / valores) ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 28px 28px;
  text-align: center;
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.4rem;
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

.card h4 {
  margin: 0 0 8px;
  color: var(--color-gray-dark);
}

.card p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* ---------- Tarjeta destacada: vasectomía sin bisturí ---------- */
.card--featured {
  background: linear-gradient(155deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  box-shadow: 0 16px 36px rgba(31, 156, 147, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card--featured .card-icon {
  width: 68px;
  height: 68px;
  background: var(--color-white);
  color: var(--color-white);
  overflow: hidden;
}

.card--featured .card-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.card--featured h4 {
  color: var(--color-white);
  font-size: 1.3rem;
}

.card-tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}

.card-tagline li {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.card-price {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.card-price-label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.card-price-amount {
  display: block;
  font-family: "Inter", var(--font-base);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--color-white);
  line-height: 1;
}

.card-price-old {
  font-family: "Inter", var(--font-base);
  font-weight: 700;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
}

.card-price-note {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
}

/* ---------- Cómo es el proceso ---------- */
#proceso {
  padding-top: 8px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.process-step {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
}

.process-step-number {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: "Inter", var(--font-base);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-teal-light);
}

.process-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.process-step-icon svg {
  width: 22px;
  height: 22px;
}

.process-step h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--color-gray-dark);
}

.process-step p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------- Sobre el doctor ---------- */
.about {
  background: var(--color-white);
  padding-bottom: 40px;
}

.about .container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}

/* La columna de texto es bastante más larga que la foto; sin esto, al
   bajar quedaría mucho texto colgando debajo de una imagen abandonada
   arriba. Se queda a la vista mientras dure la columna de texto. */
@media (min-width: 901px) {
  .about-image {
    position: sticky;
    top: 88px;
  }
}

.about-image-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.about-image-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.about-image-slideshow img.is-active {
  opacity: 1;
}

.about-image-caption {
  margin: 14px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Frase humana del doctor, debajo de su foto: discreta, sin caja, como
   una leyenda más — no un llamado de atención aparte. */
.about-quote {
  margin: 8px auto 0;
  max-width: 320px;
  text-align: center;
}

.about-quote p {
  margin: 0;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Título de subsección: se usa en encabezados que no tienen su propio
   .section-header (nombre del doctor, "Datos de contacto", "Ubicación") —
   antes quedaban sin estilo propio y heredaban el h3 por defecto del
   navegador. */
.subsection-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-gray-dark);
  margin: 10px 0 8px;
}

.about-lead {
  font-family: "Inter", var(--font-base);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  margin: 8px 0 10px;
  line-height: 1.35;
}

.about-intro {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.about-block {
  margin-bottom: 14px;
}

.about-block:last-child {
  margin-bottom: 0;
}

.about-block-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-dark);
  margin: 0 0 8px;
}

.about-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-timeline li {
  padding-left: 12px;
  border-left: 2px solid var(--color-teal-light);
  line-height: 1.4;
}

.about-timeline strong {
  display: inline;
  color: var(--color-gray-dark);
  font-size: 0.85rem;
}

.flag {
  display: inline-block;
  width: 18px;
  height: 13px;
  margin-left: 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  vertical-align: middle;
}

.about-timeline span {
  display: inline;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.about-timeline span::before {
  content: " · ";
}

/* La certificación de la técnica insignia va destacada aparte, con el
   mismo celeste fuerte que el resto del sitio usa para lo importante
   (precio, testimonios, CTA final) — compacta, no ocupa más que la foto. */
.about-certification {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 12px;
}

.about-certification + .about-certification {
  margin-top: 8px;
}

.about-certification-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-certification-icon svg {
  width: 16px;
  height: 16px;
}

.about-certification strong {
  display: block;
  color: var(--color-white);
  font-size: 0.82rem;
  line-height: 1.3;
  margin-bottom: 2px;
}

.about-certification span {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
}

.about-certification a {
  display: inline-block;
  margin-top: 2px;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-certification a:hover {
  text-decoration: underline;
}

/* ---------- Testimonios ---------- */
/* Azul clínico (celeste/turquesa de la marca, el mismo del bloque de
   precio): las tarjetas blancas con borde dorado flotan encima. */
#testimonios {
  padding-top: 8px;
  padding-bottom: 16px;
  background: linear-gradient(165deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

#testimonios .section-header {
  margin-bottom: 14px;
}

#testimonios .section-header h2 {
  color: var(--color-white);
}

.testimonials-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 6px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  max-width: calc(100% - 32px);
}

.testimonials-rating-stars {
  color: var(--color-gold-light);
  letter-spacing: 2px;
  font-size: 1.1rem;
  white-space: nowrap;
}

.testimonials-rating-text {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Carrusel real: el track se desliza horizontalmente por "slides" (cada
   uno ocupa el 100% del ancho visible), en vez de solo aparecer/ocultarse
   de golpe. JS agrupa las tarjetas en slides de a 2 (escritorio) o de a
   1 (móvil) y anima la transición con transform. */
.testimonials-carousel {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 18px;
}

.testimonial-stars {
  color: var(--color-gold);
  letter-spacing: 2px;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.testimonial-avatar--teal {
  background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark));
}

.testimonial-avatar--gold {
  background: linear-gradient(135deg, #dcb94f, var(--color-gold));
}

.testimonial-avatar--slate {
  background: linear-gradient(135deg, var(--color-gray), var(--color-gray-dark));
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 700;
  color: var(--color-gray-dark);
  font-size: 0.95rem;
}

.testimonial-date {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.testimonial-quote {
  flex-grow: 1;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 6px;
}

.testimonial-link {
  align-self: flex-start;
  color: var(--color-teal-dark);
  font-weight: 600;
  font-size: 0.8rem;
}

.testimonial-link:hover {
  text-decoration: underline;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.testimonial-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-teal-dark);
  font-size: 0.72rem;
  font-weight: 600;
}

.testimonial-verified-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ---------- Videos ---------- */
/* Reproductor propio: se ve la miniatura con un botón de play a medida;
   recién se carga el iframe de YouTube (modo sin cookies) al hacer clic,
   así nunca se sale del sitio ni se cargan scripts de YouTube de entrada. */
#videos {
  padding-top: 20px;
  background: var(--color-white);
}

#videos .section-header {
  margin-bottom: 24px;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 28px;
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-gray-dark);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease;
}

.video-thumb:hover::after {
  background: rgba(0, 0, 0, 0.12);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: var(--color-teal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 1;
}

.video-play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

.video-thumb:hover .video-play {
  background: var(--color-teal-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-thumb.is-playing::after,
.video-thumb.is-playing .video-play {
  display: none;
}

.video-thumb.is-playing {
  cursor: default;
}

.video-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-title {
  margin: 14px 0 0;
  text-align: center;
  color: var(--color-gray-dark);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- CTA banda ---------- */
/* Franja de Facebook: azul oficial, mucho más baja que la vieja banda
   de CTA (padding y tipografía reducidos para ocupar poco espacio). */
.social-band {
  background: #1877f2;
  padding: 12px 0;
}

.social-band-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.85rem;
  transition: opacity 0.2s ease;
}

.social-band-link:hover {
  opacity: 0.85;
}

.social-band-link svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.social-band-link strong {
  font-weight: 700;
}

.social-band-arrow {
  width: 14px !important;
  height: 14px !important;
  margin-left: -2px;
  transition: transform 0.2s ease;
}

.social-band-link:hover .social-band-arrow {
  transform: translateX(4px);
}

/* ---------- Preguntas frecuentes ---------- */
#faq {
  padding-top: 20px;
  padding-bottom: 24px;
}

#faq .section-header {
  margin-bottom: 24px;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-teal-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 48px 18px 22px;
  font-weight: 700;
  color: var(--color-gray-dark);
  font-size: 0.98rem;
  transition: background 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: var(--color-teal-light);
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-teal);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary {
  border-bottom: 1px solid var(--color-teal-light);
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 16px 22px 20px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.faq-item p a {
  color: var(--color-teal-dark);
  font-weight: 600;
}

.faq-item p a:hover {
  text-decoration: underline;
}

/* ---------- CTA final con foto del doctor ---------- */
/* La franja celeste es angosta (igual de "delgada" que la de Facebook);
   el doctor (recorte con fondo transparente) sobresale por arriba, así
   que la sección reserva espacio vacío arriba de la franja para que la
   foto "flote" sin taparse ni cortarse. */
.doctor-cta-band {
  position: relative;
  padding-top: 168px;
}

.doctor-cta-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  background: linear-gradient(165deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
}

.doctor-cta-container {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 22px;
}

.doctor-cta-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 200px;
  position: relative;
  z-index: 2;
}

.doctor-cta-copy h2 {
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
}

.doctor-cta-btn {
  background: var(--color-white);
  color: var(--color-teal-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.doctor-cta-btn:hover {
  background: var(--color-teal-light);
}

.doctor-cta-btn svg {
  width: 15px;
  height: 15px;
}

.doctor-cta-photo {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 242px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.3));
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--color-teal-light);
  color: var(--color-teal-dark);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
  overflow: hidden;
}

.map-placeholder + .map-placeholder {
  margin-top: 16px;
}

.map-placeholder iframe,
.map-placeholder img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.location-caption {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.location-address {
  display: none;
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-gray-dark);
  color: var(--color-white);
  padding: 20px 0 12px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
  padding-bottom: 14px;
}

.footer-top h5 {
  color: var(--color-white);
  margin: 0 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.footer-top p,
.footer-top a {
  color: #c3cbd1;
  font-size: 0.85rem;
}

.footer-top ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: #97a1a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-credit {
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  font-weight: 600;
  color: #e8c547;
}

.footer-credit a {
  color: #e8c547;
}

.footer-credit a:hover {
  text-decoration: underline;
}

/* ---------- CTA fija (solo móvil) ---------- */
/* En desktop el WhatsApp del hero y de la franja final ya están siempre
   a mano; en móvil, mientras el usuario lee testimonios/FAQ, conviene
   tener el contacto siempre visible sin tener que volver a subir. */
.mobile-sticky-cta {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .container,
  .about .container,
  .contact-grid,
  .testimonial-slide,
  .videos-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .hero--compact .container {
    gap: 20px;
  }

  .hero-compact-logo {
    width: 80px;
    height: 80px;
  }

  .mobile-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .mobile-sticky-cta.is-visible {
    transform: translateY(0);
  }

  .mobile-sticky-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .location-address {
    display: block;
  }

  /* Sin esto, un hijo con texto "white-space: nowrap" (el badge de
     vasectomía) fuerza a toda la columna del grid a expandirse para
     acomodarlo, agrandando de paso la foto y el resto de la sección. */
  .about-image,
  .about-copy {
    min-width: 0;
  }

  .testimonials-rating {
    padding: 6px 14px;
    gap: 4px 8px;
  }

  .testimonials-rating-stars {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .testimonials-rating-text {
    font-size: 0.8rem;
  }

  .doctor-cta-band {
    padding-top: 220px;
  }

  .doctor-cta-bar {
    height: 88px;
  }

  .doctor-cta-container {
    flex-direction: column;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .doctor-cta-copy {
    flex-direction: column;
    gap: 8px;
    padding-right: 0;
  }

  .doctor-cta-copy h2 {
    font-size: 1rem;
  }

  .doctor-cta-btn {
    padding: 7px 14px;
    font-size: 0.78rem;
  }

  .doctor-cta-btn svg {
    width: 13px;
    height: 13px;
  }

  .doctor-cta-photo {
    right: 50%;
    bottom: 86px;
    transform: translateX(50%);
    height: 219px;
  }

  /* Foto pegada al texto: el nombre bajo la imagen no hace falta en
     móvil (ya está el h3 justo debajo) y el espacio entre ambas se
     reduce bastante. */
  .about-image-caption {
    display: none;
  }

  .about .container {
    gap: 16px;
  }

  /* Barra superior e header más compactos: en desktop hay espacio de sobra,
     en móvil ocupaban casi media pantalla. */
  .topbar {
    font-size: 0.66rem;
  }

  .topbar .container {
    padding-top: 4px;
    padding-bottom: 4px;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
  }

  /* En pantallas angostas el correo se quita para que hora + teléfono
     quepan en una sola línea */
  .topbar-secondary {
    display: none;
  }

  .scroll-cue {
    display: none;
  }

  /* Borde celeste al final del header para separarlo bien de la foto */
  .site-header {
    border-bottom: 3px solid var(--color-teal);
  }

  .site-header .container {
    justify-content: space-between;
    gap: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .brand img {
    height: 32px;
  }

  .brand-text h1 {
    font-size: 1rem;
    line-height: 1.1;
  }

  .brand-text span {
    display: none;
  }

  .header-mobile-contact {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid var(--color-teal);
    color: var(--color-teal-dark);
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Hero en móvil: misma idea que escritorio (texto encima de la foto,
     no una caja aparte), solo que el velo cubre todo el ancho porque el
     panel de texto ya no tiene una columna angosta donde apoyarse. */
  .hero--photo {
    min-height: 383px;
    align-items: flex-end;
  }

  .hero-media img {
    object-position: 15% 16%;
    transform: scale(1.25);
    transform-origin: 15% 16%;
  }

  /* El panel de texto ocupa solo la parte de abajo (se ancla con
     flex-end), así que arriba queda una franja de foto para que el
     doctor se vea bien — pero con un gris parejo desde el inicio, no
     transparente del todo, y recién se pone fuerte donde empieza el
     texto. */
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(9, 13, 16, 0.4) 0%,
      rgba(9, 13, 16, 0.16) 10%,
      rgba(9, 13, 16, 0.26) 30%,
      rgba(9, 13, 16, 0.4) 46%,
      rgba(9, 13, 16, 0.6) 58%,
      rgba(9, 13, 16, 0.74) 72%,
      rgba(9, 13, 16, 0.8) 100%
    );
  }

  .hero--photo h2 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(0, 0, 0, 0.55);
  }

  .hero--photo .hero-sub {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.75);
  }

  .hero-experience-text {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  }

  .hero-scrim::before {
    top: auto;
    bottom: -10%;
    left: -20%;
    width: 80%;
    height: 45%;
  }

  .hero-copy-panel {
    padding: 28px 22px 32px;
  }

  .hero--photo .hero-copy {
    max-width: none;
  }

  .hero--photo h2 {
    font-size: clamp(1.4rem, 1rem + 3.2vw, 1.7rem);
    margin: 10px 0 6px;
  }

  .hero--photo .hero-sub {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .hero-experience {
    margin-bottom: 20px;
    padding-top: 14px;
  }

  .hero-experience-number {
    font-size: 2rem;
  }

  .hero-experience-text {
    font-size: 0.78rem;
  }

  .hero--photo .hero-actions .btn {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    font-size: 0.88rem;
  }

  .main-nav {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

}