/* =========================================================
   5 · SECTIONS
   Un bloque por sección, en el mismo orden que la página.
   ========================================================= */
@layer sections {

  /* ---------- Hero ----------
     Áreas: título | chatters
            facts  | acción (CTA + palabra gigante)        */
  .hero { position: relative; overflow: hidden; isolation: isolate; display: flex; min-height: clamp(660px, calc(100svh - var(--header-h)), 900px); }
  .hero__glow {
    position: absolute; left: 50%; top: 58%; z-index: -2; pointer-events: none;
    width: min(1100px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(closest-side, rgb(var(--pink-rgb) / .34), rgb(var(--pink-rgb) / .1) 55%, rgb(var(--pink-rgb) / 0));
  }
  .hero__grid {
    position: relative; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto;
    grid-template-areas: "title chatters" "facts action";
    gap: 2rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  }
  .hero__photo {
    position: absolute; left: 50%; bottom: 0; z-index: -1;
    width: min(48vw, 620px); height: 94%; transform: translate3d(-50%, 0, 0);
    background: var(--pink); will-change: transform;
    -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 42%, var(--black) 52%, transparent 100%);
            mask-image: radial-gradient(ellipse 62% 72% at 50% 42%, var(--black) 52%, transparent 100%);
  }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: var(--photo-filter) contrast(1.12); mix-blend-mode: var(--photo-blend); }
  .hero__photo.is-missing { background: transparent !important; }

  .hero__title { grid-area: title; align-self: start; max-width: 12ch; font: 300 clamp(2.4rem, 4.6vw, 4rem)/1.04 var(--font); letter-spacing: -.02em; }
  .hero__action { grid-area: action; align-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; text-align: right; }
  .hero__ctas { order: -1; display: flex; gap: .6rem; } /* como en la referencia: CTA encima de la palabra gigante (que es aria-hidden) */
  .hero__wa, .hero__stats { display: none; }
  .hero__bigword { margin: 0; font: 800 clamp(3.6rem, 8.6vw, 8.4rem)/.8 var(--font); letter-spacing: -.055em; color: var(--white); text-transform: lowercase; }
  .hero__bigword .line { display: block; overflow: clip; padding-bottom: .24em; margin-bottom: -.24em; }
  .hero__bigword .line__in { display: block; }
  .hero__bigword .line + .line { padding-left: .4em; }

  .hero__chatters { grid-area: chatters; justify-self: end; align-self: start; display: flex; gap: .9rem; width: min(100%, 380px); padding: .8rem; }
  .hero__chatters .card__body { display: flex; flex-direction: column; align-items: flex-start; padding: .45rem .2rem .3rem .4rem; }
  .hero__chatters .card__text { margin-bottom: .9rem; }
  .hero__chatters .chip-link { margin-top: auto; }
  .hero__chatters .card__thumb { width: 132px; }

  .hero__facts { grid-area: facts; align-self: end; display: flex; gap: .9rem; align-items: stretch; }
  .fact--pink { display: flex; flex-direction: column; justify-content: space-between; width: 190px; min-height: 150px; padding: 1rem 1.1rem 1.15rem; }
  .fact--steps { display: flex; gap: .9rem; width: min(100%, 340px); padding: .8rem; }
  .fact--steps .card__body { display: flex; flex-direction: column; align-items: flex-start; padding: .45rem .2rem .3rem .4rem; }
  .fact--steps .text-link { margin-top: auto; }
  .fact--steps .card__thumb { width: 110px; }
  .fact--steps .card__thumb img { object-position: 50% 12%; }

  /* ---------- 01 Agencia ---------- */
  .agency { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .agency__aside { grid-column: 1 / span 3; align-self: end; }
  .agency__aside h3 { margin-bottom: .7rem; font: 800 1rem/1.25 var(--font); text-transform: uppercase; letter-spacing: .02em; }
  .agency__aside p { margin: 0; font-size: .97rem; color: var(--text-2); }
  .agency__media { grid-column: 4 / -1; display: grid; grid-template-columns: 1.45fr 1fr; gap: 1rem; }
  .agency__media .photo { min-height: 280px; }
  .stat-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 1.4rem 1.5rem 1.6rem; }
  .stat-card .dots { position: absolute; right: 1.4rem; top: 1.4rem; color: var(--pink-deep); }
  .stat-card__num { margin: 0; font: 800 clamp(3rem, 5vw, 4.4rem)/.9 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .stat-card__name { margin: .5rem 0 0; font: 600 1.35rem/1.2 var(--font); }

  /* ---------- 02 Cómo trabajamos ---------- */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .step { padding: 1.6rem 1.4rem 1.8rem; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
  .step__num { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 34px; padding: 0 .8rem; border-radius: var(--r-pill); background: var(--grad-pink); color: var(--black); font: 800 .95rem/1 var(--font); font-variant-numeric: tabular-nums; }
  .step h3 { margin: 1.6rem 0 .5rem; font: 700 1.35rem/1.2 var(--font); }
  .step p { margin: 0; color: var(--text-2); font-size: .98rem; }

  /* Pista de progreso de los pasos (solo con animaciones y en pantallas anchas) */
  .steps__track { display: none; position: relative; height: 2px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--line); overflow: hidden; }
  .steps__fill { position: absolute; inset: 0; background: var(--grad-pink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }

  /* ---------- 03 Ventajas (bento) ---------- */
  .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .tile { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 1.6rem 1.5rem 1.75rem; }
  .tile h3 { margin: 0 0 .5rem; font: 700 1.3rem/1.2 var(--font); }
  .tile p { margin: 0; font-size: .98rem; }
  .tile--wide { grid-column: span 2; }
  .tile--white { background: var(--white); color: var(--ink); border: 1px solid var(--card-line); }
  .tile--white p { color: var(--ink-2); }
  .tile--pink { background: var(--grad-pink); color: var(--black); }
  .tile--pink .icon-badge { background: var(--black); }
  .tile--dark { background: var(--surface); border: 1px solid var(--line); }
  .tile--dark p { color: var(--text-2); }
  .tile--dark .icon-badge { background: var(--grad-pink); color: var(--black); }
  .tile--image { grid-column: span 2; grid-row: span 2; min-height: 420px; padding: 0; display: flex; align-items: flex-end; background: var(--pink); }
  .tile--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); mix-blend-mode: var(--photo-blend); }
  .tile__body { position: relative; width: 100%; padding: 5rem 1.75rem 1.75rem; background: linear-gradient(to top, rgb(var(--black-rgb) / .9), rgb(var(--black-rgb) / .55) 60%, rgb(var(--black-rgb) / 0)); }
  .tile--image h3 { font: 800 clamp(1.7rem, 2.8vw, 2.4rem)/1.02 var(--font); letter-spacing: -.02em; }
  .tile--image p { color: var(--text); max-width: 42ch; }

  /* ---------- 04 Resultados ----------
     Captura real (izquierda) + cifras sacadas de ella + CTA (derecha) */
  .results { display: grid; grid-template-columns: 7fr 5fr; gap: 1rem; align-items: start; }
  .proof { min-width: 0; margin: 0; padding: .75rem; }
  .proof img { width: 100%; height: auto; border-radius: var(--r-field); border: 1px solid var(--card-line); }
  .proof__caption { padding: .9rem .4rem .35rem; font-size: .9rem; color: var(--ink-2); }
  .proof__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .proof.is-ready .proof__track { scrollbar-width: none; }
  .proof.is-ready .proof__track::-webkit-scrollbar { display: none; }
  .proof__track:focus-visible { outline-offset: -3px; border-radius: var(--r-field); }
  .proof__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .proof__image { display: grid; align-items: center; aspect-ratio: 800 / 1108; }
  .proof__image img { max-height: 100%; object-fit: contain; }
  .proof__controls { display: flex; align-items: center; gap: .5rem; margin: .65rem .4rem .15rem; }
  .proof__controls[hidden] { display: none; }
  .proof__count { flex: 1; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .proof__button { color: var(--ink); }
  .proof__button:hover { color: var(--pink-deep); border-color: var(--pink-deep); }
  .results__stats { display: grid; gap: 1rem; }
  .result { padding: 1.6rem 1.5rem 1.8rem; }
  .result__who { margin: 0; color: var(--ink-2); font-weight: 600; }
  .result__metric { margin: 1.1rem 0 .5rem; font: 800 clamp(2.3rem, 4.2vw, 3.6rem)/1 var(--font); letter-spacing: -.03em; color: var(--pink-deep); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .result__desc { margin: 0; color: var(--ink-2); }
  .result--cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .result__cta-text { margin: 0; font: 300 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font); }

  /* ---------- 05 Preguntas ---------- */
  .faq__item { border-top: 1px solid var(--line); }
  .faq__item:last-child { border-bottom: 1px solid var(--line); }
  .faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    min-height: 64px; padding: 1.3rem 0; list-style: none; cursor: pointer;
    font: 600 1.2rem/1.35 var(--font); border-radius: 6px;
    transition: color var(--t-fast);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--pink); }
  .faq__toggle { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); transition: background-color var(--t-fast), border-color var(--t-fast); }
  .faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
  .faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
  .faq__item[open] .faq__toggle { background: var(--grad-pink); border-color: transparent; color: var(--black); }
  .faq__item[open] .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
  .faq__a { margin: 0 0 1.6rem; max-width: 62ch; color: var(--text-2); }

  /* ---------- 06 Aplica ---------- */
  .apply { display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: stretch; }
  .apply__aside { display: flex; flex-direction: column; gap: 1rem; }
  .apply__aside .photo { flex: 1; min-height: 320px; }
  .notes { padding: 1.4rem 1.5rem; display: grid; gap: .65rem; }
  .notes li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 600; }
  .notes svg { width: 22px; height: 22px; flex: none; margin-top: .1rem; color: var(--pink-deep); }

  /* ---------- 07 Contacto ---------- */
  .channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .channel {
    display: flex; flex-direction: column; gap: 2.2rem; height: 100%; min-width: 0;
    padding: 1.4rem 1.4rem 1.6rem; border-radius: var(--r-card);
    border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none;
    transition: border-color var(--t-fast), background-color var(--t-fast);
  }
  .channel:hover { border-color: var(--pink); background: var(--surface-2); }
  .channel { position: relative; }
  .channel .icon-badge { margin: 0; background: var(--grad-pink); color: var(--black); }
  .channel__go {
    position: absolute; right: 1.2rem; top: 1.2rem; width: 34px; height: 34px;
    display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text);
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  }
  .channel__go svg { width: 14px; height: 14px; transform: rotate(-90deg); }
  .channel:hover .channel__go { background: var(--pink); border-color: var(--pink); color: var(--black); }
  .channel > span:last-child { min-width: 0; }
  .carousel-ui { display: none; }
  .carousel-btn svg { width: 18px; height: 18px; }
  .carousel-btn--prev svg { transform: rotate(90deg); }
  .carousel-btn--next svg { transform: rotate(-90deg); }
  .carousel-btn .i-play { display: none; }
  .carousel-btn.is-paused .i-play { display: block; }
  .carousel-btn.is-paused .i-pause { display: none; }
  .channel__name { display: block; font: 700 1.25rem/1.2 var(--font); }
  .channel__value { display: block; margin-top: .25rem; color: var(--text-2); overflow-wrap: anywhere; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .steps, .channels { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 900px) {
    /* Hero apilado en el mismo orden que el DOM: título → retrato → palabra gigante + CTA → tarjetas */
    .hero { min-height: 0; }
    .hero__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "title" "photo" "action" "stats"; gap: 1.25rem; padding-top: 1.75rem; padding-bottom: 2.5rem; }
    .hero__chatters, .hero__facts { display: none; }
    .hero__title { max-width: 13ch; }
    .hero__photo { grid-area: photo; position: relative; left: auto; bottom: auto; width: auto; height: clamp(380px, 58svh, 540px); margin-inline: calc(var(--gutter) * -1); transform: none; }
    .hero__action { align-items: stretch; text-align: left; margin-top: -7.25rem; }
    .hero__ctas { order: 2; }
    .hero__ctas .btn { flex: 1; }
    .hero__wa { display: grid; background: rgb(var(--black-rgb) / .5); }
    .hero__stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
    .hero__stats li { display: grid; gap: .3rem; align-content: start; }
    .hero__stats b { font: 800 clamp(1.5rem, 6.4vw, 2rem)/1 var(--font); letter-spacing: -.02em; color: var(--pink); }
    .hero__stats span { font-size: .85rem; line-height: 1.3; color: var(--text-2); }
    .hero__bigword .line + .line { padding-left: 0; }
    .hero__facts { flex-wrap: wrap; }
    .fact--pink { flex: 1 1 160px; width: auto; }
    .fact--steps { flex: 2 1 280px; width: auto; }
    .hero__chatters { justify-self: stretch; width: 100%; }

    .agency__aside, .agency__media { grid-column: 1 / -1; }
    .agency__aside { margin-bottom: 2rem; }
    .agency__media { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr 1fr; }
    .results { grid-template-columns: 1fr; }
    .proof { max-width: 380px; }
    .tile--image { grid-column: span 2; grid-row: auto; min-height: 360px; }
    .apply { grid-template-columns: 1fr; }
    .apply__aside .photo { display: none; }
  }
  @media (max-width: 620px) {
    .hero__photo { height: 400px; }
    .hero__bigword { font-size: clamp(3.4rem, 17vw, 5rem); }
    .channels { grid-template-columns: 1fr; }

    /* Pasos: línea de tiempo vertical; la línea se llena con el scroll */
    .steps-wrap { position: relative; }
    .steps__track { display: block; position: absolute; left: 25px; top: 17px; bottom: 2.4rem; width: 2px; height: auto; margin: 0; }
    .steps__fill { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
    .steps { grid-template-columns: 1fr; gap: 0; }
    .step { position: relative; padding: 0 0 2.1rem 4.25rem; background: transparent; border: 0; border-radius: 0; }
    .step:last-child { padding-bottom: 0; }
    .step__num { position: absolute; left: 0; top: 0; }
    .step h3 { margin: .2rem 0 .4rem; }

    /* Ventajas: carrusel horizontal con la siguiente tarjeta asomando */
    .bento {
      display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
      margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: .25rem;
      scrollbar-width: none;
    }
    .bento::-webkit-scrollbar { display: none; }
    .bento:focus-visible { outline-offset: -3px; border-radius: var(--r-card); }
    .bento > .tile { flex: 0 0 84%; scroll-snap-align: start; min-height: 250px; }
    .bento > .tile--image { min-height: 360px; }
    .carousel-ui { display: flex; grid-column: 1 / -1; align-items: center; gap: .5rem; margin-top: 1.1rem; }
    .carousel-progress { flex: 1; height: 3px; margin-right: .5rem; border-radius: 3px; background: var(--line); overflow: hidden; }
    .carousel-progress span { display: block; height: 100%; background: var(--grad-pink); transform-origin: 0 50%; transform: scaleX(var(--p, .25)); }

    /* Contacto: filas grandes, fáciles de tocar */
    .channels { gap: .6rem; }
    .channel { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 78px; }
    .channel .icon-badge { width: 44px; height: 44px; }
    .channel { gap: .85rem; }
    .channel__value { font-size: .92rem; }
    .channel > span:last-child { flex: 1; }
    .channel__go { position: static; order: 3; flex: none; }

    .faq__q { font-size: 1.08rem; }
    .apply__aside .notes { padding: 1.1rem 1.25rem; }
  }
}