/* ============================================
   ARMONÍA BY ANA MARÍA HERRERA — Estilos base
   Paleta digital oficial + tipografía Lora (títulos) / Parisienne (subtítulos) / Poppins (texto)
   ============================================ */

:root {
  /* Paleta digital Armonía (uso en UI: botones, enlaces, acentos) */
  --turquesa: #62C3CB;
  --rosa: #E8A0BF;
  --purpura: #C9A7D9;
  --oro: #C9A96E;

  /* Variantes AA (WCAG 4.5:1) — SOLO para texto y botones interactivos.
     Los tonos originales de arriba se conservan para fondos, ilustraciones,
     bordes decorativos e iconos. Ver decision-stack-tecnico.md (29-ago-2026). */
  --turquesa-texto: #2B7C83;
  --purpura-texto: #9B5CB9;
  --oro-texto: #8C6D34;
  --oro-boton: #927136;

  /* Neutros / fondos */
  --crema: #FAF7F2;
  --blanco: #FFFFFF;
  --gris-texto: #2A2A2A;
  --gris-suave: #6B6B6B;

  /* Tipografía */
  --font-display: 'Lora', serif;       /* Títulos: H1, H2, H3, H4 */
  --font-script: 'Parisienne', cursive;  /* Subtítulos / taglines destacados — alternativa libre a Brittany */
  --font-body: 'Poppins', sans-serif;  /* Texto de cuerpo, UI, botones */

  --radius: 12px;
  --shadow-suave: 0 8px 24px rgba(42, 42, 42, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--gris-texto);
  background: var(--crema);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

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

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gris-texto);
}

h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(28px, 4vw, 38px); }
h3 { font-size: 22px; }

p { font-size: 17px; color: var(--gris-texto); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--oro-texto);
}

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--rosa { background: linear-gradient(180deg, #FFFFFF 0%, #FDF3F7 100%); }
.section--turquesa { background: linear-gradient(180deg, #FFFFFF 0%, #F0FAFB 100%); }

.section-head { max-width: 680px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--oro-boton);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(201, 169, 110, 0.35);
}
.btn--primary:hover { box-shadow: 0 10px 22px rgba(201, 169, 110, 0.45); }

.btn--whatsapp {
  background: var(--crema);
  border-color: var(--oro);
  color: var(--gris-texto);
}

.btn--outline {
  background: transparent;
  border-color: var(--purpura);
  color: var(--gris-texto);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(42,42,42,0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.site-header__logo img { height: 52px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--gris-texto);
}
.site-nav a:hover { color: var(--turquesa); }
/* .site-nav a (2 selectores) empataba en especificidad con .btn--primary y ganaba
   por orden de cascada, pintando el CTA "Agenda tu cita" del menú en gris oscuro
   en vez de blanco. Fix sitewide 29-ago-2026. */
.site-nav .btn--primary { color: var(--blanco); }
.site-nav .btn--primary:hover { color: var(--blanco); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--gris-texto);
}

@media (max-width: 880px) {
  .site-nav { position: fixed; top: 82px; left: 0; right: 0; background: var(--blanco);
    flex-direction: column; align-items: flex-start; padding: 24px; gap: 18px;
    box-shadow: var(--shadow-suave); transform: translateY(-140%); transition: transform .25s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .nav-toggle { display: block; }
}

/* Hero */
.hero {
  position: relative;
  padding: 56px 0 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(232,160,191,0.18), transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(98,195,203,0.18), transparent 45%),
    var(--crema);
  overflow: hidden;
}

.hero__card {
  background: var(--blanco);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(42,42,42,0.10);
  padding: 48px 48px 40px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 620px) { .hero__card { padding: 32px 20px 28px; border-radius: 20px; } }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  position: relative;
}

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

.hero__swoosh {
  position: absolute;
  top: -60px;
  left: -160px;
  width: 520px;
  height: 520px;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

.hero__copy { position: relative; z-index: 1; }
.hero__copy h1 { font-size: clamp(30px, 5vw, 50px); }

.hero__tagline {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 38px;
  color: var(--purpura-texto);
  margin: 10px 0 18px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }

/* Píldoras de íconos (confianza) */
.icon-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 36px;
}
.icon-pill { display: flex; flex-direction: column; align-items: center; text-align: center; width: 96px; }
.icon-pill__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--crema);
  border: 1.5px solid rgba(201,169,110,0.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-suave);
}
.icon-pill span:last-child {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gris-texto);
  line-height: 1.3;
}

/* Foto: tarjetas superpuestas (consultorio + retrato de la doctora) */
.hero__photos {
  position: relative;
  z-index: 1;
  min-height: 380px;
}
.hero__photo-main {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(42,42,42,0.18);
  aspect-ratio: 4 / 5;
  margin-left: auto;
  width: 88%;
}
.hero__photo-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }

.hero__photo-inset {
  position: absolute;
  left: -8px;
  bottom: 18px;
  width: 46%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid var(--blanco);
  box-shadow: 0 16px 34px rgba(42,42,42,0.22);
}
.hero__photo-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 880px) {
  .hero__photo-main { width: 100%; margin: 0 auto; }
  .hero__photo-inset { width: 42%; left: 8px; bottom: 14px; }
}

.hero__logo-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px; height: 118px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 10px 26px rgba(42,42,42,0.18);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  z-index: 2;
}
.hero__logo-badge img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 880px) { .hero__logo-badge { display: none; } }


.trust-strip {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 14px;
  color: var(--gris-suave);
}
.trust-strip span { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Barra de confianza (morada, debajo del hero) */
.trust-bar {
  background: linear-gradient(120deg, var(--purpura), #B79BD1);
  padding: 22px 0;
}
.trust-bar__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanco);
  font-size: 14.5px;
  font-weight: 600;
}
.trust-bar__item span { font-size: 18px; }
@media (max-width: 780px) { .trust-bar__grid { justify-content: center; text-align: center; } }

/* Franja "Una clínica pensada para ti" (comodidades, debajo de la barra de confianza) */
.perks-strip {
  background: var(--crema);
  padding: 26px 0;
  border-bottom: 1px solid rgba(42,42,42,0.06);
}
.perks-strip__label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gris-texto);
  font-weight: 600;
  margin: 0 0 16px;
}
.perks-strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.perks-strip__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border: 1px solid rgba(42,42,42,0.08);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gris-texto);
}
.perks-strip__item span { font-size: 16px; }

/* Servicios destacados (Home) — carrusel horizontal */
.services-home {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 32px;
  align-items: center;
}
.services-home__intro h2 { font-size: clamp(24px, 2.6vw, 32px); }
.services-home__intro .btn { margin-top: 8px; }
@media (max-width: 980px) {
  .services-home { grid-template-columns: 1fr; }
}

.services-home__scroll-area { position: relative; min-width: 0; }

.services-home__scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.services-home__scroller::-webkit-scrollbar { display: none; }

.mini-service {
  flex: 0 0 190px;
  scroll-snap-align: start;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 26px 20px;
  text-align: center;
  transition: transform .15s ease;
}
.mini-service:hover { transform: translateY(-4px); }
.mini-service__icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 16px;
}
.mini-service__icon--turquesa { background: rgba(98,195,203,0.18); }
.mini-service__icon--purpura { background: rgba(201,167,217,0.20); }
.mini-service__icon--rosa { background: rgba(232,160,191,0.20); }
.mini-service h3 { font-size: 16px; margin-bottom: 8px; }
.mini-service p { font-size: 13px; color: var(--gris-suave); }

.services-home__arrow {
  position: absolute;
  right: -8px;
  top: 45%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--blanco);
  border: none;
  box-shadow: 0 8px 20px rgba(42,42,42,0.18);
  font-size: 20px;
  color: var(--gris-texto);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.services-home__arrow:hover { background: var(--oro); color: var(--blanco); }
@media (max-width: 620px) { .services-home__arrow { display: none; } }

/* Carrusel de servicios del Home — variante con foto real (reutiliza las mismas
   fotos de servicios.html; se aplica solo a los servicios que ya tienen foto). */
.mini-service.mini-service--photo {
  position: relative;
  padding: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-align: left;
}
.mini-service--photo .mini-service__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-service--photo .mini-service__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(42,42,42,0) 40%, rgba(42,42,42,0.82) 100%);
  transition: opacity .3s ease;
}
.mini-service--photo .mini-service__icon {
  position: absolute;
  top: 12px; left: 12px;
  margin: 0;
  width: 34px; height: 34px;
  font-size: 16px;
}
.mini-service--photo h3 { color: var(--blanco); font-size: 15px; margin-bottom: 4px; }
.mini-service--photo p { color: rgba(255,255,255,0.88); font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .mini-service--photo:hover .mini-service__overlay { opacity: 0; }
}
.mini-service--photo:focus-visible .mini-service__overlay { opacity: 1; }

/* Testimonios — collage de pacientes reales (con consentimiento) + badge real de Google Reviews */
.testimonial-placeholder {
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: center;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 40px 36px;
}
.testimonial-placeholder__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(160deg, var(--rosa), var(--purpura));
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 18px;
}
.testimonial-placeholder p { color: var(--gris-suave); margin-bottom: 20px; }

.testimonial-photos {
  max-width: 900px;
  margin: 0 auto 28px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-suave);
}
.testimonial-photos img { width: 100%; height: auto; display: block; }

/* Tarjetas de reseñas reales de Google — 3 columnas, responsive */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 32px;
}
@media (max-width: 880px) { .review-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 28px 24px;
}
.review-card__stars { color: #FBBC04; font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.review-card__quote { color: var(--gris-texto); font-size: 15px; line-height: 1.6; margin-bottom: 14px; font-style: italic; }
.review-card__author { color: var(--purpura-texto); font-weight: 600; font-size: 14px; }
.review-card__author a { color: inherit; text-decoration: none; }
.review-card__author a:hover { text-decoration: underline; }

/* Badge real de Google Reviews — datos reales de la ficha de Google Business
   de Armonía (NO inventar cifras: actualizar rating/reseñas manualmente
   cuando cambien en Google). Enlaza directo a la ficha vía CID. */
.google-badge {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 22px 28px;
}
.google-badge__logo { flex: 0 0 auto; width: 34px; height: 34px; }
.google-badge__info { flex: 1 1 auto; text-align: left; }
.google-badge__rating-row { display: flex; align-items: baseline; gap: 8px; }
.google-badge__rating { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--gris-texto); }
.google-badge__stars { color: var(--oro); font-size: 15px; letter-spacing: 1px; }
.google-badge__count { font-size: 13.5px; color: var(--gris-suave); margin-top: 2px; }
.google-badge__link {
  font-size: 13.5px; font-weight: 600; color: var(--purpura-texto);
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.google-badge__link:hover { color: var(--oro-texto); }
@media (max-width: 480px) {
  .google-badge { padding: 18px 20px; gap: 14px; }
}

/* Barra de información (teal, antes del footer) */
.info-strip {
  background: linear-gradient(120deg, var(--turquesa), #4FB0B8);
  padding: 26px 0;
}
.info-strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 28px;
}
.info-strip__item { display: flex; align-items: center; gap: 12px; color: var(--blanco); }
.info-strip__item strong { display: block; font-size: 14px; }
.info-strip__item .sub { display: block; font-size: 12.5px; color: rgba(255,255,255,0.85); font-weight: 400; }
.info-strip__icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.info-strip__social { display: flex; gap: 10px; }
.info-strip__social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.info-strip__social a:hover { background: var(--blanco); }
@media (max-width: 780px) { .info-strip__grid { justify-content: center; text-align: center; } }

/* Cards genéricas */
.card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-suave);
  height: 100%;
}

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

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Quiénes somos */
.about-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .about-block { grid-template-columns: 1fr; } }

/* Carrusel de fotos del consultorio (Quiénes somos) */
.about-carousel {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--turquesa), var(--purpura));
  min-height: 380px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(42,42,42,0.15);
}
.about-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
}
.about-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.about-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.about-carousel__slide img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}
.about-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--oro);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.about-carousel__arrow:hover,
.about-carousel__arrow:focus-visible {
  background: var(--blanco);
  transform: translateY(-50%) scale(1.08);
}
.about-carousel__arrow--prev { left: 14px; }
.about-carousel__arrow--next { right: 14px; }
.about-carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}
/* Botón real de 24x24 (mínimo táctil accesible) con el punto visual de 9px
   centrado dentro — el tamaño y espaciado visible del carrusel no cambia,
   solo crece el área invisible donde se puede tocar/hacer clic. */
.about-carousel__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-carousel__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  transition: background 0.2s ease, transform 0.2s ease;
}
.about-carousel__dot.is-active::before {
  background: var(--oro);
  transform: scale(1.25);
}
@media (max-width: 620px) {
  .about-carousel__arrow { width: 34px; height: 34px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-carousel__slide { transition: none; }
}

.pillars { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.pillar { flex: 1; min-width: 160px; }
.pillar strong { display: block; font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; }
.pillar--centered { text-align: center; }
.pillar--centered strong { color: var(--turquesa-texto); }

/* Enlaces dentro de texto de las FAQ — deben notarse como enlaces (color + subrayado) */
.faq-item p a {
  color: var(--purpura-texto);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(201, 167, 217, 0.45);
  text-underline-offset: 3px;
}
.faq-item p a:hover { color: var(--oro-texto); text-decoration-color: rgba(201, 169, 110, 0.5); }

/* Valores ARMONIE */
.values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.value-chip {
  background: var(--blanco);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}
.value-chip b { color: var(--oro-texto); }

/* Servicios */
.service-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-suave);
  border-top: 4px solid var(--turquesa);
  transition: transform .15s ease;
}
.service-card:hover { transform: translateY(-4px); }
.service-card:nth-child(3n+2) { border-top-color: var(--rosa); }
.service-card:nth-child(3n+3) { border-top-color: var(--purpura); }
.service-card__icon { font-size: 30px; margin-bottom: 12px; }
.service-card h3 { margin-bottom: 8px; font-size: 19px; }
.service-card p { font-size: 15px; color: var(--gris-suave); margin-bottom: 14px; }
.service-card a { font-size: 14px; font-weight: 700; color: var(--oro-texto); }

/* Servicios — variante con foto real (PRUEBA, 27-ago-2026, solo Odontología General).
   Clase modificadora aislada: no cambia .service-card base, así que las tarjetas
   "Servicios relacionados" de las 12 páginas individuales quedan intactas. */
.service-card.service-card--photo {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: none;
  text-decoration: none;
  color: inherit;
}
.service-card--photo .service-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card--photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: var(--turquesa);
  z-index: 2;
}
.service-card--photo:nth-child(3n+2)::after { background: var(--rosa); }
.service-card--photo:nth-child(3n+3)::after { background: var(--purpura); }
.service-card--photo .service-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(42,42,42,0) 35%, rgba(42,42,42,0.82) 100%);
  transition: opacity .3s ease;
}
.service-card--photo .service-card__icon { font-size: 24px; margin-bottom: 6px; }
.service-card--photo h3 { color: var(--blanco); margin-bottom: 6px; }
.service-card--photo p { color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.service-card--photo .service-card__cta { font-size: 14px; font-weight: 700; color: var(--blanco); }
@media (hover: hover) and (pointer: fine) {
  .service-card--photo:hover .service-card__overlay { opacity: 0; }
}
.service-card--photo:focus-visible .service-card__overlay { opacity: 1; }

/* Cifras que respaldan (contadores animados, Home) */
.stats-band { background: linear-gradient(180deg, #FFFFFF 0%, #FBF6FF 100%); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
@media (max-width: 980px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: 32px; } }

.stat-item { padding-top: 14px; border-top: 3px solid var(--turquesa); }
.stat-item:nth-child(2) { border-top-color: var(--rosa); }
.stat-item:nth-child(3) { border-top-color: var(--purpura); }
.stat-item:nth-child(4) { border-top-color: var(--oro); }

.stat-item__number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--gris-texto);
  margin-bottom: 8px;
}
@media (max-width: 480px) { .stat-item__number { font-size: 36px; } }

.stat-item__label { font-size: 15px; color: var(--gris-suave); font-weight: 600; }

/* Por qué elegirnos */
.why-card { text-align: center; padding: 32px 22px; }
.why-card__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(160deg, var(--rosa), var(--purpura));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 26px; color: var(--blanco);
}

/* FAQ */
.faq-item {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-item summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--oro-texto); }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { padding: 0 24px 22px; color: var(--gris-suave); font-size: 15.5px; }

/* CTA final */
.cta-band {
  background: linear-gradient(120deg, var(--turquesa), var(--purpura));
  border-radius: 28px;
  padding: 56px;
  color: var(--blanco);
  text-align: center;
  margin: 0 24px;
}
.cta-band h2 { color: var(--blanco); }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 14px auto 28px; }
.cta-band .btn--primary { background: var(--blanco); color: var(--gris-texto); box-shadow: none; }

/* Footer */
.site-footer {
  background: #2A2A2A;
  color: #EDEDED;
  padding: 64px 0 24px;
  margin-top: 88px;
}
.site-footer a { color: #EDEDED; }
.site-footer a:hover { color: var(--turquesa); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3 { color: var(--blanco); font-size: 16px; margin-bottom: 16px; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; font-size: 14.5px; color: #C8C8C8; }
.footer-logo img { height: 110px; width: auto; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 48px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: #999;
}

/* WhatsApp flotante */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--crema);
  border: 2px solid var(--oro);
  color: var(--gris-texto);
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.whatsapp-float:hover { transform: translateY(-2px); }

/* Banner de cookies / Habeas Data */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 20px 24px;
  z-index: 300;
  display: none;
  font-size: 14px;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner p { font-size: 13.5px; color: var(--gris-suave); margin-bottom: 14px; }
.cookie-banner a { color: var(--oro-texto); font-weight: 700; }
.cookie-banner__actions { display: flex; gap: 12px; }
.cookie-banner .btn { padding: 10px 18px; font-size: 13.5px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--oro); color: #fff;
  padding: 10px 16px; z-index: 999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Encabezado de sección solo para lectores de pantalla — mantiene el orden
   semántico de encabezados (h1 > h2 > h3...) sin agregar texto visible. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PÁGINA: SOBRE NOSOTROS
   ============================================ */

.page-hero {
  padding: 56px 0 40px;
  text-align: center;
  background: linear-gradient(180deg, #FDF3F7 0%, var(--crema) 100%);
}
.page-hero .eyebrow { justify-content: center; }
.page-hero p.lead { max-width: 640px; margin: 16px auto 0; color: var(--gris-suave); font-size: 18px; }

.founder-block { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .founder-block { grid-template-columns: 1fr; } }

.founder-photo {
  border-radius: 24px;
  background: linear-gradient(160deg, var(--rosa), var(--oro));
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 18px;
  text-align: center;
  padding: 24px;
}

.founder-credentials { margin-top: 18px; }
.founder-credentials li {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 10px; font-size: 15.5px; color: var(--gris-texto);
}
.founder-credentials li::before { content: '🎓'; flex-shrink: 0; }

/* Valores extendidos */
.value-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-suave);
  text-align: center;
}
.value-card .letter {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(160deg, var(--turquesa), var(--purpura));
  color: var(--blanco); font-family: var(--font-display); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.value-card h3 { font-size: 16px; margin-bottom: 6px; }
.value-card p { font-size: 13.5px; color: var(--gris-suave); }

/* Equipo */
.team-card {
  background: var(--blanco);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-suave);
  text-align: center;
}
.team-card__photo {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--turquesa), var(--rosa));
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
}
.team-card__body { padding: 20px; }
.team-card__body h3 { font-size: 17px; margin-bottom: 4px; }
.team-card__role { font-size: 13.5px; color: var(--oro-texto); font-weight: 700; margin-bottom: 8px; }
.team-card__body p { font-size: 14px; color: var(--gris-suave); }

/* Línea de tiempo / filosofía */
.philosophy-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 780px) { .philosophy-strip { grid-template-columns: 1fr; } }
.philosophy-item { border-left: 3px solid var(--oro); padding-left: 18px; }
.philosophy-item h3 { font-size: 18px; margin-bottom: 8px; }
.philosophy-item p { font-size: 14.5px; color: var(--gris-suave); }

/* ============================================
   PÁGINA: SUBPÁGINA DE SERVICIO
   ============================================ */

.breadcrumb { font-size: 13.5px; color: var(--gris-suave); margin-bottom: 14px; }
.breadcrumb a { color: var(--oro-texto); font-weight: 600; }

.service-detail { max-width: 760px; margin: 0 auto; }
.service-detail h2 { margin-top: 44px; margin-bottom: 14px; font-size: 26px; }
.service-detail h2:first-child { margin-top: 0; }
.service-detail p { margin-bottom: 14px; }
.service-detail ul { margin: 0 0 14px 20px; }
.service-detail li { margin-bottom: 8px; font-size: 16px; }

.callout {
  background: var(--blanco);
  border-left: 4px solid var(--oro);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 15.5px;
  color: var(--gris-suave);
  box-shadow: var(--shadow-suave);
}

.related-services { margin-top: 8px; }
.related-services .grid--3 { margin-top: 16px; }

/* ============================================
   PÁGINA: CONTACTO / AGENDA TU CITA
   ============================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 36px;
  margin-bottom: 24px;
}
.contact-form h2 { font-size: 22px; margin-bottom: 6px; }
.contact-form > p { color: var(--gris-suave); font-size: 15px; margin-bottom: 26px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--gris-texto);
}
.form-group .req { color: var(--rosa); }

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 13px 16px;
  border: 1.5px solid rgba(42,42,42,0.15);
  border-radius: 8px;
  background: var(--crema);
  color: var(--gris-texto);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--turquesa);
  background: var(--blanco);
}
.form-group textarea { resize: vertical; min-height: 110px; }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.form-check input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--oro); }
.form-check label { font-size: 13.5px; color: var(--gris-suave); font-weight: 400; }
.form-check a { color: var(--oro-texto); font-weight: 700; }

.form-note {
  font-size: 13px;
  color: var(--gris-suave);
  margin-top: 14px;
}
.form-note.form-error { color: #C0405A; font-weight: 600; }

.info-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 32px;
  margin-bottom: 24px;
}
.info-card h3 { font-size: 18px; margin-bottom: 18px; }
.info-list { list-style: none; }
.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 15px;
}
.info-list li:last-child { margin-bottom: 0; }
.info-list .info-icon { font-size: 18px; flex-shrink: 0; }
.info-list a { color: var(--gris-texto); font-weight: 600; }
.info-list a:hover { color: var(--turquesa); }

.hours-table { width: 100%; font-size: 14.5px; }
.hours-table td { padding: 6px 0; }
.hours-table td:first-child { font-weight: 600; color: var(--gris-texto); }
.hours-table td:last-child { text-align: right; color: var(--gris-suave); }
.hours-table .ampm { font-size: 0.8em; }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-suave);
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 280px; border: 0; display: block; }

.social-row { display: flex; gap: 12px; margin-top: 4px; }
.social-row a {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--crema); border: 1.5px solid var(--oro);
  display: flex; align-items: center; justify-content: center;
  color: var(--gris-texto);
}
.social-row a:hover { background: var(--oro); color: var(--blanco); }

/* Íconos SVG de marca (Instagram, Facebook, YouTube, WhatsApp) —
   reemplazan los emoji genéricos en botones "Síguenos" y el flotante de WhatsApp. */
.social-icon { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.info-strip__social a .social-icon { width: 17px; height: 17px; }
.whatsapp-float .social-icon { width: 18px; height: 18px; }

/* ============================================
   BLOG — ÍNDICE Y ARTÍCULOS
   ============================================ */

/* Índice /blog.html */
.blog-search { position: relative; max-width: 480px; margin: 0 auto 40px; }
.blog-search input[type="search"] {
  width: 100%;
  padding: 13px 44px 13px 46px;
  border: 1.5px solid rgba(42,42,42,0.14);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gris-texto);
  background: var(--blanco);
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.blog-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.blog-search input[type="search"]:focus {
  outline: none;
  border-color: var(--turquesa);
  box-shadow: 0 0 0 3px rgba(98,195,203,0.18);
}
.blog-search__icon {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gris-suave); pointer-events: none;
}
.blog-search__clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--gris-suave);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 6px;
  display: none;
}
.blog-search__clear.is-visible { display: block; }
.blog-search__clear:hover { color: var(--gris-texto); }
.blog-search__empty {
  display: none;
  text-align: center;
  color: var(--gris-suave);
  font-size: 15.5px;
  padding: 30px 20px 46px;
}
.blog-search__empty.is-visible { display: block; }
.blog-search__empty a { color: var(--oro-texto); font-weight: 700; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 780px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card__thumb {
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: linear-gradient(160deg, var(--turquesa), var(--purpura));
  overflow: hidden;
}
.blog-card:nth-child(2n) .blog-card__thumb { background: linear-gradient(160deg, var(--rosa), var(--oro)); }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.blog-card .eyebrow { margin-bottom: 8px; }
.blog-card h2, .blog-card h3 { font-size: 20px; margin-bottom: 10px; }
.blog-card p { font-size: 15px; color: var(--gris-suave); flex: 1; margin-bottom: 16px; }
.blog-card__meta { font-size: 13px; color: var(--gris-suave); display: flex; justify-content: space-between; align-items: center; }
.blog-card__meta a { font-weight: 700; color: var(--oro-texto); }

/* Artículo individual */
.article-hero { padding: 48px 0 36px; text-align: left; background: linear-gradient(180deg, #F0FAFB 0%, var(--crema) 100%); }
.article-hero .container { max-width: 780px; }

.article-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(42,42,42,0.14);
  margin-bottom: 32px;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 14px; color: var(--gris-suave); margin-top: 18px; }
.article-meta strong { color: var(--gris-texto); }

.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { margin-top: 46px; margin-bottom: 6px; font-size: 25px; }
.article-body h2:first-of-type { margin-top: 0; }
.article-body .section-sub { color: var(--gris-suave); font-size: 15px; margin-bottom: 18px; }
.article-body p { margin-bottom: 16px; }
.article-body ul { margin: 0 0 16px 20px; }
.article-body li { margin-bottom: 8px; }
.article-body h3 { margin-top: 28px; margin-bottom: 10px; font-size: 18px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 28px 0 8px;
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-box {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 20px 16px;
  text-align: center;
}
.stat-box .num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--oro-texto); display: block; }
.stat-box .label { font-size: 12.5px; color: var(--gris-suave); margin-top: 6px; display: block; line-height: 1.4; }

.quote-block {
  background: linear-gradient(120deg, rgba(98,195,203,0.10), rgba(201,167,217,0.10));
  border-left: 4px solid var(--purpura);
  border-radius: 8px;
  padding: 22px 26px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  color: var(--gris-texto);
}
.quote-block cite { display: block; margin-top: 12px; font-family: var(--font-body); font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--oro-texto); }

.risk-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 20px 24px;
  margin-bottom: 14px;
  border-left: 4px solid var(--turquesa);
}
.risk-card.riesgo-alto { border-left-color: var(--rosa); }
.risk-card.riesgo-moderado { border-left-color: var(--oro); }
.risk-card .risk-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-suave);
  margin-bottom: 6px;
}
.risk-card h3 { font-size: 17px; margin-bottom: 8px; }
.risk-card p { font-size: 15px; margin-bottom: 0; color: var(--gris-suave); }

.compare-table-wrap { overflow-x: auto; margin: 24px 0; }
.compare-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14.5px; margin: 0; }
.compare-table th, .compare-table td { border: 1px solid rgba(42,42,42,0.1); padding: 12px 14px; text-align: left; vertical-align: top; }
.compare-table th { background: var(--crema); font-family: var(--font-display); font-weight: 700; }

.fix-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.fix-table td { border-bottom: 1px solid rgba(42,42,42,0.08); padding: 12px 14px; vertical-align: top; }
.fix-table tr td:first-child { color: #B0475F; width: 45%; }
.fix-table tr td:last-child { color: var(--gris-texto); font-weight: 600; }

.author-box {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 26px;
  margin: 44px 0;
}
.author-box__avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(160deg, var(--turquesa), var(--rosa));
  color: var(--blanco); font-family: var(--font-display); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.author-box h3 { font-size: 16px; margin-bottom: 4px; }
.author-box p { font-size: 13.5px; color: var(--gris-suave); margin: 0; }

.related-posts { margin-top: 8px; }
.related-posts .grid--3 { margin-top: 16px; }

/* ============================================
   PÁGINA: CASOS & RESULTADOS
   ============================================ */

.cases-compliance {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--blanco);
  border: 1px solid rgba(201,169,110,0.30);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 26px 28px;
  margin-bottom: 12px;
}
.cases-compliance__icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: rgba(201,169,110,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.cases-compliance p { font-size: 14.5px; color: var(--gris-suave); margin: 0 0 6px; }
.cases-compliance p:last-child { margin-bottom: 0; }
.cases-compliance strong { color: var(--gris-texto); }

.cases-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 36px 0 32px;
}
.cases-filter button {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  color: var(--gris-texto);
  background: var(--blanco);
  border: 1.5px solid rgba(42,42,42,0.12);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .15s ease;
}
.cases-filter button:hover { border-color: var(--oro); }
.cases-filter button.is-active { background: var(--oro-boton); border-color: var(--oro-boton); color: var(--blanco); }

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cases-grid { grid-template-columns: 1fr; } }

.case-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  overflow: hidden;
}
.case-card__photos { display: grid; grid-template-columns: 1fr 1fr; }
.case-card__photo {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 13.5px;
  padding: 14px;
  position: relative;
}
.case-card__photo--antes { background: linear-gradient(160deg, #B9B9B9, #8B8B8B); }
.case-card__photo--despues { background: linear-gradient(160deg, var(--turquesa), var(--purpura)); }

/* Foto real única (antes/después compuestos en una sola imagen por el fotógrafo) */
.case-card__photos--single { display: block; }
.case-card__photo-single {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.case-card__photo-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.35);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.case-card__body { padding: 22px 22px 24px; }
.case-card__service {
  display: inline-block;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--oro-texto);
  margin-bottom: 8px;
}
.case-card__body h3 { font-size: 19px; margin-bottom: 8px; }
.case-card__body p { font-size: 14.5px; color: var(--gris-suave); margin-bottom: 14px; }
.consent-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #377C4E;
  background: rgba(63,143,90,0.10);
  border-radius: 999px;
  padding: 5px 12px;
}

.cases-cta-note {
  text-align: center;
  max-width: 620px;
  margin: 44px auto 0;
  color: var(--gris-suave);
  font-size: 14.5px;
}

/* ============================================
   PÁGINA: CERTIFICACIONES
   ============================================ */

.cert-note {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--blanco);
  border: 1px solid rgba(201,169,110,0.30);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 24px 26px;
  margin-bottom: 8px;
  font-size: 14.5px; color: var(--gris-suave);
}
.cert-note__icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: rgba(201,169,110,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 28px 24px;
}
.cert-card__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(98,195,203,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}
.cert-card h3 { font-size: 17px; margin-bottom: 8px; }
.cert-card p { font-size: 14.5px; color: var(--gris-suave); margin-bottom: 12px; }
.cert-card__status {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--gris-suave);
  background: rgba(42,42,42,0.06);
  border-radius: 999px;
  padding: 4px 12px;
}
.cert-card__status--proceso { color: #8A6A1F; background: rgba(201,169,110,0.18); }
.cert-card__status--vigente { color: #2E7D5B; background: rgba(46,125,91,0.12); }
.cert-card__meta { font-size: 12.5px; color: var(--gris-suave); margin-top: 10px; margin-bottom: 2px; }
.cert-card__link { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--turquesa-texto); }
.cert-card__link:hover { color: var(--oro-texto); }

.sustainability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 780px) { .sustainability-grid { grid-template-columns: 1fr; } }
.sustainability-card {
  text-align: center;
  background: var(--blanco);
  border-radius: var(--radius);
  box-shadow: var(--shadow-suave);
  padding: 30px 22px;
}
.sustainability-card__icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(160deg, var(--turquesa), var(--purpura));
  color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
}
.sustainability-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.sustainability-card p { font-size: 14px; color: var(--gris-suave); }

/* Políticas internas — objetivos SG-SST y grilla de reglamentos/comités */
.objectives-list { margin-top: 20px; }
.objectives-list li {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px; font-size: 15.5px; color: var(--gris-texto);
}
.objectives-list li::before {
  content: '✓'; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(98,195,203,0.18); color: #2A8A91;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 700px) { .policy-grid { grid-template-columns: 1fr; } }

.policy-card__law {
  font-size: 12.5px; color: var(--gris-suave);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.policy-card__law strong { color: var(--gris-texto); }