/*
Theme Name: SaforPOS
Theme URI: https://www.saforpos.com
Author: TPV SAFOR, S.L.U.
Author URI: https://tpvsafor.com
Description: Tema de saforpos.com: la web de SaforPOS (Cobra, comanda y cierra. Sin complicaciones.) con su tienda WooCommerce. Va con el plugin «SaforPOS · Tienda de licencias».
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: Propietario (TPV SAFOR, S.L.U.)
Text Domain: saforpos
*/
/* SaforPOS · saforpos.com. Minimal: white and paper grounds, black ink, and the logo's lime only on the
   download button. One typeface (Outfit) in two weights. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --negro: #15191f;
  --lima: #cddf06;
  --papel: #f5f6f8;
  --blanco: #ffffff;
  --mar: #155e7a;
  --sol: #f2b705;
  --gris: #5b6472;
  --paso: #e6e9ee; /* one step from paper: tiles and fields */

  --bg: var(--papel);
  --ink: var(--negro);
  --muted: var(--gris);
  --accent: var(--lima);
  --accent-ink: var(--negro);

  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso: 420;
  --peso-alto: 780;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 4vw, 5rem);
  --step-display: clamp(3.25rem, 1rem + 8.2vw, 8.25rem);

  --margin: clamp(1rem, 3.2vw, 3rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --radius: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: var(--peso); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--lima); color: var(--negro); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
h1, h2, h3 { font-weight: var(--peso-alto); text-wrap: balance; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
strong { font-weight: var(--peso-alto); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: var(--margin); top: -4rem; z-index: 50; background: var(--negro); color: var(--blanco); padding: 0.7rem 1rem; border-radius: var(--radius); }
.salto:focus { top: 0.6rem; }

.display { font-size: var(--step-display); line-height: 0.94; letter-spacing: -0.035em; font-weight: var(--peso-alto); }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; font-weight: var(--peso-alto); }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.nums { font-variant-numeric: tabular-nums; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* The fields. Each chapter paints its own ground; data-ink tells the header which ink to take. */
.campo { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.f-papel, .f-lima, .f-sol, .f-mar, .f-negro { background: var(--papel); color: var(--negro); }
.f-blanco { background: var(--blanco); color: var(--negro); }
.campo + .campo { border-top: 1px solid var(--paso); }

/* One button shape for the whole site. */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--radius); background: var(--lima); color: var(--negro); font-weight: var(--peso-alto); text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.boton:active { transform: scale(0.97); }
.boton:focus-visible { outline-color: var(--negro); }
.boton.b-negro { background: var(--negro); color: var(--blanco); }
.boton.b-blanco { background: var(--blanco); color: var(--negro); }
.boton.b-linea { background: transparent; color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.boton.b-grande { min-height: 3.75rem; padding: 0 1.75rem; font-size: 1.125rem; }
.boton .logo-so { width: 1.4em; height: 1.4em; padding: 0.15em; border-radius: 4px; background: var(--blanco); }
.boton .flecha { transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover .flecha { transform: translateX(4px); }
  .boton.b-negro:hover { background: #000; }
  .boton:not(.b-negro):not(.b-blanco):hover { background: #d9ea1a; }
  .boton.b-blanco:hover { background: var(--lima); }
  .boton.b-linea:hover { background: var(--negro); color: var(--blanco); }
  a.subraya:hover, .subraya:hover { text-decoration-color: currentColor; }
}
.subraya { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color 180ms ease; }
.enlace { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }

/* ---------- Header: fixed, white, always there ---------- */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: 0.6rem var(--margin); color: var(--negro); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--paso); }
.cabecera .marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: var(--peso-alto); font-size: 1.35rem; letter-spacing: -0.02em; }
.cabecera .marca svg { width: 2.1rem; height: 2.1rem; }
.cabecera nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.cabecera nav a:not(.boton) { text-decoration: none; font-size: var(--step-small); }
.cabecera .boton { min-height: 2.75rem; padding: 0 1.1rem; gap: 0; font-size: var(--step-small); }
.cabecera .solo-ancho, .cabecera .solo-medio { display: none; }
@media (min-width: 30em) { .cabecera .solo-medio { display: inline; } }
@media (min-width: 62em) { .cabecera .solo-ancho { display: inline; } }
@media (max-width: 29.99em) { .cabecera { gap: 0.5rem; } .cabecera nav { gap: 0.5rem; } .cabecera .marca span { display: none; } .cabecera .boton { padding: 0 0.9rem; } }

/* ---------- Hero: the promise, the two buttons, the systems, then the program running ---------- */
.hero { background: var(--blanco); padding-top: clamp(6.5rem, 12vw, 9rem); padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: center; }
.hero-texto { grid-column: 1 / span 5; }
.hero-vista { grid-column: 6 / -1; }
.hero h1.display { font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem); max-width: 11ch; }
.hero .lead { margin-top: 1.5rem; max-width: 30ch; color: var(--gris); }
.hero .acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .nota { margin-top: 1rem; font-size: var(--step-small); color: var(--gris); }
.hero-vista video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; background: #0d1014; }
/* The montage: a counter POS terminal (screen on a stand) with the waiter's phone in front of it. */
.montaje { position: relative; margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0; border-radius: calc(var(--radius) * 2); background: var(--papel); }
.tpv-equipo { width: 86%; display: flex; flex-direction: column; align-items: center; }
.tpv-pantalla { width: 100%; padding: 2.2%; border-radius: 18px; background: #1d2229; box-shadow: inset 0 0 0 1px #343b45, 0 2px 4px rgba(21, 25, 31, 0.12), 0 30px 60px -28px rgba(21, 25, 31, 0.55); }
.tpv-pantalla video { border-radius: 6px; }
.tpv-cuello { width: 12%; aspect-ratio: 1 / 1.1; background: linear-gradient(90deg, #2a3038, #3a414b 50%, #2a3038); }
.tpv-base { width: 46%; height: clamp(12px, 1.6vw, 18px); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #3a414b, #1d2229); box-shadow: 0 10px 20px -8px rgba(21, 25, 31, 0.5); }
.movil-equipo { position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(0.75rem, 2vw, 1.5rem); width: 24%; padding: 1.6%; border-radius: 22px; background: #15191f; box-shadow: inset 0 0 0 1px #343b45, 0 24px 48px -16px rgba(21, 25, 31, 0.6); }
.movil-equipo img { display: block; width: 100%; height: auto; border-radius: 15px; }
.montaje .video .pausa { left: 8px; right: auto; bottom: 8px; min-height: 32px; padding: 0 0.75rem; font-size: 0.75rem; }
@media (max-width: 63.99em) {
  .hero-texto, .hero-vista { grid-column: 1 / -1; }
  .hero h1.display { max-width: 14ch; }
}
@media (max-width: 47.99em) {
  .hero h1.display { font-size: 12vw; }
  .hero .acciones .boton { width: 100%; }
}

/* Four reasons under the hero, numbered, on one hairline. */
.razones { background: var(--blanco); padding-bottom: clamp(3rem, 6vw, 5rem); }
.razones ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.razones li { padding-top: 1.25rem; border-top: 2px solid var(--negro); font-size: var(--step-small); color: var(--gris); }
.razones .num { display: block; font-size: var(--step-small); font-weight: var(--peso-alto); color: var(--negro); font-variant-numeric: tabular-nums; }
.razones strong { display: block; margin: 0.6rem 0 0.35rem; font-size: var(--step-lead); line-height: 1.15; color: var(--negro); }
@media (max-width: 63.99em) { .razones ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 29.99em) { .razones ol { grid-template-columns: 1fr; } }

/* "Works on": the two logos, big enough to recognise at a glance. */
.compatible { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; font-size: var(--step-small); color: var(--gris); max-width: none; }
.compatible .so { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--negro); font-weight: 560; font-size: var(--step-body); }
.compatible .logo-so { width: 1.75rem; height: 1.75rem; }

/* ---------- Showcase: the order you type becomes the ticket ---------- */
.prueba h2 { max-width: 16ch; }
.prueba .tique { box-shadow: 0 1px 2px rgba(21, 25, 31, 0.08), 0 14px 30px -18px rgba(21, 25, 31, 0.3); }
.prueba .sub { margin-top: 1.25rem; max-width: 44ch; font-size: var(--step-lead); line-height: 1.35; }
.linea-comanda { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; align-items: baseline; gap: 0.1em; border-bottom: 0.06em solid rgba(21, 25, 31, 0.85); font-size: clamp(2.25rem, 7.4vw, 7.5rem); }
.linea-comanda input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 0 0.08em; font-size: 1em; font-weight: var(--peso-alto); letter-spacing: -0.035em; line-height: 1.05; color: var(--negro); caret-color: var(--negro); outline: none; }
.linea-comanda input::placeholder { color: rgba(21, 25, 31, 0.45); }
.linea-comanda:focus-within { border-bottom-color: var(--negro); }
.prueba-cuerpo { margin-top: clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.tique-col { grid-column: 1 / span 5; }
.ejemplos-col { grid-column: 7 / span 6; }
.ejemplos-col h3 { font-size: var(--step-lead); line-height: 1.2; }
.ejemplos { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ejemplos button { min-height: 44px; padding: 0.55rem 1rem; border-radius: var(--radius); background: rgba(21, 25, 31, 0.1); font-size: var(--step-body); text-align: left; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.ejemplos button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ejemplos button:hover { background: var(--negro); color: var(--blanco); } }
.ejemplos-col p { margin-top: 1.5rem; }
.ejemplos-col .carta { margin-top: 1.5rem; font-size: var(--step-small); columns: 2; column-gap: 1.5rem; }
.ejemplos-col .carta li { break-inside: avoid; display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.2rem 0; }
.ejemplos-col .carta li span:last-child { font-variant-numeric: tabular-nums; }

/* The ticket: paper with a torn edge, set in the product's own receipt layout. */
.tique { position: relative; max-width: 420px; background: var(--blanco); color: var(--negro); padding: 1.75rem 1.5rem 2.6rem; border-radius: 6px 6px 0 0; font-size: var(--step-small); line-height: 1.4; font-variant-numeric: tabular-nums; }
.tique::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px; background: linear-gradient(-45deg, transparent 9px, var(--blanco) 0) 0 0 / 18px 14px repeat-x, linear-gradient(45deg, transparent 9px, var(--blanco) 0) 0 0 / 18px 14px repeat-x; }
.tique .t-neg { text-align: center; font-weight: var(--peso-alto); font-size: var(--step-body); }
.tique .t-dir { text-align: center; color: var(--gris); font-size: var(--step-small); }
.tique .t-meta { display: flex; justify-content: space-between; margin-top: 0.9rem; padding-bottom: 0.6rem; border-bottom: 2px dashed #c9ced6; font-size: var(--step-small); color: var(--gris); }
.tique table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.tique td { padding: 0.28rem 0; vertical-align: top; }
.tique td.c { width: 2.2em; }
.tique td.p { text-align: right; white-space: nowrap; padding-left: 0.75rem; }
.tique tr.nuevo td { animation: t-entra 420ms var(--ease-out); }
@keyframes t-entra { from { background: var(--lima); } to { background: transparent; } }
.tique .t-falta { color: var(--gris); font-size: var(--step-small); padding-top: 0.4rem; }
.tique .t-suma { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 2px dashed #c9ced6; font-size: var(--step-small); color: var(--gris); }
.tique .t-suma div, .tique .t-total { display: flex; justify-content: space-between; }
.tique .t-total { margin-top: 0.5rem; font-size: var(--step-lead); font-weight: var(--peso-alto); letter-spacing: -0.02em; }
.tique .t-pie { margin-top: 0.9rem; text-align: center; font-size: var(--step-small); color: var(--gris); }
.tique .t-vacio { padding: 1rem 0; color: var(--gris); }
@media (max-width: 47.99em) {
  .linea-comanda { font-size: 9vw; }
  .tique-col, .ejemplos-col { grid-column: 1 / -1; }
  .ejemplos-col .carta { columns: 1; }
}

/* ---------- Features: rows on an axis, the real screens in the margin ---------- */
.funciones-cab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: end; }
.funciones-cab h2 { grid-column: 1 / span 7; }
.funciones-cab p { grid-column: 8 / span 5; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; margin-top: clamp(4rem, 8vw, 7rem); }
.fila .texto { grid-column: 1 / span 4; }
.fila figure { grid-column: 5 / span 8; }
.fila.giro .texto { grid-column: 9 / span 4; grid-row: 1; }
.fila.giro figure { grid-column: 1 / span 8; grid-row: 1; }
.fila figure.movil { grid-column: 6 / span 3; }
.fila.giro figure.movil { grid-column: 3 / span 3; }
.fila h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.025em; }
.fila .texto p { margin-top: 1rem; max-width: 36ch; }
.fila figure img { width: 100%; border-radius: 10px; background: #0d1014; }
.fila .extra { grid-column: 1 / -1; }
.lista-dia { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); }
.lista-dia li { padding: 1rem 0 1.25rem; border-top: 3px solid var(--negro); }
.lista-dia li strong { display: block; font-size: var(--step-lead); line-height: 1.2; margin-bottom: 0.35rem; }
@media (max-width: 63.99em) { .lista-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99em) {
  .funciones-cab h2, .funciones-cab p, .fila .texto, .fila.giro .texto, .fila figure, .fila.giro figure { grid-column: 1 / -1; grid-row: auto; }
  .fila { margin-top: 4rem; row-gap: 1.5rem; }
  .fila figure.movil, .fila.giro figure.movil { grid-column: 3 / span 8; }
  .lista-dia { grid-template-columns: 1fr; }
}

/* ---------- How it works: the stages as one progress bar ---------- */
.pasos h2 { max-width: 14ch; }
.pasos .sub { margin-top: 1.25rem; font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.barra { margin-top: 4rem; display: flex; gap: 6px; min-height: 22vh; }
.barra > div { display: flex; flex-direction: column; min-width: 0; }
.barra .seg { flex: 1; border-radius: var(--radius); padding: 20px; font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: var(--peso-alto); line-height: 1.1; min-height: 22vh; }
.barra .s1, .barra .s2, .barra .s3 { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 1px var(--paso); }
.barra .s4 { background: var(--negro); color: var(--blanco); }
.barra p { margin-top: 1rem; max-width: 24ch; font-size: var(--step-body); }
.barra p strong { display: block; font-size: var(--step-lead); }
.js .barra .seg { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js .barra[data-reveal] .seg { transform: scaleX(0.02); transition: transform 1000ms var(--ease-in-out); }
  .js .barra[data-reveal] > div:nth-child(2) .seg { transition-delay: 160ms; }
  .js .barra[data-reveal] > div:nth-child(3) .seg { transition-delay: 320ms; }
  .js .barra[data-reveal] > div:nth-child(4) .seg { transition-delay: 480ms; }
  .js .barra[data-reveal].is-in .seg { transform: none; }
}
.pasos .tras { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; }
.pasos .tras > div { grid-column: span 4; }
.pasos .tras h3 { font-size: var(--step-lead); line-height: 1.2; }
.pasos .tras p { margin-top: 0.5rem; }
@media (max-width: 47.99em) {
  .barra { flex-direction: column; min-height: 0; }
  .barra > div { flex: none !important; }
  .barra .seg { min-height: 72px; }
  .js .barra .seg { transform-origin: top center; }
  .pasos .tras > div { grid-column: 1 / -1; }
}

/* ---------- Pricing: two plans, two fields meeting at a hard edge ---------- */
#precios { background: var(--blanco); border-top: 1px solid var(--paso); padding: clamp(4.5rem, 9vw, 8rem) var(--margin); }
.precios { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.plan { padding: clamp(1.75rem, 3.2vw, 3rem); display: flex; flex-direction: column; border-radius: var(--radius); background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 1px var(--paso); }
.plan.izq { grid-column: 1 / span 6; }
.plan.der { grid-column: 7 / span 6; box-shadow: inset 0 0 0 2px var(--negro); }
.plan h2 { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.plan .para { margin-top: 1rem; font-size: var(--step-lead); line-height: 1.35; max-width: 28ch; }
.plan .incluye { margin-top: 1.75rem; max-width: 44ch; }
.plan .pie-plan { margin-top: auto; padding-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.plan .cifra { font-size: clamp(3.5rem, 2rem + 4.5vw, 6rem); font-weight: var(--peso-alto); line-height: 0.85; letter-spacing: -0.05em; }
.plan .cifra small { font-size: var(--step-body); letter-spacing: 0; font-weight: var(--peso); margin-left: 0.4rem; }
.plan .alterna { margin-top: 0.9rem; font-size: var(--step-body); }
.precios-nota { grid-column: 1 / -1; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; }
.precios-nota > p { grid-column: span 4; max-width: none; font-size: var(--step-body); }
@media (max-width: 47.99em) {
  .plan.izq, .plan.der { grid-column: 1 / -1; }
  .plan.der { order: -1; }
  .plan .pie-plan .boton { width: 100%; }
  .precios-nota > p { grid-column: 1 / -1; }
}

/* ---------- FAQ: filled tiles, one open at a time ---------- */
.preguntas .grid { align-items: start; row-gap: 2rem; }
.preguntas h2 { grid-column: 1 / span 4; position: sticky; top: 6rem; font-size: clamp(2.25rem, 1rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.03em; }
.preguntas .lista { grid-column: 5 / span 8; display: grid; gap: 8px; }
.preguntas details { background: var(--paso); border-radius: var(--radius); transition: background-color 240ms ease, color 240ms ease; }
.preguntas details[open] { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.preguntas summary { list-style: none; cursor: pointer; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 24px; font-size: var(--step-lead); font-weight: 560; line-height: 1.25; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas .mas { position: relative; flex: none; width: 16px; height: 16px; }
.preguntas .mas::before, .preguntas .mas::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out); }
.preguntas .mas::after { transform: rotate(90deg); }
.preguntas details[open] .mas::after { transform: rotate(0deg); }
.preguntas .resp { padding: 0 24px 24px; max-width: 60ch; font-size: var(--step-body); }
.preguntas .resp p { max-width: 52ch; }
.f-papel.preguntas details:not([open]) { background: var(--blanco); }
@media (max-width: 47.99em) {
  .preguntas h2, .preguntas .lista { grid-column: 1 / -1; position: static; }
  .preguntas .lista { gap: 6px; }
  .preguntas summary { font-size: var(--step-body); min-height: 64px; padding: 0.9rem 20px; }
  .preguntas .resp { padding: 0 20px 20px; font-size: var(--step-small); }
}

/* ---------- Downloads: one card per system, the visitor's own first ---------- */
.cierre-cab .lead { margin-top: 1rem; color: var(--gris); }
.descargas-lista { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.descarga { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: var(--radius); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--paso); }
.descarga .logo-so { width: 3rem; height: 3rem; }
.descarga h3 { font-size: var(--step-lead); line-height: 1.15; }
.descarga p { margin-top: 0.35rem; font-size: var(--step-small); color: var(--gris); }
.descarga .boton { margin-top: auto; align-self: stretch; }
.descarga[data-so="handy"] .boton { background: var(--papel); color: var(--negro); box-shadow: inset 0 0 0 1px var(--paso); }
.descarga.es-tuyo { box-shadow: inset 0 0 0 2px var(--negro); }
.descarga.es-tuyo::before { content: 'Para tu equipo'; position: absolute; top: 1.75rem; right: 1.75rem; font-size: var(--step-small); font-weight: var(--peso-alto); }
.cierre-compra { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--paso); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
@media (max-width: 63.99em) {
  .descargas-lista { grid-template-columns: 1fr; }
  .descarga { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .descarga > div { flex: 1; min-width: 12rem; }
  .descarga .boton { margin-top: 0; flex-basis: 100%; }
  .descarga.es-tuyo::before { top: 0.75rem; right: 1rem; }
}

/* ---------- Footer: the name first ---------- */
.pie { background: var(--papel); color: var(--negro); overflow: hidden; padding-bottom: 2rem; border-top: 1px solid var(--paso); }
.pie-nombre { font-size: clamp(3rem, 12vw, 10rem); font-weight: var(--peso-alto); letter-spacing: -0.055em; line-height: 0.8; margin: 0 0 0 -0.04em; padding-top: 0.12em; white-space: nowrap; }
.pie-lema { margin-top: 1.25rem; font-size: var(--step-lead); font-weight: var(--peso-alto); }
.pie .grid { margin-top: 4.5rem; row-gap: 2.5rem; }
.pie .lugares { grid-column: 1 / span 5; display: grid; gap: 0.4rem; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); line-height: 1.2; font-weight: var(--peso-alto); letter-spacing: -0.02em; }
.pie .lugares a { text-decoration: none; }
.pie .lugares .dir { font-size: var(--step-body); font-weight: var(--peso); letter-spacing: 0; margin-top: 0.6rem; }
.pie .cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pie .cols h3 { font-size: var(--step-small); }
.pie .cols ul { list-style: none; padding: 0; margin-top: 0.6rem; display: grid; gap: 0.4rem; font-size: var(--step-small); }
.pie .cols a { text-decoration: none; }
.pie .final { margin-top: 5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: var(--step-small); }
@media (max-width: 63.99em) {
  .pie .lugares, .pie .cols { grid-column: 1 / -1; }
  .pie .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Inner pages ---------- */
.p-hero { padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: 0; overflow: hidden; }
.migas { font-size: var(--step-small); }
.migas ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.migas li + li::before { content: '›'; margin-right: 0.4rem; }
.migas a { text-decoration: none; }
.p-hero h1 { margin-top: 1.25rem; max-width: 13ch; }
.p-hero .lead { margin-top: 1.75rem; max-width: 40ch; }
.p-hero .acciones { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; }
.p-hero .acciones .nota { font-size: var(--step-small); }
.p-hero figure { margin-top: clamp(3rem, 6vw, 5rem); }
.p-hero figure img, .p-hero figure video { display: block; width: 100%; height: auto; border-radius: var(--radius) var(--radius) 0 0; background: #0d1014; }
.p-hero figure.movil-par { display: flex; gap: var(--gutter); justify-content: flex-end; }
.p-hero figure.movil-par img { width: min(30%, 300px); border-radius: var(--radius) var(--radius) 0 0; }
.cap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.cap h2 { grid-column: 1 / span 12; max-width: 18ch; font-size: clamp(2rem, 1rem + 3.2vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
.cap .cuerpo { grid-column: 1 / span 6; }
.cap.sin-fig h2 { grid-column: 1 / span 5; }
.cap.sin-fig .cuerpo { grid-column: 6 / -1; }
.cap.sin-fig .cuerpo p { max-width: 64ch; }
.cap .cuerpo h3 { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.2; }
.cap .cuerpo h3 + p { margin-top: 0.5rem; }
.cap .cuerpo ul { margin-top: 0.9rem; padding-left: 1.1em; }
.cap .cuerpo li + li { margin-top: 0.35rem; }
.cap .cuerpo p + ul, .cap .cuerpo ul + p { margin-top: 0.9rem; }
.cap figure { grid-column: 8 / span 5; }
.cap figure.movil { grid-column: 9 / span 3; }
.cap figure img { width: 100%; border-radius: 10px; background: #0d1014; }
.cap figcaption { margin-top: 0.75rem; font-size: var(--step-small); opacity: 0.8; }
.tabla { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { text-align: left; padding: 0.8rem 0.9rem 0.8rem 0; border-top: 2px solid currentColor; vertical-align: top; }
.tabla thead th { border-top: 0; font-size: var(--step-small); }
.tabla td:last-child, .tabla th:last-child { text-align: right; padding-right: 0; }
.legal .cuerpo h2 { grid-column: auto; margin-top: 2.5rem; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; max-width: none; }
.legal .cuerpo h2:first-child { margin-top: 0; }
.legal .cuerpo h2 + p { margin-top: 0.6rem; }
@media (max-width: 47.99em) {
  .cap .cuerpo, .cap.sin-fig h2, .cap.sin-fig .cuerpo, .cap figure { grid-column: 1 / -1; }
  .p-hero h1.display { font-size: 10.6vw; }
  .cap figure.movil { grid-column: 3 / span 8; }
  .p-hero figure.movil-par img { width: 46%; }
}

/* ---------- Entrances (content stays visible without script) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: sube 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .barra[data-reveal] { opacity: 1; transform: none; }
  .js .cortina[data-reveal] img { transform: scale(1.04); transition: transform 1400ms var(--ease-soft); }
  .js .cortina[data-reveal].is-in img { transform: none; }
}
@keyframes sube { to { opacity: 1; transform: none; } }
.legal .cap .cuerpo { grid-column: 1 / span 8; }
@media (max-width: 47.99em) { .legal .cap .cuerpo { grid-column: 1 / -1; } }
@media (min-width: 64em) {
  .p-hero.con-moviles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .p-hero.con-moviles > :not(figure) { grid-column: 1 / span 7; }
  .p-hero.con-moviles > figure.movil-par { grid-column: 8 / -1; grid-row: 1 / span 4; align-self: end; margin-top: 0; justify-content: flex-start; }
  .p-hero.con-moviles > figure.movil-par img { width: 48%; }
}
.tabla td:last-child { white-space: nowrap; }
/* Video with its pause control. */
.video { position: relative; }
.video .pausa { position: absolute; z-index: 2; right: 12px; bottom: 12px; min-height: 44px; padding: 0 1rem; border-radius: var(--radius); background: rgba(21, 25, 31, 0.82); color: var(--blanco); font-size: var(--step-small); font-weight: var(--peso-alto); }
.video .pausa:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.p-hero .video video { display: block; width: 100%; height: auto; border-radius: var(--radius) var(--radius) 0 0; background: #0d1014; }
/* Keyboard: the order line shows its focus. */
.linea-comanda:focus-within { outline: 3px solid var(--negro); outline-offset: 8px; border-radius: 4px; }
/* WordPress admin bar (only when logged in): the fixed header goes below it. */
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }

/* Cookie notice: a small card at the bottom, both answers equally easy. */
.aviso-cookies { position: fixed; z-index: 60; left: var(--margin); right: var(--margin); bottom: max(1rem, env(safe-area-inset-bottom)); max-width: 36rem; margin-left: auto; display: grid; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--blanco); color: var(--negro); border: 1px solid var(--paso); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(21, 25, 31, 0.16); font-size: var(--step-small); line-height: 1.5; }
.aviso-cookies p { margin: 0; }
.aviso-botones { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.aviso-botones .boton { min-height: 44px; flex: 1 1 8rem; justify-content: center; }

/* Las dos versiones (hostelería y comercio), en la portada. */
.versiones .sub { max-width: 46rem; }
.versiones-lista { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.version { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--paso); }
.version figure { margin: 0 0 0.5rem; border-radius: calc(var(--radius) * 0.75); overflow: hidden; box-shadow: inset 0 0 0 1px var(--paso); }
.version figure img { display: block; width: 100%; height: auto; }
.version .etiqueta { font-size: var(--step-small); font-weight: var(--peso-alto); }
.version h3 { font-size: var(--step-lead); line-height: 1.15; }
.version ul { margin: 0; padding-left: 1.1rem; color: var(--gris); }
.version li + li { margin-top: 0.3rem; }
.version .acciones { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 0.5rem; }
@media (max-width: 47.99em) { .versiones-lista { grid-template-columns: 1fr; } }
/* Las descargas, por versión. */
.descargas-grupo { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--step-lead); line-height: 1.15; }
.descargas-grupo span { margin-left: 0.5rem; font-size: var(--step-small); font-weight: 400; color: var(--gris); }
.descargas-grupo + .descargas-lista { margin-top: 1rem; }
.descarga[data-so="escaner"] .boton { background: var(--papel); color: var(--negro); box-shadow: inset 0 0 0 1px var(--paso); }