@layer reset, tokens, base, composicion, componentes, secciones, utilidades;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, picture { display: block; max-width: 100%; height: auto; }
  ul, ol { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    /* Color: skin from her photos, black and gold from her logo, white from the mapping paste */
    --fondo: #F5EEE8;
    --superficie: #EADDD3;
    --tinta: #1A1517;
    --tinta-suave: #5B4B45;
    --linea: #D6C3B6;
    --noche: #141012;
    --sobre-noche: #F2EAE4;
    --sobre-noche-suave: #B9AAA2;
    --oro: #D1C397;
    --mapa: #FFFFFF;
    --accion: var(--tinta);
    --accion-tinta: var(--fondo);

    /* Type */
    --f-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --f-texto: 'Ysabeau Office', 'Segoe UI', system-ui, sans-serif;
    --t-rotulo: 0.8125rem;
    --t-texto: 1.0625rem;
    --t-bajada: 1.25rem;
    --t-titulo: clamp(1.875rem, 1.45rem + 1.8vw, 2.875rem);
    --t-display: clamp(2.625rem, 1.75rem + 3.8vw, 4.75rem);
    --t-cifra: clamp(2.25rem, 1.8rem + 2.2vw, 4rem);

    /* Space */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
    --margen: clamp(1rem, 0.5rem + 2.5vw, 3rem);
    --ancho: 76rem;
    --seccion: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* Form */
    --redondo: 999px;
    --trazo: 1px;

    /* Motion (measured tokens, criterio/movimiento.md) */
    --ease-salida: cubic-bezier(.16, 1, .3, 1);
    --ease-detalle: cubic-bezier(.25, 1, .5, 1);
    --ease-suave: cubic-bezier(.45, 0, .55, 1);
    --dur-micro: 200ms;
    --dur-ui: 400ms;
    --dur-entrada: 800ms;
    --dur-escena: 1400ms;
    --escalon: 70ms;
    --recorrido: 16px;
  }
}

@layer base {
  html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--f-texto);
    font-size: var(--t-texto);
    line-height: 1.55;
    font-synthesis: none;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 4.75rem;
  }
  @media (min-width: 900px) { body { padding-bottom: 0; } }
  h1, h2, h3 { font-weight: 400; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: var(--trazo); }
  em { font-style: italic; }
  ::selection { background: var(--tinta); color: var(--fondo); }
  :focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }
  .problema :focus-visible, .resultados :focus-visible, .cierre :focus-visible, .pie :focus-visible { outline-color: var(--oro); }
}

@layer composicion {
  .contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
  section { padding-block: var(--seccion); }
  .encabezado { display: grid; gap: var(--s-3); max-width: 44rem; margin-bottom: var(--s-7); }
  .encabezado__bajada { color: var(--tinta-suave); max-width: 38rem; }
}

@layer componentes {
  .saltar { position: absolute; left: var(--s-4); top: -4rem; z-index: 50; background: var(--tinta); color: var(--fondo); padding: var(--s-3) var(--s-4); border-radius: var(--redondo); }
  .saltar:focus { top: var(--s-3); }

  .rotulo {
    font-family: var(--f-texto);
    font-size: var(--t-rotulo);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    line-height: 1.4;
  }
  .rotulo--claro { color: var(--sobre-noche-suave); }
  .rotulo--oro { color: var(--oro); }

  .titulo {
    font-family: var(--f-display);
    font-size: var(--t-titulo);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* The button: the black of the logo, with the gold ring inside */
  .boton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3.25rem; padding: 0.875rem 1.75rem;
    border-radius: var(--redondo);
    background: var(--accion); color: var(--accion-tinta);
    box-shadow: inset 0 0 0 3px var(--accion), inset 0 0 0 4px var(--oro);
    font-family: var(--f-texto); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
    text-decoration: none; text-align: center;
    transition: background-color var(--dur-micro) var(--ease-detalle), color var(--dur-micro) var(--ease-detalle), translate var(--dur-micro) var(--ease-detalle);
  }
  .boton:hover { background: #352B2D; box-shadow: inset 0 0 0 3px #352B2D, inset 0 0 0 4px var(--oro); }
  .boton:active { translate: 0 1px; }
  .boton--claro { background: var(--sobre-noche); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--sobre-noche), inset 0 0 0 4px #9C8B57; }
  .boton--claro:hover { background: var(--mapa); box-shadow: inset 0 0 0 3px var(--mapa), inset 0 0 0 4px #9C8B57; }
  .boton--chico { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }

  .despues { color: var(--tinta-suave); font-size: 0.9375rem; line-height: 1.45; }
  .accion-fila { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-7); }

  .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--linea); transition: text-decoration-color var(--dur-micro) var(--ease-detalle); }
  .enlace:hover { text-decoration-color: currentColor; }

  /* The mapping lines */
  .guia {
    position: absolute; top: 0; bottom: 0; left: var(--x);
    width: var(--trazo); background: var(--mapa);
    pointer-events: none; transform-origin: top;
    opacity: .7;
  }

  .pausa {
    position: absolute; right: 0; bottom: calc(-1 * var(--s-7));
    min-height: 2.75rem; padding: 0 var(--s-2);
    background: none; border: 0; cursor: pointer;
    font-size: 0.875rem; color: var(--tinta-suave); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 0.2em;
  }

  .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer secciones {
  /* Header */
  .cabecera { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: var(--trazo) solid var(--linea); }
  .cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4rem; }
  .marca { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; text-decoration: none; }
  .marca img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
  .marca__nombre { font-family: var(--f-display); font-size: 1.25rem; line-height: 1; }
  .marca__nombre span { display: block; margin-top: 0.2rem; font-family: var(--f-texto); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
  .cabecera__nav { display: none; gap: var(--s-5); font-size: 0.9375rem; }
  .cabecera__nav a { text-decoration: none; padding-block: var(--s-2); }
  .cabecera__nav a:hover { text-decoration: underline; text-decoration-color: var(--linea); }
  .cabecera .boton { display: none; }
  @media (min-width: 900px) {
    .cabecera__nav { display: flex; }
    .cabecera .boton { display: inline-flex; }
  }

  /* 1. Hero */
  .hero { padding-block: var(--s-6) var(--s-9); }
  .hero__grilla { display: grid; gap: var(--s-7); }
  .hero__texto { display: grid; gap: var(--s-4); align-content: start; }
  .hero__lema {
    font-family: var(--f-display); font-size: var(--t-display); font-weight: 300;
    line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance;
  }
  .hero__bajada { font-size: var(--t-bajada); line-height: 1.45; color: var(--tinta-suave); max-width: 32rem; }
  .hero__accion { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-2); }
  .hero__consulta { font-size: 0.9375rem; color: var(--tinta-suave); max-width: 30rem; }
  .hero__consulta a { color: var(--tinta); font-weight: 600; }
  .hero__puntaje { font-size: 0.9375rem; text-decoration: none; color: var(--tinta-suave); display: inline-flex; align-items: center; min-height: 2.75rem; }
  .hero__puntaje strong { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; color: var(--tinta); margin-right: var(--s-2); }

  .mapa { position: relative; margin-inline: calc(-1 * var(--margen)); }
  .mapa__franjas { position: relative; display: grid; gap: 3px; background: var(--fondo); }
  .franja { position: relative; overflow: hidden; }
  .franja img { width: 100%; aspect-ratio: 1440 / 460; object-fit: cover; }
  .franja__rotulo {
    position: absolute; z-index: 2; left: var(--s-3); top: var(--s-3);
    padding: 0.2rem 0.6rem; border-radius: var(--redondo);
    background: var(--tinta); color: var(--fondo);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .mapa__puntos { position: relative; height: 1.75rem; margin-top: var(--s-2); font-size: 0.8125rem; color: var(--tinta-suave); }
  .mapa__puntos span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
  .mapa__puntos span::before { content: ''; display: block; width: var(--trazo); height: 0.5rem; margin: 0 auto 0.15rem; background: var(--tinta-suave); }
  .mapa__puntos span:last-child { translate: -70% 0; }
  .pausa { right: var(--margen); bottom: -2.75rem; }

  @media (min-width: 900px) {
    .hero { padding-block: var(--s-8) var(--s-9); }
    .hero__grilla { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--s-8); }
    .mapa { margin-inline: 0; }
    .franja__rotulo { left: var(--s-4); top: var(--s-4); }
    .pausa { right: 0; }
  }

  /* 2. Quick proof */
  .cifras { padding-block: 0 var(--seccion); }
  .cifras__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); border-top: var(--trazo) solid var(--linea); padding-top: var(--s-6); }
  .cifras li { display: grid; gap: var(--s-1); }
  .cifras strong { font-family: var(--f-display); font-size: var(--t-cifra); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
  .cifras span { color: var(--tinta-suave); font-size: 0.875rem; line-height: 1.35; }
  @media (min-width: 700px) { .cifras span { font-size: 1rem; } }

  /* 3. Problem (night) */
  .problema { background: var(--noche); color: var(--sobre-noche); }
  .problema__grilla { display: grid; gap: var(--s-6); }
  .problema__cita p { font-family: var(--f-display); font-weight: 300; font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
  .problema__cita footer { margin-top: var(--s-4); color: var(--sobre-noche-suave); font-size: 0.9375rem; }
  .problema__texto { color: var(--sobre-noche-suave); font-size: var(--t-bajada); line-height: 1.5; max-width: 36rem; }
  @media (min-width: 900px) {
    .problema__grilla { grid-template-columns: 3fr 9fr; column-gap: var(--s-8); }
    .problema__grilla > h2 { grid-row: span 2; padding-top: 0.9rem; }
    .problema__texto { margin-left: auto; }
  }

  /* 4. Price list */
  .carta { display: grid; gap: var(--s-7); }
  .grupo__titulo { font-family: var(--f-display); font-size: 1.625rem; font-weight: 400; line-height: 1.2; padding-bottom: var(--s-3); border-bottom: var(--trazo) solid var(--tinta); }
  .grupo__titulo:not(:first-child) { margin-top: var(--s-6); }
  .item {
    display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-4); row-gap: var(--s-1);
    padding-block: var(--s-4); border-bottom: var(--trazo) solid var(--linea);
  }
  .item__nombre { grid-column: 1; }
  .item__nombre small { display: block; font-size: 0.9375rem; color: var(--tinta-suave); margin-top: var(--s-1); line-height: 1.45; }
  .item__tiempo { grid-column: 1; grid-row: 2; font-size: 0.9375rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums lining-nums; }
  .item__precio { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .sello { display: inline-block; margin-left: var(--s-2); padding: 0 0.5rem; border: var(--trazo) solid var(--tinta); border-radius: var(--redondo); font-style: normal; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5rem; vertical-align: 0.1em; white-space: nowrap; }
  @media (min-width: 1000px) {
    .carta { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-7); align-items: start; }
  }

  /* 5. Powder Brows */
  .powder { background: var(--superficie); }
  .powder__grilla { display: grid; gap: var(--s-7); }
  .powder__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .powder__foto figcaption { margin-top: var(--s-3); font-size: 0.875rem; color: var(--tinta-suave); }
  .powder__texto { display: grid; gap: var(--s-4); justify-items: start; align-content: center; }
  .ficha { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--s-6); margin-block: var(--s-3); padding-block: var(--s-4); border-block: var(--trazo) solid var(--tinta); width: 100%; }
  .ficha dt { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
  .ficha dd { font-family: var(--f-display); font-size: 1.75rem; font-weight: 400; line-height: 1.2; font-variant-numeric: lining-nums; white-space: nowrap; }
  .powder__pregunta { font-weight: 600; }
  .checks { display: grid; gap: var(--s-2); }
  .checks li { position: relative; padding-left: 1.75rem; }
  .checks li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 0.9rem; height: 0.5rem; border-left: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta); rotate: -45deg; }
  .powder__nota { color: var(--tinta-suave); font-size: 0.9375rem; max-width: 34rem; margin-bottom: var(--s-3); }
  @media (min-width: 900px) {
    .powder__grilla { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
  }

  /* 6. Process */
  .pasos { display: grid; gap: var(--s-6); counter-reset: paso; }
  .paso { counter-increment: paso; display: grid; grid-template-columns: 7.5rem 1fr; column-gap: var(--s-4); row-gap: var(--s-2); align-content: start; }
  .paso picture { grid-row: span 3; position: relative; }
  .paso img { width: 100%; aspect-ratio: 470 / 820; object-fit: cover; object-position: center 40%; }
  .paso h3 { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; align-self: end; }
  .paso h3::before { content: counter(paso); display: block; margin-bottom: var(--s-2); font-family: var(--f-texto); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.08em; color: var(--tinta-suave); }
  .paso p { color: var(--tinta-suave); }
  @media (min-width: 760px) {
    .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
    .paso { grid-template-columns: 1fr; }
    .paso picture { grid-row: auto; margin-bottom: var(--s-3); }
    .paso img { aspect-ratio: 470 / 760; }
  }

  /* 7. Results (night) */
  .resultados { background: var(--noche); color: var(--sobre-noche); }
  .encabezado--claro .titulo { color: var(--sobre-noche); }
  .casos {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-inline: var(--margen); scroll-padding-inline: var(--margen);
    scrollbar-width: thin; scrollbar-color: var(--sobre-noche-suave) transparent;
    padding-bottom: var(--s-4);
  }
  .casos li { scroll-snap-align: start; }
  .casos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  @media (min-width: 900px) {
    .casos { grid-auto-columns: calc((min(100vw, var(--ancho) + 2 * var(--margen)) - 2 * var(--margen) - 2 * var(--s-3)) / 3); padding-inline: max(var(--margen), (100vw - var(--ancho)) / 2); scroll-padding-inline: max(var(--margen), (100vw - var(--ancho)) / 2); }
  }
  .resenas { margin-top: var(--s-8); }
  .resenas__numero { font-size: var(--t-bajada); color: var(--sobre-noche-suave); padding-bottom: var(--s-5); border-bottom: var(--trazo) solid #3A3033; }
  .resenas__numero strong { font-family: var(--f-display); font-weight: 300; font-size: var(--t-cifra); line-height: 1; color: var(--oro); margin-right: var(--s-2); vertical-align: -0.12em; }
  .resenas__numero a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sobre-noche); font-size: 1rem; font-weight: 600; }
  .resenas__voces { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
  .resenas__voces p { font-family: var(--f-display); font-size: 1.5rem; font-weight: 300; line-height: 1.3; }
  .resenas__voces footer { margin-top: var(--s-3); color: var(--sobre-noche-suave); font-size: 0.9375rem; }
  .resultados .despues { color: var(--sobre-noche-suave); }
  @media (min-width: 900px) { .resenas__voces { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); row-gap: var(--s-7); } }

  /* 8. Before your appointment + place */
  .antes__grilla { display: grid; gap: var(--s-8); }
  .antes__grilla .titulo { margin-top: var(--s-3); }
  .datos { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: 36rem; }
  .datos li { padding-top: var(--s-4); border-top: var(--trazo) solid var(--linea); }
  .datos strong { font-weight: 600; }
  .cartel { background: var(--fondo); border: var(--trazo) solid var(--tinta); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
  .cartel__titulo { font-family: var(--f-display); font-size: 1.75rem; line-height: 1.15; }
  .cartel__direccion { font-size: var(--t-bajada); line-height: 1.4; }
  .cartel__estado { font-weight: 600; }
  .cartel__estado.abierto::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: var(--s-2); border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 3px var(--fondo), 0 0 0 4px var(--tinta); vertical-align: 0.1em; }
  .horario { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
  .horario th, .horario td { padding-block: var(--s-2); border-bottom: var(--trazo) solid var(--linea); text-align: left; vertical-align: top; }
  .horario th { font-weight: 400; color: var(--tinta-suave); padding-right: var(--s-4); }
  .horario td { text-align: right; }
  .horario tr.hoy th, .horario tr.hoy td { color: var(--tinta); font-weight: 600; }
  .cartel__enlaces { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
  @media (min-width: 900px) { .antes__grilla { grid-template-columns: 7fr 5fr; align-items: start; } .cartel { padding: var(--s-7) var(--s-6); } }

  /* 9. Questions */
  .preguntas { background: var(--superficie); }
  .preguntas__grilla { display: grid; gap: var(--s-6); }
  .acordeon details { border-bottom: var(--trazo) solid var(--tinta-suave); }
  .acordeon details:first-child { border-top: var(--trazo) solid var(--tinta-suave); }
  .acordeon summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    min-height: 3.5rem; padding-block: var(--s-4); cursor: pointer; list-style: none;
    font-family: var(--f-display); font-size: 1.3125rem; line-height: 1.3;
  }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary::after { content: ''; flex: none; width: 0.875rem; height: 0.875rem; background: linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat; transition: rotate var(--dur-ui) var(--ease-detalle); }
  .acordeon details[open] summary::after { rotate: 45deg; }
  .acordeon details p { padding-bottom: var(--s-5); max-width: 40rem; color: var(--tinta-suave); }
  @media (min-width: 900px) { .preguntas__grilla { grid-template-columns: 4fr 8fr; gap: var(--s-8); } }

  /* 10. Closing: the gold ring of the logo, crossed by the map */
  .cierre { background: var(--noche); color: var(--sobre-noche); overflow: hidden; }
  .aro {
    position: relative; width: min(100%, 40rem); margin-inline: auto; aspect-ratio: 1;
    border-radius: 50%; box-shadow: inset 0 0 0 var(--trazo) var(--oro);
    display: grid; place-items: center;
  }
  .guia--cierre { opacity: .22; }
  .aro__texto { position: relative; display: grid; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--s-6) var(--s-4); max-width: 26rem; background: var(--noche); }
  .cierre__titulo { font-family: var(--f-display); font-size: var(--t-titulo); font-weight: 300; line-height: 1.1; }
  .cierre .despues { color: var(--sobre-noche-suave); }
  @media (max-width: 519px) {
    .aro { aspect-ratio: auto; border-radius: 0; box-shadow: none; }
    .aro::before { content: ''; position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: inset 0 0 0 var(--trazo) var(--oro); pointer-events: none; }
    .aro__texto { padding-block: var(--s-8); background: transparent; }
  }

  /* Footer */
  .pie { background: var(--noche); color: var(--sobre-noche-suave); border-top: var(--trazo) solid #3A3033; padding-block: var(--s-6); font-size: 0.875rem; }
  .pie__fila { display: grid; gap: var(--s-3); }
  .pie a { color: var(--sobre-noche); display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pie__aviso { color: var(--sobre-noche-suave); }

  /* Fixed bar on phones */
  .barra {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: var(--s-3) var(--margen) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--fondo); border-top: var(--trazo) solid var(--linea);
    transition: translate var(--dur-ui) var(--ease-detalle);
  }
  .barra .boton { width: 100%; }
  .barra.oculta { translate: 0 110%; }
  @media (min-width: 900px) { .barra { display: none; } }
}

/* Motion: the mapping lines are traced, then the brow appears from start to tail */
@layer utilidades {
  @media (prefers-reduced-motion: no-preference) {
    .js .hero__texto > * { animation: sube var(--dur-entrada) var(--ease-salida) both; animation-delay: calc(var(--n, 0) * var(--escalon)); }
    .js .hero__texto > :nth-child(1) { --n: 0; }
    .js .hero__texto > :nth-child(2) { --n: 1; }
    .js .hero__texto > :nth-child(3) { --n: 2; }
    .js .hero__texto > :nth-child(4) { --n: 3; }
    .js .hero__texto > :nth-child(5) { --n: 4; }
    .js .hero__texto > :nth-child(6) { --n: 5; }

    .js .hero .guia {
      animation: traza var(--dur-entrada) var(--ease-salida) both, late 9s var(--ease-suave) var(--dur-escena) infinite alternate;
      animation-delay: calc(300ms + var(--i) * var(--escalon)), calc(var(--dur-escena) + var(--i) * 300ms);
    }
    .js .franja--mapeo img { animation: revela var(--dur-entrada) var(--ease-salida) 450ms both; }
    .js .franja--despues img { animation: revela var(--dur-entrada) var(--ease-salida) 650ms both, respira 9s var(--ease-suave) var(--dur-escena) infinite alternate; }
    .js .mapa__puntos span { animation: aparece var(--dur-ui) var(--ease-salida) both; animation-delay: calc(900ms + var(--escalon) * 2); }

    .pausado .hero .guia, .pausado .franja--despues img { animation-play-state: paused; }

    .aparece { opacity: 0; translate: 0 var(--recorrido); transition: opacity var(--dur-entrada) var(--ease-salida), translate var(--dur-entrada) var(--ease-salida); }
    .aparece.visto { opacity: 1; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) { .pausa { display: none; } }

  @keyframes sube { from { opacity: 0; translate: 0 var(--recorrido); } }
  @keyframes traza { from { transform: scaleY(0); } }
  @keyframes revela { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes aparece { from { opacity: 0; } }
  @keyframes late { from { opacity: .7; } to { opacity: 1; } }
  @keyframes respira { from { transform: scale(1); } to { transform: scale(1.03); } }
}