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

/* ───────── Hero: el sello se estampa al cargar ───────── */
.sello-hero__arte { display: grid; justify-items: start; gap: var(--s-5); margin-top: var(--s-6); }
.sello-hero__caja { width: min(260px, 70vw); }
/* Tableta: texto y sello lado a lado, centrados en el mismo renglón (no el móvil estirado) */
@media (min-width: 640px) and (max-width: 1023px) {
  .sello-hero .grid { align-items: center; }
  .sello-hero .hero-int__texto { grid-column: 1 / 6; grid-row: 1; }
  .sello-hero__arte { grid-column: 6 / 9; grid-row: 1; justify-items: center; margin-top: 0; }
  .sello-hero__caja { width: min(100%, 240px); }
}
@media (min-width: 1024px) {
  .sello-hero__arte { justify-items: center; margin-top: 0; }
  .sello-hero__caja { width: 340px; max-width: 100%; }
}

/* ───────── Hoja de visita ───────── */
.hoja {
  /* Todo cae en una retícula de 32 px: cada renglón se asienta sobre su raya */
  position: relative; z-index: var(--z-contenido);
  background-color: var(--off-white);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--sand) 31px 32px);
  /* La raya cae 2 px bajo la línea base de cada renglón (la letra se apoya en ella) y la última coincide con el filo */
  background-position: 0 9px;
  box-shadow: var(--sombra-papel); border-radius: var(--r-papel);
  padding: 16px var(--s-5) 24px 64px;
  view-timeline: --hoja block;
}
.hoja::before { content: ""; position: absolute; top: 0; bottom: 0; left: 48px; width: 1px; background: var(--rosa); }
.hoja__titulo { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; line-height: 32px; margin-bottom: 32px; color: var(--ink); }
.hoja__lista { display: grid; }
.hoja__lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding-block: 0; line-height: 32px; font-size: 1.0625rem; }
.hoja__lista li + li { margin-top: 32px; }
.hoja__check { width: 28px; height: 28px; margin-top: 2px; }
.hoja__check path { fill: none; stroke: var(--terracota); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .hoja__check path {
      stroke-dasharray: 1; animation: traza linear both; animation-timeline: --hoja;
      animation-range: entry calc(20% + var(--i) * 10%) cover calc(36% + var(--i) * 10%);
    }
  }
}
.visita__nota { margin-top: var(--s-6); font-family: var(--f-italica); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.35; color: var(--graphite); max-width: 30ch; }
@media (min-width: 1024px) {
  .visita .seccion__cabeza { grid-column: 3 / 9; }
  .hoja { grid-column: 3 / 9; grid-row: 2; }
  .visita__nota { grid-column: 10 / 13; grid-row: 2; align-self: center; margin: 0; }
}

/* ───────── El Sello vence: la regla de 12 meses ───────── */
.regla-meses { display: grid; gap: var(--s-5); padding-top: var(--s-2); }
.regla-meses__fila, .regla-meses__escala { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.regla-meses__plan { font-weight: 600; font-size: 15px; color: var(--ink); }
.regla-meses__unidad { font-weight: 400; font-size: 14px; color: var(--slate); }
.regla-meses { padding-right: 11px; }
.regla-meses__pista {
  position: relative; height: 28px;
  background:
    linear-gradient(var(--bone), var(--bone)) 0 50% / 100% 2px no-repeat,
    repeating-linear-gradient(to right, var(--sand) 0 1px, transparent 1px calc(100% / 12)) 0 50% / calc(100% + 1px) 14px no-repeat;
}
.regla-meses__pista i {
  position: absolute; top: 50%; left: calc(var(--m) / 12 * 100%);
  width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%;
  background: var(--cream); border: 2.5px solid var(--terracota);
}
.regla-meses__pista i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--terracota); }
.regla-meses__nums { position: relative; height: 20px; }
.regla-meses__nums b { position: absolute; left: calc(var(--m) / 12 * 100%); translate: -50% 0; font-weight: 400; font-size: 14px; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.regla-meses__nums b:first-child { translate: 0 0; }
@media (min-width: 1024px) {
  .regla-meses { grid-column: 3 / 12; }
  .regla-meses__fila, .regla-meses__escala { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ───────── Primero 10 reseñas: la ficha de ejemplo ───────── */
.diez { background-color: var(--cream-deep); background-image: none; }
.ficha-demo { background: var(--off-white); border-radius: var(--r-panel); box-shadow: var(--sombra-papel); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-5); }
.ficha-demo__nombre { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.ficha-demo__sub { color: var(--slate); font-size: 15px; }
.ficha-demo__casillas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); max-width: 520px; }
.recorte-resena { aspect-ratio: 4 / 3; border-radius: var(--r-papel); border: 1.5px dashed var(--bone); }
.recorte-resena.llena {
  border: 0; background-color: var(--cream-deep);
  box-shadow: 0 1px 0 var(--bone);
  background-image:
    linear-gradient(var(--ash), var(--ash)), linear-gradient(var(--ash), var(--ash)), linear-gradient(var(--ash), var(--ash));
  background-repeat: no-repeat;
  background-size: 70% 2px, 56% 2px, 38% 2px;
  background-position: 15% 32%, 15% 52%, 15% 72%;
}
.recorte-resena.llena:nth-child(odd) { rotate: -1.5deg; }
.recorte-resena.llena:nth-child(3n) { rotate: 1.2deg; }
.ficha-demo__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-height: 32px; }
.ficha-demo__contador { font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha-demo__estrellas { display: inline-flex; align-items: center; gap: var(--s-3); }
.ficha-demo .estrella { width: 18px; height: 18px; fill: var(--terracota); stroke: var(--terracota); stroke-width: 1.5; stroke-linejoin: round; }
.ficha-demo__promedio { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.ficha-demo__rotulo { margin-top: calc(-1 * var(--s-3)); }
.ficha-demo__botones { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (prefers-reduced-motion: no-preference) {
  .recorte-resena.recien { animation: casilla 320ms var(--ease-resorte) both; }
  .ficha-demo__estrellas:not([hidden]) .estrella { animation: estampa-mini 300ms var(--ease-sello) both; animation-delay: calc(var(--n, 0) * 40ms); }
}
/* Marcador: cuenta las reseñas y, al llegar a 10, se vuelve el promedio (el momento de «desbloquear» estrellas) */
.ficha-demo__marcador { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); padding-top: var(--s-4); border-top: 1.5px dashed var(--bone); }
.ficha-demo__grande { display: flex; align-items: baseline; gap: var(--s-3); margin: 0; }
.ficha-demo__grande span { font-family: var(--f-display); font-weight: 600; font-size: clamp(3.5rem, 2.6rem + 4vw, 7.5rem); line-height: .9; letter-spacing: -.03em; color: var(--graphite); font-variant-numeric: tabular-nums lining-nums; transition: color 300ms var(--ease-suave); }
.ficha-demo__grande small { font-size: 15px; color: var(--slate); }
.ficha-demo.lista .ficha-demo__grande span { color: var(--terracota-deep); }
.ficha-demo__espera { flex-basis: 100%; font-family: var(--f-italica); font-style: italic; color: var(--slate); font-size: 17px; }
.ficha-demo .ficha-demo__marcador .estrella { width: 26px; height: 26px; }
@media (max-width: 1023px) {
  .ficha-demo__cuerpo { display: contents; }
  .ficha-demo__cabeza { order: 1; } .ficha-demo__casillas { order: 2; } .ficha-demo__marcador { order: 3; }
  .ficha-demo__contador { order: 4; } .ficha-demo__rotulo { order: 5; } .ficha-demo__botones { order: 6; }
}
@media (min-width: 1024px) {
  .ficha-demo { grid-column: 3 / 12; padding: var(--s-7); grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); gap: 0; }
  .ficha-demo__cuerpo { display: grid; gap: var(--s-5); padding-right: var(--s-7); align-content: start; }
  .ficha-demo__marcador { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: var(--s-4);
    padding: 0 0 0 var(--s-7); border-top: 0; border-left: 1.5px dashed var(--bone); }
  .ficha-demo__grande { flex-direction: column; gap: var(--s-2); }
  .ficha-demo__espera { flex-basis: auto; }
}

/* ───────── Reseñas que puedes creer: 7/5 ───────── */
.creer__lista { display: grid; }
.creer__lista li { padding-block: var(--s-5); border-top: 1px solid var(--sand); font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); line-height: 1.45; color: var(--ink); max-width: 40ch; }
@media (min-width: 1024px) {
  .creer__lista { grid-column: 3 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
}

/* ───────── Desempate ───────── */
.desempate { display: grid; gap: var(--s-4); }
.desempate__esquema { position: relative; padding-left: 64px; }
.desempate__flecha { position: absolute; left: 0; top: 0; width: 58px; height: 100%; overflow: visible; }
.desempate__flecha path { fill: none; stroke: var(--terracota); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.desempate__rotulo { position: absolute; left: -4px; top: 50%; translate: 0 -50%; rotate: -90deg; transform-origin: center; font-family: var(--f-italica); font-style: italic; font-size: 18px; color: var(--terracota-deep); background: var(--cream); padding: 0 4px; line-height: 1; display: none; }
.boletos { display: grid; gap: var(--s-3); }
.boleto { position: relative; display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5); background: var(--off-white); border-radius: var(--r-papel); box-shadow: var(--sombra-papel); }
.boleto::after { content: ""; position: absolute; right: 64px; top: 8px; bottom: 8px; border-left: 1.5px dashed var(--bone); }
.boleto--c::after { display: none; }
.boleto__marca { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; display: grid; place-items: center; }
.boleto__check { width: 24px; height: 24px; fill: none; stroke: var(--success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.boleto__sello { width: 34px; height: 34px; rotate: -8deg; fill: none; stroke: var(--terracota); stroke-width: 1.6; stroke-linecap: round; }
.boleto__texto { font-size: 15px; font-weight: 600; color: var(--ink); padding-right: 64px; }
.boleto__barra { height: 8px; border-radius: 4px; background: var(--terracota); width: var(--largo); max-width: calc(100% - 64px); }
.boleto--c .boleto__barra { background: var(--naranja); }
.boleto--b { outline: 2px solid var(--terracota); outline-offset: -2px; }
.desempate figcaption { display: grid; gap: var(--s-2); padding-left: 64px; }
.desempate__nota { font-family: var(--f-italica); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--ink); max-width: 48ch; }
@media (min-width: 768px) { .desempate__rotulo { display: block; left: -2px; } }
@media (min-width: 1024px) { .desempate { grid-column: 3 / 11; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .desempate { view-timeline: --desempate block; }
    .js .desempate__flecha path { stroke-dasharray: 1; animation: traza linear both; animation-timeline: --desempate; animation-range: entry 30% cover 50%; }
    .js .desempate__flecha .punta { animation-range: cover 45% cover 55%; }
    .js .boleto__sello { animation: estampa-mini linear both; animation-timeline: --desempate; animation-range: cover 46% cover 54%; }
  }
}

/* ───────── Tus datos ───────── */
.datos__si, .datos__no { margin-bottom: var(--s-7); }
.datos h3 { margin-bottom: var(--s-4); }
.datos__pie { display: grid; gap: var(--s-3); justify-items: start; }
.datos__pie .caption { max-width: 62ch; }
@media (min-width: 768px) {
  .datos__si { grid-column: 1 / 5; }
  .datos__no { grid-column: 5 / 9; }
}
@media (min-width: 1024px) {
  .datos__si { grid-column: 3 / 8; grid-row: 2; }
  .datos__no { grid-column: 8 / 13; grid-row: 2; }
  .datos__pie { grid-column: 3 / 11; }
}

/* ───────── Cierre doble ───────── */
.cierre-doble .grid { row-gap: var(--s-8); }
.cierre-doble__col { display: grid; gap: var(--s-5); align-content: start; }
.cierre-doble__col h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
@media (min-width: 768px) {
  .cierre-doble__col { grid-column: span 4; }
  .cierre-doble__col--negocio { border-left: 1px solid var(--bone); padding-left: var(--gutter); }
}
/* En escritorio, el cierre se alinea a la columna de los títulos (3), como el resto de la página */
@media (min-width: 1024px) {
  .cierre-doble__col { grid-column: 3 / 8; grid-row: 1; }
  .cierre-doble__col--negocio { grid-column: 8 / 13; padding-left: var(--s-7); }
}

/* El sello de esta página es de goma: rectangular, con presión desigual de tinta y un renglón para
   la fecha en que vence. Se estampa una sola vez y no gira (el anillo que gira es del inicio) */
.sello-hero__caja.estampa { width: min(320px, 82vw); color: var(--terracota-deep); }
.sello--goma { rotate: -5deg; }
.sello-hero__caja.estampa::after { border-radius: 22px; }
.sello-hero__pie { max-width: 30ch; }
@media (min-width: 640px) and (max-width: 1023px) { .sello-hero__caja.estampa { width: min(100%, 300px); } }
@media (min-width: 1024px) { .sello-hero__caja.estampa { width: 400px; } .sello-hero__pie { text-align: center; } }
@media (prefers-reduced-motion: no-preference) {
  .js .estampa[data-sello]:not(.estampado) .sello { opacity: 0; scale: 1.22; rotate: -10deg; }
  .estampa.estampado .sello { animation: estampa-goma 620ms var(--ease-sello) both; }
}
@keyframes estampa-goma {
  0% { opacity: 0; scale: 1.22; rotate: -10deg; filter: blur(1.5px); }
  22% { opacity: 1; }
  60% { scale: .98; filter: blur(0); }
  100% { opacity: 1; scale: 1; rotate: -5deg; }
}