/* ==========================================================================
   sections.css · Secciones de la landing (dirección "Comanda")
   Orden: inicio (ticket de costeo) → corte del día → tira de conversión →
          precios → preguntas → contacto → pie
   ========================================================================== */

/* ==========================================================================
   1. INICIO · Ticket de costeo
   ========================================================================== */
.hero { padding-block: clamp(2rem, 6vh, 4.5rem) var(--s-8); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); align-items: center; }
.hero__copy { display: grid; gap: var(--s-6); align-content: center; }
.hero__title { font-size: var(--fs-h1); max-width: 11ch; }
.hero__lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--niebla); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__fine { font-size: var(--fs-sm); color: var(--niebla); }

.sim { display: grid; gap: var(--s-5); justify-items: center; }
.sim__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

.ticket {
  position: relative; width: min(430px, 100%);
  display: grid; gap: var(--s-3);
  padding: var(--s-6) var(--s-5) calc(8px + var(--s-6));
  font-size: 0.875rem; line-height: 1.5; text-transform: uppercase;
  transform: translateY(var(--hy, 0px)) rotate(calc(-1.2deg + var(--hr, 0deg)));
  will-change: transform;
  box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.65);
}
.ticket__head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.ticket__head strong { letter-spacing: 0.14em; font-size: 1rem; }
.ticket__lines { display: grid; gap: 4px; }
.ticket__lines li, .ticket__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.ticket__lines li span:last-child, .ticket__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__lines .is-key span:first-child::after { content: ' *'; }
.ticket__lines .is-key small { margin-left: 0.4em; color: var(--sello); font-size: inherit; font-weight: 600; }
.ticket__row { font-weight: 600; }
.ticket__result { display: grid; gap: var(--s-2); padding-top: var(--s-2); }
.ticket__label { font-weight: 600; }
.ticket__total { font-size: var(--fs-total); }
.ticket__meta { color: var(--tinta-2); }
.ticket.is-losing .ticket__total { color: var(--sello); }
.ticket__stamp { position: absolute; right: var(--s-5); bottom: calc(var(--s-7) + 8px); }
.ticket__stamp.is-hit { animation: stamp-in 420ms var(--ease); }
@keyframes stamp-in { 0% { opacity: 0; transform: rotate(-9deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-9deg) scale(0.94); } 100% { transform: rotate(-9deg) scale(1); } }

/* Impresión inicial: las líneas aparecen una tras otra (un solo momento) */
.ticket.is-printing > * { animation: print-line 1ms steps(1) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
@keyframes print-line { from { visibility: hidden; } to { visibility: visible; } }

.sim__controls { width: min(430px, 100%); display: grid; gap: var(--s-4); }
.sim__verdict { width: min(430px, 100%); font-size: var(--fs-sm); line-height: 1.6; min-height: 4.8em; }
.sim__verdict mark { background: var(--sello); color: #fff; padding: 0 0.25em; }
.sim__note { width: min(430px, 100%); font-size: var(--fs-xs); color: var(--niebla); }

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__title { max-width: 12ch; }
}
@media (max-width: 480px) {
  .ticket { padding-inline: var(--s-4); font-size: 0.8rem; }
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   2. EL CORTE DEL DÍA
   JS marca .is-printed en cada bloque del ticket según el scroll y
   .is-active en la hora correspondiente. El papel sale de la impresora
   (abajo) y crece hacia arriba.
   ========================================================================== */
.corte { position: relative; height: 520vh; border-top: 1px dashed var(--acero-3); }
.corte__sticky {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8);
  padding-block: var(--s-7) 0;
}
.corte__copy { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-6); padding-bottom: var(--s-7); }
.corte__copy h2 { font-size: var(--fs-h2); max-width: 12ch; }
.corte__hours { display: grid; align-content: center; }
.hour { grid-area: 1 / 1; display: grid; gap: var(--s-3); opacity: 0; transform: translateY(16px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.hour.is-active { opacity: 1; transform: none; }
.hour__time { font-size: clamp(4rem, 2.4rem + 5vw, 7rem); color: var(--luz); }
.hour p { color: var(--niebla); max-width: 42ch; }
.corte__steps { display: flex; gap: 6px; }
.corte__steps i { width: 40px; height: 4px; background: var(--acero-3); transition: background-color var(--t-med); }
.corte__steps i.is-on { background: var(--luz); }

.printer { display: flex; flex-direction: column; min-height: 0; }
.printer__paper { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.receipt {
  width: min(420px, 100%);
  padding: var(--s-6) var(--s-5) var(--s-4);
  font-size: 0.875rem; line-height: 1.55;
  box-shadow: 0 0 60px -20px rgb(0 0 0 / 0.6);
}
.receipt__head { display: grid; justify-items: center; gap: 2px; margin-bottom: var(--s-3); }
.receipt__head strong { letter-spacing: 0.14em; font-size: 1rem; }
.receipt__block { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.receipt__block > div { overflow: hidden; }
.receipt__block.is-printed { grid-template-rows: 1fr; }
.receipt__time { font-weight: 600; padding-top: var(--s-3); }
.receipt__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.receipt__row span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.receipt__row.is-flag span:last-child { color: var(--sello); font-weight: 600; }
.receipt .rule { margin-block: var(--s-3); }
.receipt__label { font-weight: 600; }
.receipt__total { font-size: clamp(4rem, 2.6rem + 3.6vw, 6.5rem); padding-block: var(--s-2) var(--s-3); }
.receipt__stamp { display: block; width: max-content; margin: var(--s-2) 0 var(--s-3) auto; opacity: 0; transform: rotate(-9deg) scale(1.8); transition: opacity 260ms, transform 420ms var(--ease); }
.receipt__stamp.is-hit { opacity: 1; transform: rotate(-9deg) scale(1); }
.receipt__foot { text-align: center; font-size: var(--fs-xs); color: var(--tinta-2); }
.printer__slot { flex: none; height: 26px; margin-inline: auto; width: min(480px, 100%); background: #111213; box-shadow: inset 0 3px 0 #000, inset 0 -1px 0 #4a4f50; }

@media (max-width: 860px) {
  .corte { height: 560vh; }
  .corte__sticky { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); }
  .corte__copy { padding-bottom: 0; gap: var(--s-3); grid-template-rows: auto auto auto; }
  .corte__copy h2 { font-size: clamp(2.2rem, 1.4rem + 4vw, 3rem); }
  .hour { gap: var(--s-1); }
  .hour__time { font-size: 3.2rem; }
  .hour p { font-size: var(--fs-sm); line-height: 1.5; }
  .receipt { font-size: 0.75rem; padding: var(--s-4) var(--s-4) var(--s-3); }
  .receipt__total { font-size: 3.6rem; }
}
@media (max-width: 760px) {
  /* deja ver la ranura de la impresora por encima de la barra fija */
  .corte__sticky { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}
/* Sin movimiento: el ticket completo impreso y las horas en lista */
@media (prefers-reduced-motion: reduce) {
  .corte { height: auto; }
  .corte__sticky { position: relative; top: 0; height: auto; padding-block: var(--s-8); }
  .hour { grid-area: auto; opacity: 1; transform: none; }
  .corte__hours { gap: var(--s-6); }
  .corte__steps { display: none; }
  .receipt__block { grid-template-rows: 1fr; }
  .receipt__stamp { opacity: 1; transform: rotate(-9deg); }
  .printer__paper { overflow: visible; }
}

/* ==========================================================================
   3. TIRA DE CONVERSIÓN · Papel cortado de lado a lado
   ========================================================================== */
.strip { padding-block: var(--s-8); overflow: hidden; }
.strip__paper {
  --edge: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 8px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 16px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 8px repeat-x;
  -webkit-mask: var(--edge); mask: var(--edge);
  margin-inline: -32px; padding-inline: 32px;
  transform: rotate(-0.6deg);
}
.strip__inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-8); }
.strip h2 { font-size: var(--fs-h2); max-width: 16ch; }
.strip__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   4. PRECIOS · Tres tickets
   ========================================================================== */
.pricing { padding-block: var(--s-8) var(--s-9); }
.pricing__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); align-items: end; }
.pricing__head h2 { font-size: var(--fs-h2); max-width: 13ch; }
.pricing__aside { display: grid; gap: var(--s-4); justify-items: start; }
.pricing__aside p { color: var(--niebla); max-width: 36ch; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); align-items: start; }
.plan { position: relative; display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-5) calc(8px + var(--s-6)); font-size: var(--fs-sm); box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.6); }
.plan__name { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 2.6rem; line-height: 0.95; }
.plan__tag { color: var(--tinta-2); min-height: 3.2em; }
.plan__lines { display: grid; gap: 4px; text-transform: uppercase; font-size: 0.8125rem; }
.plan__lines li { display: flex; justify-content: space-between; gap: var(--s-3); }
.plan__lines .feat { justify-content: flex-start; text-transform: none; font-size: var(--fs-sm); }
.plan__lines .feat::before { content: '+'; flex: none; width: 1.2em; font-weight: 600; }
.plan__label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; }
.plan__price { font-size: clamp(3.6rem, 2.6rem + 2.4vw, 5rem); transition: opacity var(--t-fast); }
.plan__equiv { font-size: var(--fs-xs); color: var(--tinta-2); min-height: 2.6em; }
.plan__actions { display: grid; gap: var(--s-2); justify-items: center; margin-top: var(--s-2); }
.plans.is-switching .plan__price { opacity: 0; }
.plan__stamp { position: absolute; top: var(--s-5); right: var(--s-4); font-size: var(--fs-xs); }
.plan.is-featured { transform: translateY(-14px); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px dashed var(--acero-3); }
.steps li { display: flex; gap: var(--s-4); align-items: baseline; }
.steps .total { font-size: 3.6rem; color: var(--acero-3); transition: color var(--t-slow); }
.steps.is-in li .total { color: var(--sello); }
.steps.is-in li:nth-child(2) .total { transition-delay: 250ms; }
.steps.is-in li:nth-child(3) .total { transition-delay: 500ms; }
.steps p { font-size: var(--fs-sm); color: var(--niebla); max-width: 30ch; }
.steps b { color: var(--luz); font-weight: 600; }
.pricing__fine { margin-top: var(--s-6); font-size: var(--fs-xs); color: var(--niebla); }

@media (max-width: 960px) {
  .pricing__head { grid-template-columns: 1fr; }
  .plans { grid-template-columns: minmax(0, 520px); justify-content: center; gap: var(--s-6); }
  .plan.is-featured { transform: none; }
  .plan__tag, .plan__equiv { min-height: 0; }
  .steps { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ==========================================================================
   5. PREGUNTAS
   ========================================================================== */
.faq { padding-block: var(--s-8) var(--s-9); border-top: 1px dashed var(--acero-3); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-7); }
.faq h2 { font-size: var(--fs-h2); }
.faq__list details { border-bottom: 1px dashed var(--acero-3); }
.faq__list details:first-child { border-top: 1px dashed var(--acero-3); }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; list-style: none; font-size: var(--fs-lg); font-weight: 500; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: '+'; flex: none; font-size: 1.5rem; line-height: 1; transition: transform var(--t-med) var(--ease); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding-bottom: var(--s-5); color: var(--niebla); max-width: 62ch; }
@media (max-width: 860px) { .faq__inner { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ==========================================================================
   6. CONTACTO
   ========================================================================== */
.contact { padding-block: var(--s-8) var(--s-9); border-top: 1px dashed var(--acero-3); }
.contact__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
.contact h2 { font-size: var(--fs-h2); }
.contact__intro > p { margin-top: var(--s-5); font-size: var(--fs-lg); line-height: 1.6; color: var(--niebla); max-width: 38ch; }
.contact__direct { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.contact__direct dt { font-size: var(--fs-xs); color: var(--niebla); }
.contact__direct dd { font-size: var(--fs-lg); }
.contact__direct a { text-decoration: none; border-bottom: 1px solid var(--sello); }
.contact__form { padding: var(--s-6) var(--s-6) calc(8px + var(--s-6)); box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.6); }
.contact__formhead { font-weight: 600; letter-spacing: 0.08em; padding-bottom: var(--s-3); border-bottom: 1.5px dashed var(--tinta); }
.contact__form .btn { justify-self: start; }
@media (max-width: 860px) {
  .contact__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .contact__form { padding-inline: var(--s-4); }
  .contact__form .btn { justify-self: stretch; }
}

/* ==========================================================================
   PIE
   ========================================================================== */
.footer { padding-block: var(--s-7) calc(var(--s-6) + env(safe-area-inset-bottom)); border-top: 1px dashed var(--acero-3); }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5) var(--s-6); align-items: center; }
.footer__logo { width: 140px; height: auto; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.footer__links a { text-decoration: none; color: var(--niebla); }
.footer__links a:hover { color: var(--luz); }
.footer__legal { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--niebla); }
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { justify-content: start; }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}