/* =========================================================
   CUAC DIGITAL — Hoja de estilos principal
   ========================================================= */

:root {
  --negro: #000000;
  --negro-suave: #000000;
  --amarillo: #FFCC01;
  --amarillo-claro: #FFD840;
  --amarillo-oscuro: #E6B800;
  --blanco: #ffffff;
  --crema: #FAFAF5;
  --gris-suave: #f3f3ef;
  --gris-medio: #8a8a85;
  --gris-texto: #3a3a3a;
  --agua: #7DD3FC;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, sans-serif;
  --font-hand: "Caveat", cursive;

  --container: 1280px;
  --radius: 14px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gris-texto);
  background: var(--blanco);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* Tipografía */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--negro);
  margin: 0.4em 0 0.6em;
}
.h2--light { color: var(--blanco); }
.h2 em { font-style: italic; font-weight: 400; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--negro);
  margin-bottom: 8px;
}
.eyebrow--light { color: var(--amarillo); }
.accent { color: var(--amarillo); }
.accent-dark { color: var(--negro); position: relative; display: inline-block; }
.accent-dark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 14px;
  background: var(--amarillo);
  z-index: -1;
  opacity: 0.7;
  transform: skew(-4deg);
}
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--gris-texto); }
.hand {
  font-family: var(--font-body);
  color: var(--amarillo);
  font-weight: 700;
  font-size: 1em;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--amarillo);
  color: var(--negro);
  box-shadow: 0 8px 24px rgba(255, 204, 1, 0.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: var(--amarillo-claro);
  box-shadow: 0 12px 30px rgba(255, 204, 1, 0.5);
}
.btn--ghost {
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--amarillo); }
.btn--ghost-dark {
  background: transparent;
  color: var(--negro);
  border: 1.5px solid var(--negro);
}
.btn--ghost-dark:hover { background: var(--negro); color: var(--amarillo); }
.btn--dark {
  background: var(--negro);
  color: var(--amarillo);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.btn--dark:hover {
  transform: translateY(-2px);
  background: var(--negro);
  color: var(--amarillo);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.btn--full { width: 100%; justify-content: center; }

/* NAVBAR */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo img { height: 56px; width: auto; display: block; }
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__cta-mobile { display: none; }
.nav__links a {
  color: var(--blanco);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: color .2s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--amarillo);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--amarillo); }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--amarillo);
  color: var(--negro);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .2s;
}
.nav__cta:hover { transform: translateY(-2px); }
.nav__cta .dot {
  width: 8px; height: 8px;
  background: #00C853;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--blanco);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.nav__burger:hover {
  background: var(--amarillo);
  border-color: var(--amarillo);
}
.nav__burger:active { transform: scale(0.96); }
.nav__burger span {
  width: 20px; height: 2px;
  background: var(--negro);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav__burger.is-active {
  background: var(--amarillo);
  border-color: var(--amarillo);
}

/* HERO */
.hero {
  background: var(--negro);
  color: var(--blanco);
  padding: 140px 0 0;
  position: relative;
  overflow: hidden;
}
.hero__waves {
  position: absolute;
  bottom: 60px;
  left: 0; right: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
  opacity: 0.7;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 204, 1, 0.1);
  border: 1px solid rgba(255, 204, 1, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--amarillo);
  margin-bottom: 28px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--amarillo);
  border-radius: 50%;
  animation: pulse-yellow 2s infinite;
}
@keyframes pulse-yellow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 1, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 204, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 1, 0); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--amarillo);
}
.hero__title s {
  text-decoration: none;
  position: relative;
  color: rgba(255,255,255,0.4);
}
.hero__title s::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%; top: 55%;
  height: 6px;
  background: var(--amarillo);
  transform: rotate(-2deg);
}
.hero__lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 540px;
  margin: 0 0 36px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.hero__stats {
  display: flex;
  gap: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero__stats > div { display: flex; flex-direction: column; }
.hero__stats strong {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--amarillo);
  line-height: 1;
}
.hero__stats span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
.hero__duck-stage {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__duck {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 60px rgba(255, 204, 1, 0.25));
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--amarillo);
  opacity: 0;
  animation: ripple 4s ease-out infinite;
}
.ripple--1 { width: 100%; height: 100%; animation-delay: 0s; }
.ripple--2 { width: 100%; height: 100%; animation-delay: 1.3s; }
.ripple--3 { width: 100%; height: 100%; animation-delay: 2.6s; }
@keyframes ripple {
  0%   { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
.hero__sticker {
  position: absolute;
  top: 20px;
  left: -10px;
  background: var(--amarillo);
  color: var(--negro);
  padding: 18px 22px;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  animation: stickerWobble 6s ease-in-out infinite;
  box-shadow: 0 12px 30px rgba(255, 204, 1, 0.35);
  z-index: 3;
}
@keyframes stickerWobble {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.05); }
}

/* Marquee */
.marquee {
  background: var(--amarillo);
  color: var(--negro);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  z-index: 3;
}
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: scroll 25s linear infinite;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  will-change: transform;
}
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* NOSOTROS */
.nosotros {
  padding: 120px 0;
  background: var(--blanco);
}
.nosotros__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.nosotros__left { position: sticky; top: 100px; }
.nosotros__right p { margin: 0 0 20px; }
.valores {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.valor { border-left: 3px solid var(--amarillo); padding-left: 16px; }
.valor strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--negro);
  margin-bottom: 6px;
  font-weight: 600;
}
.valor span { font-size: 15px; color: var(--gris-texto); }

/* SERVICIOS (los 4 patitos) */
.servicios {
  background: var(--negro);
  color: var(--blanco);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.servicios::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,204,1,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.servicios__head { text-align: center; margin-bottom: 80px; }
.servicios__head .h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.servicios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.servicio {
  background: var(--negro-suave);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
  position: relative;
  overflow: hidden;
}
.servicio::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--amarillo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.servicio:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 204, 1, 0.3);
  background: #1c1c1c;
}
.servicio:hover::before { transform: scaleX(1); }

.servicio__img {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,204,1,0.25) 0%, rgba(255,204,1,0.08) 45%, transparent 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .4s var(--ease);
}
.servicio:hover .servicio__img { transform: scale(1.08) rotate(-4deg); }
.servicio__img img {
  width: 115%;
  height: 115%;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

.servicio__body { flex: 1; }
.servicio__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amarillo);
  background: rgba(255, 204, 1, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-weight: 600;
}
.servicio__tag--featured {
  background: var(--amarillo);
  color: var(--negro);
}
.servicio__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  color: var(--blanco);
}
.servicio__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--amarillo);
}
.servicio__body p {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.servicio__body ul { margin-bottom: 18px; }
.servicio__body li {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  padding: 4px 0 4px 22px;
  position: relative;
}
.servicio__body li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--amarillo);
}
.servicio__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amarillo);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap .25s, border-color .25s;
}
.servicio__link:hover { gap: 12px; border-color: var(--amarillo); }
.servicio__link--featured {
  background: var(--amarillo);
  color: var(--negro);
  padding: 8px 16px;
  border-radius: 999px;
  border: none !important;
}
.servicio__link--featured:hover { background: var(--amarillo-claro); }

/* DR. CUAC destacado */
.drcuac {
  background: var(--amarillo);
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden;
}
.drcuac__bg-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.drcuac__bg-deco svg {
  width: 100%;
  height: 100%;
  display: block;
}
.drcuac__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 3;
}
.drcuac__text {
  position: relative;
  z-index: 4;
  max-width: 560px;
}
.drcuac__text .h2 {
  color: var(--negro);
  max-width: 520px;
}
.drcuac__text .eyebrow { color: var(--negro); }
.drcuac__text .lead { color: rgba(0,0,0,0.85); }
.check-list { margin: 24px 0 32px; }
.check-list li {
  padding: 8px 0 8px 32px;
  position: relative;
  font-size: 16px;
  color: var(--negro);
  font-weight: 500;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 6px;
  width: 22px; height: 22px;
  background: var(--negro);
  color: var(--amarillo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* ═══ VISUAL: doctor en círculo blanco grande con badges flotando ═══ */
.drcuac__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Círculo blanco grande detrás del doctor (le da peso visual) */
.drcuac__halo {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    #FFFFFF 0%,
    #FFFFFF 55%,
    rgba(255, 255, 255, 0.5) 70%,
    rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  animation: haloPulse 5s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Doctor centrado, asentado en la base del círculo */
.drcuac__doctor {
  position: relative;
  z-index: 3;
  width: 88%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
  display: block;
  animation: doctorFloat 6s ease-in-out infinite;
}
@keyframes doctorFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ═══ BADGES: 2 a la izquierda, 2 a la derecha, escalonados ═══ */
.drcuac__badge {
  position: absolute;
  z-index: 5;
  background: var(--blanco);
  color: var(--negro);
  padding: 12px 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0,0,0,0.08);
  min-width: 220px;
  animation: badgeFloat 5s ease-in-out infinite;
}

/* Badge 1: arriba-izquierda */
.drcuac__badge--1 {
  top: 8%;
  left: -8%;
  animation-delay: 0s;
}
/* Badge 2: arriba-derecha */
.drcuac__badge--2 {
  top: 18%;
  right: -10%;
  animation-delay: 1s;
}
/* Badge 3: abajo-izquierda */
.drcuac__badge--3 {
  bottom: 22%;
  left: -10%;
  animation-delay: 2s;
}
/* Badge 4: abajo-derecha */
.drcuac__badge--4 {
  bottom: 8%;
  right: -8%;
  animation-delay: 3s;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.badge__icon {
  width: 38px;
  height: 38px;
  background: var(--amarillo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.badge__icon--wa {
  background: rgba(37, 211, 102, 0.15);
}
.badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
}
.badge__text strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--negro);
  letter-spacing: -0.01em;
}
.badge__text span {
  font-size: 11px;
  color: var(--gris-medio);
  margin-top: 2px;
  font-weight: 500;
}
.badge__check {
  width: 22px;
  height: 22px;
  background: #22C55E;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* CLIENTES */
/* =========================================================
   CLIENTES — Carrusel infinito de logos
   ========================================================= */
.clientes {
  padding: 100px 0 80px;
  background: var(--blanco);
  overflow: hidden;
}
.clientes__head { text-align: center; margin-bottom: 56px; }
.clientes__sub {
  font-size: 1.05rem;
  color: var(--gris-medio);
  margin-top: -10px;
}

/* Contenedor del carrusel: full-width con fade en los bordes */
.logos-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto 56px;
  overflow: hidden;
  /* Máscaras de fade a los lados para que los logos aparezcan/desaparezcan suavemente */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Track: contiene los 2 grupos y se desliza horizontalmente */
.logos-carousel__track {
  display: flex;
  width: max-content;
  animation: carouselScroll 40s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.logos-carousel:hover .logos-carousel__track {
  animation-play-state: paused;
}

/* Cada grupo contiene los 9 logos. Hay 2 grupos idénticos. */
.logos-carousel__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 56px;
  padding: 0 28px;
}

/* Cada logo individual */
.logo-item {
  flex-shrink: 0;
  width: 200px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease;
}
.logo-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter .4s ease, transform .4s ease;
}
.logo-item:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}

/* La animación: el track se mueve la mitad de su ancho total
   (que es exactamente un grupo, gracias a que duplicamos los logos).
   Al llegar al final, salta al inicio y como los logos son idénticos,
   no se nota = bucle infinito. */
@keyframes carouselScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* CTA después del carrusel */
.clientes__cta {
  text-align: center;
  margin-top: 16px;
}

/* Respeta el `prefers-reduced-motion` para usuarios sensibles al movimiento.
   No detenemos el carrusel (perdería su función), pero lo hacemos mucho más lento. */
@media (prefers-reduced-motion: reduce) {
  .logos-carousel__track {
    animation-duration: 120s;
  }
}

/* TESTIMONIOS */
/* =========================================================
   TESTIMONIOS — inactivo (módulo retirado del Home temporalmente)
   El HTML está eliminado pero el CSS se conserva para cuando
   se reactiven los testimonios con clientes reales.
   ========================================================= */
.testimonios {
  background: var(--negro);
  color: var(--blanco);
  padding: 120px 0;
  text-align: center;
}
.testimonios__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 60px;
  text-align: left;
}
.testimonio {
  background: var(--negro-suave);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  margin: 0;
  transition: border-color .3s, transform .3s var(--ease);
}
.testimonio:hover {
  border-color: rgba(255, 204, 1, 0.3);
  transform: translateY(-4px);
}
.testimonio__quote {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.6;
  color: var(--amarillo);
  margin-bottom: 12px;
  font-style: italic;
}
.testimonio blockquote {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  font-style: italic;
}
.testimonio figcaption strong {
  display: block;
  color: var(--amarillo);
  font-size: 15px;
  margin-bottom: 4px;
}
.testimonio figcaption span {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* CONTACTO */
.contacto {
  background: var(--negro);
  color: var(--blanco);
  padding: 120px 0;
}
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contacto__intro p {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  margin: 0 0 36px;
}
.contacto__channels { display: flex; flex-direction: column; gap: 18px; }
.contacto__channels > a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--negro-suave);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  transition: border-color .3s, transform .3s var(--ease);
}
.contacto__channels > a:hover {
  border-color: var(--amarillo);
  transform: translateX(4px);
}
.ch__icon {
  font-size: 24px;
  width: 40px; height: 40px;
  background: rgba(255,204,1,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ch__icon svg { width: 20px; height: 20px; }
.contacto__channels strong { color: var(--amarillo); font-size: 14px; }
.contacto__channels span { color: rgba(255,255,255,0.8); font-size: 14px; }

/* Iconos sociales en página de contacto (sobre fondo negro) */
.ch__socials {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.ch__socials a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--negro-suave);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.ch__socials a svg { width: 18px; height: 18px; }
.ch__socials a:hover {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--amarillo);
  transform: translateY(-2px);
}

.contacto__form {
  background: var(--negro-suave);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.row { margin-bottom: 18px; }
.row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row label { display: block; }
.row span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.row input, .row select, .row textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--negro);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--blanco);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .25s, background .25s;
}
.row input:focus, .row select:focus, .row textarea:focus {
  outline: none;
  border-color: var(--amarillo);
  background: #000000;
}
.row textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.contacto__legal {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin: 16px 0 0;
}

/* =========================================================
   LAYOUT CENTRADO (sin formulario): canales en grid horizontal
   ========================================================= */
.contacto--centered {
  padding: 100px 0;
}
.contacto__intro--centered {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.contacto__intro--centered .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
.contacto__intro--centered .h2 {
  margin-bottom: 16px;
}
.contacto__intro--centered p {
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0;
}

.contacto__channels--centered {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 360px));
  gap: 24px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}

.channel-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 26px;
  background: var(--negro-suave);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}
.channel-card:hover {
  transform: translateY(-4px);
  border-color: var(--amarillo);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
.channel-card .ch__icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 204, 1, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.channel-card .ch__icon svg {
  width: 26px;
  height: 26px;
  color: var(--amarillo);
}
.channel-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channel-card__text strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--blanco);
}
.channel-card__text span {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8);
}
.channel-card__text em {
  font-style: normal;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

@media (max-width: 720px) {
  .contacto__channels--centered {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .channel-card { padding: 22px 20px; }
}

/* Variante amarilla del layout centrado: cards blancas con icon negro */
.contacto--yellow.contacto--centered .channel-card {
  background: var(--blanco);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.contacto--yellow.contacto--centered .channel-card:hover {
  border-color: var(--negro);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}
.contacto--yellow.contacto--centered .channel-card .ch__icon {
  background: var(--negro);
}
.contacto--yellow.contacto--centered .channel-card .ch__icon svg {
  color: var(--amarillo);
}
.contacto--yellow.contacto--centered .channel-card__text strong {
  color: var(--negro);
}
.contacto--yellow.contacto--centered .channel-card__text span {
  color: rgba(0, 0, 0, 0.75);
}
.contacto--yellow.contacto--centered .channel-card__text em {
  color: rgba(0, 0, 0, 0.55);
}

/* =========================================================
   VARIANTE AMARILLA del módulo contacto
   ========================================================= */
.contacto--yellow {
  background: var(--amarillo);
  color: var(--negro);
  position: relative;
  overflow: hidden;
}
/* Halos decorativos sutiles (igual que en CUAClovers cuando estaba amarillo) */
.contacto--yellow::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.contacto--yellow::after {
  content: "";
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.contacto--yellow .container { position: relative; z-index: 2; }

/* Textos del intro */
.contacto--yellow .h2 { color: var(--negro); }
.contacto--yellow .eyebrow { color: var(--negro); }
.contacto--yellow .contacto__intro p { color: rgba(0, 0, 0, 0.75); }

/* Channels (WhatsApp/Email) sobre amarillo: fondo blanco con borde sutil */
.contacto--yellow .contacto__channels > a {
  background: var(--blanco);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.contacto--yellow .contacto__channels > a:hover {
  border-color: var(--negro);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}
.contacto--yellow .contacto__channels strong { color: var(--negro); }
.contacto--yellow .contacto__channels span { color: rgba(0, 0, 0, 0.7); }
.contacto--yellow .ch__icon {
  background: var(--negro);
  color: var(--amarillo);
}
.contacto--yellow .ch__icon svg { color: var(--amarillo); }

/* Iconos sociales sobre amarillo: negro con hover invertido */
.contacto--yellow .ch__socials a {
  background: var(--negro);
  border: 1px solid var(--negro);
  color: var(--blanco);
}
.contacto--yellow .ch__socials a:hover {
  background: var(--blanco);
  color: var(--negro);
  border-color: var(--negro);
}

/* Formulario sobre amarillo: fondo blanco con sombra */
.contacto--yellow .contacto__form {
  background: var(--blanco);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}
.contacto--yellow .row span { color: var(--negro); }
.contacto--yellow .row input,
.contacto--yellow .row select,
.contacto--yellow .row textarea {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--negro);
}
.contacto--yellow .row input:focus,
.contacto--yellow .row select:focus,
.contacto--yellow .row textarea:focus {
  border-color: var(--negro);
  background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.contacto--yellow .contacto__legal { color: rgba(0, 0, 0, 0.55); }

/* Botón Enviar sobre fondo amarillo: invertido a negro */
.contacto--yellow .btn--primary {
  background: var(--negro);
  color: var(--blanco);
}
.contacto--yellow .btn--primary:hover {
  background: #1a1a1a;
}

/* Iconos sociales en el footer */
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.footer__social a svg { width: 18px; height: 18px; }
.footer__social a:hover {
  background: var(--amarillo);
  color: var(--negro);
  border-color: var(--amarillo);
  transform: translateY(-2px);
}




/* FOOTER */
.footer {
  background: #000000;
  color: rgba(255,255,255,0.7);
  padding: 80px 0 30px;
  font-size: 14px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer__logo { height: 140px; width: auto; margin-bottom: 18px; display: block; }
.footer__since { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 12px; }
.footer h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--blanco);
  margin: 0 0 18px;
  font-weight: 600;
}
.footer ul li { margin-bottom: 10px; }
.footer ul a { transition: color .2s; }
.footer ul a:hover { color: var(--amarillo); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 12px;
}

/* WHATSAPP FLOTANTE */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  background: #25D366;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
  color: var(--blanco);
  font-weight: 600;
  font-size: 14px;
  transition: transform .25s var(--ease), box-shadow .25s;
  animation: floatIn 1.2s var(--ease) 1s backwards;
}
.wa-float:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.6);
}
.wa-float__duck {
  width: 46px;
  height: 46px;
  background: var(--blanco);
  border-radius: 50%;
  padding: 4px;
  object-fit: contain;
  border: 2px solid var(--blanco);
}
.wa-float__bubble {
  position: absolute;
  top: -6px;
  left: 36px;
  width: 22px; height: 22px;
  background: #25D366;
  border: 2px solid var(--blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-float__bubble svg { width: 12px; height: 12px; }
.wa-float__text { padding-right: 6px; }
@keyframes floatIn {
  from { opacity: 0; transform: translateY(40px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* RESPONSIVE */
/* =========================================================
   RESPONSIVE — TABLET (max 1024px)
   ========================================================= */
@media (max-width: 1024px) {

  /* ─── HERO ─── */
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-bottom: 60px; }
  .hero__visual { min-height: 360px; }
  .hero__duck-stage { width: 320px; height: 320px; }

  /* ─── NOSOTROS ─── */
  .nosotros__grid { grid-template-columns: 1fr; gap: 40px; }
  .nosotros__left { position: static; }

  /* ─── SERVICIOS ─── */
  .servicios__grid { grid-template-columns: 1fr; gap: 20px; }
  .servicio { padding: 32px 28px; gap: 24px; }
  .servicio__img { width: 200px; height: 200px; }

  /* ─── DOCTOR CUAC ─── */
  .drcuac { padding: 70px 0 40px; }
  .drcuac__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    text-align: center;
  }
  .drcuac__text {
    order: 1;
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
  }
  .drcuac__text .h2 { max-width: 100%; }
  .drcuac__visual {
    order: 2;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
  .drcuac__doctor { width: 78%; max-width: 460px; }

  /* Badges en tablet: 2 izquierda, 2 derecha */
  .drcuac__badge { min-width: 190px; padding: 10px 14px; gap: 10px; }
  .badge__text strong { font-size: 13px; }
  .badge__text span { font-size: 10.5px; }
  .drcuac__badge--1 { top: 10%; left: -4%; }
  .drcuac__badge--2 { top: 22%; right: -4%; }
  .drcuac__badge--3 { bottom: 22%; left: -6%; }
  .drcuac__badge--4 { bottom: 10%; right: -4%; }

  /* ─── CLIENTES (tablet: carrusel adaptado) ─── */
  .logos-carousel__group { gap: 40px; padding: 0 20px; }
  .logo-item { width: 170px; height: 95px; }

  /* ─── CONTACTO + FOOTER ─── */
  .contacto__grid { grid-template-columns: 1fr; gap: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* ─── CHECK-LIST ─── */
  .check-list { max-width: 100%; }
}

/* =========================================================
   RESPONSIVE — MOBILE (max 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════
     MENÚ MÓVIL — Dropdown flotante compacto
     ═══════════════════════════════════════════════════ */

  /* Por defecto los links están ocultos en móvil */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* El nav__inner necesita ser relativo para anclar el dropdown */
  .nav__inner { position: relative; }

  /* Cuando el menú se abre: tarjeta flotante anclada bajo el burger */
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 14px);
    right: 24px;
    left: auto;
    bottom: auto;

    /* Tarjeta amarilla flotante */
    background: var(--amarillo);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 8px;
    gap: 0;
    align-items: stretch;
    min-width: 240px;
    max-width: calc(100vw - 48px);
    z-index: 999;

    /* Sombra para sensación de flotar */
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.18),
      0 4px 12px rgba(0, 0, 0, 0.08);

    animation: navDropdown 0.22s var(--ease);
    transform-origin: top right;
  }

  /* Cada link del menú móvil */
  .nav__links.is-open a {
    color: var(--negro);
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    text-decoration: none;
    border-radius: 8px;
    transition: background .15s var(--ease);
  }
  .nav__links.is-open a:last-of-type {
    border-bottom: none;
  }
  .nav__links.is-open a:hover,
  .nav__links.is-open a:active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--negro);
    padding-left: 16px;
  }
  /* Quitar el underline animado heredado del desktop */
  .nav__links.is-open a::after { display: none; }

  /* CTA "Hablemos" visible dentro del dropdown móvil */
  .nav__links.is-open .nav__cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--negro);
    color: var(--amarillo);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
  }
  .nav__links.is-open .nav__cta-mobile:hover {
    background: var(--negro);
    color: var(--amarillo);
    padding-left: 16px;
  }
  .nav__links.is-open .nav__cta-mobile .dot {
    width: 8px; height: 8px;
    background: #00C853;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
  }

  @keyframes navDropdown {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Burger: animación a X cuando está activo */
  .nav__burger span {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .nav__burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__burger.is-active span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Overlay sutil que oscurece el contenido cuando el menú está abierto */
  body:has(.nav__links.is-open)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 98;
    animation: fadeIn 0.2s ease-out;
    pointer-events: none;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ─── HERO ─── */
  .hero { padding-top: 100px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  .hero__stats { gap: 24px; flex-wrap: wrap; }
  .hero__duck-stage { width: 260px; height: 260px; }

  /* ─── SERVICIOS (rediseño mobile) ─── */
  .servicios { padding: 80px 0; }
  .servicios__head { margin-bottom: 50px; }
  .servicios__grid { grid-template-columns: 1fr; gap: 18px; }
  .servicio {
    flex-direction: column;
    padding: 32px 24px;
    gap: 20px;
    text-align: center;
    align-items: center;
  }
  .servicio__img { width: 200px; height: 200px; margin: 0 auto; }
  .servicio__body { width: 100%; text-align: left; }
  .servicio__title { font-size: 1.4rem; }
  .servicio ul { margin: 12px 0 20px; }

  /* ─── DOCTOR CUAC (mobile mejorado) ─── */
  .drcuac { padding: 60px 0 30px; }
  .drcuac__visual {
    max-width: 100%;
    aspect-ratio: 1 / 1.05;
  }
  .drcuac__doctor { width: 70%; max-width: 360px; }
  .drcuac__halo { inset: 8%; }

  /* Badges mobile: 4 esquinas con tamaño pequeño */
  .drcuac__badge {
    min-width: 0;
    max-width: 165px;
    padding: 7px 11px;
    gap: 8px;
    border-radius: 14px;
  }
  .badge__icon { width: 28px; height: 28px; }
  .badge__icon svg { width: 14px; height: 14px; }
  .badge__icon--wa svg { width: 14px; height: 14px; }
  .badge__text strong { font-size: 11px; }
  .badge__text span { font-size: 9.5px; }
  .badge__check { width: 16px; height: 16px; font-size: 10px; }

  .drcuac__badge--1 { top: 2%; left: -2%; }
  .drcuac__badge--2 { top: 14%; right: -2%; }
  .drcuac__badge--3 { bottom: 30%; left: -2%; }
  .drcuac__badge--4 { bottom: 14%; right: -2%; }

  /* ─── TESTIMONIOS ─── */
  .testimonios__grid { grid-template-columns: 1fr; }

  /* ─── BLOG ─── */

  /* ─── CLIENTES (mobile: carrusel más compacto + animación más rápida) ─── */
  .logos-carousel__group { gap: 32px; padding: 0 16px; }
  .logo-item { width: 140px; height: 80px; }
  .logos-carousel__track { animation-duration: 30s; }
  .clientes { padding: 70px 0 60px; }
  .clientes__head { margin-bottom: 40px; }

  /* ─── CONTACTO ─── */
  .row--2 { grid-template-columns: 1fr; }

  /* ─── FOOTER ─── */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }

  /* ─── WHATSAPP FLOATING ─── */
  .wa-float__text { display: none; }
  .wa-float { padding: 6px; }
}

/* =========================================================
   RESPONSIVE — MOBILE PEQUEÑO (max 480px)
   ========================================================= */
@media (max-width: 480px) {

  /* ─── DOCTOR CUAC: badges aún más pequeños ─── */
  .drcuac__badge {
    max-width: 140px;
    padding: 6px 10px;
    gap: 6px;
  }
  .badge__icon { width: 24px; height: 24px; }
  .badge__icon svg { width: 12px; height: 12px; }
  .badge__text strong { font-size: 10px; }
  .badge__text span { font-size: 8.5px; }
  .badge__check { width: 14px; height: 14px; font-size: 9px; }
  .drcuac__doctor { width: 75%; }
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   PÁGINAS INTERNAS — Estilos adicionales
   ========================================================= */

/* CTA después de grilla de clientes */
.clientes__cta {
  text-align: center;
  margin-top: 40px;
}

/* Hero secundario (páginas internas) */
.page-hero {
  background: var(--negro);
  color: var(--blanco);
  padding: 160px 0 90px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 50%; right: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,204,1,0.08) 0%, transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}
.page-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.page-hero__text {
  position: relative;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 18px 0 24px;
  color: var(--blanco);
}
.page-hero__title em {
  font-style: italic;
  color: var(--amarillo);
  font-weight: 400;
}
.page-hero__lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  margin: 0 0 36px;
}
.page-hero__duck {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 460px;
}
/* Cuando contiene un hero__duck-stage (con ripples), heredamos los estilos */
.page-hero__duck .hero__duck-stage {
  width: 400px;
  height: 400px;
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.breadcrumbs a {
  color: rgba(255,255,255,0.7);
  transition: color .2s;
}
.breadcrumbs a:hover { color: var(--amarillo); }
.breadcrumbs span { margin: 0 8px; opacity: 0.4; }

/* Sección "Lo que incluye" / Features */
.features-section {
  padding: 120px 0;
  background: var(--blanco);
}
.features-section--dark {
  background: var(--negro);
  color: var(--blanco);
}
.features-section--dark .h2 { color: var(--blanco); }
.features-section--dark .eyebrow { color: var(--amarillo); }

/* Variante amarilla del módulo */
.features-section--yellow {
  background: var(--amarillo);
  color: var(--negro);
  position: relative;
  overflow: hidden;
}
.features-section--yellow::before {
  /* Halo decorativo blanco translúcido (esquina superior derecha) */
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.features-section--yellow::after {
  /* Sombra negra sutil (esquina inferior izquierda) */
  content: "";
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.features-section--yellow .container { position: relative; z-index: 2; }
.features-section--yellow .h2 { color: var(--negro); }
.features-section--yellow .eyebrow { color: var(--negro); }
.features-section--yellow .features-section__head .lead {
  color: rgba(0, 0, 0, 0.75);
}
/* Cards sobre amarillo: fondo blanco con borde más fuerte para contraste */
.features-section--yellow .feature-card {
  background: var(--blanco);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.features-section--yellow .feature-card:hover {
  border-color: var(--negro);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}
/* Iconos: invertir colores para que destaquen sobre el card blanco */
.features-section--yellow .feature-card__icon {
  background: var(--negro);
  color: var(--amarillo);
}
.features-section__head {
  text-align: center;
  margin-bottom: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.features-section__head .lead {
  margin-top: 8px;
}
.features-section--dark .features-section__head .lead {
  color: rgba(255,255,255,0.75);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--gris-suave);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.features-section--dark .feature-card {
  background: var(--negro-suave);
  border-color: rgba(255,255,255,0.08);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  border-color: var(--amarillo);
}
.feature-card__icon {
  width: 52px; height: 52px;
  background: var(--amarillo);
  color: var(--negro);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
  font-weight: 700;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--negro);
  line-height: 1.2;
}
.features-section--dark .feature-card h3 { color: var(--blanco); }
.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--gris-medio);
}
.features-section--dark .feature-card p { color: rgba(255,255,255,0.7); }

/* Proceso (pasos numerados) */
.proceso {
  padding: 120px 0;
  background: var(--blanco);
}
.proceso__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.proceso__step {
  position: relative;
  padding: 32px 24px;
  background: var(--blanco);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--amarillo);
}
.proceso__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--amarillo);
  line-height: 1;
  margin-bottom: 8px;
}
.proceso__step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--negro);
}
.proceso__step p {
  font-size: 14px;
  color: var(--gris-medio);
  margin: 0;
  line-height: 1.5;
}

/* Variante oscura del proceso (fondo negro) */
.proceso--dark { background: var(--negro); }
.proceso--dark .proceso__step {
  background: var(--negro-suave);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 4px solid var(--amarillo);
}
.proceso--dark .proceso__step h3 { color: var(--blanco); }
.proceso--dark .proceso__step p { color: rgba(255, 255, 255, 0.7); }

/* CTA final de página */
.cta-final {
  background: var(--amarillo);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.cta-final + .divisor { margin-top: -1px; }
.cta-final__inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}
.cta-final h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--negro);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cta-final h2 em {
  font-style: italic;
  font-weight: 400;
}
.cta-final h2 s {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.7);
  opacity: 0.55;
  font-weight: 400;
  margin-right: 4px;
}
.cta-final p {
  font-size: 1.15rem;
  color: rgba(0,0,0,0.8);
  margin: 0 0 32px;
}
.cta-final .btn--primary {
  background: var(--negro);
  color: var(--amarillo);
}
.cta-final .btn--primary:hover {
  background: #222;
  color: var(--amarillo);
}

/* Página clientes — grid de casos */
.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.caso-card {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gris-suave);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  display: flex;
  flex-direction: column;
}
.caso-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.08);
  border-color: rgba(255, 204, 1, 0.4);
}
.caso-card__head {
  height: 150px;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid var(--gris-suave);
  position: relative;
  overflow: hidden;
}
.caso-card__head--dark {
  background: var(--negro);
}
.caso-card__head img {
  max-height: 70px;
  max-width: 80%;
  object-fit: contain;
  transition: transform .4s ease;
}
.caso-card:hover .caso-card__head img {
  transform: scale(1.06);
}

/* Placeholder elegante para clientes sin logo */
.caso-card__head--placeholder {
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
  position: relative;
}
.caso-card__head--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 204, 1, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 204, 1, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.caso-card__placeholder-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gris-medio);
  letter-spacing: -0.02em;
  text-align: center;
  padding: 0 16px;
  line-height: 1.15;
  opacity: 0.55;
  transition: opacity .35s ease, color .35s ease;
  position: relative;
  z-index: 2;
}
.caso-card:hover .caso-card__placeholder-name {
  opacity: 0.85;
  color: var(--negro);
}

.caso-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.caso-card__sector {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amarillo-oscuro);
  font-weight: 600;
  margin-bottom: 10px;
}
.caso-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--negro);
  line-height: 1.2;
}
.caso-card p {
  font-size: 14.5px;
  color: var(--gris-medio);
  margin: 0;
  line-height: 1.55;
}

/* Tags de servicios dentro de las cards */
.caso-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--gris-suave);
}
.service-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 100px;
  background: #f7f7f7;
  color: var(--negro);
  border: 1px solid var(--gris-suave);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.caso-card:hover .service-tag { transform: translateY(-1px); }

/* Hover directo sobre el tag (cuando es link) */
a.service-tag:hover {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Color por tipo de servicio (punto a la izquierda) */
.service-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.service-tag.tag--digital::before { background: #FFCC01; }
.service-tag.tag--tank::before    { background: #4A90E2; }
.service-tag.tag--center::before  { background: #25D366; }
.service-tag.tag--doctor::before  { background: #E74C3C; }

/* Página nosotros — equipo / historia */
.historia {
  padding: 120px 0;
  background: var(--blanco);
}
.historia__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.historia__intro p { font-size: 1.05rem; margin: 0 0 18px; }

.timeline {
  border-left: 2px solid var(--amarillo);
  padding-left: 32px;
}
.timeline__item { margin-bottom: 36px; position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -41px;
  top: 6px;
  width: 18px; height: 18px;
  background: var(--amarillo);
  border: 4px solid var(--crema);
  border-radius: 50%;
}
.timeline__year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--negro);
  margin-bottom: 6px;
}
.timeline__item h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--negro);
}
.timeline__item p { font-size: 15px; margin: 0; color: var(--gris-medio); }

/* === Responsive de páginas internas === */
@media (max-width: 1024px) {
  .page-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .page-hero__duck { min-height: 340px; }
  .page-hero__duck .hero__duck-stage { width: 320px; height: 320px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .proceso__grid { grid-template-columns: repeat(2, 1fr); }
  .casos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .historia__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .page-hero { padding: 120px 0 60px; }
  .features-grid { grid-template-columns: 1fr; }
  .proceso__grid { grid-template-columns: 1fr; }
  .casos-grid { grid-template-columns: 1fr; gap: 16px; }
  .caso-card__head { height: 130px; padding: 20px; }
  .caso-card__head img { max-height: 60px; }
  .caso-card__placeholder-name { font-size: 1.3rem; }
}

/* =========================================================
   SVG ICONS — Sistema unificado monocromático
   ========================================================= */

/* Feature card icons: fondo amarillo + ícono negro (heredan currentColor) */
.feature-card__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--negro);
}

/* En features-section--dark las cards tienen fondo oscuro pero el ícono
   sigue dentro de un círculo amarillo → ícono negro */
.features-section--dark .feature-card__icon svg {
  color: var(--negro);
}

/* En features-section--yellow las cards tienen fondo blanco con icon-wrapper negro,
   así que el SVG debe ir en amarillo */
.features-section--yellow .feature-card__icon svg {
  color: var(--amarillo);
}

/* Badge icons (Doctor CUAC visual): fondo amarillo + ícono negro */
.badge__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--negro);
}
.badge__icon--wa svg {
  /* WhatsApp con su color verde de marca - heredado */
  color: #25D366;
}

/* Channel icons (contacto): contenedor con fondo oscuro/amarillo */
.ch__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Reset: ningún ícono debe tener font weight ni line-height del padre */
.feature-card__icon,
.badge__icon,
.ch__icon {
  line-height: 0;
}

/* =========================================================
   DIVISORES ENTRE SECCIONES — Olas pintadas a mano CUAC
   ========================================================= */

.divisor {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  position: relative;
  pointer-events: none;
  user-select: none;
  /* La imagen se estira horizontalmente para llenar el ancho */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center bottom;
}

/* Alturas responsive: ondas pinceladas más altas que las suaves */
.divisor--pincel { height: 60px; }
.divisor--suave  { height: 45px; }

@media (min-width: 768px) {
  .divisor--pincel { height: 90px; }
  .divisor--suave  { height: 65px; }
}
@media (min-width: 1280px) {
  .divisor--pincel { height: 110px; }
  .divisor--suave  { height: 80px; }
}

/* Variantes con imagen — TRANSICIONES DE COLOR (usan archivos físicos, sin scaleY que rompe colores) */
.divisor--amarillo-a-negro  { background-image: url('img/divisores/ola-pincel-amarillo-a-negro.webp'); }
.divisor--negro-a-amarillo  { background-image: url('img/divisores/ola-suave-negro-a-amarillo.webp'); }
.divisor--blanco-a-negro    { background-image: url('img/divisores/ola-pincel-blanco-a-negro.webp'); }
.divisor--negro-a-blanco    { background-image: url('img/divisores/ola-pincel-negro-a-blanco.webp'); }
.divisor--blanco-a-amarillo { background-image: url('img/divisores/ola-suave-blanco-a-amarillo.webp'); }
.divisor--amarillo-a-blanco { background-image: url('img/divisores/ola-suave-amarillo-a-blanco.webp'); }

/* Variante suave para amarillo→negro (cuando se necesita ola más fina) */
.divisor--suave.divisor--amarillo-a-negro {
  background-image: url('img/divisores/ola-suave-amarillo-a-negro.webp');
}

/* NOTA: .divisor--sub se mantiene como marker en el HTML para indicar que
   se usa en una subcarpeta (servicios/). Pero los paths del CSS
   son relativos AL CSS (que está en raíz), no al HTML que lo usa, así que las
   reglas base de arriba ya resuelven correctamente para todas las páginas. */

/* Quitar margen entre secciones cuando hay un divisor (para que no quede espacio en blanco) */
.divisor + section,
section + .divisor,
.divisor + .section,
.section + .divisor {
  margin-top: 0;
}

/* =========================================================
   NORMALIZACIÓN DE COLORES — Solo blanco/negro/amarillo en fondos
   ========================================================= */

/* Cambiar el cremita y grises de fondo a blanco puro */
body { background: var(--blanco); }