/* ============================================================
   QRonline — qronline.css: capa de diseño (referencia Apple)
   Se carga DESPUÉS de landing.css y solo re-mapea tokens y
   componentes según docs/DESIGN.md. Nada del HTML cambia.
   ============================================================ */
:root {
  --qr-accent: #3e61aa;
  --qr-accent-press: #314d87;
  --qr-accent-on-dark: #718ecb;
  --qr-ink: #1d1d1f;
  --qr-ink-80: #333333;
  --qr-ink-48: #7a7a7a;
  --qr-canvas: #ffffff;
  --qr-parchment: #f5f5f7;
  --qr-pearl: #fafafc;
  --qr-hairline: #e0e0e0;
  --qr-divider: #f0f0f0;
  --qr-tile-1: #272729;
  --qr-tile-2: #2a2a2c;
  --qr-nav: #000000;
  --qr-on-dark: #ffffff;
  --qr-on-dark-muted: #cccccc;

  /* Re-mapeo de los tokens que ya usa landing.css */
  --bg: var(--qr-canvas);
  --surface: var(--qr-parchment);
  --surface-2: var(--qr-pearl);
  --text: var(--qr-ink);
  --text-2: var(--qr-ink-80);
  --text-3: var(--qr-ink-48);
  --border: var(--qr-hairline);
  --border-strong: #d2d2d7;
  --accent: var(--qr-accent);
  --accent-press: var(--qr-accent-press);
  --shadow-sm: none;
  --shadow-md: none;
  --radius: 18px;
  --radius-lg: 18px;
  --nav-h: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --qr-canvas: #000000;
    --qr-parchment: #1c1c1e;
    --qr-pearl: #161617;
    --qr-hairline: rgba(255,255,255,.12);
    --qr-divider: rgba(255,255,255,.08);
    --qr-ink: #f5f5f7;
    --qr-ink-80: #d2d2d7;
    --qr-ink-48: #86868b;
    --qr-accent: #718ecb;
    --qr-accent-press: #3e61aa;
    --border-strong: rgba(255,255,255,.18);
  }
}

/* ---------- Base ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  font-size: 17px; line-height: 1.47; letter-spacing: -0.374px;
}

/* ---------- Barra global: negra, 44px, enlaces de 12px ---------- */
.nav {
  background: var(--qr-nav) !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav .brand__logo { height: 22px; filter: brightness(0) invert(1); }
.nav__links { gap: 30px; }
.nav__links a { font-size: 12px; letter-spacing: -0.12px; color: rgba(255,255,255,.8); }
.nav__links a:hover { color: #fff; }
.nav__links a.nav__casa { color: rgba(255,255,255,.8); }
.nav__links a.nav__cta {
  font-size: 12px; font-weight: 400; padding: 5px 11px;
  background: var(--qr-accent); color: #fff;
}
.cartfab { box-shadow: none; }

/* ---------- Menú del móvil (paso 192) ----------
   Por debajo de 720 px la barra solo deja «Comprar». El botón son dos rayas
   que se cruzan; la hoja cuelga de la barra, negra como ella, con los enlaces
   grandes. Sin sombra: es chrome. En escritorio no existe ninguna de las dos. */
.nav__menu, .nav__hoja { display: none; }
@media (max-width: 720px) {
  .nav__links { margin-left: auto; }
  .nav__menu {
    display: block; position: relative; flex: none;
    width: 44px; height: 44px; margin: 0 -12px 0 6px; padding: 0;
    -webkit-appearance: none; appearance: none; background: none; border: 0;
    color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav__menu span {
    position: absolute; left: 13px; width: 18px; height: 1.5px; border-radius: 1px;
    background: currentColor;
    transition: transform .32s var(--ease-out), top .32s var(--ease-out);
  }
  .nav__menu span:first-child { top: 18px; }
  .nav__menu span:last-child  { top: 25px; }
  .nav.is-menu .nav__menu span { top: 21.5px; }
  .nav.is-menu .nav__menu span:first-child { transform: rotate(45deg); }
  .nav.is-menu .nav__menu span:last-child  { transform: rotate(-45deg); }
  .nav__menu:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 12px; }

  .nav__hoja {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    padding: 10px 22px 26px; background: var(--qr-nav);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .24s var(--ease-out), transform .32s var(--ease-out), visibility 0s linear .32s;
  }
  .nav.is-menu .nav__hoja {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .24s var(--ease-out), transform .32s var(--ease-out), visibility 0s;
  }
  .nav__hoja a {
    display: block; padding: 13px 0; color: rgba(255,255,255,.92);
    font-size: 21px; font-weight: 600; letter-spacing: 0.231px; line-height: 1.19;
    border-bottom: 1px solid rgba(255,255,255,.12); text-decoration: none;
  }
  .nav__hoja a:last-child { border-bottom: 0; }
  .nav__hoja a:active { color: #fff; }
  /* La página de debajo se apaga mientras el menú está abierto: se entiende
     que tocar fuera lo cierra. */
  .nav::after {
    content: ''; position: fixed; inset: var(--nav-h) 0 0 0; z-index: -1;
    background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
    transition: opacity .24s var(--ease-out), visibility 0s linear .24s;
  }
  .nav.is-menu::after { opacity: 1; visibility: visible; transition: opacity .24s var(--ease-out), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu span, .nav__hoja, .nav::after { transition: none !important; }
  .nav__hoja { transform: none; }
}

/* ---------- Título en dos renglones (guías) ----------
   Lo que va después de los dos puntos baja a su línea, más fino y más pequeño:
   el título dice para quién es y el renglón de debajo, qué oficios entran. */
.phead__sub {
  display: block; margin-top: 8px;
  font-size: .58em; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-2);
}
.phead__sub::first-letter { text-transform: uppercase; }

/* ---------- Botones ---------- */
.btn { font-size: 17px; font-weight: 400; letter-spacing: -0.374px; padding: 11px 22px; }
.btn--lg { font-size: 18px; letter-spacing: 0; padding: 14px 28px; }
.btn--ghost {
  background: var(--qr-canvas); color: var(--qr-accent);
  box-shadow: inset 0 0 0 1px var(--qr-hairline);
}
.btn--ghost:hover { background: var(--qr-pearl); }
.btn--sm { font-size: 14px; padding: 8px 15px; }

/* ---------- Hero: lienzo blanco, titular 56/1.07/-0.28 ---------- */
.hero { background: var(--qr-canvas); padding: 80px 0 80px; }
/* En el móvil 80 px entre la barra y la píldora de las estrellas es media
   pantalla en blanco antes de leer nada. */
@media (max-width: 640px) { .hero { padding-top: 28px; } }
.hero__eyebrow {
  font-size: 14px; font-weight: 400; letter-spacing: -0.224px;
  color: var(--qr-ink-80); background: var(--qr-pearl);
  border: 1px solid var(--qr-hairline); border-radius: 11px;
  padding: 8px 14px; box-shadow: none; margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 56px); line-height: 1.07; letter-spacing: -0.28px;
  font-weight: 600; max-width: 16ch; margin-bottom: 17px;
}
.hero p.lead {
  font-size: clamp(1.1rem, 2vw, 28px); line-height: 1.14; letter-spacing: 0.196px;
  color: var(--qr-ink-80); max-width: 40ch; margin-bottom: 32px;
}
.hero p.lead .lead__remate { font-weight: 600; margin-top: 8px; }
.hero__note { font-size: 12px; letter-spacing: -0.12px; color: var(--qr-ink-48); }

/* Panel de compra de la promoción */
.promo__titulo { font-size: 28px; line-height: 1.14; letter-spacing: 0.196px; font-weight: 600; }
.promo__linea-t { font-weight: 300; }
.promo__pack {
  background: var(--qr-canvas); border: 1px solid var(--qr-hairline);
  border-radius: 11px; box-shadow: none;
}
.promo__pack.is-on { border: 1.5px solid var(--qr-accent); box-shadow: none; }
.promo__pack-n { font-size: 14px; letter-spacing: -0.224px; }
.promo__pack-p { font-size: 12px; letter-spacing: -0.12px; }
.promo__iva { font-size: 12px; letter-spacing: -0.12px; color: var(--qr-ink-48); }

/* ---------- Tiles: cada sección es un lienzo de borde a borde ---------- */
.section { padding: 80px 0; }
.section__head { margin-bottom: 48px; }
.section__head h2 {
  font-size: clamp(2rem, 3.6vw, 40px); line-height: 1.1; letter-spacing: 0;
  font-weight: 600; margin-bottom: 12px;
}
.section__head p { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; color: var(--qr-ink-80); max-width: 44ch; }
.section__head p a { color: var(--qr-accent); }

/* Pergamino */
.checker { background: var(--qr-parchment); padding: 80px 0; }
#como.section { background: var(--qr-parchment) !important; }

/* Carbón: se re-declaran los tokens y todo lo de dentro se adapta solo */
#por-que.section, .trust {
  --text: var(--qr-on-dark); --text-2: var(--qr-on-dark-muted); --text-3: #a1a1a6;
  --surface: var(--qr-tile-2); --surface-2: var(--qr-tile-2);
  --border: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.22);
  --accent: var(--qr-accent-on-dark); --accent-press: #3e61aa;
  --qr-ink-80: var(--qr-on-dark-muted); --qr-ink-48: #a1a1a6;
  color: var(--qr-on-dark);
}
#por-que.section { background: var(--qr-tile-1); }
.trust { background: var(--qr-tile-2); padding: 80px 0; }

/* ---------- Comprobador: tarjeta blanca sin sombra, input pill 44px ---------- */
.checker__card {
  background: var(--qr-canvas); border: 0; border-radius: 18px;
  box-shadow: none; padding: 48px clamp(24px, 5vw, 64px);
}
.checker__badge {
  font-size: 12px; font-weight: 400; letter-spacing: -0.12px;
  color: var(--qr-ink-80); background: var(--qr-pearl);
  border: 1px solid var(--qr-hairline); border-radius: 11px; padding: 8px 14px;
}
.checker h2 { font-size: clamp(1.75rem, 3vw, 34px); line-height: 1.2; letter-spacing: -0.374px; font-weight: 600; }
.checker p { font-size: 17px; letter-spacing: -0.374px; color: var(--qr-ink-80); }
.checker__input {
  height: 44px; padding: 12px 20px; border-radius: 9999px;
  background: var(--qr-canvas); border: 1px solid var(--qr-hairline);
  font-size: 17px; letter-spacing: -0.374px;
}
.checker__input:focus { border-color: var(--qr-accent); box-shadow: none; }
/* En el móvil el botón salta a su propia línea (flex-wrap) y se quedaba a la
   izquierda en un bloque donde todo lo demás va centrado. */
.checker__form { justify-content: center; }
.checker__hint, .checker__note { font-size: 12px; letter-spacing: -0.12px; }
.checker__note { border-top: 1px solid var(--qr-divider); }

/* ---------- Pasos: sin círculos de color detrás del icono ---------- */
.steps { gap: 32px; }
.step { padding: 0 8px; }
.step__n {
  width: auto; height: auto; margin: 0 auto 17px; border-radius: 0;
  background: transparent; color: var(--accent);
  font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0;
}
.step__n .ic { width: 32px; height: 32px; }
.step h3 { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--text-2); }

/* ---------- Tarjetas de producto: pergamino sobre blanco, planas ---------- */
#productos.section { background: var(--qr-canvas); }
.grid { gap: 24px; }
.card {
  background: var(--qr-parchment); border: 0; border-radius: 18px;
  box-shadow: none; transition: none; will-change: auto;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: none; box-shadow: none; }
}
.card__body { padding: 24px; gap: 6px; }
.card__title { font-size: 17px; letter-spacing: -0.374px; }
.card__sub { font-size: 14px; letter-spacing: -0.224px; line-height: 1.43; }
.card__material { font-size: 12px; letter-spacing: -0.12px; }
.card__price { font-size: 21px; letter-spacing: 0.231px; }
.card__badge { box-shadow: none; font-weight: 400; font-size: 12px; }
.card__ph { box-shadow: none; border-radius: 11px; }
.card__add { font-size: 14px; font-weight: 400; letter-spacing: -0.224px; padding: 8px 15px 8px 12px; }
.card__info { border-color: var(--qr-hairline); background: var(--qr-canvas); }

/* «Ver toda la tienda» como enlace de texto, no como botón */
.section__more .btn--ghost {
  background: transparent; color: var(--qr-accent); box-shadow: none;
  padding: 0; font-size: 17px; letter-spacing: -0.374px;
}
.section__more .btn--ghost:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
#faq.section { background: var(--qr-canvas); }
.faqp { border-bottom: 1px solid var(--qr-hairline); }
.ficha__faq { border-top: 1px solid var(--qr-hairline); padding: 20px 0; }
.faqp .ficha__faq summary { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.ficha__faq summary::after { color: var(--qr-accent); font-weight: 300; font-size: 22px; }
.faqp .ficha__faq p { font-size: 17px; letter-spacing: -0.374px; line-height: 1.47; margin-top: 12px; }

/* ---------- Pagos y confianza: tile oscuro sin tarjeta dentro ---------- */
.trust__card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.trust h2 { font-size: clamp(1.75rem, 3vw, 34px); line-height: 1.2; letter-spacing: -0.374px; font-weight: 600; margin-bottom: 10px; }
.trust p { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; margin-bottom: 32px; }
.trust .pay { color: #fff; }
.trust__badges { font-size: 14px; letter-spacing: -0.224px; margin-top: 32px; }

/* ---------- Pie: pergamino, 64px, letra pequeña ---------- */
.footer {
  background: var(--qr-parchment); border-top: 0;
  padding: 64px 0; font-size: 12px; letter-spacing: -0.12px; color: var(--qr-ink-80);
}
.footer__legal a { color: var(--qr-ink-80); }
.footer__legal a:hover { color: var(--qr-ink); text-decoration: none; }
.footer__admin { border-color: var(--qr-hairline); border-radius: 8px; }

/* ---------- Guiño del pie: Cafés MyWay (paso 186) ----------
   El ☕ de «Hecho con ☕» enlaza a la web de la clienta y despliega una
   tarjeta flotante con el claim y su logo. Es la tarjeta «HQ» del mapa de
   LFDP (LFDPv2027/css/mapa.css) con la paleta de Cafés MyWay: cristal
   esmerilado, cabecera marrón café con el claim, inclinada −1,5°, entra con
   muelle desde escala .88, flota cada 5 s y un conector (línea + punto) baja
   hasta el ☕. Es una excepción consciente al «sin sombras» de DESIGN.md:
   es un guiño, no chrome. Sale con hover (solo punteros finos) y con foco de
   teclado; en táctil no sale, el toque abre la web. Sus colores van fijos y
   no con los tokens: el logo es marrón y necesita fondo claro también en
   oscuro. Se cuelga del lado izquierdo del ☕, no centrada: en cuanto el pie
   se parte en dos líneas (≤ 1024 px) la frase queda pegada al borde y una
   tarjeta centrada se salía; anclada a la izquierda cabe en todos los anchos.
   El pivote (transform-origin) y el conector están a 22 px, sobre el ☕. */
.footer__hecho { display: inline; }
.guino { position: relative; display: inline-block; }
.guino__cafe {
  position: relative; display: inline-block; padding: 0 2px; border-radius: 6px;
  /* Es un <button> (paso 190): fuera el aspecto nativo. */
  -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-decoration: none; font-size: 15px; line-height: 1; vertical-align: -1px;
  transition: transform .2s var(--ease-out);
}
/* El área que se toca es mayor que el dibujo: 15 px no se aciertan con el dedo. */
.guino__cafe::before { content: ''; position: absolute; inset: -12px -10px; }
.guino__cafe:focus-visible { outline: 2px solid var(--qr-accent); outline-offset: 2px; }
.guino__card {
  --guino-brown: #5b3a1e; --guino-tan: #c9a96e; --guino-cream: #fdf8f0;
  --guino-ink: #1d1d1f; --guino-line: #e0e0e0; --guino-accent: #3e61aa;
  position: absolute; left: -10px; bottom: calc(100% + 24px); z-index: 60;
  box-sizing: border-box; width: 224px; display: block; text-align: center;
  color: var(--guino-ink);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(91,58,30,.18); border-radius: 16px;
  box-shadow: 0 0 0 .5px rgba(91,58,30,.10), 0 8px 40px rgba(91,58,30,.16),
              0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: rotate(-1.5deg) scale(.88); transform-origin: 22px 100%;
  transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .28s;
}
.guino__head {
  display: block; position: relative; overflow: hidden; text-align: center;
  padding: 16px 12px 14px; border-radius: 15px 15px 0 0;
  background: linear-gradient(135deg, #3f2510 0%, var(--guino-brown) 55%, #7a5230 100%);
  color: var(--guino-cream);
}
.guino__head::before, .guino__head::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08);
}
.guino__head::before { top: -30px; right: -20px; width: 90px; height: 90px; background: rgba(255,255,255,.10); }
.guino__head::after { bottom: -20px; left: 10px; width: 60px; height: 60px; }
/* 800 a petición de Paco (14/09): la única negrita de la web, y es un guiño.
   Centrado y a todo el ancho de la tarjeta, como la ciudad en la de LFDP. */
.guino__claim {
  display: block; position: relative; z-index: 1; width: 100%;
  font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.guino__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 12px; }
.guino__body img { display: block; width: 150px; height: auto; }
/* Puente invisible entre la tarjeta y el ☕: sin él, al subir con el ratón se
   cruzan 24 px que no son de nadie, el hover se pierde y la tarjeta se cierra
   antes de llegar al botón. */
.guino__card::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; }
.guino__url:focus-visible { outline: 2px solid var(--guino-accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .guino__url:hover { text-decoration: underline; } }
.guino__url {
  text-decoration: none; padding-bottom: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; padding-top: 10px; border-top: 1px solid var(--guino-line);
  font-size: 12px; letter-spacing: -0.12px; color: var(--guino-accent);
}
/* Conector: línea y punto que bajan de la tarjeta hasta el ☕ */
.guino__link {
  position: absolute; left: 22px; top: 100%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.guino__line { width: 1.5px; height: 16px; background: linear-gradient(to bottom, rgba(91,58,30,.5), rgba(91,58,30,.1)); }
.guino__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--guino-tan); box-shadow: 0 0 6px rgba(201,169,110,.8); }
.guino.is-abierta .guino__card,
.guino:focus-within .guino__card {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: rotate(-1.5deg) scale(1);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
  animation: guino-float 5s ease-in-out .3s infinite;
}
@media (hover: hover) and (pointer: fine) {
  .guino:hover .guino__card {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: rotate(-1.5deg) scale(1);
    transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
    animation: guino-float 5s ease-in-out .3s infinite;
  }
  .guino:hover .guino__cafe { transform: scale(1.2); }
}
/* En oscuro el cristal al 86 % sobre el pie negro sale gris y apaga el logo:
   casi opaco y en crema. */
@media (prefers-color-scheme: dark) {
  .guino__card { background: rgba(253,248,240,.96); }
}
/* El meneo: al llegar al pie con el scroll, el ☕ se inclina a un lado y a otro
   y crece un pelín, cada 3,2 s, para que se entienda que se pulsa. `is-llamando`
   la pone landing.js cuando el ☕ entra en pantalla y la quita para siempre en
   cuanto se abre la tarjeta. */
.guino.is-llamando .guino__cafe { animation: guino-meneo 3.2s var(--ease-out) infinite; transform-origin: 50% 80%; }
.guino.is-abierta .guino__cafe { transform: scale(1.2); }
@keyframes guino-meneo {
  0%, 38%, 100% { transform: none; }
  8%  { transform: rotate(-14deg) scale(1.25); }
  16% { transform: rotate(11deg) scale(1.25); }
  24% { transform: rotate(-7deg) scale(1.15); }
  31% { transform: rotate(3deg) scale(1.05); }
}
@keyframes guino-float {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50%      { transform: translateY(-8px) rotate(-1.5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .guino__card { transform: rotate(-1.5deg) scale(1); transition: opacity .12s ease, visibility 0s linear .12s; }
  .guino:focus-within .guino__card, .guino:hover .guino__card, .guino.is-abierta .guino__card { animation: none; }
  .guino.is-llamando .guino__cafe { animation: none; }
  .guino:hover .guino__cafe { transform: none; }
}

/* Cookies y modales: quitar sombras de chrome también ahí */
.cartpanel { box-shadow: none; border-left: 1px solid var(--qr-hairline); }

/* Entradillas y titulares: líneas repartidas, sin una palabra suelta al final
   («…las 24 / horas.»). `balance` iguala los renglones; `pretty` de reserva. */
.section__head h2, .section__head p, .hero h1, .hero p.lead,
.checker h2, .checker p, .trust h2, .trust p { text-wrap: balance; }

/* ============================================================
   Páginas interiores
   ============================================================ */

/* Cabecera de página: display-lg 40/1.1 y entradilla tagline 21/1.19 */
.phead { padding: 80px 0 8px; }
.phead h1 { font-size: clamp(2rem, 3.6vw, 40px); line-height: 1.1; letter-spacing: 0; font-weight: 600; margin: 8px 0 12px; text-wrap: balance; }
/* La entradilla: medida de lectura (unos 62 caracteres) y `pretty`, NO
   `balance`. Con `balance`, un texto de varios párrafos se encogía a la mitad
   del ancho para igualar las líneas y quedaba un chorizo estrecho a la
   izquierda (Paco, 12/09). `pretty` solo evita la palabra suelta al final. */
.phead .lead { font-size: 21px; line-height: 1.3; letter-spacing: 0.231px; color: var(--qr-ink-80); max-width: 62ch; text-wrap: pretty; }
.phead .lead p { margin: 0 0 14px; }
.phead .lead p:last-child { margin: 0; }
.crumbs { font-size: 12px; letter-spacing: -0.12px; }
.section--tight { padding-top: 32px; }

/* Selección sin salto de layout: borde + sombra interior del mismo color */
.promo__pack.is-on,
.chipf.is-on,
.fopt.is-on,
.fgal__thumb.is-on,
.cko__tipo:has(input:checked) {
  border-color: var(--qr-accent);
  box-shadow: inset 0 0 0 1px var(--qr-accent);
  background: var(--qr-canvas);
}
.promo__pack.is-on { border-width: 1px; }

/* ---------- Tienda: buscador pill 44px y chips cápsula ---------- */
.filtros__q {
  height: 44px; font-size: 17px; letter-spacing: -0.374px;
  padding: 12px 20px 12px 42px;
  border: 1px solid var(--qr-hairline); background: var(--qr-canvas);
}
.filtros__q:focus { box-shadow: none; border-color: var(--qr-accent); }
.filtros__ir { font-size: 14px; font-weight: 400; padding: 8px 15px; }
.filtros__lbl { font-weight: 400; color: var(--qr-ink-48); }
.chipf, .etnav__a {
  font-size: 14px; letter-spacing: -0.224px; color: var(--qr-ink-80);
  background: var(--qr-pearl); border: 1px solid var(--qr-hairline); padding: 8px 14px;
}
.chipf:hover, .etnav__a:hover { border-color: var(--qr-ink-48); color: var(--qr-ink); }
.chipf.is-on { color: var(--qr-accent); }
.chipf.is-on .chipf__n { color: var(--qr-accent); opacity: .7; }
.chipf--hija { font-size: 12px; padding: 6px 11px; }
.tienda__count { font-size: 12px; letter-spacing: -0.12px; }
.etnav__t { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; }

/* ---------- Ficha de producto ---------- */
.fgal__main { border: 0; background: var(--qr-parchment); border-radius: 18px; }
.fgal__thumb { border: 1px solid var(--qr-hairline); border-radius: 8px; background: var(--qr-parchment); }
.ficha__price span { font-size: 34px; line-height: 1.2; letter-spacing: -0.374px; font-weight: 600; }
.ficha__price small { font-size: 12px; letter-spacing: -0.12px; }
.ficha__optlabel { font-size: 12px; letter-spacing: -0.12px; color: var(--qr-ink-48); }
.fopt {
  font-size: 14px; letter-spacing: -0.224px;
  border: 1px solid var(--qr-hairline); background: var(--qr-canvas);
  border-radius: 9999px; padding: 10px 16px;
}
.fopt.is-on { color: var(--qr-ink); }
.ficha__sec h2 { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; }
.ficha__specs { font-size: 14px; letter-spacing: -0.224px; }
.ficha__desc, .ficha__ventajas { font-size: 17px; letter-spacing: -0.374px; line-height: 1.47; }

/* ---------- El taller ---------- */
.tstat { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 24px; }
.tstat strong { font-size: 40px; line-height: 1.1; letter-spacing: 0; font-weight: 600; }
.tstat span { font-size: 14px; letter-spacing: -0.224px; }
.fase { grid-template-columns: 56px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--qr-hairline); }
.fase__n {
  width: auto; height: auto; border-radius: 0; background: transparent;
  font-size: 34px; line-height: 1; font-weight: 600; color: var(--qr-accent);
  display: block; place-items: unset;
}
.fase h3 { font-size: 21px; line-height: 1.19; letter-spacing: 0.231px; font-weight: 600; margin: 0 0 6px; }
.fase p { font-size: 17px; letter-spacing: -0.374px; line-height: 1.47; }
.tlista { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 24px; }
.tlista h3 { font-size: 21px; letter-spacing: 0.231px; font-weight: 600; }
.tlista ul { font-size: 17px; letter-spacing: -0.374px; line-height: 1.6; }
.tvideo video { border-radius: 18px; }

/* ---------- Guías ---------- */
.guiacard { border: 0; background: var(--qr-parchment); border-radius: 18px; box-shadow: none; padding: 24px; }
.guiacard:hover { transform: none; box-shadow: none; }
.guiacard__meta { font-size: 12px; letter-spacing: -0.12px; }
.guia__cta, .guia__audio { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 24px; }
.guia__otras li { border-top: 1px solid var(--qr-hairline); }

/* ---------- Campos de formulario: radio 11, hairline, sin halo ---------- */
.fld input, .fld select, .fld textarea,
.field input, .acceso__form input, .ctc__select {
  border: 1px solid var(--qr-hairline); border-radius: 11px; background: var(--qr-canvas);
  box-shadow: none; font-size: 17px; letter-spacing: -0.374px; color-scheme: light dark;
}
.fld input:focus, .fld select:focus, .fld textarea:focus,
.field input:focus, .acceso__form input:focus, .ctc__select:focus {
  outline: none; border-color: var(--qr-accent); box-shadow: none;
}
.fld__ayuda { font-size: 12px; letter-spacing: -0.12px; }
.ctc__card { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 24px; box-shadow: none; }
.ctc__card--tenue { background: var(--qr-pearl); border: 1px solid var(--qr-hairline); }

/* ---------- Carrito y checkout: bloques planos en pergamino ---------- */
.cline { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 17px; }
.cart__resumen, .cko__bloque { border: 0; background: var(--qr-parchment); border-radius: 18px; padding: 24px; }
.cko__bloque--destacado { box-shadow: inset 0 0 0 1px var(--qr-accent); }
.cko__tipo, .cko__recargo { background: var(--qr-canvas); border: 1px solid var(--qr-hairline); border-radius: 11px; }
.cko__tipo:hover { border-color: var(--qr-ink-48); }
.cres { border: 0; background: var(--qr-parchment); border-radius: 18px; }
.cres__aviso { background: var(--qr-pearl); border: 1px solid var(--qr-hairline); }
.cart__total, .cko__total { font-size: 21px; letter-spacing: 0.231px; }

/* ---------- Color de realce por promoción (Portada → Promociones) ----------
   landing.js pone `--promo-accent` y `--promo-on-accent` en `.promo` al cambiar
   de placa (la primera viene inline desde PHP). Dentro del bloque, `--accent`
   pasa a ser ese color y todo lo que ya lo usaba (iconos, pack elegido, puntos,
   botón) se tiñe solo. Sin color, manda el azul de la web. */
.promo {
  --accent: var(--promo-accent, var(--qr-accent));
  --accent-press: color-mix(in srgb, var(--accent) 82%, #000);
}
.promo .btn--primary, .promo .promo__pct { color: var(--promo-on-accent, #fff); }
.promo .promo__pack.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* El color acompaña al barrido de la foto (0,58 s, misma curva): iconos, botón
   y puntos funden de un color al otro. Los packs y las etiquetas de descuento
   se vuelven a crear en cada cambio (cambian los precios), así que nacen ya
   con el color nuevo. Con «reducir movimiento», cambio en seco. */
.promo__vic { transition: color .58s var(--ease-out); }
.promo .btn--primary { transition: background .58s var(--ease-out), color .58s var(--ease-out), transform .1s var(--ease-out); }
.promo__dot span { transition: background .58s var(--ease-out), transform .3s var(--spring); }
@media (prefers-reduced-motion: reduce) {
  .promo__vic, .promo .btn--primary, .promo__dot span { transition: none; }
}

/* ---------- Las flechas de la promo se insinúan ----------
   Un toque hacia donde llevan —5 px y vuelta, con muelle— cada 3,6 s, las dos
   a la vez, para que se entienda que hay otra placa y que se pulsan. Se anima
   el SVG y no el botón: el botón ya usa `transform` para centrarse y para el
   hover, y dos dueños del mismo `transform` se pisan. Calla en cuanto el
   visitante toca el bloque (`is-tocado`, lo pone landing.js), mientras el
   ratón está encima de la flecha (ahí manda el hover) y con «reducir
   movimiento». */
@keyframes promo-toque-der { 0%, 78%, 100% { transform: none; } 88% { transform: translateX(5px); } }
@keyframes promo-toque-izq { 0%, 78%, 100% { transform: none; } 88% { transform: translateX(-5px); } }
.promo__nav--der svg { animation: promo-toque-der 3.6s var(--spring) 1.8s infinite; }
.promo__nav--izq svg { animation: promo-toque-izq 3.6s var(--spring) 1.8s infinite; }
.promo.is-tocado .promo__nav svg, .promo__nav:hover svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .promo__nav svg { animation: none; }
}

/* Tienda: tarjetas de 270 px como mínimo. Con 250 entraban CINCO por fila en
   una pantalla grande (la portada enseña cuatro) y todo quedaba apretado. Con
   270 son cuatro desde ~1560 px de ventana —como la portada— y tres en un
   portátil; nunca cinco, porque `--maxw` para en 1440. Por qué 270 y no 300:
   el `.wrap` lleva 22 px de relleno a cada lado, y con 300 (o 280) a 1600 px
   no cabían cuatro y la tienda se quedaba en tres columnas de 375 px mientras
   la portada seguía en cuatro. La parrilla de destacados (`auto-fit`) no se toca. */
.grid:not(.grid--destacados) { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* ---------- Tarjeta: segunda foto al pasar el ratón (024, `hover_2`) ----------
   Solo con puntero fino: en táctil no hay hover y se queda la primera. La 2.ª
   va encima, transparente, y funde en 0,32 s con un pelín de zoom, como en la
   tienda de Horeca. Con «reducir movimiento», funde sin zoom. */
.card--hover2 .card__media { position: relative; }
.card--hover2 .card__img2 { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .card--hover2 .card__media img { transition: opacity .32s ease, transform .6s var(--ease-out); }
  .card--hover2 .card__media:hover img { transform: scale(1.03); }
  .card--hover2 .card__media:hover .card__img2 { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card--hover2 .card__media:hover img { transform: none; }
}

/* ---------- Atajos del panel sobre el carrito (paso 180, solo logueado) ----------
   Dos botones grises, apilados encima del carrito y a su misma distancia del
   borde. Van a la altura del carrito + 68 px aunque el carrito esté escondido
   (vacío): así no bailan cuando aparece. */
.adminfab {
  position: fixed; right: 30px; bottom: calc(24px + 68px + var(--ckb-h, 0px)); z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
  transition: bottom .25s var(--ease-out);
}
.adminfab__b {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; padding: 0; font: inherit;
  background: color-mix(in srgb, var(--text) 58%, var(--bg)); color: var(--bg);
  transition: transform .18s var(--spring), background .2s;
}
.adminfab__b:hover { transform: scale(1.06); background: color-mix(in srgb, var(--text) 75%, var(--bg)); }
.adminfab__b:active { transform: scale(.94); }
.adminfab__b.is-done { background: var(--ahorro); }

/* El tooltip (z 300 en landing.css) se colaba por DEBAJO de los botones
   flotantes (z 400): el «Copiar el enlace público» salía tapado por el lápiz.
   Un tooltip va encima de todo, también del panel del carrito (500). */
.tip { z-index: 700; }

/* Descripción de la ficha (183): párrafos de verdad, no <br><br> */
.ficha__desc p { margin: 0 0 14px; }
.ficha__desc p:last-child { margin: 0; }

/* ---------- Tienda con lateral (184): buscador y filtros en una columna fija ----------
   Como el «Categorías» de la tienda de Horeca. La página de la tienda usa un
   contenedor más ancho para que, con la columna, las tarjetas midan lo mismo
   que antes (4 de ~330 px en un monitor grande, 3 en un portátil). */
.phead--tienda .wrap, .section--tienda .wrap { max-width: clamp(1120px, 90vw, 1700px); }
.tienda-lay { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.lateral {
  position: sticky; top: calc(var(--nav-h) + 24px); align-self: start;
  max-height: calc(100dvh - var(--nav-h) - 40px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 6px;
}
.lateral .filtros { gap: 6px; margin: 0; }
.lateral .filtros__buscar { max-width: none; margin-bottom: 12px; }
.lateral .filtros__q { font-size: 15px; height: 42px; padding-left: 40px; }
.arbol__todo { display: block; padding: 8px 0 6px; font-size: 15px; letter-spacing: -0.224px; font-weight: 600; color: var(--qr-ink-80); text-decoration: none; border-bottom: 1px solid var(--qr-hairline); margin-bottom: 4px; }
.arbol__todo:hover, .arbol__todo.is-act { color: var(--qr-ink); }
.arbol__todo.is-act::before { content: '● '; color: var(--qr-accent); font-size: 9px; vertical-align: 2px; }
.lateral .filtros__eje { display: block; }
.arbol__tog {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 0 4px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--qr-ink-48);
}
.arbol__tog .filtros__lbl { margin: 0; }
.arbol__ico { transition: transform .22s var(--ease-out); flex: none; }
.arbol__fam.is-open .arbol__ico { transform: rotate(180deg); }
/* Despliegue con grid-template-rows: interrumpible y sin medir alturas en JS. */
.arbol__hijos { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s var(--ease-out); }
.arbol__fam.is-open .arbol__hijos { grid-template-rows: 1fr; }
.arbol__sub { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.arbol__fam.is-open .arbol__sub { padding-bottom: 6px; }
/* Los chips, como filas de un menú: sin cápsula, con un punto cuando están activos */
.lateral .chipf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0 7px 16px; border: 0; background: none; border-radius: 0;
  font-size: 15px; letter-spacing: -0.224px; color: var(--qr-ink-80); position: relative;
  transition: color .14s;
}
.lateral .chipf::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--qr-accent); opacity: 0; transition: opacity .16s; }
.lateral .chipf:hover { color: var(--qr-ink); }
.lateral .chipf.is-on { color: var(--qr-ink); font-weight: 600; box-shadow: none; background: none; }
.lateral .chipf.is-on::before { opacity: 1; }
.lateral .chipf__n { font-size: 12px; letter-spacing: -0.12px; color: var(--qr-ink-48); opacity: 1; }
.lateral .chipf.is-vacio { opacity: .38; }
.lateral .chipf--hija { padding-left: 32px; font-size: 14px; }
.lateral .chipf--hija::before { left: 18px; }
.listado { min-width: 0; }
.listado .tienda__count { margin-top: 6px; }
/* NUNCA más de cuatro por fila: Paco lo pidió expresamente (con 250 px de
   mínimo y el contenedor ancho volvían a caber cinco en su monitor). Por
   debajo de cuatro, `auto-fill` decide como siempre: tres en portátil, dos en
   tablet. Con el contenedor a 1700 y el lateral, cuatro salen a ~335 px. */
.tienda-lay .grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
@media (min-width: 1600px) { .tienda-lay .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Estrecho: el lateral pasa arriba y los filtros vuelven a ser chips en fila. */
@media (max-width: 899px) {
  .tienda-lay { grid-template-columns: 1fr; gap: 18px; }
  .lateral { position: static; max-height: none; overflow: visible; padding: 0; }
  .arbol__todo { display: none; }
  .arbol__tog { pointer-events: none; padding: 6px 0 4px; }
  .arbol__ico { display: none; }
  .arbol__hijos { display: block; }
  .arbol__sub { flex-direction: row; flex-wrap: wrap; gap: 7px; overflow: visible; }
  .lateral .chipf { padding: 7px 13px; border: 1px solid var(--qr-hairline); border-radius: 9999px; background: var(--qr-pearl); font-size: 14px; }
  .lateral .chipf::before { display: none; }
  .lateral .chipf.is-on { color: var(--qr-accent); box-shadow: inset 0 0 0 1px var(--qr-accent); font-weight: 400; }
  .lateral .chipf--hija { padding: 6px 11px; font-size: 12px; }
}