/* PASO 1 — Sistema visual. Se carga después del CSS existente.
   Referencia: títulos de impacto y bloques sólidos de In-N-Out.
   Identidad propia: amarillo del logotipo, crema y naranja oscuro accesible. */
:root {
  --color-ink:#231d18;
  --color-cream:#fff9ee;
  --color-yellow:#ffc526;
  --color-action:#b43c1d;
  --color-action-hover:#922c13;
  --color-muted:#62584e;
  --color-line:#d9cbb4;
  --font-display:'Anton','Arial Narrow',Impact,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --radius-button:12px;
  --radius-panel:20px;
  --shadow-button:0 4px 0 #722810;
  --shadow-panel:0 16px 45px #231d181a;
  --demo-offset:0px;
  --ink:var(--color-ink);
  --paper:var(--color-cream);
  --yellow:var(--color-yellow);
  --orange:var(--color-action);
  --muted:var(--color-muted);
}
html[data-test-mode='true'] {--demo-offset:35px}
html:not([data-test-mode='true']) [data-test-only] {display:none!important}
html {font-size:16px;scroll-padding-top:calc(var(--demo-offset) + 90px)}
body,input,textarea,select,button {font-family:var(--font-body)}
body {font-size:1rem;line-height:1.6;color:var(--ink)}
h1,h2 {font-family:var(--font-display);font-weight:400;letter-spacing:.015em;line-height:1.08}
h1 {font-size:clamp(3.8rem,8vw,7rem);margin:var(--space-6) 0}
h1 em {color:var(--color-action)}
h2 {font-size:clamp(2.4rem,5vw,3.8rem)}
h3 {font-family:var(--font-body);font-weight:800;letter-spacing:-.025em;line-height:1.25}
.brand {font-family:var(--font-body);font-weight:800;letter-spacing:-1.3px}
.demo {height:35px;padding:7px 10px;text-transform:uppercase;line-height:21px;font-size:10px}
.test-note {display:block;margin-top:var(--space-2);color:var(--muted)}
.hero .intro,.section-aside,.product p,.product .validation-note,.photo-note,.price-note,
.contact-note,.payment-note,.hero-note,.business-hours dt,.business-hours dd,
.details-grid label,.details-grid input,.details-grid textarea,.details-grid select,
.extra-choice>label,.remove-choice,.line-options,.custom-notes,.variant-label,.variant-select,
.cart-row small,.sauce-group-title,.details-signpost p,.cart-empty p,
.order-conditions p,#custom-fields fieldset>p {font-size:1rem;line-height:1.65}
.muted,.cart-scroll>.muted,.cart-scroll>.hours-notice,.cart-footer>.muted {font-size:1rem!important;line-height:1.65}
.slogan {font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.4}
.product p {min-height:0}
.product .validation-note {color:#873019;margin-top:var(--space-3)}
.price small {font-size:1rem;background:#fff0c4;color:#4b3718}
.price strong {font-size:1.65rem;color:var(--ink)}
.price {gap:var(--space-2)}
.filters {top:var(--demo-offset);gap:var(--space-2)}
.filters button,nav a {font-size:1rem;min-height:44px}
nav a {display:inline-flex;align-items:center}
.filters button[aria-pressed='true'] {background:var(--ink);border-color:var(--ink);color:white;box-shadow:none}
button,.button {min-height:44px;border-radius:var(--radius-button);font-size:1rem;font-weight:700;line-height:1.35}
.button,.add-product,.product-actions .add-product,.cart-footer .cart-actions .button {
  background:var(--color-action);color:white;border:1px solid var(--color-action);
  box-shadow:var(--shadow-button);font-size:1rem;padding:14px 18px;
}
.button:hover,.add-product:hover,.product-actions .add-product:hover,.cart-footer .cart-actions .button:hover {
  background:var(--color-action-hover);border-color:var(--color-action-hover);color:white;
}
.customize-product,.remove-item,.dialog-close,.cart-actions>button:first-child,
.cart-footer .cart-actions>button:first-child {
  color:var(--ink);background:var(--paper);border:1px solid #9b8872;
  font-size:1rem;min-height:44px;padding:11px 14px;
}
.customize-product:hover,.remove-item:hover,.dialog-close:hover {background:#ffe6a0}
.header-cta {background:var(--yellow);border:1px solid var(--ink);color:var(--ink);font-size:1rem;padding:12px 16px;min-height:48px}
.header-cta span {background:var(--ink);color:white}
.quantity-controls button,.extra-counter button {min-width:44px;min-height:44px;height:44px;background:white;border-color:#9b8872;font-size:1.3rem;color:var(--ink)}
.extra-counter input {height:44px;font-size:1rem;min-width:44px}
.floating-cart {border:2px solid var(--yellow);background:var(--ink);color:white;min-height:60px}
.floating-cart strong {color:var(--yellow)}
.added-notice {top:calc(var(--demo-offset) + 12px)}
.added-notice button,.added-notice #dismiss-notice {min-height:44px;font-size:1rem}
button:disabled {opacity:1;color:#6d665e!important;background:#eee7db!important;border-color:#c9beae!important;box-shadow:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #1263a0!important;outline-offset:4px;
}
dialog {border:1px solid var(--color-line);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel)}
.cart-dialog>h2,#custom-dialog>h2,dialog h2 {font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:.015em;line-height:1.15}
.order-confirmation {font-size:1rem;line-height:1.5;margin:0 0 var(--space-3);font-weight:600}
.order-conditions {margin:0 0 var(--space-4);border-bottom:1px solid var(--color-line);padding-bottom:var(--space-3)}
.order-conditions summary {display:list-item;width:fit-content;min-height:44px;padding:10px 2px;font-size:1rem;font-weight:700;color:var(--color-action);cursor:pointer}
.order-conditions p {margin:var(--space-3) 0}
.cart-footer .cart-actions {align-items:stretch;flex-wrap:wrap}
.cart-footer .cart-actions .button {flex:1}
.cart-footer-total {font-size:1rem}
.cart-footer-total strong {font-size:1.5rem}
.cart-footer>.muted {margin-top:var(--space-3)}
.cart-scroll {max-height:calc(92dvh - 330px)}
#custom-fields {max-height:calc(92dvh - 400px)}
.custom-quantity label,.custom-selection-total,.custom-price {font-size:1rem}
.custom-selection-total strong {color:var(--color-action)}
.ticker {background:var(--color-action);color:white;font-size:1rem}
.ticker span {color:var(--yellow)}
.hero-visual {background:var(--yellow)}
footer {border-top:5px solid var(--yellow)}
@media(max-width:700px) {
  header {padding:16px 5%;gap:12px}
  .brand {font-size:21px}
  nav {gap:16px}
  h1 {font-size:clamp(3.4rem,13.5vw,5rem);letter-spacing:0;line-height:1.08}
  h2 {font-size:clamp(2.25rem,9vw,3rem)}
  .hero {padding-top:24px}
  .hero-note {margin-top:24px}
  .product-actions {flex-wrap:wrap}
  .product-actions button {flex:1 1 130px}
  .extra-choice {align-items:flex-start;gap:10px;flex-wrap:wrap}
  .extra-counter {gap:4px;margin-left:auto}
  .cart-dialog,#custom-dialog {padding:16px}
  .cart-footer .cart-actions>button:first-child {font-size:1rem;padding:10px}
  .cart-footer .cart-actions .button {font-size:1rem;padding:12px 10px}
  .cart-footer-total {align-items:flex-end;gap:10px}
  .cart-footer-total>span {max-width:65%}
  .cart-scroll {max-height:calc(92dvh - 345px)}
  #custom-fields {max-height:calc(92dvh - 400px)}
  .cart-footer>.muted {font-size:1rem!important;line-height:1.5}
  .added-notice {gap:8px;flex-wrap:wrap}
  .added-notice span {font-size:1rem;flex:1 1 170px}
  .added-notice button {font-size:1rem}
}
@media(prefers-reduced-motion:reduce) {
  button,.button {animation:none!important;transition:none!important;transform:none!important}
}