/* tokens.css */
/* Design tokens. Every visual value lives here; other stylesheets only use var(--...).
   Brand colors are defaults for the ZPaw line: the layout re-injects them from the line config. */
:root {
  color-scheme: light;

  /* Color */
  --naranja: #EE7426;
  --naranja-texto: #B8520F;
  --naranja-suave: #FDEBDD;
  --tinta: #14161A;
  --gris: #5B6068;
  --linea: #E2E4E8;
  --borde-campo-color: #7F858D;
  --fondo: #F4F5F7;
  --blanco: #FFFFFF;
  --ok: #1F7A4D;
  --error: #B42318;

  /* Typography */
  --fuente: "Outfit", system-ui, sans-serif;
  --t-display: clamp(2.25rem, 1.575rem + 3.01vw, 3.5rem);
  --t-1: clamp(1.875rem, 1.536rem + 1.51vw, 2.5rem);
  --t-2: clamp(1.5rem, 1.364rem + 0.6vw, 1.75rem);
  --t-3: 1.25rem;
  --t-cuerpo: clamp(1.0625rem, 1.029rem + 0.15vw, 1.125rem);
  --t-pequeno: 0.875rem;
  --t-boton: 1.125rem;
  --t-logo-palabra: 1.75rem;
  --t-logo-by: 0.6875rem;
  --lh-display: 1.05;
  --lh-1: 1.15;
  --lh-2: 1.2;
  --lh-3: 1.3;
  --lh-cuerpo: 1.5;
  --lh-pequeno: 1.4;
  --lh-boton: 1;
  --ls-titulo: -0.01em;
  --ls-logo: -0.02em;
  --ls-logo-by: 0.18em;

  /* Spacing (multiples of 4) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --margen-pagina: 16px;
  --ancho-contenido: 560px;
  --ancho-landing: 1080px;
  --ancho-estilo: 960px;

  /* Radii and shadow */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --r-full: 999px;
  --sombra: 0 1px 2px rgb(20 22 26 / 6%), 0 6px 20px rgb(20 22 26 / 6%);

  /* Sizes */
  --toque-min: 44px;
  --alto-btn: 56px;
  --alto-btn-sec: 52px;
  --alto-btn-borde: 48px;
  --alto-campo: 52px;
  --borde: 1px;
  --borde-campo: 1.5px;
  --borde-sel: 2px;
  --anillo: 3px;
  --anillo-sep: 2px;
  --swatch: 44px;
  --track-ancho: 52px;
  --track-alto: 32px;
  --thumb: 24px;
  --icono-s: 20px;
  --icono-m: 24px;
  --logo-alto: 32px;
  --barra-banner: 6px;
  --barra-aviso: 4px;
  --placa-ancho: 220px;
  --miniatura: 48px;
  --nfc-ancho: 126px;
  --nfc-ancho-aviso: 88px;
  --avatar: 64px;
  --miniatura-foto: 72px;
  --ancho-panel: 840px;
  --panel-lateral: 224px;
  --check: 24px;
  --buy-bar-alto: 180px;
  --preview-alto: 30vh;
  --spinner: 20px;
  --spinner-borde: 3px;

  /* State and motion */
  --opacidad-off: 0.4;
  --presionado: 8%;
  --transicion: 150ms;
  --pulso: 1.4s;
}

@media (min-width: 640px) {
  :root { --margen-pagina: 24px; }
}

@media (min-width: 1024px) {
  :root { --logo-alto: 40px; }
}

/* base.css */
@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/outfit-latin-700-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: var(--lh-cuerpo);
}

main { flex: 1 0 auto; }

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, .t-display, .t-1, .t-2, .t-3 { letter-spacing: var(--ls-titulo); }
.t-display { font-size: var(--t-display); font-weight: 700; line-height: var(--lh-display); }
h1, .t-1 { font-size: var(--t-1); font-weight: 700; line-height: var(--lh-1); }
h2, .t-2 { font-size: var(--t-2); font-weight: 600; line-height: var(--lh-2); }
h3, .t-3 { font-size: var(--t-3); font-weight: 600; line-height: var(--lh-3); }
.t-fuerte { font-weight: 600; }
.t-pequeno { font-size: var(--t-pequeno); font-weight: 500; line-height: var(--lh-pequeno); }
.t-gris { color: var(--gris); }

a { color: var(--naranja-texto); text-decoration: none; transition: color var(--transicion); }
a:hover, a:focus-visible { text-decoration: underline; }
p a, li a, .prose a { text-decoration: underline; }

:focus-visible {
  outline: var(--anillo) solid var(--naranja);
  outline-offset: var(--anillo-sep);
}

button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--e-2);
  top: var(--e-2);
  z-index: 10;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--ancho-contenido) + 2 * var(--margen-pagina));
  margin-inline: auto;
  padding-inline: var(--margen-pagina);
}
.wrap--landing { max-width: calc(var(--ancho-landing) + 2 * var(--margen-pagina)); }
.wrap--panel { max-width: calc(var(--ancho-panel) + 2 * var(--margen-pagina)); }
.wrap--estilo { max-width: calc(var(--ancho-estilo) + 2 * var(--margen-pagina)); }

.stack > * + * { margin-top: var(--gap, var(--e-4)); }
.stack--s { --gap: var(--e-2); }
.stack--l { --gap: var(--e-5); }
.stack--xl { --gap: var(--e-6); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--e-3)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.t-center { text-align: center; }
.pre-line { white-space: pre-line; }
.screen { padding-block: var(--e-4) var(--e-5); }

.center-block { display: flex; justify-content: center; }

.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); }
.js-only { display: none; }
.js .js-only { display: block; }
.js .no-js-only { display: none; }

/* componentes.css */
/* Components. One section per component of INTERFAZ.md. Only var(--...) values. */

/* ---- Icons ---- */
.icon { width: var(--icono-s); height: var(--icono-s); flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: var(--icono-m); height: var(--icono-m); }

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-width: var(--toque-min);
  padding: 0 var(--e-5);
  border: var(--borde-campo) solid transparent;
  border-radius: var(--r-m);
  font-size: var(--t-boton);
  font-weight: 700;
  line-height: var(--lh-boton);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion), filter var(--transicion);
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--primary { min-height: var(--alto-btn); background: var(--naranja); color: var(--tinta); }
.btn--secondary { min-height: var(--alto-btn-sec); background: var(--tinta); color: var(--blanco); }
.btn--outline { min-height: var(--alto-btn-borde); background: var(--blanco); border-color: var(--linea); color: var(--tinta); }
.btn--danger { min-height: var(--alto-btn-sec); background: var(--error); color: var(--blanco); }
.btn--block { display: flex; width: 100%; }
.btn--primary:active, .btn--primary.is-pressed { background: color-mix(in srgb, var(--naranja), black var(--presionado)); }
.btn--secondary:active, .btn--secondary.is-pressed { background: color-mix(in srgb, var(--tinta), white var(--presionado)); }
.btn--outline:active, .btn--outline.is-pressed { background: var(--fondo); }
.btn--danger:active, .btn--danger.is-pressed { background: color-mix(in srgb, var(--error), black var(--presionado)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--opacidad-off); cursor: not-allowed; }
.btn__loading { display: none; align-items: center; gap: var(--e-2); }
.btn__spinner {
  width: var(--spinner);
  height: var(--spinner);
  border: var(--spinner-borde) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-full);
  animation: spin 0.8s linear infinite;
}
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading .btn__label { display: none; }
.btn.is-loading .btn__loading { display: inline-flex; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 639px) {
  .btn--primary, .btn--secondary { display: flex; width: 100%; }
}

/* ---- Text field ---- */
.field { display: block; }
.field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-2); }
.field__label { font-weight: 600; }
.field__counter { color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; }
.field__input {
  display: block;
  width: 100%;
  height: var(--alto-campo);
  padding: 0 var(--e-4);
  border: var(--borde-campo) solid var(--borde-campo-color);
  border-radius: var(--r-m);
  background: var(--blanco);
  transition: border-color var(--transicion);
}
.field__input:focus, .field__input.is-focus { border-color: var(--naranja); }
.field__input.is-focus { outline: var(--anillo) solid var(--naranja); outline-offset: var(--anillo-sep); }
.field__input--upper { text-transform: uppercase; }
.field__help { margin-top: var(--e-2); color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; line-height: var(--lh-pequeno); }
.field__error { display: none; align-items: center; gap: var(--e-2); margin-top: var(--e-2); color: var(--error); font-size: var(--t-pequeno); font-weight: 600; }
.field__error.is-shown { display: flex; }
.field.has-error .field__input { border-color: var(--error); }
.field.has-error .field__error { display: flex; }

/* ---- Choice controls: shared radio/checkbox pattern (input first, visual box after) ---- */
.choice { display: block; cursor: pointer; }
.choice__input:focus-visible + .model,
.choice__input:focus-visible + .segmented__box,
.choice__input:focus-visible + .swatch__box .swatch__dot { outline: var(--anillo) solid var(--naranja); outline-offset: var(--anillo-sep); }

/* ---- Color swatch ---- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.swatch { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); min-width: var(--swatch); }
.swatch__box { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
.swatch__dot { position: relative; width: var(--swatch); height: var(--swatch); border-radius: var(--r-full); }
.swatch__dot svg { width: 100%; height: 100%; }
.swatch__dot circle { stroke: var(--linea); stroke-width: var(--borde); }
.swatch__check { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--blanco); }
.swatch__check.is-ink { color: var(--tinta); }
.swatch__name { font-size: var(--t-pequeno); font-weight: 500; color: var(--gris); }
.swatch .choice__input:checked + .swatch__box .swatch__dot { box-shadow: 0 0 0 var(--anillo-sep) var(--blanco), 0 0 0 calc(var(--anillo-sep) + var(--anillo)) var(--tinta); }
.swatch .choice__input:checked + .swatch__box .swatch__check { display: flex; }
.swatch .choice__input:checked + .swatch__box .swatch__name { color: var(--tinta); font-weight: 700; }

/* ---- Model card ---- */
.model {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-btn);
  padding: var(--e-3) var(--e-4);
  border: var(--borde-sel) solid var(--linea);
  border-radius: var(--r-l);
  background: var(--blanco);
  transition: background-color var(--transicion), border-color var(--transicion);
}
.model__thumb { width: var(--miniatura); height: var(--miniatura); flex: none; }
.model__text { flex: 1; min-width: 0; }
.model__name { font-weight: 700; }
.model__meta { color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; }
.model__price { font-weight: 700; }
.choice__input:checked + .model { border-color: var(--naranja); background: var(--naranja-suave); }
.choice__input:disabled + .model { opacity: var(--opacidad-off); }

/* ---- Switch ---- */
.switch { display: inline-flex; align-items: center; gap: var(--e-3); min-height: var(--toque-min); cursor: pointer; }
.switch__track {
  position: relative;
  width: var(--track-ancho);
  height: var(--track-alto);
  flex: none;
  border: var(--borde-sel) solid var(--gris);
  border-radius: var(--r-full);
  background: var(--linea);
  transition: background-color var(--transicion), border-color var(--transicion);
}
.switch__thumb {
  position: absolute;
  top: 50%;
  left: var(--e-1);
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc(var(--thumb) / -2);
  border-radius: var(--r-full);
  background: var(--blanco);
  border: var(--borde-sel) solid var(--gris);
  transition: transform var(--transicion), background-color var(--transicion), border-color var(--transicion);
}
.switch__text { font-weight: 600; }
.switch__on { display: none; }
.switch__input:checked + .switch__track { background: var(--naranja); border-color: var(--tinta); }
.switch__input:checked + .switch__track .switch__thumb {
  transform: translateX(calc(var(--track-ancho) - var(--thumb) - 2 * var(--e-1) - 2 * var(--borde-sel)));
  background: var(--tinta);
  border-color: var(--tinta);
}
.switch__input:checked ~ .switch__text .switch__on { display: inline; }
.switch__input:checked ~ .switch__text .switch__off { display: none; }
.switch__input:focus-visible + .switch__track { outline: var(--anillo) solid var(--naranja); outline-offset: var(--anillo-sep); }
.switch__input:disabled ~ * { opacity: var(--opacidad-off); }

.segmented { border: 0; margin: 0; min-width: 0; }
/* ---- Segmented (two-option control, e.g. front / back) ---- */
.segmented { display: inline-flex; padding: var(--e-1); border-radius: var(--r-full); background: var(--linea); }
.segmented__opt { display: block; }
.segmented__box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alto-btn);
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-full);
  color: var(--gris);
  font-weight: 500;
  transition: background-color var(--transicion), color var(--transicion);
}
.segmented .choice__input:checked + .segmented__box { background: var(--blanco); color: var(--tinta); font-weight: 700; }

/* ---- Card ---- */
.card { padding: var(--e-5); border: var(--borde) solid var(--linea); border-radius: var(--r-l); background: var(--blanco); }
.card--elevated { border-color: transparent; box-shadow: var(--sombra); }
.card__title { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); font-size: var(--t-3); font-weight: 600; line-height: var(--lh-3); }

/* ---- Notice ---- */
.notice {
  --notice-color: var(--tinta);
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border: var(--borde) solid var(--linea);
  border-left: var(--barra-aviso) solid var(--notice-color);
  border-radius: var(--r-m);
  background: var(--blanco);
}
.notice__icon { color: var(--notice-color); margin-top: var(--e-1); }
.notice__title { font-weight: 700; }
.notice--info { --notice-color: var(--naranja); background: var(--naranja-suave); border-color: var(--naranja-suave); border-left-color: var(--naranja); }
.notice--info .notice__icon { color: var(--tinta); }
.notice--ok { --notice-color: var(--ok); }
.notice--error { --notice-color: var(--error); }

/* ---- Lost-mode banner ---- */
.lost-banner { padding: var(--e-4) 0; border-top: var(--barra-banner) solid var(--naranja); background: var(--tinta); color: var(--blanco); }
.lost-banner__title { font-size: var(--t-3); font-weight: 700; line-height: var(--lh-3); }
.lost-banner__text { margin-top: var(--e-1); }
.lost-banner__reward { margin-top: var(--e-3); font-weight: 600; }

/* ---- Logo ---- */
.logo { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tinta); text-decoration: none; }
.logo:hover, .logo:focus-visible { text-decoration: none; }
.logo__symbol { height: var(--logo-alto); width: var(--logo-alto); color: var(--naranja); }
.logo__text { display: flex; flex-direction: column; gap: var(--e-1); }
.logo__word { font-size: var(--t-logo-palabra); font-weight: 700; line-height: var(--lh-boton); letter-spacing: var(--ls-logo); text-transform: lowercase; }
.logo__by { font-size: var(--t-logo-by); font-weight: 500; line-height: var(--lh-boton); letter-spacing: var(--ls-logo-by); text-transform: uppercase; color: var(--gris); }

/* ---- NFC pictogram ---- */
.nfc { width: var(--nfc-ancho); height: auto; color: var(--tinta); --zpaw-bg: var(--blanco); }
.nfc__mask { fill: var(--zpaw-bg, var(--blanco)); }
.nfc--on-ink { color: var(--blanco); --zpaw-bg: var(--tinta); }
.nfc--on-page { --zpaw-bg: var(--fondo); }

/* ---- Site header / footer ---- */
.site-header { padding: var(--e-3) 0; }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--toque-min); }
.site-header__aside { display: flex; align-items: center; gap: var(--e-4); }
.site-footer { margin-top: var(--e-7); padding: var(--e-5) 0 calc(var(--e-5) + env(safe-area-inset-bottom)); border-top: var(--borde) solid var(--linea); color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; line-height: var(--lh-pequeno); }
.site-footer a { color: var(--gris); text-decoration: underline; }
.site-footer__logo { margin-bottom: var(--e-3); }
.site-footer__brand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); }
.site-footer__vz { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--tinta); font-weight: 600; }
.site-footer__vz img { height: var(--e-5); width: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin-top: var(--e-2); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--toque-min); }

/* ---- Plate preview ---- */
.plate { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.plate__svg { width: min(100%, var(--placa-ancho)); height: auto; }
.plate__edge { stroke: var(--linea); stroke-width: var(--borde); }
.plate__ink { color: var(--tinta); fill: var(--tinta); }
.plate__paper { color: var(--blanco); fill: var(--blanco); }
.plate__accent { color: var(--naranja); fill: var(--naranja); }
.plate__name { font-weight: 700; text-anchor: middle; }
.plate__face { display: none; }
.plate__face.is-front { display: block; }
.plate:has([value="back"]:checked) .plate__face.is-front { display: none; }
.plate:has([value="back"]:checked) .plate__face.is-back { display: block; }

/* ---- Empty state ---- */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); padding: var(--e-6) var(--e-4); text-align: center; }
.empty__symbol { width: var(--e-8); height: var(--e-8); color: var(--linea); }
.empty__text { color: var(--gris); }

/* ---- Skeleton ---- */
.skeleton { display: block; min-height: var(--e-4); border-radius: var(--r-s); background: var(--linea); animation: pulse var(--pulso) ease-in-out infinite; }
.skeleton--photo { aspect-ratio: 4 / 3; border-radius: var(--r-l); }
.skeleton--s { width: 40%; }
.skeleton--m { width: 70%; }
.skeleton--l { width: 100%; }
@keyframes pulse { 50% { opacity: 0.5; } }

/* ---- Missing-material marker (honest placeholders) ---- */
.marker { display: inline-block; padding: var(--e-1) var(--e-2); border: var(--borde-sel) dashed var(--gris); border-radius: var(--r-s); color: var(--gris); font-size: var(--t-pequeno); font-weight: 600; line-height: var(--lh-pequeno); }

/* ---- Profile photo frame (4:3). Without a photo: soft-orange block with the initial ---- */
.photo-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: var(--naranja-suave); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame__initial { color: var(--naranja-texto); font-size: var(--t-display); font-weight: 700; line-height: var(--lh-boton); }

/* ---- Data list (label / value rows inside a card) ---- */
.data-list { display: grid; margin: 0; }
.data-list__row { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: var(--borde) solid var(--linea); }
.data-list__row:last-child { border-bottom: 0; }
.data-list dt { color: var(--gris); font-weight: 500; }
.data-list dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- NFC hint (discreet, bottom of the public profile) ---- */
.nfc-hint { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4); border: var(--borde-sel) dashed var(--linea); border-radius: var(--r-l); color: var(--gris); }
.nfc-hint .nfc { flex: none; width: var(--nfc-ancho-aviso); }

/* ---- Menu list (rows inside one card) ---- */
.menu-list { padding: var(--e-2) var(--e-5); }
.menu-list__row { display: flex; align-items: center; gap: var(--e-3); min-height: var(--alto-btn); border-bottom: var(--borde) solid var(--linea); color: var(--tinta); text-decoration: none; }
.menu-list__row:last-child { border-bottom: 0; }
.menu-list__row:hover, .menu-list__row:focus-visible { text-decoration: none; }
.menu-list__label { flex: 1; }
.menu-list__value { color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; }

/* ---- Tab bar: bottom on phones, side column on desktop ---- */
.tab-bar { position: fixed; inset: auto 0 0 0; z-index: 5; display: flex; padding-bottom: env(safe-area-inset-bottom); border-top: var(--borde) solid var(--linea); background: var(--blanco); }
.tab-bar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-1); min-height: var(--alto-btn); padding: var(--e-2) var(--e-1); border-top: var(--barra-aviso) solid transparent; color: var(--gris); font-size: var(--t-pequeno); font-weight: 500; text-decoration: none; }
.tab-bar__item:hover, .tab-bar__item:focus-visible { text-decoration: none; }
.tab-bar__item.is-active { border-top-color: var(--naranja); color: var(--tinta); font-weight: 700; }
.panel { padding-bottom: calc(var(--alto-btn) + var(--e-5) + env(safe-area-inset-bottom)); }
.panel__main > * + * { margin-top: var(--e-4); }

/* ---- Avatar, chip, pet card ---- */
.avatar { display: grid; place-items: center; flex: none; width: var(--avatar); height: var(--avatar); overflow: hidden; border-radius: var(--r-full); background: var(--naranja-suave); color: var(--naranja-texto); font-size: var(--t-2); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-flex; align-items: center; gap: var(--e-1); padding: var(--e-1) var(--e-3); border: var(--borde) solid var(--linea); border-radius: var(--r-full); background: var(--blanco); color: var(--ok); font-size: var(--t-pequeno); font-weight: 700; }
.chip--muted { color: var(--gris); }
.pet-card { display: flex; align-items: center; gap: var(--e-4); }

/* ---- Form helpers ---- */
.field__input--area { height: auto; min-height: calc(var(--alto-campo) * 2); padding: var(--e-3) var(--e-4); resize: vertical; }
.check { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--toque-min); cursor: pointer; }
.check input { flex: none; width: var(--check); height: var(--check); margin: var(--e-1) 0 0; accent-color: var(--naranja); }
.form-actions { display: grid; gap: var(--e-3); }
.legend { margin-bottom: var(--e-2); font-weight: 600; }

/* ---- Photo manager, thumbnails and progress ---- */
.photo-list { display: grid; gap: var(--e-5); }
.photo-item { display: grid; gap: var(--e-3); }
.photo-item__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.thumbs { display: flex; gap: var(--e-2); }
.thumbs a { display: block; width: var(--miniatura-foto); }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); }
.progress { width: 100%; height: var(--e-2); accent-color: var(--naranja); }

@media (min-width: 1024px) {
  .panel { display: grid; grid-template-columns: var(--panel-lateral) 1fr; gap: var(--e-6); padding-bottom: 0; align-items: start; }
  .tab-bar { position: static; flex-direction: column; gap: var(--e-1); padding: 0; border: 0; background: transparent; }
  .tab-bar__item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--e-3); padding: 0 var(--e-4); border: 0; border-radius: var(--r-m); font-size: var(--t-cuerpo); }
  .tab-bar__item.is-active { background: var(--blanco); }
}

/* ---- Scan list and map ---- */
.scan-list { display: grid; gap: var(--e-3); }
.scan { display: grid; gap: var(--e-2); }
.scan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.scan__when { font-weight: 600; }
.scan__message { white-space: pre-line; }
.map-frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--r-l); background: var(--linea); }

/* ---- Configurator ---- */
.configurator { display: grid; gap: var(--e-5); padding-bottom: calc(var(--buy-bar-alto) + env(safe-area-inset-bottom)); }
.configurator__preview { position: sticky; top: 0; z-index: 3; padding: var(--e-3) 0; background: var(--fondo); }
.configurator__preview .plate__svg { width: auto; max-width: 100%; max-height: var(--preview-alto); }
.buy-bar { position: fixed; inset: auto 0 0 0; z-index: 5; display: grid; gap: var(--e-2); padding: var(--e-3) var(--margen-pagina) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: var(--borde) solid var(--linea); background: var(--blanco); }
.buy-bar__price { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.buy-bar__amount { font-size: var(--t-2); font-weight: 700; line-height: var(--lh-2); }
.buy-bar__store { display: flex; align-items: center; justify-content: center; gap: var(--e-1); margin: 0; text-align: center; }
.buy-bar__store img { height: var(--e-4); width: auto; }

/* ---- Confirmation page ---- */
.thanks-check { display: inline-flex; color: var(--ok); }
.thanks-check .icon { width: var(--e-8); height: var(--e-8); }
.steps-list { display: grid; gap: var(--e-2); margin: 0; padding-left: var(--e-5); list-style: decimal; }

@media (min-width: 1024px) {
  .configurator { grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: start; padding-bottom: 0; }
  .configurator__preview { top: var(--e-5); }
  .configurator__preview .plate__svg { max-height: none; width: min(100%, calc(var(--placa-ancho) * 1.6)); }
  .buy-bar { position: static; padding: 0; border: 0; background: transparent; grid-column: 2; }
}

/* ---- Landing ---- */
.landing-section { padding-top: var(--e-7); }
.hero { display: grid; gap: var(--e-6); padding-top: var(--e-5); }
.hero__lead { color: var(--gris); }
.hero__image { display: grid; }
.render-slot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-l); background: var(--linea); }
.ticks { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); color: var(--gris); }
.ticks li, .includes li { display: flex; align-items: center; gap: var(--e-2); }
.ticks .icon, .includes .icon { color: var(--ok); }
.includes { display: grid; gap: var(--e-3); }
.steps { display: grid; gap: var(--e-4); }
.step { display: grid; gap: var(--e-2); align-content: start; }
.step__num { display: grid; place-items: center; width: var(--e-6); height: var(--e-6); border-radius: var(--r-full); background: var(--naranja); color: var(--tinta); font-weight: 700; }
.step__extra { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-3); border-top: var(--borde) solid var(--linea); }
.finder { display: grid; gap: var(--e-6); align-items: center; }
.phone-frame { justify-self: center; width: calc(var(--e-8) * 3.5); padding: var(--e-3); border-radius: var(--r-l); background: var(--tinta); }
.phone-frame__screen { display: grid; place-items: center; aspect-ratio: 9 / 16; border-radius: var(--r-m); background: var(--fondo); }
.color-dots { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.color-dots__item { display: grid; justify-items: center; gap: var(--e-2); }
.color-dots__dot { width: var(--swatch); height: var(--swatch); }
.color-dots__dot circle { stroke: var(--linea); stroke-width: var(--borde); }
.faq-list { display: grid; gap: var(--e-3); }
.faq { padding: var(--e-1) var(--e-5); border: var(--borde) solid var(--linea); border-radius: var(--r-l); background: var(--blanco); }
.faq summary { display: flex; align-items: center; min-height: var(--alto-btn); font-weight: 600; cursor: pointer; }
.faq[open] summary { border-bottom: var(--borde) solid var(--linea); }
.faq p { padding: var(--e-3) 0; }
.site-nav { display: none; gap: var(--e-5); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--tinta); font-weight: 500; }
.only-wide { display: none; }

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .only-narrow { display: none; }
  .only-wide { display: inline-flex; }
}

@media (min-width: 1024px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--e-7); padding-top: var(--e-7); }
  .finder { grid-template-columns: 1fr 1fr; gap: var(--e-7); }
  .site-nav { display: flex; }
}