/* ============================================================
   RONDAS REALES (análisis → mejora) — archivo de trabajo
   ============================================================ */

/* R1 — Hero frame-0: fuente limpia, jerarquía, CTA secundario caro */
.hero__lead-geo {
  display: block;
  margin-top: 0.2em;
  color: var(--color-text-muted);
  font-weight: 450;
}
.hero__secondary-link {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.35s var(--ease-out-expo);
}
.hero__secondary-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
  opacity: 0.7;
}
.hero__secondary-link:hover {
  color: var(--color-accent-light);
}
.hero__secondary-link:hover::after {
  transform: scaleX(1);
  opacity: 1;
}
.hero--cinematic .hero__content {
  max-width: 44rem;
}
/* H1 hero: sin letter-split; gradiente continuo en .title-line--impact */


/* R2 — Marquee fade + proof ritmo */
.marquee {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.atelier-strip__inner {
  align-items: stretch;
}
.stat-card__label {
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
  max-width: 11rem;
}


/* R3 — Comparador y filas de cambio */
.comparison-wrap {
  position: relative;
}
.comparison--case {
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(242,240,235,0.1),
    0 36px 90px -36px rgba(0,0,0,0.8);
}
.comparison__label {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  background: rgba(6,8,12,0.72) !important;
}
.comparison-item__before {
  opacity: 0.65;
  text-decoration: line-through;
  text-decoration-color: rgba(242,240,235,0.25);
}
.comparison-item__after {
  font-weight: 650 !important;
  letter-spacing: -0.015em;
}
.comparison-item__arrow {
  color: var(--color-accent);
  font-weight: 700;
  opacity: 0.85;
}


/* R4 — Servicios con jerarquía */
.services-grid { counter-reset: svc; }
.card--service { counter-increment: svc; }
.card--service .icon-badge { position: relative; }
.card--service .icon-badge::after {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: -0.35rem; right: -0.35rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem; letter-spacing: 0.06em;
  color: var(--color-bg); background: var(--color-accent);
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700;
}
.card--service-featured {
  border-color: rgba(94, 215, 232, 0.28) !important;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(94,215,232,0.1), transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,0.03), transparent 45%),
    var(--color-surface) !important;
}
.card--service .btn--ghost {
  margin-top: auto; width: 100%; justify-content: space-between;
}


/* R5 — Casos: scroller de portfolio caro */
.cases-scroll {
  padding: 0.5rem 0.15rem 1rem !important;
  gap: 1.15rem !important;
}
.card--case {
  border-radius: 1rem !important;
  flex: 0 0 min(82vw, 19.5rem) !important;
}
.case__image-wrap {
  aspect-ratio: 16 / 10;
  background: #0a0d12;
}
.case__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.case__type {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
.case__name {
  font-size: 1.35rem !important;
  letter-spacing: -0.03em !important;
}
.case__role {
  opacity: 0.85;
}
.cases-cta .btn {
  min-width: min(100%, 22rem);
}


/* R6 — Proceso ritual */
.process-timeline {
  max-width: 42rem !important;
}
.process-step__content h3 {
  font-size: 1.25rem !important;
}
.guarantee {
  position: relative;
  overflow: hidden;
}


/* R7 — Planes: revertido a bundle pre-14:40 */

/* R8 — Care: sin overrides agresivos; layout solo abajo */

/* R9 — Blog cards con material real */
.blog-card {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(242,240,235,0.08);
  background: var(--color-surface);
}
.blog-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #0a0d12;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease-premium), opacity 0.5s ease;
}
.blog-card:hover .blog-card__image img {
  transform: scale(1.04);
}
.blog-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
}
.blog-card__excerpt {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* R10 — FAQ editorial */
.faq-container {
  max-width: 44rem !important;
}
.faq-list summary {
  font-size: 1.02rem !important;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.faq-list details p {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 40rem;
}


/* R11 — Contacto de estudio, no formulario barato */
.contact-container {
  max-width: 48rem !important;
}
.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem !important;
}
.contact-channel {
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  text-decoration: none;
}
#contacto .form-grid,
#contacto form {
  display: grid;
  gap: 0.9rem;
}
#contacto .form__row,
#contacto .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 640px) {
  #contacto .form__row,
  #contacto .form-row {
    grid-template-columns: 1fr;
  }
}
#contacto button[type="submit"] {
  margin-top: 0.35rem;
  width: 100%;
}
.live-dot {
  vertical-align: 0.05em;
}


/* R12 — Footer 4 columnas + nav links stack */
.footer-grid {
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem 1.5rem !important;
}
.footer-grid nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-grid nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-grid nav a:hover {
  color: var(--color-accent-light);
  transform: translateX(2px);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}
.nav__drawer {
  backdrop-filter: blur(20px);
}


/* R13 — Motion: sheen solo donde aporta; menos ruido */
.comparison-item .card-sheen { display: none !important; }
.craft-note .card-sheen { display: none !important; }


/* R14 — Responsive real 320–1024 */
@media (max-width: 390px) {
  .hero__title {
    font-size: clamp(2.35rem, 11.5vw, 3.1rem) !important;
    letter-spacing: -0.04em !important;
  }
  .title-line { white-space: nowrap; }
  .proof-bar__item {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
.hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__secondary-link {
    text-align: center;
    padding: 0.75rem 0;
  }
  .section-watermark {
    opacity: 0.25 !important;
  }
  .nav__links { display: none; }
}
/* safe areas (notch / home indicator) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.header .nav {
  padding-top: env(safe-area-inset-top);
}
.sticky-cta, .cookie-consent {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
/* prevent horizontal scroll from sheen/beam */
.card, .has-sheen, .has-beam {
  max-width: 100%;
}


/* R15 — Coherencia global: un sistema de easing, menos pelea */
:root {
  --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ui: 220ms;
}
html.has-alive .section-title {
  text-wrap: balance;
}
/* Evitar que el dump de gradient-drift pelee con reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .text-gradient,
  .preloader__word,
  .preloader__bar-fill,
  .section-watermark,
    .badge-dot,
  .live-dot {
    animation: none !important;
  }
}
/* Cierre: FAB/cookie no tapan CTA en móvil */
@media (max-width: 640px) {
  .cookie-consent {
    max-width: calc(100% - 1rem);
  }
}


/* ============================================================
   PLANES = solo bundle (sin capas craft inventadas)
   Anula cualquier resto de joya/RECOMENDADO/gradiente de intentos previos.
   ============================================================ */
.card--price.is-featured::before {
  /* solo Marca usa ::before en bundle para hairline oro; Negocio featured NO lleva sello */
  content: none !important;
  display: none !important;
}
/* No tocar .card--price-from::before (filo oro del diseño original) */
.card--price:not(.card--price-from).is-featured::before,
.card--price.is-featured:not(.card--price-from)::before {
  content: none !important;
  display: none !important;
  all: unset;
}
.card--price .price__num,
.card--care .price__num {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}
.card--price.is-featured {
  /* vuelve a la definición de bundle — sin !important de joya */
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 22px 56px -22px var(--color-glow-strong), var(--shadow-card);
  transform: translateY(-0.2rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.12));
  animation: none !important;
}
/* Beam de planes activo en premium-25k (línea cian→oro). No anular. */

/* ============================================================
   INTRO DE SECCIÓN — ritmo único (todas las secciones main)
   label → (0.55) → título → (0.75) → lead? → (1.5) → contenido
   ============================================================ */
:root {
  --intro-label-gap: 0.55rem;
  --intro-title-gap: 0.75rem;
  --intro-to-content: 1.5rem;
}

/* Cero márgenes sueltos: solo sibling + header bottom */
main .section-header,
main .contact-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 0 !important;
  margin: 0 0 var(--intro-to-content) 0 !important;
  padding: 0 !important;
}
main .section-header.center {
  align-items: center;
  text-align: center;
}

main .section-header > *,
main .contact-header > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

main .section-label {
  display: block;
  margin: 0 !important;
}

main .section-title {
  font-size: clamp(2.05rem, 4.8vw, 3.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
  margin: 0 !important;
  padding: 0 !important;
}

/* Espacio FIJO tras el label (todas las secciones) */
main .section-header > .section-label + .section-title,
main .contact-header > .section-label + .section-title {
  margin-top: var(--intro-label-gap) !important;
}

/* Espacio FIJO tras el título cuando hay lead */
main .section-header > .section-title + .section-lead,
main .contact-header > .section-title + .section-lead {
  margin-top: var(--intro-title-gap) !important;
}

/* Lead */
main .section-lead {
  max-width: 36rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
main .section-header.center .section-lead {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
main .section-header.center .section-title {
  text-align: center;
}

/* Pill dentro del lead: no empuja el ritmo del header */
main .section-lead .urgency-pill {
  display: inline-block;
  margin-top: 0.45rem;
  margin-bottom: 0;
}

/* Contacto: mismo sistema; channels pegados al header (sin margin-top extra) */
#contacto .contact-channels {
  margin-top: 0 !important;
  margin-bottom: var(--intro-to-content) !important;
}

/* Planes: sub-cabecera de bloque no suma aire raro tras el H2 de sección */
#planes .planes-block__header {
  margin-top: 0 !important;
  margin-bottom: 1.15rem !important;
}
#planes .planes-block--build {
  margin-top: 0 !important;
}

/* Hero conserva escala propia */
.hero .hero__title {
  font-size: clamp(3.1rem, 8.5vw, 7.2rem) !important;
}

@media (max-width: 640px) {
  :root {
    --intro-to-content: 1.25rem;
    --intro-label-gap: 0.5rem;
    --intro-title-gap: 0.65rem;
  }
  main .section-title {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important;
  }
}


/* ============================================================
   PLAN SWEEP — línea que ATRAVIESA la tarjeta (estado mañana)
   No es el beam del borde. Es el sheen diagonal de Marca
   (translateX -55% → +55%), en todos los planes.
   ============================================================ */

/* Quitar beam de borde en planes si quedara residual */
.card--price.has-beam::after,
.card--care.has-beam::after {
  /* si alguien deja has-beam, no usamos el beam de borde */
}

.card.plan-sweep,
.card.card--price,
.card.card--care,
.card.card--renovacion-price {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* el barrido vive DENTRO; inset negativo recortado a la card */
}

/* Contenido por encima del barrido */
.card.plan-sweep > *,
.card.card--price > *,
.card.card--care > *,
.card.card--renovacion-price > * {
  position: relative;
  z-index: 1;
}

/* Capa de barrido: pseudo ::after en todas las de plan
   (Marca ya lo tenía en oro; el resto cian→hueso→oro) */
.card.card--price:not(.card--price-from)::after,
.card.card--care::after,
.card.card--renovacion-price::after {
  content: "";
  position: absolute;
  inset: -20% -45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(94, 215, 232, 0.12) 46%,
    rgba(242, 240, 235, 0.22) 50%,
    rgba(196, 165, 116, 0.16) 54%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(-55%) skewX(-14deg);
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  opacity: 1;
}

/* Marca: restaurar sheen oro original de bundle (sin interferencias) */
.card.card--price-from::after {
  content: "" !important;
  position: absolute !important;
  inset: -20% -40% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  mask: none !important;
  -webkit-mask: none !important;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(196, 165, 116, 0.18) 48%,
    rgba(242, 240, 235, 0.12) 50%,
    rgba(196, 165, 116, 0.16) 52%,
    transparent 58%,
    transparent 100%
  ) !important;
  background-size: auto !important;
  transform: translateX(-55%) skewX(-14deg) !important;
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  opacity: 1 !important;
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .card.card--price:not(.card--price-from):hover::after,
  .card.card--care:hover::after,
  .card.card--renovacion-price:hover::after {
    transform: translateX(55%) skewX(-14deg);
  }
  .card.card--price-from:hover::after {
    transform: translateX(55%) skewX(-14deg) !important;
    animation: none !important;
  }
}

/* Táctil: una pasada al entrar en vista */
@media (hover: none) {
  .card.card--price:not(.card--price-from)::after,
  .card.card--care::after,
  .card.card--renovacion-price::after {
    transition: none;
  }
  .card.card--price:not(.card--price-from).is-sheen-run::after,
  .card.card--care.is-sheen-run::after,
  .card.card--renovacion-price.is-sheen-run::after {
    animation: plan-sweep-once 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .card.card--price-from::after {
    transition: none !important;
  }
  .card.card--price-from.is-sheen-run::after {
    animation: plan-sweep-once 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }
}

@keyframes plan-sweep-once {
  from { transform: translateX(-55%) skewX(-14deg); }
  to { transform: translateX(55%) skewX(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .card.card--price::after,
  .card.card--care::after,
  .card.card--renovacion-price::after {
    content: none !important;
    animation: none !important;
  }
}

/* Casos en móvil: el scroller va full-bleed (100vw) y encima lleva una máscara
   que funde el 3% de cada borde (~12px a 390px). Con el padding lateral de
   0.15rem de R5, la primera tarjeta arranca en x=0 y el fundido se comía su
   título — "InOut" se leía "nOut" (27-jul-2026). Se le devuelve el respiro. */
@media (max-width: 768px) {
  .cases-scroll {
    padding-left: 1.25rem !important;
    padding-right: 1rem !important;
    /* sin esto, el scroll-snap alinea la tarjeta con el borde del scroller e
       ignora el padding, devolviendo el título bajo el fundido */
    scroll-padding-left: 1.25rem;
  }
}

/* ============================================
   Barra de datos del hero: las 4 en una línea (27-jul-2026)
   El bloque de texto del hero topa a 700px y las 4 pastillas piden 778, así que
   la cuarta caía sola a una segunda fila (3+1, feo). Por tramos:
   - Desde 1024px: la barra se libera de ese tope y va en una sola línea.
   - 768–1023px: no caben (778 > 768); se reparten 2x2, que es equilibrado.
   - Móvil: siguen apiladas, cada una a lo ancho.
   ============================================ */
@media (min-width: 1024px) {
  .hero__proof {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    gap: 0.7rem;
  }
  .hero__proof .proof-bar__item {
    white-space: nowrap;
    padding: 0.5rem 0.7rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__proof { gap: 0.6rem; }
  .hero__proof .proof-bar__item {
    flex: 1 1 calc(50% - 0.6rem);
    justify-content: center;
    white-space: nowrap;
  }
}