/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg-muted); line-height: 1.5; touch-action: manipulation; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: none; opacity: 0.7; }
button { text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
small { color: var(--color-text-muted); font-size: var(--text-xs); }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-border-soft); padding: 2px 5px; border-radius: var(--radius-sm); }

/* Layout shells */
.app-body { background: var(--color-bg-muted); min-height: 100vh; display: flex; flex-direction: column; }
.app-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-5); height: var(--header-h); display: flex; align-items: center; gap: var(--space-5); }
.app-header__brand { font-weight: 700; }
.app-header__nav { display: flex; gap: var(--space-4); flex: 1; }
.app-header__user { display: flex; align-items: center; gap: var(--space-3); }
.app-main { flex: 1; max-width: var(--container-max); width: 100%; margin: 0 auto; padding: var(--space-5); }
.app-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); text-align: center; color: var(--color-text-muted); }

.public-body { background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; }
.public-header { padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; }
.public-header__brand { font-weight: 700; font-size: var(--text-lg); }
.public-main { flex: 1; padding: var(--space-6) var(--space-5); }
.public-footer { padding: var(--space-4); text-align: center; color: var(--color-text-muted); }

.auth-body { background: var(--color-bg-muted); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-main { width: 100%; max-width: 380px; padding: var(--space-5); }
.auth-brand { display: block; text-align: center; font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-5); color: var(--color-text); }
.auth-card { background: var(--color-surface); padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.auth-card__title { font-size: var(--text-xl); margin-bottom: var(--space-5); }

/* Hero (landing) */
.hero { max-width: 720px; margin: var(--space-7) auto; text-align: center; padding: var(--space-5); }
.hero__title { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.hero__subtitle { color: var(--color-text-muted); font-size: var(--text-md); margin-bottom: var(--space-5); }

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.page-header__subtitle { color: var(--color-text-muted); margin: 0; }

/* Buttons */
.btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-size: var(--text-base); font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg-muted); }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-md); }
.btn--block { display: block; width: 100%; text-align: center; }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form--full { max-width: 720px; }
.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__field--checkbox { flex-direction: row; align-items: center; gap: var(--space-2); }
.form__label { font-size: var(--text-sm); font-weight: 500; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="url"], .form select, .form textarea {
    width: 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-base); font-family: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--color-primary); }
.form__actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Editor de imagen del producto (fase 17) — preview + file input lado a lado. */
.product-image-editor { display: flex; gap: var(--space-4); align-items: flex-start; }
.product-image-editor__preview { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-bg-muted); flex-shrink: 0; }
.product-image-editor__controls { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; }
@media (max-width: 520px) { .product-image-editor { flex-direction: column; } }

/* Cards & grid */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.card--link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.card--link:hover { box-shadow: var(--shadow); text-decoration: none; }
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Metrics dashboard (Fase 13) --- */
.metric-section { margin-bottom: var(--space-6); }
.metric-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); gap: var(--space-3); flex-wrap: wrap; }
.metric-section__head h2 { font-size: var(--text-xl); margin: 0; }
.metric-total { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; }
.metric-total span { color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums; }

.metric-cards { gap: var(--space-3); }
.metric-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-left: 4px solid var(--color-border); }
.metric-card__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.metric-card__count { font-size: var(--text-3xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.metric-card--pendiente_validacion_fisica { border-left-color: var(--color-warning); }
.metric-card--recibido    { border-left-color: var(--color-info); }
.metric-card--preparando  { border-left-color: var(--color-info); }
.metric-card--en_horno    { border-left-color: var(--color-warning); }
.metric-card--listo       { border-left-color: var(--color-success); }
.metric-card--entregado   { border-left-color: var(--color-success); opacity: .75; }
.metric-card--cancelada   { border-left-color: var(--color-error); opacity: .6; }

.metric-table th.num, .metric-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.metric-empty { text-align: center; color: var(--color-text-soft); font-style: italic; padding: var(--space-4) !important; }

.metric-chart-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); height: 300px; position: relative; }

/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border-soft); }
.table th { background: var(--color-bg-muted); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.table tr:last-child td { border-bottom: none; }

/* Alerts */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }
.alert--error { background: var(--color-error-bg); color: var(--color-error); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.alert--info { background: var(--color-info-bg); color: var(--color-info); }

/* Badge */
.badge { display: inline-block; padding: 2px 8px; background: var(--color-bg-muted); color: var(--color-text-muted); border-radius: 999px; font-size: var(--text-xs); font-weight: 500; }
.badge--ok { background: var(--color-success-bg); color: var(--color-success); }

/* Empty state */
.empty-state { padding: var(--space-7); text-align: center; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }

/* Pagination — usada en /admin/pedidos (fase 33) */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.pagination__status { color: var(--color-text-muted); font-size: var(--text-sm); }
.pagination .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Breadcrumbs */
.breadcrumbs { display: flex; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* Help center */
.help-section__title { margin-top: var(--space-5); margin-bottom: var(--space-2); font-size: var(--text-md); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.help-list { list-style: none; padding: 0; margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.help-list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.help-list li:last-child { border-bottom: none; }
.help-article { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 720px; }
.help-article__body { margin: var(--space-5) 0; line-height: 1.7; }
.help-article__meta { display: block; margin-top: var(--space-5); color: var(--color-text-soft); }

/* Lab */
.lab-list { list-style: none; padding: 0; }
.lab-list li { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: var(--space-2); }
.lab-frame { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }

/* Staff — panels de estación (device-locked) */
.staff-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
.staff-wrap h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.staff-wrap pre { background: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); overflow-x: auto; font-size: var(--text-sm); }
.staff-wrap pre code { background: transparent; padding: 0; }

/* Fase 18: input del OTP — grande, centrado, monospace para que se lea claro */
.staff-otp-input {
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    letter-spacing: 0.4em;
    text-align: center;
}
.staff-otp-input:focus { outline: none; border-color: var(--color-primary); }
/* Espacio entre form principal y "reenviar el código" */
.staff-form + .staff-form--resend { margin-top: var(--space-3); }

/* ============================================================
   Fase 23: los paneles de staff (recepción, entrega, cocina)
   pasaron al look editorial definido en assets/css/staff.css,
   scoped a body.panel-body. Reglas .panel*, .action-card*,
   .bottom-nav*, .session-sheet*, .history*, .kitchen*, .reception*
   fueron removidas de acá y migradas a .staff-* en staff.css.

   Se mantienen sólo utilidades reutilizadas por el resto del
   admin (btn--secondary, btn--danger, badge--info).
   ============================================================ */

/* btn--secondary — usada en /admin/negocio */
.btn--secondary { background: var(--color-bg-muted); color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover { background: var(--color-border-soft); }
/* btn--danger — usada en /admin/negocio (zona peligro) */
.btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
/* badge--info — usada en /admin/negocio */
.badge--info { background: var(--color-info-bg); color: var(--color-info); }

/* Onboarding — 2 pasos + confirmación (fase 6a) */
.onboard { max-width: 460px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.onboard__steps { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; gap: var(--space-2); justify-content: center; }
.onboard__step { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-sm); background: var(--color-bg-muted); color: var(--color-text-muted); border: 2px solid transparent; }
.onboard__step.is-done { background: var(--color-success-bg); color: var(--color-success); }
.onboard__step.is-current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.onboard__head { text-align: center; }
.onboard__title { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.onboard__lead { color: var(--color-text-muted); margin: 0; }
.onboard__phone { gap: var(--space-2); }
.onboard__phone-row { display: flex; align-items: stretch; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.onboard__phone-row:focus-within { border-color: var(--color-primary); }
.onboard__phone-prefix { background: var(--color-bg-muted); color: var(--color-text-muted); padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--text-md); border-right: 1px solid var(--color-border); display: flex; align-items: center; }
.onboard__phone-row input { flex: 1; border: none; padding: var(--space-3); font-size: var(--text-lg); font-family: var(--font-mono); letter-spacing: .5px; }
.onboard__phone-row input:focus { outline: none; }
.onboard__phone-pill { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-bg-muted); padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-3) auto 0; }
.onboard__reset { display: inline; margin: 0; }
.onboard__reset-btn { background: none; border: none; color: var(--color-primary); font-size: var(--text-xs); font-weight: 500; cursor: pointer; padding: 0; }

/* Order — Estación 1 (self-service público) */
.order-wrap { max-width: 560px; margin: 0 auto; padding: var(--space-4); }
.order-wrap--confirm { max-width: 420px; }
.order-head { text-align: center; margin-bottom: var(--space-5); }
.order-head__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.order-head__lead { color: var(--color-text-muted); margin: 0; }

.order-form { gap: var(--space-5); }
.order-form__fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.order-form__legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; padding: 0; }

.order-products { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.order-product { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.order-product:has(input:checked) { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.order-product input { margin-top: 4px; accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; }
.order-product__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.order-product__name { font-weight: 600; font-size: var(--text-md); }
.order-product__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.order-product__cost { color: var(--color-primary); font-size: var(--text-sm); font-weight: 500; margin-top: var(--space-1); }

.order-qty { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.order-qty__opt { display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; font-size: var(--text-lg); font-weight: 600; transition: border-color .15s; }
.order-qty__opt input { position: absolute; opacity: 0; pointer-events: none; }
.order-qty__opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.order-qty__hint { text-align: center; color: var(--color-text-muted); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.order-qty__hint strong { color: var(--color-text); font-size: var(--text-md); }

/* Fase 10 — multi-producto: card con selector inline */
.order-products--multi { gap: var(--space-3); }
.order-product--row { align-items: center; cursor: default; }
.order-product--row .order-product__body { padding-right: var(--space-3); }
.order-product--row.is-selected { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.order-product__qty { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.order-product__qty-btn { width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--color-border); background: var(--color-surface); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); cursor: pointer; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
.order-product__qty-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.order-product__qty-btn:active { transform: scale(.96); }
.order-product__qty-count { width: 42px; text-align: center; font-size: var(--text-lg); font-weight: 700; font-family: var(--font-mono); background: transparent; border: none; padding: 0; color: var(--color-text); -moz-appearance: textfield; }
.order-product__qty-count::-webkit-outer-spin-button, .order-product__qty-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.order-product__qty-count:focus { outline: none; }

.order-cart-summary { background: var(--color-bg-muted); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.order-cart-summary__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-md); }
.order-cart-summary__row strong { font-family: var(--font-mono); font-weight: 700; }
.order-cart-summary__hint { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }

/* Fase 09 — panel de accesos */
.access-group { margin-bottom: var(--space-6); }
.access-group__head { margin-bottom: var(--space-3); }
.access-group__title { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.access-group__lead { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.access-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.access-item { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.access-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.access-item__title { font-weight: 600; font-size: var(--text-md); }
.access-item__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.access-item__url { display: inline-block; margin-top: var(--space-1); font-size: var(--text-sm); word-break: break-all; }
.access-item__url code { background: var(--color-bg-muted); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); }
.access-item__url--sensitive { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.access-item__reveal { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: var(--text-sm); font-weight: 500; padding: 0; }

/* Order — confirmación con QR */
.order-confirm { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; box-shadow: var(--shadow); }
.order-confirm__num { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.order-confirm__num small { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); }
.order-confirm__num strong { font-size: var(--text-3xl); font-weight: 700; letter-spacing: .02em; }
.order-confirm__qr { display: flex; justify-content: center; margin: var(--space-5) 0; min-height: 200px; }
.order-confirm__qr img, .order-confirm__qr canvas { border-radius: var(--radius); max-width: 100%; height: auto; }
.order-confirm__cta { margin-top: var(--space-4); }
.order-confirm__lead { font-size: var(--text-md); margin-bottom: var(--space-2); }
.order-confirm__lead strong { color: var(--color-primary); }
.order-confirm__meta { color: var(--color-text-muted); margin: 0; font-size: var(--text-sm); }
.order-confirm__foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
.order-confirm__foot small { color: var(--color-text-muted); }

/* Order — progreso mientras está en cocina (recibido→empaquetado) */
.order-progress { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); text-align: center; }
.order-progress__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.order-progress__head small { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); }
.order-progress__head strong { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; }
.order-progress__now { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: 600; margin: var(--space-4) 0; color: var(--color-primary); }
.order-progress__steps { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-4); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.order-progress__step { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .35; transition: opacity .3s; }
.order-progress__step.is-done { opacity: .6; }
.order-progress__step.is-current { opacity: 1; }
.order-progress__icon { font-size: var(--text-xl); }
.order-progress__step.is-current .order-progress__icon { transform: scale(1.15); }
.order-progress__label { font-size: 10px; color: var(--color-text-muted); text-align: center; line-height: 1.2; }
.order-progress__step.is-current .order-progress__label { color: var(--color-primary); font-weight: 600; }
.order-progress__step.is-done .order-progress__label { color: var(--color-success); }
.order-progress__meta { color: var(--color-text-muted); margin: 0; font-size: var(--text-sm); }
.order-progress__hint { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); }

/* ETA card en la vista del cliente (fase 8) */
.order-progress__eta { display: inline-flex; align-items: center; gap: 8px; background: var(--color-bg-muted); border-radius: 999px; padding: 8px 16px; margin: var(--space-3) auto; font-size: var(--text-md); }
.order-progress__eta strong { color: var(--color-primary); font-family: var(--font-mono); font-size: var(--text-lg); }
.order-progress__eta-icon { font-size: 18px; }

/* Order — "listo para retirar" (celebra fuerte) */
.order-ready { background: var(--color-success); color: white; border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5); text-align: center; box-shadow: var(--shadow); }
.order-ready__badge { font-size: 64px; margin-bottom: var(--space-3); }
.order-ready__title { color: white; font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.order-ready__num { font-size: var(--text-md); margin: var(--space-2) 0; }
.order-ready__num strong { font-family: var(--font-mono); font-size: var(--text-xl); background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: var(--radius); }
.order-ready__meta { color: rgba(255,255,255,0.85); font-size: var(--text-sm); margin-top: var(--space-3); }
.order-ready__qr { display: flex; justify-content: center; margin: var(--space-5) auto var(--space-3); background: #fff; padding: var(--space-3); border-radius: var(--radius); min-height: 200px; width: fit-content; max-width: 100%; box-sizing: border-box; }
.order-ready__qr img, .order-ready__qr canvas { border-radius: 4px; max-width: 100%; height: auto; }
.order-ready__hint { color: rgba(255,255,255,0.85); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Display — pantalla pública del mostrador (fase 5 · rewrite fase 21)
   Dark editorial: warm ink sobre negro puro, DM Sans, verde quieto, wordmark ghost.
   Diseñada para TV/monitor grande — desde 5 metros el número debe cantar.
   Densidad adaptativa con :has() — cuando la cola crece, los chips achican solos
   para que 30+ pedidos entren sin scroll (las TVs no scrollean). */
.display-body {
    /* Tokens locales dsp-* (no colisionan con tokens.css). */
    --dsp-bg:        #0A0A0A;
    --dsp-bg-elev:   #141414;
    --dsp-bg-panel:  #F1EDE6;
    --dsp-ink:       #F5F1EA;
    --dsp-ink-2:     #C9C4BC;
    --dsp-ink-3:     #6E6B65;
    --dsp-ink-4:     #3A3835;
    --dsp-hairline:  rgba(245,241,234,0.06);
    --dsp-green:     #4ADE80;
    --dsp-green-ink: #0A1F11;
    --dsp-gutter:    clamp(16px, 2vw, 32px);
    --dsp-radius-lg: 28px;
    --dsp-radius-md: 20px;
    --dsp-radius-sm: 14px;
    --dsp-chip-min:  clamp(140px, 14vw, 200px);
    --dsp-num-size:  clamp(60px, 6.5vw, 120px);

    margin: 0; padding: 0;
    background: var(--dsp-bg); color: var(--dsp-ink);
    font-family: var(--font-sans);
    overflow: hidden; height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}
/* Micro-noise fixed overlay — mismo lenguaje que el flow editorial. */
.display-body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
}
.display {
    position: relative; z-index: 1;
    display: grid; grid-template-rows: auto 1fr;
    height: 100vh;
    padding: var(--dsp-gutter);
    gap: var(--dsp-gutter);
    box-sizing: border-box;
    overflow: hidden;
}

/* Header: logo + título editorial + ETA pill + reloj */
.display__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: clamp(16px, 2vw, 32px);
}
.display__brand {
    display: flex; align-items: center;
    gap: clamp(12px, 1.4vw, 20px);
    min-width: 0;
}
.display__logo {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(44px, 3.6vw, 64px); height: clamp(44px, 3.6vw, 64px);
    background: var(--dsp-ink); color: var(--dsp-bg);
    border-radius: 14px;
}
.display__logo svg { width: 60%; height: 60%; }
.display__title {
    margin: 0;
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 500;
    font-size: clamp(24px, 2.6vw, 44px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--dsp-ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.display__title em {
    font-style: italic;
    font-variation-settings: "opsz" 40, "wght" 400;
    color: var(--dsp-ink-2);
}
.display__head-meta {
    display: flex; align-items: center;
    gap: clamp(12px, 1.5vw, 24px);
    flex-shrink: 0;
}
.display__eta {
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.4vw, 22px); font-weight: 500;
    color: var(--dsp-ink); background: var(--dsp-bg-elev);
    border: 1px solid var(--dsp-hairline);
    border-radius: 999px;
    padding: clamp(8px, 0.9vw, 12px) clamp(16px, 1.6vw, 22px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.display__clock {
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 500;
    font-size: clamp(22px, 2.4vw, 40px);
    font-variant-numeric: tabular-nums;
    color: var(--dsp-ink-2);
    letter-spacing: -0.02em;
}

/* Body: 2 columnas de cola + side QR */
.display__body {
    display: grid;
    grid-template-columns: 3fr 3fr 1.2fr;
    gap: var(--dsp-gutter);
    min-height: 0;
}

.display__col {
    background: var(--dsp-bg-elev);
    border: 1px solid var(--dsp-hairline);
    border-radius: var(--dsp-radius-lg);
    padding: clamp(20px, 2vw, 32px);
    display: flex; flex-direction: column;
    gap: clamp(16px, 1.4vw, 24px);
    min-height: 0;
    overflow: hidden;
}
.display__col--ready {
    background: linear-gradient(180deg, #0F2A18 0%, #0A1F11 100%);
    border-color: var(--dsp-green);
}
.display__col-head {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--dsp-hairline);
    padding-bottom: clamp(12px, 1.2vw, 20px);
}
.display__col-title {
    margin: 0;
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 500;
    font-size: clamp(22px, 2.2vw, 36px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--dsp-ink);
    font-weight: 500;
}
.display__col-title em {
    font-style: italic;
    font-variation-settings: "opsz" 40, "wght" 400;
    color: var(--dsp-ink-2);
}
.display__col--ready .display__col-title em { color: rgba(255,255,255,0.7); }
.display__col-count {
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 700;
    font-size: clamp(22px, 2.2vw, 36px);
    font-variant-numeric: tabular-nums;
    color: var(--dsp-ink-3);
    letter-spacing: -0.03em;
}
.display__col-count--ready { color: var(--dsp-green); }

/* Grid de chips — chip-min y num-size se ajustan via :has() en densidad alta */
.display__list {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dsp-chip-min), 1fr));
    gap: clamp(10px, 1vw, 16px);
    overflow: hidden; /* NO scroll — la densidad adaptativa se encarga */
    align-content: start;
}
.display__chip {
    background: rgba(245,241,234,0.05);
    color: var(--dsp-ink);
    border: 1px solid var(--dsp-hairline);
    border-radius: var(--dsp-radius-md);
    padding: clamp(14px, 1.4vw, 22px) clamp(10px, 1vw, 16px);
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(4px, 0.5vw, 8px);
    line-height: 1;
}
.display__chip-num {
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 700;
    font-size: var(--dsp-num-size);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--dsp-ink);
}
.display__chip-eta {
    font-family: var(--font-sans);
    font-size: clamp(11px, 1.1vw, 18px); font-weight: 500;
    color: var(--dsp-ink-2);
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}
.display__chip-items {
    font-family: var(--font-sans);
    font-size: clamp(10px, 0.9vw, 14px); font-weight: 400;
    color: var(--dsp-ink-3);
    line-height: 1.35;
    margin-top: 4px;
    text-align: center; word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Listos: verde quieto (sin glow neón). Pulse sutil solo al aparecer. */
.display__chip--ready {
    background: var(--dsp-green);
    border-color: var(--dsp-green);
    color: var(--dsp-green-ink);
}
.display__chip--ready .display__chip-num { color: var(--dsp-green-ink); }
.display__chip--ready .display__chip-items { color: rgba(10,31,17,0.7); }
.display__chip.is-new { animation: display-appear 0.6s cubic-bezier(0.32, 0.72, 0, 1); }
.display__chip--ready.is-new { animation: display-appear-ready 0.8s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes display-appear {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes display-appear-ready {
    0%   { transform: scale(0.85); opacity: 0; box-shadow: 0 0 0 rgba(74,222,128,0); }
    50%  { transform: scale(1.04); opacity: 1; box-shadow: 0 0 60px rgba(74,222,128,0.6); }
    100% { transform: scale(1);    opacity: 1; box-shadow: 0 0 0 rgba(74,222,128,0); }
}

/* Empty state amigable — dos líneas editorial */
.display__empty {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px;
    text-align: center;
    padding: clamp(32px, 4vw, 80px) 0;
}
.display__empty-title {
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 500;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 40px);
    color: var(--dsp-ink-2);
    letter-spacing: -0.02em;
}
.display__empty-sub {
    font-size: clamp(13px, 1.1vw, 18px);
    color: var(--dsp-ink-3);
    letter-spacing: -0.005em;
}

/* Side: QR grande + eyebrow + hint editorial */
.display__side {
    background: var(--dsp-bg-panel);
    color: var(--dsp-bg);
    border-radius: var(--dsp-radius-lg);
    padding: clamp(20px, 2vw, 32px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: clamp(14px, 1.4vw, 22px);
    text-align: center;
    overflow: hidden;
}
.display__side-eyebrow {
    font-family: var(--font-sans);
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--dsp-ink-3);
}
.display__qr {
    background: #fff;
    padding: clamp(12px, 1vw, 18px);
    border-radius: var(--dsp-radius-sm);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.25);
}
.display__qr img,
.display__qr canvas { display: block; max-width: 100%; height: auto; }
.display__side-text {
    display: flex; flex-direction: column;
    gap: 6px;
    max-width: 100%;
}
.display__side-text strong {
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 600;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--dsp-bg);
    font-weight: 600;
}
.display__side-cue {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(12px, 1.1vw, 17px);
    color: #6E6B65;
    letter-spacing: -0.005em;
}

/* Wordmark ghost al pie — coherente con footer editorial del flow */
.display__wordmark {
    position: absolute;
    bottom: calc(var(--dsp-gutter) * -0.5);
    left: 0; right: 0;
    text-align: center;
    font-family: var(--font-sans);
    font-variation-settings: "opsz" 40, "wght" 700;
    font-size: clamp(140px, 20vw, 320px);
    line-height: 0.82;
    letter-spacing: -0.06em;
    color: var(--dsp-ink);
    opacity: 0.03;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}

/* ============================================================
   Densidad adaptativa — sin JS, con :has() (Chrome/Safari 2022+).
   Al superar 15 chips en la lista, se achican y se pierde ETA + items
   para que 30-40 entren sin scroll. La columna Listo se afecta menos
   porque los pedidos listos son los críticos de leer.
   ============================================================ */
.display__list:has(> .display__chip:nth-child(16)) {
    --dsp-chip-min: clamp(100px, 10vw, 140px);
    --dsp-num-size: clamp(44px, 4.5vw, 72px);
}
.display__list:has(> .display__chip:nth-child(16)) .display__chip-eta,
.display__list:has(> .display__chip:nth-child(16)) .display__chip-items {
    display: none;
}
.display__list:has(> .display__chip:nth-child(16)) .display__chip {
    padding: clamp(10px, 1vw, 16px) clamp(6px, 0.8vw, 12px);
}
/* Densidad extrema: 25+ pedidos → chips aún más chicos */
.display__list:has(> .display__chip:nth-child(25)) {
    --dsp-chip-min: clamp(80px, 8vw, 110px);
    --dsp-num-size: clamp(34px, 3.5vw, 54px);
}

@media (max-width: 900px) {
    .display__body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto; }
    .display__side { flex-direction: row; }
    .display__wordmark { display: none; }
}

/* Order — cerrada (entregada / cancelada) */
.order-done { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; color: var(--color-text-muted); }
.order-done__badge { font-size: 48px; margin-bottom: var(--space-3); }
.order-done__title { color: var(--color-text); font-size: var(--text-xl); }
.order-done__num { font-family: var(--font-mono); font-size: var(--text-md); }
.order-done__meta { font-size: var(--text-sm); margin-top: var(--space-3); }

/* Order — rating card (post-delivery, fase 6b) */
.order-rating { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; box-shadow: var(--shadow); }
.order-rating__badge { font-size: 56px; margin-bottom: var(--space-3); }
.order-rating__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.order-rating__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.order-rating__form { display: flex; flex-direction: column; gap: var(--space-4); }
.order-rating__stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; border: none; padding: 0; margin: 0; }
.order-rating__stars input { position: absolute; opacity: 0; pointer-events: none; }
.order-rating__stars label { font-size: 44px; line-height: 1; color: #d4d4d4; cursor: pointer; transition: color .12s, transform .12s; padding: 0 4px; }
.order-rating__stars label:hover, .order-rating__stars label:hover ~ label { color: #facc15; transform: scale(1.05); }
.order-rating__stars input:checked ~ label { color: #facc15; }
.order-rating__form textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: var(--text-base); resize: vertical; }
.order-rating__form textarea:focus { outline: none; border-color: var(--color-primary); }
.order-rating__skip { display: inline-block; margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Order — thank-you tras rating enviado */
.order-thanks { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; }
.order-thanks__stars { font-size: 36px; margin-bottom: var(--space-3); letter-spacing: 4px; }
.order-thanks__stars span { color: #d4d4d4; }
.order-thanks__stars span.is-on { color: #facc15; }
.order-thanks__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.order-thanks__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }

/* KPI card demo (lab) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.kpi-card { background: var(--color-bg-muted); padding: var(--space-4); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-1); }
.kpi-card__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.kpi-card__value { font-size: var(--text-2xl); font-weight: 600; }
.kpi-card__delta { font-size: var(--text-sm); color: var(--color-success); }

/* Event welcome — /{slug} (Fase 15).
   Aplica minimalist-ui de leonxlnx/taste-skill scoped a esta view:
   serif editorial en título, macro-whitespace, botones sólidos sin sombra. */
.welcome { max-width: 560px; margin: 0 auto; padding: var(--space-8) var(--space-5); min-height: 70vh; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: var(--space-6); }
.welcome__head { display: flex; flex-direction: column; gap: var(--space-3); }
.welcome__title { font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: #111111; margin: 0; }
.welcome__lead { font-size: var(--text-md); color: var(--color-text-muted); line-height: 1.6; margin: 0; max-width: 380px; margin-inline: auto; }
.welcome__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.welcome__cta-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.welcome__cta-secondary:hover { background: var(--color-bg-muted); }

/* Landing pública — pedila.net/ (Fase 16).
   Color-block estilo Houseparty scoped a body.landing-page. Bloques planos de color
   puro, tipografía bold negra, CTAs pill magenta. Sin sombras, sin gradientes, sin
   bordes. Header/footer del layout base ocultos — la landing es 100% bloques. */
html { scroll-behavior: smooth; }

body.public-body.landing-page { background: #FFD24C; color: #000; font-weight: 500; }
.landing-page .public-header,
.landing-page .public-footer { display: none; }
.landing-page .public-main { padding: 0; max-width: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Grid principal — 2 columnas desktop, 1 columna mobile */
.landing__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .landing__grid { grid-template-columns: 1fr 1fr; } }

.landing__block { padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; min-height: clamp(360px, 42vw, 520px); position: relative; }
.landing__block--yellow  { background: #FFD24C; color: #000; }
.landing__block--magenta { background: #FF2D62; color: #fff; }
.landing__block--blue    { background: #2140FF; color: #fff; }
.landing__block--white   { background: #ffffff; color: #000; }
.landing__block--black   { background: #000000; color: #fff; }

.landing__block--full { grid-column: 1 / -1; min-height: clamp(280px, 30vw, 380px); }

/* Brand mark en el hero */
.landing__brand { display: inline-flex; align-items: center; gap: 10px; background: #2140FF; color: #fff; padding: 6px 14px 6px 8px; border-radius: 999px; align-self: flex-start; margin-bottom: clamp(24px, 4vw, 44px); font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; }
.landing__brand-logo { width: 22px; height: 22px; border-radius: 50%; display: block; background: #000; }
.landing__brand-name { display: inline-block; }

/* Títulos gigantes */
.landing__mega { font-size: clamp(38px, 6.8vw, 82px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin: 0; color: inherit; }
.landing__mega + .landing__mega { margin-top: clamp(20px, 2.5vw, 40px); }
.landing__lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; margin: clamp(20px, 2.5vw, 36px) 0 clamp(24px, 3.5vw, 44px); max-width: 460px; font-weight: 500; }
.landing__eyebrow { display: block; font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: clamp(12px, 1.5vw, 20px); opacity: 0.7; }

/* CTA pill */
.landing__pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #FF2D62; color: #fff; padding: 16px 32px; border-radius: 999px; font-size: var(--text-md); font-weight: 700; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; }
.landing__pill:hover { background: #E11F53; text-decoration: none; color: #fff; }
.landing__pill--yellow { background: #FFD24C; color: #000; }
.landing__pill--yellow:hover { background: #FFC81F; color: #000; }
.landing__pill--dark { background: #000; color: #fff; }
.landing__pill--dark:hover { background: #222; color: #fff; }
/* Outline: se adapta al fondo del bloque (usa currentColor) */
.landing__pill--outline { background: transparent; color: inherit; border: 2px solid currentColor; }
.landing__pill--outline:hover { background: currentColor; color: #000; }
.landing__block--dark .landing__pill--outline:hover { color: #111; }

/* Fase 18: bloque de acceso al staff en el home */
.landing__block--dark { background: #111111; color: #fff; }
.landing__block--staff { align-items: flex-start; }
.landing__staff-title { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 0; color: inherit; }
.landing__staff-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.landing__staff-links .landing__pill { align-self: auto; }

/* Bloque QR — SVG QR mock centrado */
.landing__qr-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.landing__qr { width: clamp(200px, 26vw, 320px); height: clamp(200px, 26vw, 320px); background: #fff; border-radius: 6px; padding: clamp(12px, 1.4vw, 18px); box-sizing: border-box; }
.landing__qr svg { display: block; width: 100%; height: 100%; }

/* Bloque mockup de teléfono */
.landing__phone-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.landing__phone { width: clamp(180px, 20vw, 240px); aspect-ratio: 9 / 19; background: #000; border-radius: 32px; padding: 8px; box-sizing: border-box; box-shadow: 0 20px 0 -8px rgba(0,0,0,0.25); }
.landing__phone-screen { width: 100%; height: 100%; background: #E9F5E7; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.landing__phone-topbar { background: #075E54; color: #fff; padding: 22px 12px 10px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.landing__phone-topbar::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #128C7E; flex-shrink: 0; display: block; }
.landing__phone-chat { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.landing__phone-bubble { background: #fff; border-radius: 8px; padding: 8px 10px; font-size: 10px; line-height: 1.35; color: #111; max-width: 82%; align-self: flex-start; }
.landing__phone-bubble--out { background: #DCF8C6; align-self: flex-end; }
.landing__phone-time { font-size: 8px; color: #999; margin-top: 2px; text-align: right; }

/* Bloque logo grande */
.landing__logo-big { display: block; margin: auto; width: clamp(140px, 18vw, 220px); height: auto; border-radius: 6px; }

/* Footer / contacto en bloque magenta al final */
.landing__foot { padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.5vw, 32px); background: #FF2D62; color: #fff; }
@media (min-width: 800px) { .landing__foot { grid-template-columns: 1fr 1fr; align-items: end; } }
.landing__foot-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.landing__foot p { margin: 0; opacity: 0.85; font-size: var(--text-sm); }
.landing__foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.landing__foot-links a { color: #fff; opacity: 0.85; text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.landing__foot-links a:hover { opacity: 1; }

/* Bloque FAQ (landing) */
.landing__block--faq { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.landing__faq { display: grid; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 3.5vw, 44px); max-width: 820px; }
.landing__faq-item { border-top: 1px solid rgba(0,0,0,0.12); padding: clamp(16px, 1.8vw, 22px) 0; }
.landing__faq-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }
.landing__faq-question { font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.landing__faq-question::-webkit-details-marker { display: none; }
.landing__faq-question::after { content: '+'; font-weight: 400; font-size: 1.2em; opacity: 0.6; }
.landing__faq-item[open] .landing__faq-question::after { content: '−'; }
.landing__faq-answer { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; margin: clamp(10px, 1.2vw, 16px) 0 0; max-width: 640px; opacity: 0.85; }

/* Bloque Testimonios (landing · Fase 34) */
.landing__block--testimonials { padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.landing__testimonials { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.5vw, 32px); margin-top: clamp(28px, 3.5vw, 44px); }
@media (min-width: 800px) { .landing__testimonials { grid-template-columns: repeat(3, 1fr); } }
.landing__testimonial { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); padding: clamp(24px, 2.4vw, 32px); border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; background: #fff; }
.landing__testimonial-stars { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0.15em; color: #FFC81F; line-height: 1; }
.landing__testimonial-quote { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 500; color: #000; }
.landing__testimonial-quote::before { content: '"'; margin-right: 2px; }
.landing__testimonial-quote::after { content: '"'; margin-left: 2px; }
.landing__testimonial-author { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: auto; }

/* Headline stats arriba de los testimonios (Fase 35) — resumen agregado
   de rating promedio, retención declarada y volumen de respuestas. */
.landing__testimonials-headline { list-style: none; padding: 0; margin: clamp(20px, 2.5vw, 32px) 0 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.5vw, 20px) clamp(18px, 2.5vw, 32px); font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; letter-spacing: 0.02em; }
.landing__testimonials-headline li { display: inline-flex; align-items: center; gap: 8px; padding: clamp(6px, 0.6vw, 10px) clamp(12px, 1.2vw, 18px); border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; background: #fff; }
.landing__testimonials-headline-icon { font-size: 1.1em; line-height: 1; }