/* Oli · familias.css — solo /familias/ */

/* ───────── Hero: un recorte de la app pegado con cinta y, metida detrás de su borde, la polaroid del picnic,
   como en un corcho. La polaroid nunca tapa la captura: asoma por debajo del papel.
   La captura es parcial (empieza bajo el saludo), así que va como hoja de papel rasgada, no como teléfono */
.fam-hero__arte { position: relative; margin-top: var(--s-6); display: grid; padding-bottom: 72px; }
.fam-hero__arte > * { grid-area: 1 / 1; }
.fam-hero__lamina { position: relative; z-index: 2; width: 78%; justify-self: end; filter: drop-shadow(0 14px 18px rgba(58, 36, 24, .2)); }
.fam-hero__lamina.lamina--corte .lamina__img { padding: 10px 10px 0; border-radius: var(--r-papel); box-shadow: none; background: var(--off-white); }
.fam-hero__lamina.lamina--corte picture { border-radius: 10px 10px 0 0; }
.fam-hero__lamina.lamina--washi::before { left: 62%; rotate: 5deg; width: 96px; }
.fam-hero__lamina figcaption { justify-content: flex-end; text-align: right; padding-left: 20%; }
.fam-hero__polaroid { position: relative; z-index: 1; width: 36%; max-width: 210px; justify-self: start; align-self: end; margin-bottom: -72px; }
@media (min-width: 640px) {
  .fam-hero__arte { max-width: 560px; margin-left: auto; width: 100%; }
}
@media (min-width: 1024px) {
  .fam-hero { display: grid; align-content: center; min-height: min(calc(88svh - 77px), 900px); }
  /* --w: ancho del recorte; --tras: cuánto se mete la polaroid detrás de él. La polaroid ocupa solo
     el hueco entre la columna del texto y el recorte */
  .fam-hero__arte { --w: min(100%, clamp(300px, 26vw, 400px)); --tras: 64px; grid-column: 8 / 13; margin: 0; max-width: none; padding-bottom: var(--s-6); }
  .fam-hero__lamina { width: var(--w); }
  .fam-hero__lamina figcaption { padding-left: 4px; }
  .fam-hero__polaroid { position: absolute; width: clamp(150px, 15vw, 230px); max-width: none; margin: 0;
    right: calc(var(--w) - var(--tras)); bottom: -24px; }
}
@media (min-width: 1280px) {
  .fam-hero__arte { grid-column: 9 / 13; }
}
@media (min-width: 1600px) {
  .fam-hero__arte { --w: 380px; }
  .fam-hero__polaroid { width: 220px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .fam-hero__lamina { animation: recorte 600ms var(--ease-suave) both; }
  .js .fam-hero__lamina img { animation: recorte-img 600ms var(--ease-suave) both; }
  .js .fam-hero__polaroid { animation: recorte 600ms var(--ease-suave) 160ms both; }
  .js .fam-hero__polaroid img { animation: recorte-img 600ms var(--ease-suave) 160ms both; }
}

/* ───────── Los 5 pasos ───────── */
.pasos { overflow: clip; }
.pasos__pila { display: none; }
.pasos__lista { display: grid; gap: var(--s-9); }
.paso { position: relative; z-index: var(--z-contenido); display: grid; gap: var(--s-4); justify-items: start; }
.paso h2 { margin-bottom: var(--s-2); }
.paso > p:not(.paso-num):not(.caption) { max-width: 52ch; }
.paso__edades { margin-top: var(--s-2); }
.paso__movil { width: 80%; margin-top: var(--s-5); }
.paso__movil--der { justify-self: end; }
@media (min-width: 640px) { .paso__movil { width: 50%; } }

@media (min-width: 1024px) {
  .pasos .folio { grid-row: 1; }
  ol.pasos__lista { grid-column: 3 / 8; grid-row: 1; gap: clamp(120px, 14vw, 200px); padding-block: 8vh 16vh; }
  .paso__movil { display: none; }
  .pasos__pila {
    display: grid; grid-column: 9 / 13; grid-row: 1; align-self: start;
    position: sticky; top: 112px;
  }
  /* Las láminas inactivas solo se apagan a la vista (opacidad): un lector de pantalla las lee todas, en orden */
  .pasos__pila .lamina { grid-area: 1 / 1; align-self: start; opacity: 0; width: min(100%, 380px, calc((100svh - 220px) * .78)); justify-self: center; }
  .pasos__pila .lamina:not(.activa) figcaption { opacity: 0; }
  .pasos__pila .lamina.activa { opacity: 1; z-index: 2; }
  .pasos__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 .pasos__pila { display: none; }
  .no-js .paso__movil { display: block; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pasos__pila .lamina.entra picture { animation: lamina-entra 420ms var(--ease-suave) both; }
  .pasos__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; } }

/* El hilo pasa por los rótulos: fondo de papel bajo cada «Paso N» */
.paso-num { position: relative; }

/* ───────── Chat de ejemplo ───────── */
.chat { width: 100%; max-width: 560px; margin-top: var(--s-3); background: var(--off-white); border-radius: var(--r-panel); padding: clamp(14px, 3vw, 24px); box-shadow: var(--sombra-papel); }
.chat__hilo { display: grid; gap: var(--s-3); }
.burbuja { max-width: 92%; padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.burbuja--tu { justify-self: end; background: var(--terracota-soft); border-bottom-right-radius: 6px; }
.burbuja--oli { position: relative; justify-self: start; background: var(--cream-deep); border-bottom-left-radius: 6px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.burbuja__ola { width: 20px; height: auto; margin-top: 6px; color: var(--terracota); }
.burbuja__ola path { fill: none; stroke: currentColor; stroke-width: 90; stroke-linecap: round; }
.burbuja__texto { position: relative; }
.burbuja__eco { position: absolute; inset: 0; }
.burbuja__eco span { opacity: 0; }
.burbuja__eco span.ve { opacity: 1; }
.chat.animando .burbuja__texto > .real { color: transparent; }
.escribiendo { position: absolute; left: 0; top: 4px; display: inline-flex; gap: 5px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate); animation: punto 900ms var(--ease-suave) infinite; }
.escribiendo i:nth-child(2) { animation-delay: 150ms; }
.escribiendo i:nth-child(3) { animation-delay: 300ms; }
@keyframes punto { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -4px; opacity: 1; } }
.chat__rotulo { margin-bottom: var(--s-3); }
.chat__pie { margin-top: var(--s-4); display: flex; justify-content: flex-end; }
.chat__pie:not(:has(button:not([hidden]))) { display: none; }

.promesas { width: 100%; max-width: 560px; display: grid; margin-top: var(--s-4); }
.promesas li { padding-block: var(--s-4); border-top: 1px solid var(--sand); }
.promesas li:last-child { border-bottom: 1px solid var(--sand); }
.promesas__frase { font-family: var(--f-texto); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.promesas p:not(.promesas__frase) { color: var(--graphite); }
@media (min-width: 640px) {
  .promesas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .promesas li:nth-last-child(2) { border-bottom: 1px solid var(--sand); }
}

/* ───────── Notas breves: un índice editorial en la columna del contenido ───────── */
.notas { background-color: var(--cream-deep); background-image: none; padding-block: var(--s-9); }
.notas__lista { display: grid; }
.nota-breve { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-top: 1px solid var(--bone); }
.nota-breve:last-child { border-bottom: 1px solid var(--bone); }
.nota-breve h3 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); }
.nota-breve p { max-width: 52ch; color: var(--graphite); }
@media (min-width: 768px) {
  .nota-breve { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: baseline; }
}
@media (min-width: 1024px) {
  .notas .folio { grid-row: 1; }
  .notas__lista { grid-column: 3 / 13; grid-row: 1; }
}

/* ───────── Oli Premium: un sobre mostaza que se abre al llegar y deja asomar la cuponera ───────── */
.premium__texto h2 { margin-bottom: var(--s-5); }
.premium__texto > p:not(.folio) { max-width: 52ch; }
.premium .folio { color: var(--mostaza-deep); }
.premium__sub { margin: var(--s-6) 0 var(--s-3); font-size: 1.375rem; }
.premium .lista-icono li { border-color: rgba(124, 90, 31, .22); }
.premium .lista-icono .icono { color: var(--mostaza-deep); }
.premium__nota { margin-top: var(--s-4); color: var(--mostaza-deep); }

/* Arriba del sobre queda aire para la carta y la solapa abiertas (salen ~55 % de su ancho) */
.sobre-caja { margin-top: min(60%, 260px); display: grid; justify-items: center; gap: var(--s-4); }
.sobre {
  --abre: 1; /* 0 = cerrado, 1 = abierto */
  position: relative; width: min(100%, 420px); aspect-ratio: 400 / 260; rotate: -2deg;
  /* Lo que queda bajo el sobre no se ve; arriba la carta puede salir */
  clip-path: inset(-120% -30% 0 -30%);
  view-timeline: --sobre block;
}
.sobre__fondo { position: absolute; inset: 0; z-index: 1; border-radius: 6px; background: #E9C677; }
.sobre__carta { position: absolute; z-index: 3; left: 11%; right: 11%; top: 5%; translate: 0 -58%; }
.sobre__carta .lamina__img { box-shadow: 0 0 0 1.5px var(--graphite), 0 -6px 18px -10px rgba(58, 36, 24, .35); }
.sobre__frente { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 -2px 3px rgba(124, 90, 31, .18)); }
.sobre__bolsillo { fill: var(--mostaza); }
.sobre__pliegue { fill: none; stroke: var(--mostaza-deep); stroke-opacity: .28; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sobre__solapa {
  position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 60%; overflow: visible;
  transform-origin: 50% 0; transform: perspective(900px) rotateX(180deg);
}
.sobre__solapa-cara { fill: #E2B95C; }
.sobre__solapa-filo { fill: none; stroke: var(--mostaza-deep); stroke-opacity: .3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sobre-caja { filter: drop-shadow(0 22px 26px rgba(124, 90, 31, .22)); }
.sobre__pie { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .sobre__solapa { animation: solapa-abre linear both; animation-timeline: --sobre; animation-range: entry 40% cover 45%; }
    .js .sobre__carta { animation: carta-sale linear both; animation-timeline: --sobre; animation-range: cover 30% cover 58%; }
  }
}
/* La solapa gira sobre su filo de arriba; a la mitad del giro pasa detrás de la carta */
@keyframes solapa-abre {
  0% { transform: perspective(900px) rotateX(0deg); z-index: 5; }
  49% { z-index: 5; }
  50% { z-index: 2; }
  100% { transform: perspective(900px) rotateX(180deg); z-index: 2; }
}
@keyframes carta-sale { from { translate: 0 40%; } to { translate: 0 -58%; } }
.gratis { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
.gratis h3 { font-size: var(--t-h3); }
.gratis p { max-width: 56ch; font-size: var(--t-lead); color: var(--graphite); line-height: 1.5; }
@media (min-width: 1024px) {
  .premium__texto { grid-column: 3 / 8; grid-row: 1; }
  .sobre-caja { grid-column: 8 / 13; grid-row: 1; align-self: center; margin-top: 240px; }
  .gratis { grid-column: 3 / 9; }
}

/* ───────── Cierre ───────── */
.cierre-int__in { display: grid; gap: var(--s-5); }
@media (min-width: 1024px) { .cierre-int__in { grid-column: 3 / 11; } }

/* ───────── Paso 5: lámina dibujada (no hay captura con el botón Reservar): la barra fija de la ficha
   y el orden en que Reservar abre los canales del lugar. Va rotulada como ilustrativa ───────── */
.dibujo-reservar { --pad: clamp(16px, 7%, 28px); }
.dibujo-reservar > * { margin: 0; }
.lamina--dibujo .lamina__img.dibujo-reservar { display: grid; align-content: start; gap: 14px; }
.lamina--dibujo .dibujo-reservar::before {
  content: ""; position: absolute; inset: var(--bisel); z-index: -1; border-radius: calc(var(--radio) - var(--bisel)); background: var(--cream);
}
.dibujo-reservar { isolation: isolate; padding: calc(var(--bisel) + var(--pad)) calc(var(--bisel) + var(--pad)) calc(var(--bisel) + var(--pad) + 8px) !important; }
.pasos__pila .lamina--dibujo .dibujo-reservar { min-height: 0; }
.dibujo-reservar__lugar { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.1; color: var(--ink); max-width: 14ch; }
.dibujo-reservar__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 var(--bone), 0 10px 20px -14px rgba(58, 36, 24, .35); }
.dibujo-reservar__precio { display: grid; font-family: var(--f-sans); font-weight: 600; font-size: 1.125rem; line-height: 1.15; color: var(--ink); }
.dibujo-reservar__precio span { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--slate); }
.dibujo-reservar__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r-pildora); background: var(--terracota); color: var(--white); font-weight: 600; font-size: 15px; }
.dibujo-reservar__boton svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dibujo-reservar__rotulo { margin-top: 6px; font-family: var(--f-italica); font-style: italic; font-size: 1.125rem; line-height: 1.2; color: var(--terracota-deep); }
.dibujo-reservar__orden { display: grid; counter-reset: canal; }
.dibujo-reservar__orden li { counter-increment: canal; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; padding-block: 8px; border-top: 1.5px dashed var(--bone); font-size: 15px; line-height: 1.25; color: var(--graphite); }
.dibujo-reservar__orden li::before { content: counter(canal); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--terracota); font-size: 12px; font-weight: 600; color: var(--terracota-deep); }
.dibujo-reservar__orden li:first-child { color: var(--ink); font-weight: 600; }
.dibujo-reservar__orden li:first-child::before { background: var(--terracota); border-color: var(--terracota); color: var(--white); }
.dibujo-reservar__apartar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 10px; border-top: 1.5px dashed var(--bone); font-size: 13px; color: var(--slate); }
.dibujo-reservar__apartar span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pildora); border: 1.5px solid var(--graphite); font-size: 13px; font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pasos__pila .lamina.entra .dibujo-reservar > * { animation: nota-entra 420ms var(--ease-suave) both; }
  .pasos__pila .lamina.entra .dibujo-reservar > :nth-child(2) { animation-delay: 60ms; }
  .pasos__pila .lamina.entra .dibujo-reservar > :nth-child(n+3) { animation-delay: 140ms; }
}
@keyframes nota-entra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Tableta (768–1023): cada paso con su lámina al lado, alternando el lado */
@media (min-width: 768px) and (max-width: 1023px) {
  .paso:has(.paso__movil) { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); column-gap: var(--s-7); align-items: start; }
  .paso:has(.paso__movil) > * { grid-column: 1; }
  .paso:has(.paso__movil) > .paso__movil { grid-column: 2; grid-row: 1 / span 12; width: 100%; margin-top: 0; align-self: center; }
  .paso:has(.paso__movil--izq) { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .paso:has(.paso__movil--izq) > * { grid-column: 2; }
  .paso:has(.paso__movil--izq) > .paso__movil { grid-column: 1; }
}
/* Teléfono angosto: la polaroid queda dentro del margen, apenas metida bajo el recorte */
@media (max-width: 479px) {
  .fam-hero__polaroid { margin-left: 10px; width: 38%; }
  .fam-hero__lamina { width: 74%; }
}