/* Oli · inicio.css — solo la página de inicio */

/* ───────── Hero ───────── */
.hero { --cerro-h: clamp(190px, 26vw, 420px); --cerro-m: calc(var(--cerro-h) * .2); position: relative; overflow: clip; display: flex; flex-direction: column; padding-top: clamp(28px, 5vw, 72px); }
.hero__grid { position: relative; z-index: var(--z-contenido); row-gap: var(--s-5); flex: 1; align-content: start; }
.hero__h1 {
  font-size: clamp(2.75rem, 1.6rem + 5.6vw, 7rem); line-height: .96; letter-spacing: -.025em; font-weight: 600;
  color: var(--ink); hanging-punctuation: first;
}
.h1-seo { display: block; margin-bottom: .55em; font-family: var(--f-texto); font-style: normal; font-weight: 500; font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem); line-height: 1.25; letter-spacing: 0; color: var(--terracota-deep); }
.h1-duda { display: block; font-family: var(--f-italica); font-weight: 400; font-style: italic; color: var(--graphite); letter-spacing: -.02em; }
.h1-llegada { display: block; font-family: var(--f-display); color: var(--ink); }
.hero__h1 .firma { font-size: 1.05em; line-height: 1.18; vertical-align: -.04em; }
.ancla-hoy { display: inline-block; }
.hero__texto { display: grid; gap: var(--s-5); }
.hero__texto .lead { max-width: 34ch; }
.hero__acciones { margin-top: calc(-1 * var(--s-2)); }
/* El teléfono asoma detrás del Cerro de la Silla: su parte baja queda tras el horizonte */
.hero__lamina { --hundir: 64px; position: relative; z-index: var(--z-contenido); width: min(62%, 280px); justify-self: end; margin-right: 4%; margin-top: var(--s-6); margin-bottom: calc(-1 * (var(--cerro-h) - var(--cerro-m)) + 44px - var(--hundir)); }
/* --hundir: cuánto se mete el teléfono tras el horizonte (en móvil, justo bajo las preguntas sugeridas).
   Lo que queda bajo el cerro no se asoma por la franja de papel que hay debajo */
.hero__lamina .lamina__img { clip-path: inset(-40px -40px calc(var(--hundir) + var(--cerro-h) * 24 / 260 + 2px) -40px); }
.hero__lamina figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero__lamina .lamina__img { aspect-ratio: auto; }
.hero__cerro { position: relative; z-index: 3; margin-top: calc(-1 * var(--cerro-m)); line-height: 0; pointer-events: none; }
.cerro { width: 100%; height: var(--cerro-h); }
.hilo-hero { z-index: 4; }
.hero .lead { position: relative; }

@media (min-width: 640px) { .hero__lamina { width: 300px; justify-self: end; margin-right: 8%; } }
@media (min-width: 1024px) {
  .hero__folio { grid-row: 1; }
  .hero__h1 { grid-column: 3 / 13; grid-row: 1; }
  .h1-seo { margin-bottom: .4em; }
  .h1-llegada { padding-inline-start: calc((100% - 9 * var(--gutter)) / 10 * 2 + 2 * var(--gutter)); }
  /* El texto reserva debajo lo que el cerro sube sobre el grid: la nota de descarga nunca queda bajo la cresta.
     El teléfono se alinea abajo, así siempre se mete la misma medida tras el horizonte */
  .hero__texto { grid-column: 3 / 8; grid-row: 2; align-self: start; padding-top: var(--s-5); padding-bottom: calc(var(--cerro-m) + var(--s-5)); }
  .hero__lamina { --hundir: 0px; grid-column: 9 / 13; grid-row: 2; align-self: end; width: min(100%, 280px); justify-self: center; margin-top: 0; margin-right: 0; }
  .hero { --cerro-h: clamp(220px, 21vw, 420px); --cerro-m: calc(var(--cerro-h) * .5); }
}

@media (min-width: 1200px) { .h1-duda { white-space: nowrap; } }
/* Pantallas grandes: el párrafo se mide en caracteres (no se angosta al crecer la letra) y el teléfono
   crece y se acerca al texto */
@media (min-width: 1024px) { .hero__texto .lead { max-width: 40ch; } }
@media (min-width: 1600px) {
  .hero__texto { grid-column: 3 / 8; }
  .hero__texto .lead { max-width: 44ch; }
  .hero__lamina { grid-column: 8 / 12; width: clamp(300px, 19vw, 380px); }
}
/* En escritorio el lazo sale a la derecha del «?”»: la línea 1 deja al menos 80 px de aire antes del borde */
@media (min-width: 1024px) { .hero__h1 { font-size: clamp(4rem, 1.6rem + 4.9vw, 6.5rem); } }
/* Laptops (≤960 px de alto): el horizonte del Cerro entra completo en el primer pantallazo.
   Menos aire arriba, el párrafo en 4 líneas y el teléfono se esconde más detrás del cerro */
@media (min-width: 1024px) and (max-height: 960px) {
  .hero { padding-top: 40px; --cerro-h: clamp(200px, min(21vw, 28svh), 420px); }
  .hero__texto { padding-top: var(--s-4); }
  .hero__texto .lead { max-width: 40ch; }
  .hero__lamina { width: min(100%, 256px); --hundir: 108px; }
}

/* Carga: la lámina del hero se recorta a mano una sola vez (sin espera: es el LCP) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__lamina { animation: recorte-suave 560ms var(--ease-suave) both; }
  .js .hero__lamina img { animation: recorte-img 560ms var(--ease-suave) both; }
  @supports (animation-timeline: view()) {
    .cerro-sol { animation: sol-baja linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes recorte-suave { from { clip-path: inset(4% 3% 5% 3% round 30px); } to { clip-path: inset(-80px round 30px); } }
@keyframes sol-baja { to { translate: 0 12px; } }

/* ───────── Un sábado con Oli ───────── */
.sabado { overflow: clip; }
.sabado__h2 { margin-bottom: var(--s-7); }
.agenda { display: grid; gap: var(--s-6); }
.agenda__fila { display: grid; gap: var(--s-2); }
.agenda__hora { font-family: var(--f-texto); font-weight: 500; font-size: var(--t-hora); line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--slate); letter-spacing: -.01em; white-space: nowrap; }
.agenda__hora time { display: inline-block; }
.agenda__escena { max-width: 46ch; font-size: var(--t-body); }
.js .agenda__hora { transition: color 200ms var(--ease-suave); }
.agenda__fila.llego .agenda__hora, .no-js .agenda__hora { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .agenda__hora { color: var(--ink); } }
.sabado__cierre { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
.sabado__frase { font-family: var(--f-italica); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.25; color: var(--ink); }
.sabado__frase em { color: var(--terracota-deep); }
@media (min-width: 1024px) {
  .sabado__h2 { grid-column: 3 / 12; grid-row: 1; }
  .sabado .folio { grid-row: 1; }
  .agenda { grid-column: 1 / 13; grid-template-columns: subgrid; row-gap: var(--s-8); }
  .agenda__fila { grid-column: 1 / 13; grid-template-columns: subgrid; align-items: baseline; }
  .agenda__hora { grid-column: 1 / 4; text-align: right; }
  .agenda__escena { grid-column: 5 / 11; font-size: 1.1875rem; }
  .sabado__cierre { grid-column: 5 / 12; }
}

/* La nota al margen (≥1200): una hoja con reloj que acompaña cada hora; el texto sigue siendo la fuente.
   Es decorativa (aria-hidden): repite lo que ya dice cada escena */
.sabado__nota { display: none; }
@media (min-width: 1200px) {
  .js .sabado__nota:not([hidden]) { display: block; grid-column: 9 / 13; grid-row: 2 / 4; position: relative; z-index: var(--z-contenido); padding-left: var(--s-5); }
  .js .sabado .agenda { grid-row: 2; }
  .js .sabado .agenda__escena { grid-column: 5 / 9; }
  .js .sabado .sabado__cierre { grid-column: 5 / 9; grid-row: 3; }
}
.nota-hoja {
  position: sticky; top: max(120px, 20vh); width: min(100%, 360px); margin-left: auto;
  background: var(--off-white); border-radius: var(--r-papel); box-shadow: var(--sombra-alzada);
  padding: var(--s-6) var(--s-5) var(--s-5); rotate: -1.2deg;
}
.nota-hoja.lamina--washi::before { left: 30%; rotate: -6deg; }
.nota-hoja__cabeza { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1.5px dashed var(--bone); }
.reloj { width: 56px; height: 56px; flex: none; overflow: visible; }
.reloj circle { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.reloj__marcas path { stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; }
.reloj__hora, .reloj__min { stroke: var(--ink); stroke-linecap: round; transform-box: view-box; transform-origin: 32px 32px; }
.reloj__hora { stroke-width: 3.2; rotate: var(--r-hora, 260deg); }
.reloj__min { stroke: var(--terracota); stroke-width: 2.2; rotate: var(--r-min, 240deg); }
.reloj .reloj__eje { fill: var(--ink); stroke: none; }
.nota-hoja__hora { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.nota-hoja__pasos { display: grid; margin-top: var(--s-5); }
.nota-paso { grid-area: 1 / 1; align-self: center; display: grid; align-content: start; gap: var(--s-3); opacity: 0; }
.nota-paso.activa { opacity: 1; }
.nota-paso__rotulo { font-family: var(--f-italica); font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--terracota-deep); }
.nota-paso__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nota-paso .chip { min-height: 34px; padding: 0 14px; font-size: 14px; }
.nota-paso .chip--lleno { background: var(--terracota-deep); color: var(--white); }
.nota-paso__nota { font-size: 15px; color: var(--slate); }
.nota-burbuja { justify-self: end; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--terracota-soft); color: var(--ink); font-size: 15px; line-height: 1.45; }
.nota-burbuja--oli { justify-self: start; display: inline-flex; align-items: center; gap: 10px; border-radius: 16px 16px 16px 4px; background: var(--cream-deep); color: var(--graphite); }
.nota-puntos { display: inline-flex; gap: 4px; }
.nota-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.nota-ficha { display: grid; }
.nota-ficha li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: var(--s-3); padding-block: 7px; border-top: 1px solid var(--sand); font-size: 15px; font-weight: 600; color: var(--ink); }
.nota-ficha li:last-child { border-bottom: 1px solid var(--sand); }
.nota-ficha--valores li { grid-template-columns: 5.5rem minmax(0, 1fr); }
.nota-ficha--valores b { display: flex; flex-wrap: wrap; gap: var(--s-2); font-weight: inherit; }
.nota-ficha--canales li { grid-template-columns: 8.5rem minmax(0, 1fr); }
.nota-ficha i { height: 2px; border-radius: 2px; background: var(--ash); width: 70%; }
.nota-ficha li:nth-child(2n) i { width: 48%; }
.nota-ficha li:nth-child(3n) i { width: 58%; }
.nota-reservar { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px; border-radius: var(--r-pildora); background: var(--terracota); color: var(--white); font-weight: 600; }
.nota-hoja__rotulo { margin-top: var(--s-4); }
@media (prefers-reduced-motion: no-preference) {
  .nota-paso { transition: opacity 200ms var(--ease-salida); }
  .nota-paso.activa { transition: opacity 320ms var(--ease-suave) 80ms; }
  .nota-paso.activa > * { animation: nota-entra 420ms var(--ease-suave) both; }
  .nota-paso.activa > :nth-child(2) { animation-delay: 70ms; }
  .nota-paso.activa > :nth-child(3) { animation-delay: 140ms; }
  .reloj__hora, .reloj__min { transition: rotate 700ms var(--ease-resorte); }
  .nota-puntos i { animation: nota-punto 900ms var(--ease-suave) infinite; }
  .nota-puntos i:nth-child(2) { animation-delay: 150ms; }
  .nota-puntos i:nth-child(3) { animation-delay: 300ms; }
}
@keyframes nota-entra { from { clip-path: inset(0 0 100% 0); translate: 0 6px; } to { clip-path: inset(0 0 -8px 0); translate: 0 0; } }
@keyframes nota-punto { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -3px; opacity: 1; } }

/* ───────── Lo que hay en Oli ───────── */
.sumario__h2 { margin-bottom: var(--s-7); }
.sumario__pila { display: none; }
.sumario__lista { border-bottom: 1px solid var(--sand); }
.sumario__fila { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--sand); }
.sumario__fila > .icono { color: var(--terracota-deep); margin-top: 4px; }
.sumario__fila h3 { margin-bottom: var(--s-2); }
.sumario__fila p { max-width: 52ch; }
.sumario__chip { margin: -2px 0 var(--s-2); }
.sumario__movil { grid-column: 1 / -1; margin-top: var(--s-6); width: 80%; }
.sumario__movil--der { justify-self: end; }
.sumario__movil .lamina__img { background: var(--cream-deep); }
.sumario__accion { margin-top: var(--s-6); }
@media (min-width: 640px) { .sumario__movil { width: 52%; } }

@media (min-width: 1024px) {
  .sumario__h2 { grid-column: 3 / 12; grid-row: 1; }
  .sumario .folio { grid-row: 1; }
  .sumario__movil { display: none; }
  .sumario__pila {
    display: grid; grid-column: 1 / 6; grid-row: 2 / 4; align-self: start;
    position: sticky; top: 112px; padding: 0 var(--s-5) 0 var(--s-2);
  }
  /* Las láminas inactivas solo se apagan a la vista (opacidad): un lector de pantalla las lee todas, en orden */
  .sumario__pila .lamina { grid-area: 1 / 1; align-self: start; opacity: 0; width: min(100%, 380px, calc((100svh - 220px) * .78)); justify-self: center; }
  .sumario__pila .lamina:not(.activa) figcaption { opacity: 0; }
  .sumario__pila .lamina.activa { opacity: 1; z-index: 2; }
  .sumario__pila .lamina.previa { opacity: 1; z-index: 1; }
  /* Sin JS no hay intercambio: la pila se quita y quedan las láminas en línea de cada fila */
  .no-js .sumario__pila { display: none; }
  .no-js .sumario__movil { display: block; }
  /* La conversación de Oli es una franja: su marco es más bajo que el de las pantallas */
  /* La conversación de Oli es una franja de pantalla: va como recorte de papel, más ancho que el teléfono */
  .sumario__pila .lamina.lamina--chat { width: min(100%, 460px); margin-top: var(--s-7); }
  .sumario__pila .lamina.lamina--chat:not(.polaroid) .lamina__img {
    padding: 16px 10px; border-radius: 0; background: var(--off-white); box-shadow: none;
    -webkit-mask: url("/img/svg/papel-rasgado.svg") top / 620px 14px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 26px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
    mask: url("/img/svg/papel-rasgado.svg") top / 620px 14px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 26px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  }
  .sumario__pila .lamina--chat picture { aspect-ratio: 780 / 396; border-radius: 10px !important; }
  .sumario__lista { grid-column: 7 / 13; grid-row: 2; }
  .sumario__accion { grid-column: 7 / 13; grid-row: 3; }
  .sumario__fila::before {
    content: ""; position: absolute; left: -48px; top: calc(var(--s-5) + 14px); width: 32px; height: var(--hilo-grosor);
    border-radius: 2px; background: var(--hilo); scale: 0 1; transform-origin: left center;
  }
  .sumario__fila.activa::before { scale: 1 1; }
  .sumario__fila { padding-block: var(--s-6); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .sumario__fila::before { transition: scale 260ms var(--ease-suave); }
  .sumario__pila .lamina.entra picture { animation: lamina-entra 420ms var(--ease-suave) both; }
  .sumario__pila .lamina.entra figcaption { animation: leyenda-entra 260ms var(--ease-suave) 120ms both; }
}
@keyframes lamina-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes leyenda-entra { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Reglas claras (banda ink) ───────── */
.banda-ink {
  --foco: var(--mostaza);
  background-color: var(--ink); background-image: none; color: var(--cream);
}
/* El hilo pasa por debajo del papel rasgado y, dentro de la banda, es el mismo hilo con otra luz */
.banda-ink.rasgado-arriba::before, .banda-ink.rasgado-abajo::after { z-index: var(--z-contenido); }
.banda-ink > .hilo-tramo { --hilo: color-mix(in srgb, var(--mostaza) 55%, var(--ink)); }
.reglas h2 { color: var(--cream); }
.reglas h2 em { color: var(--mostaza); }
@media (max-width: 639px) { .reglas h2 em { display: block; } }
.reglas .folio { color: var(--mostaza); }
.reglas__lead { color: var(--beige); margin-top: var(--s-5); }
.reglas__cabeza { margin-bottom: var(--s-7); }
.reglas__sello { display: grid; justify-items: start; gap: var(--s-5); margin-bottom: var(--s-7); }
.sello-caja { position: relative; z-index: var(--z-contenido); width: min(220px, 60vw); color: var(--mostaza); }
.reglas .sello-caja::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; background: var(--ink); }
.reglas .sello { position: relative; }
.boton-pausa {
  min-height: 44px; padding: 0 18px; border: 1.5px solid var(--beige); border-radius: var(--r-pildora);
  background: transparent; color: var(--cream); font-weight: 600; font-size: 15px; touch-action: manipulation;
}
.boton-pausa:hover { background: rgba(239, 217, 197, .12); }
.reglas__lista { display: grid; }
.reglas__lista li { padding-block: var(--s-5); border-top: 1px solid rgba(239, 217, 197, .25); }
.reglas__lista li:last-child { border-bottom: 1px solid rgba(239, 217, 197, .25); }
.reglas__frase { font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.75rem); line-height: 1.2; color: var(--cream); margin-bottom: var(--s-2); }
.reglas__lista p:not(.reglas__frase) { color: var(--beige); max-width: 52ch; }

.demo-diez { margin-top: var(--s-7); display: grid; gap: var(--s-4); justify-items: start; }
.demo-diez__casillas { display: flex; flex-wrap: wrap; gap: clamp(4px, 1.4vw, 8px); }
.casilla { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--beige); }
.casilla.llena { background: var(--mostaza); border-color: var(--mostaza); }
.demo-diez__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-height: 32px; }
.demo-diez__contador { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-diez__estrellas { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 32px; }
/* El renglón de las estrellas ocupa su lugar desde el principio: al llegar a 10 nada se mueve */
.demo-diez__estrellas.oculta { visibility: hidden; }
.estrella { width: 18px; height: 18px; fill: var(--mostaza); stroke: var(--mostaza); stroke-width: 1.5; stroke-linejoin: round; }
.demo-diez__promedio { font-family: var(--f-texto); font-weight: 500; font-size: 1.375rem; color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.boton-crema {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pildora);
  background: var(--cream); color: var(--ink); font-weight: 600; font-size: 15px; touch-action: manipulation;
}
.boton-crema:hover { background: var(--beige); }
.demo-diez__rotulo { color: var(--beige); }
.reglas__accion { margin-top: var(--s-6); }
@media (prefers-reduced-motion: no-preference) {
  .casilla.recien { animation: casilla 320ms var(--ease-resorte) both; }
  .demo-diez__estrellas:not(.oculta) .estrella { animation: estampa-mini 300ms var(--ease-sello) both; animation-delay: calc(var(--n, 0) * 40ms); }
}

@media (min-width: 1024px) {
  .reglas__cabeza { grid-column: 3 / 12; grid-row: 1; }
  .reglas .folio { grid-row: 1; }
  .reglas__sello { grid-column: 1 / 5; grid-row: 2 / 5; align-self: start; position: sticky; top: 140px; gap: 72px; justify-items: center; }
  .sello-caja { width: 300px; max-width: 100%; }
  .reglas__lista { grid-column: 6 / 13; grid-row: 2; }
  .demo-diez { grid-column: 6 / 13; grid-row: 3; }
  .reglas__accion { grid-column: 6 / 13; grid-row: 4; }
}

/* ───────── Personalizado a tu familia ───────── */
.familia__marco { display: none; position: relative; z-index: var(--z-contenido); }
.marco { width: min(260px, 70vw); height: auto; overflow: visible; }
.marca-edad__trazo, .marca-edad__gruesa { fill: none; stroke-linecap: round; }
.marca-edad__trazo { stroke: var(--ink); stroke-width: 2.5; }
.marca-edad__gruesa { stroke: var(--terracota); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.marca-edad.elegida .marca-edad__trazo { stroke: var(--terracota); }
.marca-edad.elegida .marca-edad__gruesa { opacity: 1; scale: 1 2.2; }
.marca-edad.elegida text { fill: var(--terracota-deep); }
@media (prefers-reduced-motion: no-preference) {
  .marca-edad__gruesa { transition: opacity 220ms var(--ease-suave), scale 220ms var(--ease-suave); }
  .familia__marco { view-timeline: --marco block; }
  @supports (animation-timeline: view()) {
    .js .marca-edad__trazo {
      stroke-dasharray: 1;
      animation: traza-marca linear both;
      animation-timeline: --marco;
      animation-range: entry calc(20% + var(--i) * 8%) cover calc(40% + var(--i) * 8%);
    }
  }
}
@keyframes traza-marca { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

.familia__armador { display: grid; align-content: start; }
.familia__texto { margin-top: var(--s-5); max-width: 46ch; color: var(--ink); }
.grupo-chips { border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; }
.grupo-chips legend { padding: 0; margin-bottom: var(--s-3); font-weight: 600; font-size: 15px; color: var(--ink); }
.frase { margin-top: var(--s-7); font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + .7vw, 1.75rem); line-height: 1.3; color: var(--ink); max-width: 30ch; }
.frase em { font-family: var(--f-italica); font-weight: 400; color: var(--terracota-deep); }
.cambia { display: inline-grid; vertical-align: bottom; overflow: clip; overflow-clip-margin: 4px; }
.cambia > span { grid-area: 1 / 1; padding-inline-end: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .cambia > span.entra { animation: palabra-entra 220ms var(--ease-suave) both; }
  .cambia > span.sale { animation: palabra-sale 140ms var(--ease-salida) both; }
}
@keyframes palabra-entra { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes palabra-sale { to { translate: 0 -100%; } }
.familia__nota { margin-top: var(--s-4); max-width: 56ch; }
@media (min-width: 1024px) {
  .familia .folio { grid-row: 1; }
  .familia__marco { display: block; grid-column: 2 / 6; grid-row: 2 / 3; justify-self: end; margin-top: var(--s-5); }
  .marco { width: 320px; max-width: 100%; }
  .familia__armador { grid-column: 6 / 13; grid-row: 1 / 3; }
}

/* ───────── Para negocios ───────── */
.negocio-aviso__foto { width: min(220px, 60%); justify-self: start; margin-bottom: var(--s-7); margin-left: var(--s-3); }
.clasificado {
  position: relative; background: var(--off-white); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--off-white), inset 0 0 0 5px var(--ink);
  padding: var(--s-6) var(--s-5);
}
.clasificado h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); }
.clasificado > p:not(.folio) { margin-top: var(--s-5); max-width: 52ch; }
.clasificado__nota { margin-top: var(--s-4); }
.clasificado__acciones { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
/* La polaroid va prendida a la tarjeta con un clip de papel, encimada en su esquina */
.negocio-aviso__foto { position: relative; z-index: 3; }
.clip-papel { position: absolute; z-index: 4; top: -22px; left: 26px; width: 26px; height: 62px; overflow: visible; rotate: 6deg; }
.clip-papel path { fill: none; stroke: var(--graphite); stroke-width: 2.2; stroke-linecap: round; }
@media (min-width: 1024px) {
  .negocio-aviso .contenedor { align-items: start; }
  .negocio-aviso__foto { grid-column: 2 / 5; grid-row: 1; width: min(100%, 240px); justify-self: end; margin: -36px -96px 0 0; }
  .clasificado { grid-column: 4 / 12; grid-row: 1; padding: var(--s-7) var(--s-7) var(--s-7) clamp(150px, 13vw, 200px); }
}

/* ───────── Cierre ───────── */
.cierre { background-color: var(--cream-deep); background-image: none; text-align: center; padding-bottom: var(--s-9); }
.cierre__in { display: grid; justify-items: center; }
.cierre h2 { max-width: 14ch; }
.cierre__texto { margin-top: var(--s-5); font-size: var(--t-lead); color: var(--graphite); }
.cierre__descarga { margin-top: var(--s-6); justify-content: center; text-align: center; }
.pagina-inicio .pie::before { display: none; }
.pagina-inicio .pie { padding-top: var(--s-6); }
.hilo-sobre-cerro path { stroke: var(--cream); }

/* ───────── Tableta (768–1023): texto y lámina lado a lado, alternando el lado; el marco de estatura
   vuelve, a la izquierda del armador; la polaroid se prende a la tarjeta de negocios ───────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .sumario__fila:has(.sumario__movil) { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 300px); column-gap: var(--s-5); align-items: start; }
  .sumario__fila:has(.sumario__movil--izq) { grid-template-columns: minmax(0, 300px) 24px minmax(0, 1fr); }
  .sumario__fila:has(.sumario__movil--izq) > .icono { grid-column: 2; grid-row: 1; }
  .sumario__fila:has(.sumario__movil--izq) > div:not(.sumario__movil) { grid-column: 3; grid-row: 1; }
  .sumario__movil { width: 100%; margin-top: 0; grid-row: 1; }
  .sumario__movil--der { grid-column: 3; }
  .sumario__movil--izq { grid-column: 1; }
  .familia__marco { display: block; grid-column: 1 / 4; grid-row: 1 / 3; align-self: start; margin-top: var(--s-8); }
  .familia .marco { width: 100%; }
  .familia__armador { grid-column: 4 / 9; }
  .negocio-aviso .contenedor { align-items: start; }
  .negocio-aviso__foto { grid-column: 1 / 4; grid-row: 1; width: min(100%, 200px); justify-self: end; margin: -28px -64px 0 0; }
  .clasificado { grid-column: 4 / 9; grid-row: 1; padding-left: 80px; }
}

/* El hilo le da una vuelta al sello (solo escritorio, con el hilo de la banda) */
.hilo-lazada { position: absolute; inset: -17%; width: 134%; height: 134%; overflow: visible; pointer-events: none; z-index: 1; display: none; }
@media (min-width: 1024px) { .hilo-lazada { display: block; } }
.hilo-lazada path { fill: none; stroke: color-mix(in srgb, var(--mostaza) 55%, var(--ink)); stroke-width: var(--hilo-grosor); stroke-linecap: round; }
/* La cola del hilo en el pie: piezas cada vez más gruesas que terminan en la ola */
.hilo-cola path { fill: none; stroke: var(--terracota); stroke-linecap: round; }
.familia > .hilo-tramo { z-index: calc(var(--z-contenido) + 1); }
.reglas .sello-caja > svg.hilo-lazada { width: 134%; height: 134%; max-width: none; left: -17%; top: -17%; }