/* ============================================================
   CBD · COUTURE LAYER · v1
   Cristina Beauty Designer · Refinamiento editorial final
   ------------------------------------------------------------
   Capa de pulido cargada AL FINAL de la cascada. No elimina
   contenido ni reestructura: corrige los detalles que delatan
   una página "montada" y eleva la sensación de atelier.

   Índice
   01 · Tipografía editorial (balance, medida, ritmo)
   02 · Botones — nunca rotos en dos líneas
   03 · Hero — chips editoriales, jerarquía silenciosa
   04 · Quiénes somos — pilares alineados
   05 · Oro con moderación (CTA dorado → firma vino)
   06 · FAQ — calma y microinteracción
   07 · Footer — pill de reserva correcta
   08 · Mobile — densidad y aire
   ============================================================ */

/* ── 01 · TIPOGRAFÍA EDITORIAL ─────────────────────────────── */

/* Titulares balanceados: nunca una palabra huérfana colgando */
h1, h2, h3, .svc3-title, .moment-x-title, .cbd-compare-title {
  text-wrap: balance;
}
/* Párrafos con rag cuidado */
p { text-wrap: pretty; }

/* Eyebrows: si no caben, que partan limpio — jamás mid-frase
   con tracking enorme. Bajamos levemente el tracking en pantallas
   estrechas para que la mayoría quepa en una línea. */
.hero-v3-eyebrow-text,
.moment-x-eyebrow,
.cbd-compare-eyebrow,
.cbd-orbital-eyebrow,
.gal2-eyebrow,
.net-eyebrow,
.cbd-exit-eyebrow,
.srv-x-eyebrow {
  text-wrap: balance;
}
@media (max-width: 767px) {
  .hero-v3-eyebrow-text { letter-spacing: 0.16em; }
}

/* Labels-pill cortos: jamás partidos */
.diag-ai-indicator, .diag-ai-label { white-space: nowrap; }
.diag-eyebrow { text-wrap: balance; }

/* Eyebrows utilitarios (uppercase + tracking ancho): si se parten,
   que se partan en dos líneas equilibradas — nunca · 04 huérfano */
span[class*="uppercase"][class*="tracking-"] { display: inline-block; text-wrap: balance; }

/* Estado "Abierto · Lun–Sáb" del header: una sola línea siempre */
.lux-nav-status { white-space: nowrap; }

/* Selección de texto con firma de marca */
::selection { background: rgba(122, 7, 18, 0.16); color: var(--ink, #45070C); }

/* ── 02 · BOTONES — NUNCA PARTIDOS EN DOS LÍNEAS ───────────── */

/* Un CTA de lujo no se quiebra: el texto vive en una sola línea
   y el botón se adapta. Solo en pantallas muy estrechas se permite
   ancho completo centrado. */
.hero-v3-cta-primary, .hero-v3-cta-ghost,
.qs-cta,
.cbd-cinema-cta-btn,
.lashrail-btn,
.btn-premium, .btn-ghost,
.cbd-compare-cta,
.diag-cta-primary,
.ext-cta,
.cbd-exit-option,
.cbd-footer-link-cta {
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Con nowrap, los CTAs del hero dimensionan a su contenido y la
     fila envuelve a stack si no caben — nunca texto recortado */
  .hero-v3-cta-primary, .hero-v3-cta-ghost { flex: 0 1 auto; }
}

@media (max-width: 480px) {
  /* En móvil el botón ocupa el ancho y centra su contenido,
     manteniendo una sola línea con tipografía ligeramente menor */
  .hero-v3-cta-primary, .hero-v3-cta-ghost,
  .cbd-cinema-cta-btn,
  .qs-cta {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

/* El texto interno de CTAs largos respira un poco menos de tracking
   para caber con elegancia */
.hero-v3-cta-text { letter-spacing: 0.12em; }

/* Aire entre etiqueta y flecha (el nowrap los acercaba) */
.hero-v3-cta-primary { gap: 0.9rem !important; }
.qs-cta { gap: 0.75rem !important; }
.cbd-cinema-cta-btn { gap: 0.75rem !important; }

/* Trust row del hero: cada item es una unidad — no se parte */
.hero-v3-trust-item { white-space: nowrap; }
.hero-v3-trust { row-gap: 0.6rem; }
@media (max-width: 420px) {
  .hero-v3-trust-item { white-space: normal; } /* rescate en xs */
}

/* ── 03 · HERO — CHIPS EDITORIALES, NO STICKERS ────────────── */

/* Chips flotantes: de "tarjeta app" a "nota de atelier".
   Marfil perla, hairline dorado, sombra de tinta muy suave. */
.hero-v3-chip {
  background: rgba(255, 254, 252, 0.92) !important;
  border: 1px solid rgba(154, 123, 54, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 38px rgba(69, 7, 12, 0.10) !important;
  backdrop-filter: blur(6px);
}

/* El chip lateral "Beauty Studio" repite lo que ya dice toda la
   página: se retira para dejar respirar la imagen. (El dato vive
   en el copy, el footer y el badge de Quiénes somos.) */
.hero-v3-chip-side { display: none !important; }

/* La cita de Cristina, con aire de nota manuscrita */
.hero-v3-chip-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Fila de stats del diagnóstico: envuelve con orden y la flecha
   "Empieza aquí" nunca se monta sobre los números */
.diag-invite-row { flex-wrap: wrap; justify-content: center; row-gap: 0.9rem; max-width: 100%; }
.diag-invite-stat { white-space: nowrap; }
.diag-invite-arrow { margin-top: 1.6rem; }

/* ── 04 · QUIÉNES SOMOS — PILARES SIEMPRE ALINEADOS ────────── */

/* El tercer pilar caía huérfano debajo de la fila. Grid de 3
   columnas con separador hairline integrado: siempre alineado. */
.qs-pillars {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.25rem;
  align-items: start;
}
.qs-pillar-div { display: none !important; }
.qs-pillar { min-width: 0; }
.qs-pillar + .qs-pillar,
.qs-pillar ~ .qs-pillar {
  border-left: 1px solid rgba(201, 162, 78, 0.3);
  padding-left: 1.25rem;
}
.qs-pillar-num { white-space: nowrap; }

/* ── 05 · ORO CON MODERACIÓN ───────────────────────────────── */

/* El botón dorado macizo gritaba; el lujo susurra. Vino profundo,
   texto perla, hairline dorado — la misma jerarquía, mejor voz. */
.qs-cta--gold {
  background: linear-gradient(150deg, #6E0518, #4E0610) !important;
  color: var(--cream, #FBF6ED) !important;
  border: 1px solid rgba(201, 162, 78, 0.45) !important;
  box-shadow: 0 12px 30px rgba(78, 6, 16, 0.22) !important;
}
.qs-cta--gold:hover {
  box-shadow: 0 16px 40px rgba(78, 6, 16, 0.30) !important;
  border-color: rgba(236, 215, 164, 0.7) !important;
}

/* ── 06 · FAQ — CALMA Y MICROINTERACCIÓN ───────────────────── */

.faq-summary {
  transition: background-color 0.2s ease;
  border-radius: 8px;
}
.faq-summary:hover { background-color: rgba(201, 162, 78, 0.06); }
.faq-toggle {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
details[open] > .faq-summary .faq-toggle {
  transform: rotate(45deg);
  color: var(--cherry, #7A0712);
}
.faq-a { animation: cbdFaqIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cbdFaqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 07 · FOOTER — PILL DE RESERVA CORRECTA ────────────────── */

/* El texto desbordaba el borde de la pill. Pill propia, a medida. */
.cbd-footer-link-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.3rem !important;
  white-space: nowrap;
  line-height: 1 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border: 1px solid rgba(201, 162, 78, 0.45) !important;
  border-radius: 999px !important;
  max-width: 100%;
  width: fit-content;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cbd-footer-link-cta:hover { border-color: rgba(236, 215, 164, 0.8) !important; }

/* ── 08 · MOBILE — DENSIDAD Y AIRE ─────────────────────────── */

@media (max-width: 767px) {
  /* Chips del hero más discretos en móvil: notas, no tarjetas */
  .hero-v3-chip { transform: scale(0.92); }

  /* Métricas en vino: respiración pareja */
  #metrics .grid { row-gap: 1.75rem; }
}
/* ============================================================
   CBD · COUTURE LAYER · v2 — segunda pasada
   Cristina Beauty Designer · profundidad, motion y tablet
   ------------------------------------------------------------
   01 · Tablet — hero editorial a dos columnas
   02 · Imágenes vivas (micro-zoom con cursor)
   03 · Navegación — subrayado dorado animado
   04 · Footer — hover con intención
   05 · Cards — profundidad controlada
   ============================================================ */

/* ── 01 · TABLET (900–1023px) — el hero no se apila ─────────
   Entre 900 y 1023px el hero heredaba el layout móvil: imagen
   gigante arriba, titular enterrado. En tablet horizontal la
   portada vuelve a ser editorial: texto + imagen lado a lado. */
@media (min-width: 900px) and (max-width: 1023px) {
  .hero-v3-grid {
    grid-template-columns: 1.15fr 1fr !important;
    gap: 3rem !important;
    align-items: center !important;
    padding: 0 2.25rem !important;
  }
  .hero-v3-text { order: 1 !important; }
  .hero-v3-visual { order: 2 !important; }
  .hero-v3-headline { font-size: clamp(2.6rem, 5.2vw, 3.4rem) !important; }
}

/* ── 02 · IMÁGENES VIVAS — micro-zoom sólo con cursor ──────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qs-media-frame img,
  .svc3-card-media img,
  .lashrail-card img {
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qs-media-frame:hover img { transform: scale(1.035); }
  .svc3-card-media:hover img { transform: scale(1.05); }
}

/* ── 03 · NAVEGACIÓN — subrayado dorado que crece ──────────── */
.lux-nav-link { position: relative; }
.lux-nav-link::after {
  content: '';
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, #C9A24E, #ECD7A4);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.lux-nav-link:hover::after,
.lux-nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

/* ── 04 · FOOTER — hover con intención ─────────────────────── */
.cbd-footer-link {
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (hover: hover) {
  .cbd-footer-link:hover { transform: translateX(4px); }
  .cbd-footer-link-cta:hover { transform: none; }
}

/* ── 05 · CARDS — profundidad controlada ───────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .moment-x-card {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s ease, border-color 0.3s ease !important;
  }
  .moment-x-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(69, 7, 12, 0.12);
  }
  .faq-item { transition: border-color 0.3s ease; }
}