/* ============================================================
   EMBARAZO AL DÍA v2.0 — CSS
   Mobile-first design system
   ============================================================ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  --purple:        #7B5EA7;
  --purple-dark:   #5C3D8A;
  --purple-light:  #9B7EC8;
  --purple-bg:     #F2EEF9;
  --purple-border: #D8CCF0;

  --coral:         #E8547A;
  --coral-dark:    #C43D65;
  --coral-light:   #FDEEF3;

  --wa-green:      #25D366;
  --wa-dark:       #128C7E;

  --text-dark:     #1E1B2E;
  --text-mid:      #5A5571;
  --text-light:    #9B94AA;

  --white:         #FFFFFF;
  --bg-warm:       #FDFBFF;
  --bg-section:    #F6F2FC;
  --border:        #E8E2F0;

  --font:          'Poppins', sans-serif;
  --r-sm:          8px;
  --r-md:          16px;
  --r-lg:          24px;
  --r-xl:          32px;
  --r-pill:        100px;

  --shadow-sm:     0 2px 8px  rgba(92, 61, 138, 0.08);
  --shadow-md:     0 8px 24px rgba(92, 61, 138, 0.13);
  --shadow-lg:     0 16px 48px rgba(92, 61, 138, 0.18);
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; transition: color .2s; }
ul    { list-style: none; padding: 0; margin: 0; }
p     { margin: 0 0 1rem; }
h1,h2,h3,h4,h5 { font-weight: 700; line-height: 1.2; margin: 0 0 .75rem; }

h1 { font-size: clamp(2rem,   7vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 3.5vw, 1.35rem); }
h4 { font-size: clamp(.95rem,  3vw, 1.1rem); }

.text-accent  { color: #FFD6E3; }   /* usado en el hero sobre fondo oscuro */

/* ── 3. LAYOUT HELPERS ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px)  { .container { padding: 0 2rem; } }
@media (min-width: 1024px) { .container { padding: 0 2.5rem; } }

section[id] { scroll-margin-top: 72px; }

.section-header      { margin-bottom: 2rem; }
.section-header h2   { color: var(--text-dark); }
.section-header p    { color: var(--text-mid); font-size: .95rem; max-width: 540px; margin: .5rem auto 0; }

.section-tag {
  display: inline-block;
  background: var(--purple-bg);
  color: var(--purple);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: var(--r-pill);
  margin-bottom: .75rem;
}

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.btn-whatsapp-main {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--wa-green);
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  padding: .85rem 1.75rem;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(37,211,102,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-whatsapp-main:hover {
  background: var(--wa-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.4);
}
.btn-whatsapp-main i { font-size: 1.15rem; }

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  color: rgba(255,255,255,.9);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 500;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .2s;
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.8);
  color: var(--white);
}

.btn-cta-header {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: var(--r-pill);
  transition: background .2s, transform .15s;
}
.btn-cta-header:hover { background: var(--coral-dark); color: var(--white); transform: translateY(-1px); }

.btn-service-reserve {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--wa-green);
  color: var(--white);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1.2rem;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(37,211,102,.3);
  transition: all .2s;
  align-self: flex-start;
}
.btn-service-reserve:hover { background: var(--wa-dark); color: var(--white); transform: translateY(-1px); }

/* ── 5. IMAGE PLACEHOLDERS ────────────────────────────────── */
.img-placeholder {
  background: var(--purple-bg);
  border: 2px dashed var(--purple-border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--purple);
  font-size: .78rem;
  font-style: italic;
  line-height: 1.45;
  min-height: 180px;
  width: 100%;
}
.img-placeholder i    { font-size: 2rem; opacity: .45; }
.img-placeholder strong { font-style: normal; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; opacity: .7; }

.img-placeholder-avatar {
  width: 52px;
  height: 52px;
  min-height: unset;
  border-radius: 50%;
  border: 2px dashed var(--purple-border);
  background: var(--purple-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5rem;
  font-style: italic;
  color: var(--purple);
  text-align: center;
  padding: 4px;
}

.insta-ph {
  min-height: unset;
  height: 100%;
  border-radius: 0;
  border: none;
  background: var(--purple-bg);
  font-size: .68rem;
  padding: .75rem;
}

/* ── 6. HEADER ────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}

.header-logo img { height: 34px; width: auto; }

.desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 992px) { .desktop-nav { display: flex; } }

.desktop-nav a { color: var(--text-mid); font-size: .88rem; font-weight: 500; }
.desktop-nav a:hover { color: var(--purple); }

.header-actions { display: flex; align-items: center; gap: .75rem; }

.hamburger {
  background: none;
  border: none;
  padding: .4rem;
  cursor: pointer;
  color: var(--text-dark);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) { .hamburger { display: none; } }

/* Offcanvas mobile menu */
.offcanvas { max-width: 300px; }
.offcanvas-header img { height: 30px; }

.mobile-nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  color: var(--text-dark);
  font-size: .95rem;
  font-weight: 500;
  transition: all .2s;
}
.mobile-nav a:hover { background: var(--purple-bg); color: var(--purple); }
.mobile-nav a i     { color: var(--purple); font-size: 1.1rem; }

.mobile-social { display: flex; gap: 1rem; justify-content: center; }
.mobile-social a {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--purple-bg);
  color: var(--purple);
  font-size: 1.2rem;
  transition: all .2s;
}
.mobile-social a:hover { background: var(--purple); color: var(--white); }

/* ── 5b. REAL IMAGES ──────────────────────────────────────── */

/* ·· Hero slider — crossfade entre 2 PNGs pegados al borde inferior ·· */
.hero-img-wrap {
  position: relative;        /* contexto de apilamiento para la 2ª imagen */
  width: 100%;
}

.hero-img-wrap img.hero-img {
  width: 100%;
  height: auto;
  max-height: 320px;         /* cap en móvil */
  display: block;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 10px 30px rgba(46, 20, 80, 0.35));
}

/* Imagen 2: superpuesta, referenciada al borde inferior del wrapper */
.hero-img--2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Keyframes: img-1 visible → fade → oculta · img-2 al revés */
@keyframes heroShow {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes heroShowAlt {
  0%, 40%   { opacity: 0; }
  50%, 90%  { opacity: 1; }
  100%      { opacity: 0; }
}

.hero-img--1 { animation: heroShow    10s ease-in-out infinite; }
.hero-img--2 { animation: heroShowAlt 10s ease-in-out infinite; }

/* ·· Móvil: imagen de fondo con opacidad — texto siempre legible ·· */
@media (max-width: 767px) {
  /* position: relative en el container; z-index explícito en el texto
     (los elementos position:absolute pintan sobre los no-posicionados
      aunque tengan z-index:0 — hay que elevar el texto explícitamente) */
  .hero-content { position: relative; }
  .hero-text    { position: relative; z-index: 2; }

  /* Imagen sale del flujo normal y queda detrás */
  .hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    overflow: hidden;
  }

  /* El wrapper ocupa todo el espacio del hero */
  .hero-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  /* Opacidad al wrapper — la animación de las imgs no interfiere */
  .hero-img-wrap { opacity: 0.50; }

  .hero-img-wrap img.hero-img {
    max-height: 90%;
  }
}

/* Service cards — imagen real dentro de .service-img */
.service-img img.service-photo {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── 7. HERO ──────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(145deg, var(--purple-dark) 0%, var(--purple) 55%, #9B7EC8 100%);
  min-height: 100svh;
  padding-top: 64px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Blob decorativo */
.hero-section::before {
  content: '';
  position: absolute;
  top: -20%; right: -15%;
  width: 65vw; height: 65vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -10%; left: -10%;
  width: 40vw; height: 40vw;
  max-width: 400px; max-height: 400px;
  background: radial-gradient(circle, rgba(232,84,122,.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-content {
  width: 100%;
  padding: 3rem 0 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;          /* sin gap: imagen ya no ocupa espacio en el flujo en móvil */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.92);
  font-size: .75rem;
  font-weight: 600;
  padding: .38rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
  margin-bottom: 1.1rem;
  letter-spacing: .03em;
}

.hero-text h1 {
  color: var(--white);
  font-weight: 800;
  margin-bottom: 1rem;
}

.hero-sub {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.hero-trust { display: flex; flex-direction: column; gap: .45rem; }
.trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.85);
  font-size: .85rem;
  font-weight: 500;
}
.trust-item i { color: #FFD6E3; font-size: .95rem; }

.hero-image { width: 100%; }
.hero-img-placeholder {
  min-height: 260px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.75);
}
.hero-img-placeholder i { opacity: .6; color: rgba(255,255,255,.7); }

@media (min-width: 768px) {
  .hero-content {
    flex-direction: row;
    align-items: flex-end;   /* imagen cuelga desde el fondo */
    gap: 2rem;
    padding: 5rem 0 0;       /* sin padding inferior: imagen llega al borde */
  }
  .hero-text {
    flex: 1.1;
    align-self: center;      /* texto se mantiene centrado verticalmente */
    padding-bottom: 4rem;    /* respiro inferior para el texto */
  }
  .hero-image {
    flex: 0.9;
    align-self: flex-end;    /* columna de imagen pegada al borde inferior */
    display: flex;
    align-items: flex-end;
  }
  .hero-img-wrap img.hero-img {
    max-height: 88vh;        /* nunca más alto que la ventana */
    width: 100%;
    height: auto;
  }
  .hero-img-placeholder { min-height: 420px; }
}

@media (min-width: 1024px) {
  .hero-img-wrap img.hero-img { max-height: 92vh; }
  .hero-img-placeholder { min-height: 480px; }
  .hero-sub { font-size: 1.05rem; }
}

/* ── 8. SERVICIOS ─────────────────────────────────────────── */
.services-section {
  padding: 5rem 0;
  background: var(--bg-warm);
}

/* Tabs */
.services-tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 2rem;
  scrollbar-width: none;
}
.services-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  background: var(--white);
  color: var(--text-mid);
  border: 2px solid var(--border);
  padding: .6rem 1.15rem;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: all .2s;
}
.tab-btn:hover           { border-color: var(--purple-light); color: var(--purple); }
.tab-btn.active          { background: var(--purple); color: var(--white); border-color: var(--purple); }
.tab-btn i               { font-size: 1rem; }

/* Grid */
.services-grid {
  display: none;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.services-grid.active { display: grid; }

@media (min-width: 600px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.service-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.service-card.wide { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .service-card.wide { flex-direction: row; }
  .service-card.wide .service-img  { flex: 0 0 45%; aspect-ratio: unset; }
  .service-card.wide .service-body { flex: 1; }
}

.service-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.service-img .img-placeholder {
  min-height: unset;
  height: 100%;
  border-radius: 0;
  border: none;
  aspect-ratio: 16/9;
}

.service-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}
.service-body.no-img { padding: 1.5rem; }
.service-body h3  { font-size: 1.05rem; margin: 0; }
.service-body > p { color: var(--text-mid); font-size: .87rem; flex: 1; margin: 0; }

.service-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  align-self: flex-start;
}
.service-badge.popular { background: var(--coral-light); color: var(--coral-dark); }
.service-badge.weeks   { background: var(--purple-bg);   color: var(--purple-dark); }

.service-icon {
  width: 52px; height: 52px;
  background: var(--purple-bg);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--purple);
  margin-bottom: .25rem;
  flex-shrink: 0;
}

/* Piel card — chips de tratamientos */
.piel-card .service-img .img-placeholder { aspect-ratio: unset; min-height: 220px; }

.piel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .25rem 0 .5rem;
}
.piel-chips span {
  display: inline-block;
  background: var(--purple-bg);
  color: var(--purple-dark);
  border: 1px solid var(--purple-border);
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 600;
  padding: .28rem .75rem;
  letter-spacing: .02em;
  transition: background .18s, color .18s;
}
.piel-chips span:hover {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

/* ── 8b. BANNER PROMO T DE ORO ────────────────────────────── */
.promo-banner {
  background: linear-gradient(135deg, #3D1060 0%, var(--purple) 55%, #A060D0 100%);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Blob decorativo fondo */
.promo-banner::before {
  content: '';
  position: absolute;
  top: -25%; right: -8%;
  width: 55vw; height: 55vw;
  max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.promo-banner::after {
  content: '';
  position: absolute;
  bottom: -15%; left: -5%;
  width: 40vw; height: 40vw;
  max-width: 380px; max-height: 380px;
  background: radial-gradient(circle, rgba(232,84,122,.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Layout interno */
/* ── Layout interno — mobile: columna, texto sobre fondo ── */
.promo-inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: static;    /* la imagen se posiciona relativa a .promo-banner */
}

/* Texto y CTA por encima de la imagen de fondo */
.promo-text    { position: relative; z-index: 2; }
.promo-cta-row {
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ── Imagen: fondo absoluto en móvil (mismo patrón que el hero) ── */
.promo-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;  /* imagen anclada al borde derecho-inferior */
}
.promo-image img.promo-img {
  width: auto;
  height: 88%;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.30;
  filter: drop-shadow(0 10px 28px rgba(30, 0, 60, 0.5));
}

/* ── Texto: tamaño completo en todas las pantallas ── */
.promo-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .32rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
  margin-bottom: 1rem;
}
.promo-pre {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  margin-bottom: .4rem;
}
.promo-headline {
  color: var(--white);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.1rem;
}
.promo-headline em {
  display: block;
  font-style: italic;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: .3rem;
  color: #F5D8FF;
}
.promo-desc {
  color: rgba(255,255,255,.76);
  font-size: .92rem;
  line-height: 1.72;
  margin-bottom: 0;
  max-width: 480px;
}

/* ── CTA button ── */
.btn-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  background: var(--wa-green);
  color: var(--white);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  padding: .9rem 1.8rem;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37,211,102,.35);
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
}
.btn-promo-cta:hover {
  background: var(--wa-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.4);
}
.btn-promo-cta i { font-size: 1.15rem; }

/* ── Desktop (768px+): imagen vuelve al flujo lateral ── */
@media (min-width: 768px) {
  .promo-inner {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 1;
  }
  .promo-text  { flex: 1.15; }

  /* Imagen sale del fondo y se convierte en columna derecha */
  .promo-image {
    position: relative;
    inset: auto;
    flex: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: auto;
    z-index: auto;
  }
  .promo-image img.promo-img {
    width: 100%;
    height: auto;
    max-height: 620px;
    opacity: 1;
    object-position: center;
  }

  .promo-cta-row { text-align: left; }
  .btn-promo-cta { width: auto; }
}

/* ── 9. ¿POR QUÉ NOSOTROS? ────────────────────────────────── */
.why-us-section {
  padding: 5rem 0;
  background: var(--bg-section);
}

/* ── Layout imagen + cards ── */
.why-us-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .why-us-section { overflow: hidden; }

  /* Escapa el container hacia el borde izquierdo del viewport */
  .why-us-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin-left: calc(50% - 50vw);  /* siempre = borde izq del viewport */
    width: 100vw;
  }

  /* Imagen: 45% del viewport, desde el borde */
  .why-us-image {
    flex: 0 0 45vw;
    max-width: 45vw;
  }

  /* Marco: sin radio ni borde izquierdo (pegado al borde) */
  .why-us-image .why-img-frame {
    height: 100%;
    min-height: 460px;
    padding: 6px 6px 6px 0;
    border-radius: 0 28px 28px 0;
    box-shadow: none;
  }
  .why-us-image .why-img-slider {
    border-radius: 0 22px 22px 0;
    height: 100%;
  }
  .why-us-image .why-slide--1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 22px 22px 0;
  }
  .why-us-image .why-slide--2 {
    border-radius: 0 22px 22px 0;
    object-fit: contain;
  }
  .why-us-image .why-slide--3 {
    border-radius: 0 22px 22px 0;
  }

  /* Tarjetas: padding para alinear con el container original */
  .why-us-cards {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 3.5rem;
    padding-right: max(2rem, calc((100vw - 1200px) / 2 + 2.5rem));
    display: flex;
    align-items: center;
  }
  .why-cards-track { width: 100%; }
}

/* ── Marco de la imagen ── */
.why-img-frame {
  position: relative;
  padding: 6px;
  border-radius: 28px;
  background: linear-gradient(140deg, var(--purple-light) 0%, var(--coral) 55%, #FFD6E3 100%);
  box-shadow: 0 24px 64px rgba(92,61,138,.22);
}

/* ── Slider interno ── */
.why-img-slider {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  line-height: 0;         /* elimina gap bajo img */
}

.why-slide {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 22px;
}

/* Las imágenes 2 y 3 apiladas sobre la 1ª */
.why-slide--2,
.why-slide--3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ciclo 12s — cada imagen visible ~4s con crossfade de 0.5s */
@keyframes why3-1 {
  0%  { opacity: 1; }
  33% { opacity: 1; }
  37% { opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes why3-2 {
  0%  { opacity: 0; }
  33% { opacity: 0; }
  37% { opacity: 1; }
  66% { opacity: 1; }
  70% { opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes why3-3 {
  0%  { opacity: 0; }
  66% { opacity: 0; }
  70% { opacity: 1; }
  100%{ opacity: 1; }
}
.why-slide--1 { animation: why3-1 12s ease-in-out infinite; }
.why-slide--2 { animation: why3-2 12s ease-in-out infinite; }
.why-slide--3 { animation: why3-3 12s ease-in-out infinite; object-position: center top; }

/* ── Dots indicadores ── */
.why-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  z-index: 3;
}
.why-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .3s, transform .3s;
}
.why-dot.active {
  background: var(--white);
  transform: scale(1.3);
}

/* ── Grid 2×2 en desktop ── */
.why-cards-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ── Carrusel deslizable en móvil ── */
@media (max-width: 767px) {
  .why-cards-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: .5rem;
    scrollbar-width: none;
  }
  .why-cards-track::-webkit-scrollbar { display: none; }
  .why-card {
    flex: 0 0 min(280px, 76vw);
    scroll-snap-align: center;
  }
}

/* ── Tarjeta ── */
.why-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.why-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--purple-bg), #E8DFFF);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--purple);
  margin-bottom: 1rem;
}
.why-card h4 { color: var(--text-dark); margin-bottom: .4rem; }
.why-card p  { color: var(--text-mid); font-size: .87rem; margin: 0; }

/* ── 10. STATS ────────────────────────────────────────────── */
.stats-section {
  padding: 3.5rem 0;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; }

.stat-number {
  font-size: clamp(1.65rem, 6vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-label { font-size: .82rem; color: rgba(255,255,255,.72); font-weight: 500; }

/* ── 11. TESTIMONIOS ──────────────────────────────────────── */
.testimonials-section {
  padding: 5rem 0;
  background: var(--bg-warm);
}

.testimonials-track-wrapper { overflow: hidden; }

.testimonials-track {
  display: flex;
  gap: 1.25rem;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  flex: 0 0 100%;         /* mobile: 1 por vez */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid var(--border);
}

@media (min-width: 700px)  { .testimonial-card { flex: 0 0 calc(50% - .625rem); } }
@media (min-width: 1024px) { .testimonial-card { flex: 0 0 calc(33.333% - .84rem); } }

.stars { display: flex; gap: .2rem; }
.stars i { color: #FFB800; font-size: .88rem; }

.testimonial-text {
  color: var(--text-mid);
  font-size: .9rem;
  line-height: 1.72;
  font-style: italic;
  flex: 1;
  margin: 0;
}

.testimonial-author { display: flex; align-items: center; gap: .85rem; }
.author-info strong { display: block; font-size: .9rem; color: var(--text-dark); }
.author-info span   { display: block; font-size: .75rem; color: var(--text-light); }
.author-info span i.bi-google { color: #4285F4; font-size: .75rem; }

/* Controles */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--purple);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.carousel-btn:hover { background: var(--purple); border-color: var(--purple); color: var(--white); }

.carousel-dots { display: flex; gap: .4rem; align-items: center; }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: all .25s;
  padding: 0;
}
.dot.active { width: 22px; border-radius: 4px; background: var(--purple); }

.review-cta-text { color: var(--text-mid); font-size: .88rem; }
.review-cta-text a { color: var(--purple); font-weight: 600; text-decoration: underline; }

/* ── 12. INSTAGRAM ────────────────────────────────────────── */
.instagram-section {
  padding: 5rem 0;
  background: var(--bg-section);
}

.insta-tag {
  /* Gradiente Instagram */
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background-clip: text !important;
  color: transparent !important;
}

.insta-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  padding: .6rem 1.3rem;
  border-radius: var(--r-pill);
  margin-top: .5rem;
  transition: opacity .2s, transform .2s;
}
.insta-follow-btn:hover { opacity: .88; transform: translateY(-1px); color: var(--white); }

/* Wrapper embeds de Instagram — scroll horizontal en móvil */
.insta-embed-wrap {
  display: flex;
  gap: 1rem;
  margin-top: 1.75rem;
  /* Scroll horizontal contenido — NO rompe el layout */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Ocultar scrollbar (pero el scroll sigue funcionando) */
  scrollbar-width: none;
  padding-bottom: .25rem;
  width: 100%;
}
.insta-embed-wrap::-webkit-scrollbar { display: none; }

.insta-embed-wrap .instagram-media {
  /* Ancho fijo para que no desborde la pantalla */
  flex: 0 0 min(340px, 88vw) !important;
  max-width: min(340px, 88vw) !important;
  min-width: unset !important;
  width:     min(340px, 88vw) !important;
  scroll-snap-align: center;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  margin: 0 !important;
  overflow: hidden;
}

/* Desktop: centrados, ancho completo permitido */
@media (min-width: 768px) {
  .insta-embed-wrap {
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;
  }
  .insta-embed-wrap .instagram-media {
    flex: 0 0 460px !important;
    max-width: 460px !important;
    min-width: unset !important;
    width: 460px !important;
  }
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 1.75rem;
}
@media (min-width: 768px) { .instagram-grid { gap: 6px; } }

.insta-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
.insta-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.insta-cell:hover img { transform: scale(1.07); }

.insta-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(92,61,138,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity .25s;
}
.insta-cell:hover .insta-hover-overlay { opacity: 1; }

/* ── 13. HORARIO ──────────────────────────────────────────── */
.schedule-section {
  padding: 5rem 0;
  background: var(--white);
}

.schedule-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .schedule-inner { flex-direction: row; align-items: center; }
  .schedule-text  { flex: 0 0 280px; }
  .schedule-cards { flex: 1; }
}

.schedule-text h2 { color: var(--text-dark); }
.schedule-text > p { color: var(--text-mid); margin-bottom: 1.5rem; font-size: .9rem; }

.schedule-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .4rem;
}

.schedule-day {
  background: var(--bg-section);
  border-radius: var(--r-md);
  padding: .85rem .2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  border: 2px solid transparent;
  transition: all .2s;
}

.day-name  { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--text-mid); letter-spacing: .04em; }
.day-hours { font-size: .6rem;  color: var(--text-light); line-height: 1.35; }

.schedule-day.today {
  background: var(--purple);
  border-color: var(--purple-dark);
  box-shadow: 0 4px 14px rgba(92,61,138,.3);
}
.schedule-day.today .day-name,
.schedule-day.today .day-hours { color: var(--white); }

/* ── 14. UBICACIÓN ────────────────────────────────────────── */
.location-section {
  padding: 5rem 0;
  background: var(--bg-section);
}

.location-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .location-grid     { flex-direction: row; align-items: flex-start; }
  .location-info     { flex: 0 0 340px; }
  .location-map      { flex: 1; }
}

.location-info h2 { margin-bottom: 1.5rem; }

.location-details { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }

.location-item { display: flex; gap: .85rem; align-items: flex-start; }
.location-item i { color: var(--purple); font-size: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
.location-item p { color: var(--text-mid); font-size: .9rem; margin: 0; line-height: 1.55; }

.location-map {
  height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .location-map { height: 420px; } }
.location-map iframe { width: 100%; height: 100%; display: block; }

/* ── 15. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--purple-dark);
  color: rgba(255,255,255,.82);
  padding: 4rem 0 0;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 768px) {
  .footer-top { flex-direction: row; flex-wrap: wrap; gap: 2rem; }
  .footer-brand { flex: 1 1 100%; }
  .footer-services, .footer-contact { flex: 1; }
}
@media (min-width: 1024px) {
  .footer-top { flex-wrap: nowrap; }
  .footer-brand { flex: 1.5 1 0; }
}

.footer-logo {
  height: 48px;
  width: auto;
  margin-bottom: .75rem;
  filter: brightness(0) invert(1);
  opacity: .88;
}
.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 1.25rem; }

.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.82);
  font-size: 1.1rem;
  transition: all .2s;
}
.footer-social a:hover { background: var(--coral); color: var(--white); }

.footer-services h5,
.footer-contact h5 {
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
}

.footer-services ul { display: flex; flex-direction: column; gap: .5rem; }
.footer-services ul li a { color: rgba(255,255,255,.6); font-size: .85rem; }
.footer-services ul li a:hover { color: var(--white); }

.footer-contact p {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .65rem;
}
.footer-contact p i { color: var(--purple-light); margin-top: .18rem; flex-shrink: 0; }

.footer-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--wa-green);
  color: var(--white);
  font-size: .85rem;
  font-weight: 600;
  padding: .65rem 1.25rem;
  border-radius: var(--r-pill);
  margin-top: .5rem;
  transition: all .2s;
}
.footer-wa-btn:hover { background: var(--wa-dark); color: var(--white); }

.footer-bottom { padding: 1.25rem 0; text-align: center; }
.footer-bottom p { font-size: .78rem; color: rgba(255,255,255,.38); margin: 0; }

/* ── 16. BOTÓN FLOTANTE WHATSAPP ──────────────────────────── */
.floating-wa {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--wa-green);
  color: var(--white);
  border-radius: var(--r-pill);
  padding: .9rem;
  box-shadow: 0 4px 22px rgba(37,211,102,.45);
  transition: all .3s ease;
}
.floating-wa i { font-size: 1.5rem; line-height: 1; }

/* Móvil: centrado inferior, 10 % más grande */
@media (max-width: 767px) {
  .floating-wa {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
    padding: 1rem 1.6rem;   /* más ancho para zona de toque */
  }
  .floating-wa i { font-size: 1.65rem; }
}

.floating-wa-label {
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s ease, opacity .3s ease, margin .35s ease;
}
.floating-wa:hover .floating-wa-label {
  max-width: 160px;
  opacity: 1;
  margin-left: .5rem;
}
.floating-wa:hover { background: var(--wa-dark); box-shadow: 0 6px 30px rgba(37,211,102,.5); }

/* ── 17. ANIMACIONES ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; }
.fade-up.visible { animation: fadeUp .55s ease forwards; }

/* ── 18. LIGHTBOX NATIVO ──────────────────────────────────── */
.lightbox-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}
.lightbox-dialog[open] { display: flex; }

.lightbox-dialog::backdrop {
  background: rgba(14, 6, 30, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,.55);
  animation: lightboxIn .25s ease;
  cursor: zoom-out;
}

@keyframes lightboxIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-close {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--white);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  z-index: 9999;
}
.lightbox-close:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.08);
}

/* Cursor en imágenes del slider */
.why-slide { cursor: zoom-in; }