/* =====================================================================
   PLANTILLA 7 — SISTEMA DE DISENO WLMP · revision DENSA
   Portado del Artifact "Plantilla 7 · Sistema WLMP" (v10), re-estilado
   contra la referencia medida en dev.farmaciajana.com (tema GreenMart).

   CAMBIOS DE ESTA REVISION, todos decididos por el usuario:
     - ancho de contenido 1200px FIJO (antes: completo)
     - fondo de pagina BLANCO (antes #f0f2fc; el tinte pasa a --band)
     - escala densa: cuerpo 15px, titulo de seccion 24px, hero 32px
     - CERO sombras salvo --shadow-float y --shadow-modal
     - radios planos: 6 en controles, 8 en superficies

   Todo vive bajo .p7 y con prefijo p7- para no chocar con Bootstrap 4.
   Las secciones NO usan .row/.col-*.

   Los tokens del tenant (--brand, --accent, --font-ui) NO se declaran
   aqui: los inyecta head-content.blade.php desde client_preferences.
   ===================================================================== */


/* ═══════════════════════════════════════════════════════════════════
   PLANTILLA 7 — SISTEMA DE TOKENS · revisión DENSA
   Todo lo de abajo vive bajo .p7. Cambiar --brand y --accent
   re-tematiza el conjunto completo.
   Esta revisión re-estila el sistema: más denso, más plano, más
   comercial. Los tres tokens del tenant no cambian.
   ═══════════════════════════════════════════════════════════════════ */
.p7,.pac-container{
  /* ── 1. PLATAFORMA (constantes, no configurables por tenant) ── */
  --p7-bg:#ffffff;              /* antes #f0f2fc — la página es BLANCA */
  --p7-surface:#ffffff;
  --maxw:1200px;                /* ancho de contenido FIJO */
  --ok:#16a34a; --warn:#b45309; --danger:#c02640; --info:#1d4ed8;
  --price:#c62828;              /* PRECIO: rojo de plataforma, ajeno a la marca */

  /* ── 2. TENANT (lo único que se configura: 3 valores) ── */
  --brand:#a06cd5;
  --accent:#faba3e;

  /* ── 3. DERIVADOS DE MARCA — superficies (L absoluta, croma del brand) ──
     La luminosidad es fija para que un brand oscuro (alivia) y uno claro
     (Petludos) produzcan superficies igual de utilizables bajo texto --ink. */
  --brand-50 :oklch(from var(--brand) .975 calc(c * .16) h);
  --brand-100:oklch(from var(--brand) .945 calc(c * .30) h);
  --brand-200:oklch(from var(--brand) .900 calc(c * .46) h);
  --brand-300:oklch(from var(--brand) .820 calc(c * .62) h);

  /* ── 4. DERIVADOS DE MARCA — figura (L relativa al brand) ── */
  --brand-500:var(--brand);
  --brand-ink:oklch(from var(--brand) min(l,.54) c h);      /* texto y relleno de controles */
  --brand-600:oklch(from var(--brand) min(l,.54) c h);
  --brand-700:oklch(from var(--brand) calc(min(l,.54) - .07) c h);
  --brand-800:oklch(from var(--brand) calc(min(l,.54) - .13) c h);
  --brand-900:oklch(from var(--brand) .26 calc(c * .78) h);
  --on-brand:#ffffff;

  /* ── 5. GRADIENTE DE PANEL (hero, promo_app) ── */
  --hero-1:oklch(from var(--brand) calc(l + .10) calc(c * .92) h);
  --hero-2:var(--brand);
  --hero-3:var(--brand-900);

  /* ── 6. DERIVADOS DE ACENTO ── */
  --accent-500:var(--accent);
  --accent-50 :oklch(from var(--accent) .960 calc(c * .28) h);
  --on-accent :oklch(from var(--accent) .240 calc(c * .60) h);  /* texto sobre acento */
  --accent-ink:oklch(from var(--accent) min(l,.50) c h);        /* acento como texto */

  /* ── 7. NEUTRALES teñidos por el tono de marca — LUMINOSIDADES RECALIBRADAS
     La derivación no cambia (tono del brand, croma ~.01–.026). Lo que cambia
     son las luminosidades: el texto dominante deja de ser casi-negro y cae en
     gris medio, como en la referencia medida. --band es la banda de cabecera. */
  --ink-strong:oklch(from var(--brand) .290 .026 h);  /* tinta oscura: h1, valores de ficha */
  --ink       :oklch(from var(--brand) .455 .022 h);  /* TEXTO DOMINANTE (gris medio) */
  --muted     :oklch(from var(--brand) .555 .020 h);  /* apagado: metadatos, etiquetas */
  --line      :oklch(from var(--brand) .905 .012 h);  /* borde normal */
  --line-2    :oklch(from var(--brand) .845 .016 h);  /* borde marcado, separadores */
  --band      :oklch(from var(--brand) .968 .008 h);  /* banda gris de cabecera de sección */
  --stars-off :oklch(from var(--brand) .800 .010 h);  /* estrella sin nota */

  /* ── 8. FOCO ── */
  --focus:var(--brand-ink);
  --focus-ring:0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);

  /* ── 9. TIPOGRAFÍA · ESCALA DENSA ──
     La familia es configurable por tenant (client_preferences.web_font).
     --font-adjust normaliza la altura-x. La escala se adopta de la referencia:
     ningún texto de interfaz pasa de 24 px salvo el h1 del hero. */
  --font-ui:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  --font-adjust:0.52;
  --w-body:400; --w-med:500; --w-semi:600; --w-bold:700; --w-display:700;
  --fs-2xs:.6875rem;   /* 11 px · antetítulo, contador de badge */
  --fs-xs:.75rem;      /* 12 px · metadatos, tienda, SKU */
  --fs-sm:.8125rem;    /* 13 px · chips, topbar */
  --fs-md:.875rem;     /* 14 px · secundario, BOTÓN */
  --fs-base:.9375rem;  /* 15 px · CUERPO, nombre de producto */
  --fs-lg:1rem;        /* 16 px · «Ver todos», botón grande de ficha */
  --fs-xl:1.125rem;    /* 18 px · PRECIO en tarjeta */
  --fs-2xl:1.5rem;     /* 24 px FIJO · título de sección y h1 de listado */
  --fs-3xl:clamp(1.375rem, 1.05rem + 1.1vw, 2rem); /* 22→32 · SÓLO h1 del hero */
  --fs-price-pdp:1.75rem; /* 28 px · precio en la ficha de producto */
  --lh-tight:1.18; --lh-head:1.3; --lh-body:1.55;
  --tr-eyebrow:.12em; --tr-head:0;   /* sin tracking negativo: 24 px no lo necesita */

  /* ── 10. ESPACIADO (base 4) ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --gutter:16px;                        /* fijo: el ancho lo topa --maxw */
  --sec-pad:clamp(20px, 2.4vw, 28px);   /* antes 30–46: la referencia es más densa */
  --grid-gap:12px;
  --aside-w:233px;                      /* lateral de subcategorías y de filtros */
  --aside-gap:24px;

  /* ── 11. RADIOS — planos ── */
  --r-chip:6px; --r-btn:6px; --r-tile:8px; --r-card:8px; --r-panel:8px; --r-pill:999px;

  /* ── 12. SOMBRAS — SÓLO para lo que flota de verdad ──
     No hay sombra en tarjetas, mosaicos, cromo ni paneles. La separación
     la dan el espacio, el borde de 1 px y la banda gris. */
  --shadow-float:0 4px 14px color-mix(in oklab, var(--ink-strong) 14%, transparent);
  --shadow-modal:0 16px 48px color-mix(in oklab, var(--ink-strong) 22%, transparent);

  /* ── 13. MOVIMIENTO ── */
  --dur-fast:120ms; --dur:160ms; --dur-slow:300ms; --ease:cubic-bezier(.2,.6,.3,1);

  /* ── 14. CAPAS ── */
  --z-topbar:40; --z-header:50; --z-drawer:60; --z-modal:70;

  /* ── 15. ALTURAS FIJAS DEL CROMO · 36 + 84 + 40 = 160 px ── */
  --h-topbar:36px; --h-header:84px; --h-search:58px; --h-catrail:40px; --h-logo:40px;

  /* ── 16. TARJETA DE PRODUCTO (medidas exactas) ── */
  --card-w:228px; --card-img:188px;
  --card-pad-x:19px; --card-pad-t:24px; --card-pad-b:32px;
  --card-btn-h:40px;
}

/* El cromo responde al ancho del contenedor, no de la ventana. */
.p7{container-type:inline-size;container-name:p7}

/* Guardarrail horizontal solo en el cuerpo de la home: los rieles recortan
   con overflow-x:auto, pero su ancho de scroll inflaba el del documento.
   En main y NO en .p7, porque el cromo lleva cabecera sticky. */
main.p7{overflow-x:clip}

/* Respaldo para motores sin sintaxis de color relativa: neutrales sin tenir. */
@supports not (color: oklch(from #fff l c h)){
  .p7,.pac-container{
    --brand-50:#f7f6fa;--brand-100:#eeecf2;--brand-200:#dedbe5;--brand-300:#c2bed0;
    --brand-ink:var(--brand);--brand-600:var(--brand);--brand-700:var(--brand);
    --brand-800:var(--brand);--brand-900:#2c2838;
    --hero-1:var(--brand);--hero-3:#2c2838;
    --accent-50:#fbf7ec;--on-accent:#2e2405;--accent-ink:#7a5c10;
    --ink-strong:#2e2a36;--ink:#5a5560;--muted:#77717d;
    --line:#e3e0e8;--line-2:#cfcbd6;--band:#f6f5f9;--stars-off:#bfbcc4;
  }
}
/* ── Base de la plantilla ── */
.p7{background:var(--p7-bg);color:var(--ink);font-family:var(--font-ui);line-height:var(--lh-body);
  font-size:var(--fs-base);font-size-adjust:var(--font-adjust)}
.p7 *{box-sizing:border-box}
/* Interruptores del tenant: cada pieza opcional se apaga con data-off. */
.p7[data-off~="wishlist"] [data-sw="wishlist"],
.p7[data-off~="cart"] [data-sw="cart"],
.p7[data-off~="rating"] [data-sw="rating"],
.p7[data-off~="contact"] [data-sw="contact"],
.p7[data-off~="navicons"] [data-sw="navicons"],
.p7[data-off~="quicklink"] [data-sw="quicklink"],
.p7[data-off~="navbar"] [data-sw="navbar"],
.p7[data-off~="payicons"] [data-sw="payicons"],
.p7[data-off~="qr"] [data-sw="qr"]{display:none!important}
/* :where() para que esta regla NO gane por especificidad.
   Con `.p7 a` (0,1,1) el reset se imponia a las clases de 1 solo nivel:
   .p7-btn--onpanel (0,1,0) y .p7-name (0,1,0) perdian su color y heredaban
   el del contenedor. En el hero eso daba un boton BLANCO SOBRE BLANCO.
   Con :where(.p7) baja a (0,0,1) y cualquier clase lo vence.
   ⚠️ El mismo fallo esta en el Artifact del sistema: hay que corregirlo alli. */
:where(.p7) a{color:inherit;text-decoration:none}
/* Bootstrap trae `a:hover{color:#3827c1}` (0,1,1), que vence a cualquier
   clase suelta (0,1,0): en hover el nombre, la farmacia, el logo, "Ver todo",
   las tarjetas de tienda y la letra de los botones se volvian AZULES.
   Cada enlace de la plantilla fija su color TAMBIEN en :hover (0,2,0).
   Al anadir un componente <a> nuevo sin :hover propio, sumarlo aqui. */
.p7-logo:hover,.p7-more:hover{color:var(--brand-ink)}
.p7-vcard:hover,.p7-tile:hover,.p7-cat:hover,.p7-brand:hover{color:var(--brand)} /* = el `a{color}` del panel */
.p7-store:hover{color:#fff}
.p7 button{font-family:inherit}
.p7 :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
/* CONTENEDOR FIJO: 1200 px de contenido + 16 px de aire a cada lado. */
.p7-wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter) * 2);margin-inline:auto;
  padding-inline:var(--gutter)}
.p7 h1,.p7 h2,.p7 h3{margin:0;font-weight:var(--w-bold);letter-spacing:var(--tr-head);text-wrap:balance}
.p7-eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--brand-ink)}
.p7-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Contrato de sección: idéntico para las 13, sin supuestos de posición ── */
.p7-section{padding-block:var(--sec-pad);position:relative}
.p7-section:empty{display:none}
.p7-section:first-child{padding-top:calc(var(--sec-pad) * .75)}
.p7-section:last-child{padding-bottom:calc(var(--sec-pad) * 1.6)}
.p7-panel-sec + .p7-panel-sec{padding-top:0}       /* dos paneles seguidos no doblan el aire */
/* Separador entre secciones de contenido (decision del usuario 2026-09-23): sin
   banda gris ni bordes de tarjeta, el espacio solo no marcaba el cambio de seccion,
   sobre todo en movil. 1px --line al ancho del contenido; nunca junto a un panel
   (hero, promo), que ya tiene fondo propio, ni antes de la primera seccion.
   La linea ocupa el lugar del padding-top: el aire queda igual a cada lado. */
.p7 > .p7-section:not(.p7-panel-sec) + .p7-section:not(.p7-panel-sec){padding-top:0}
.p7 > .p7-section:not(.p7-panel-sec) + .p7-section:not(.p7-panel-sec) > .p7-wrap::before{
  content:"";display:block;height:1px;background:var(--line);margin-bottom:var(--sec-pad)}

/* La hoja heredada color1-style.css trae `h1,h2{text-transform:uppercase}`: los
   titulos de seccion y del hero salian en MAYUSCULAS. La plantilla no lo pide;
   lo que si va en mayusculas (antetitulo, pill, h4 del footer) lo fija su clase. */
.p7 h1,.p7 h2{text-transform:none}
/* CABECERA DE SECCIÓN · decision del usuario 2026-09-23: SIN fondo ni linea (antes
   banda gris); titulo 20px en tinta oscura; alineado a ras de las tarjetas. */
.p7-sechead{padding:0;margin-bottom:var(--s-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.p7-sechead h2{font-size:1.25rem;line-height:1.25;color:var(--ink-strong);font-weight:var(--w-bold)}
.p7-sechead .sub{color:var(--muted);font-size:var(--fs-md);margin-top:2px;font-weight:var(--w-body)}
.p7-more{color:var(--brand-ink);font-weight:var(--w-body);font-size:var(--fs-lg);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:40px;
  align-self:center}
.p7-more:hover{text-decoration:underline;text-underline-offset:3px}
@container p7 (max-width:560px){
  .p7-sechead{flex-wrap:wrap;gap:var(--s-2)}
  .p7-more{font-size:var(--fs-md);min-height:32px}
}

/* ── Controles ── */
.p7-btn{border:0;cursor:pointer;font-weight:var(--w-bold);font-size:var(--fs-md);
  border-radius:var(--r-btn);padding:11px 20px;display:inline-flex;align-items:center;gap:8px;
  min-height:40px;justify-content:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.p7-btn--lg{font-size:var(--fs-lg);min-height:48px;padding:13px 24px}
.p7-btn--solid{background:var(--brand-ink);color:var(--on-brand)}
.p7-btn--solid:hover{background:var(--brand-700);color:var(--on-brand)}
.p7-btn--accent{background:var(--accent);color:var(--on-accent)}
.p7-btn--accent:hover{background:oklch(from var(--accent) calc(l - .05) c h);color:var(--on-accent)}
.p7-btn--onpanel{background:#fff;color:var(--brand-800)}
.p7-btn--onpanel:hover{background:var(--brand-50);color:var(--brand-800)}
.p7-btn--ghostpanel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.p7-btn--ghostpanel:hover{background:rgba(255,255,255,.16);color:#fff}
.p7-btn--quiet{background:transparent;color:var(--brand-ink);border:1px solid var(--line-2)}
.p7-btn--quiet:hover{background:var(--brand-50);border-color:var(--brand-ink);color:var(--brand-ink)}
.p7-chip{white-space:nowrap;padding:8px 14px;border-radius:var(--r-chip);border:1px solid var(--line);
  background:transparent;font-size:var(--fs-sm);font-weight:var(--w-semi);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:32px;transition:all var(--dur) var(--ease)}
.p7-chip:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.p7-chip[aria-current="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.p7-pill{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 7px;border-radius:4px;background:var(--ok);color:#fff}
.p7-disc{background:var(--price);color:#fff;font-weight:700;font-size:var(--fs-xs);
  padding:3px 8px;border-radius:4px}
/* Estrellas: SIEMPRE visibles. Grises si no hay nota. */
.p7-stars{color:var(--accent-ink);letter-spacing:1px;font-size:var(--fs-xs);line-height:1}
.p7-stars[data-rate="0"]{color:var(--stars-off)}
.p7-rate{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--muted);
  min-height:17px}

/* ── CROMO: topbar utilitaria · 36 px ── */
.p7-util{background:var(--p7-surface);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.p7-util .p7-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:var(--h-topbar)}
.p7-util a{display:inline-flex;align-items:center;gap:6px}
.p7-util a:hover{color:var(--brand-ink)}
.p7-util .loc{color:var(--ink);font-weight:var(--w-semi)}
.p7-util .right{display:flex;gap:18px}
@container p7 (max-width:680px){ .p7-util .right a span{display:none} .p7-util .right{gap:14px} }

/* ═══════════════════════════════════════════════════════════════════
   UBICACIÓN · disparador de la barra + modal #edit-address + lista de Google
   Ficha aprobada: https://claude.ai/artifact/3zWkh7sMd3C8SuE6TvDTt7
   Requiere: .p7 en el .modal-content y .pac-container en los selectores de
   tokens (arriba, en el @supports y en head-content.blade.php).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DISPARADOR «Entregar en …» · barra utilitaria de 36 px ──
   La dirección NO se oculta a ningún ancho: se trunca con elipsis.
   Cada <a> fija su color también en :hover (Bootstrap: a:hover{color:#3827c1}). */
.p7-util .p7-loc{flex:0 1 auto;min-width:0;max-width:640px;height:var(--h-topbar);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:var(--ink);font-weight:var(--w-body);text-decoration:none;cursor:pointer}
.p7-util .p7-loc:hover{color:var(--ink);text-decoration:none}
.p7-util .p7-loc:focus-visible{outline-offset:-2px}          /* el anillo no se sale de la barra */
.p7-loc-pin{flex:none;color:var(--accent)}
.p7-loc-lbl{flex:none;color:var(--muted)}
.p7-loc-addr{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink-strong);
  font-weight:var(--w-semi);transition:color var(--dur) var(--ease)}
.p7-loc-chev{flex:none;color:var(--muted);transition:color var(--dur) var(--ease)}
.p7-util .p7-loc:hover .p7-loc-addr,
.p7-util .p7-loc:hover .p7-loc-chev{color:var(--brand-ink)}
/* Sin dirección: la acción va en color de marca */
.p7-loc.is-empty .p7-loc-addr{color:var(--brand-ink)}
.p7-util .p7-loc.is-empty:hover .p7-loc-addr{color:var(--brand-800)}
@container p7 (max-width:960px){ .p7-util .p7-loc{max-width:none} }
@container p7 (max-width:560px){ .p7-util .p7-loc{gap:5px} .p7-util .right{flex:none} }

/* ── 2. MODAL #edit-address ──
   Todo anclado al #id: gana a Bootstrap 4 y a color1-style sin !important. */
#edit-address .modal-dialog{max-width:480px}
#edit-address .modal-content{border:0;border-radius:var(--r-panel);background:var(--p7-surface);
  box-shadow:var(--shadow-modal);padding:var(--s-6);color:var(--ink)}

/* Cabecera: título + subtítulo + cerrar */
#edit-address .p7-locm-head{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-5)}
#edit-address .p7-locm-title{margin:0;font-family:inherit;font-size:var(--fs-xl);line-height:var(--lh-head);
  font-weight:var(--w-bold);color:var(--ink-strong);text-transform:none;letter-spacing:0}
#edit-address .p7-locm-sub{margin:4px 0 0;font-size:var(--fs-md);line-height:1.45;color:var(--muted)}
#edit-address .p7-locm-x{flex:none;width:40px;height:40px;margin:-8px -8px 0 auto;padding:0;
  display:grid;place-items:center;border:0;border-radius:var(--r-btn);background:transparent;
  color:var(--muted);cursor:pointer;float:none;opacity:1;text-shadow:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
#edit-address .p7-locm-x:hover{background:var(--band);color:var(--ink-strong)}
#edit-address .p7-locm-x:active{background:var(--line);color:var(--ink-strong)}

/* Campo de dirección */
#edit-address .p7-locm-label{display:block;margin:0 0 6px;font-size:var(--fs-sm);line-height:1.3;
  font-weight:var(--w-semi);color:var(--ink-strong);text-transform:none;letter-spacing:0}
#edit-address .p7-locm-inp{position:relative}
#edit-address .p7-locm-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--accent);pointer-events:none;transition:color var(--dur) var(--ease)}
#edit-address #address-input{display:block;width:100%;height:48px;margin:0;padding:0 14px 0 40px;
  border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--p7-surface);box-shadow:none;
  font-family:inherit;font-size:var(--fs-lg);font-weight:var(--w-body);line-height:1.3;   /* 16 px: iOS no hace zoom al enfocar */
  color:var(--ink-strong);text-overflow:ellipsis;appearance:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
#edit-address #address-input::placeholder{color:var(--muted);opacity:1}
#edit-address #address-input:hover{border-color:var(--muted)}
#edit-address #address-input:focus{outline:0;border-color:var(--brand-ink);box-shadow:var(--focus-ring)}
#edit-address .p7-locm-help{margin:6px 0 0;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
#edit-address .p7-locm-err{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;
  font-size:var(--fs-xs);line-height:1.4;font-weight:var(--w-semi);color:var(--danger)}
#edit-address .p7-locm-err svg{flex:none;margin-top:1px}
#edit-address .p7-locm-err[hidden]{display:none}
/* Error: lo activa .is-error en .p7-locm-field (ver sección 09) */
#edit-address .p7-locm-field.is-error #address-input{border-color:var(--danger);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent)}
#edit-address .p7-locm-field.is-error .p7-locm-ico{color:var(--danger)}
#edit-address .p7-locm-field.is-error .p7-locm-help{display:none}

/* «Usar mi ubicación actual» · acción secundaria de texto (no compite con el botón turquesa)
   Oculto por defecto ([hidden] en el marcado): el script lo muestra sólo si hay geolocalización.
   Cargando = aria-busy="true" (NO disabled: un botón deshabilitado pierde el foco dentro del modal). */
#edit-address .p7-locm-geo{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin:2px 0 0 -8px;padding:0 8px;border:0;border-radius:var(--r-btn);background:transparent;box-shadow:none;
  font-family:inherit;font-size:var(--fs-md);font-weight:var(--w-semi);line-height:1.2;
  color:var(--brand-ink);text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap;
  transition:color var(--dur) var(--ease)}
#edit-address .p7-locm-geo[hidden]{display:none}
#edit-address .p7-locm-geo-ico{flex:none;color:var(--accent)}
#edit-address .p7-locm-geo:hover{color:var(--accent-ink);background:transparent;text-decoration:none}
#edit-address .p7-locm-geo:focus{outline:0;box-shadow:none}
#edit-address .p7-locm-geo:focus-visible{outline:2px solid var(--focus);outline-offset:0}
#edit-address .p7-locm-geo[aria-busy="true"],
#edit-address .p7-locm-geo[aria-busy="true"]:hover{color:var(--muted);cursor:progress}
#edit-address .p7-locm-spin{display:none;flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);animation:p7-locm-spin .8s linear infinite}
#edit-address .p7-locm-geo[aria-busy="true"] .p7-locm-geo-ico{display:none}
#edit-address .p7-locm-geo[aria-busy="true"] .p7-locm-spin{display:block}
@keyframes p7-locm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #edit-address .p7-locm-spin{animation-duration:2.4s} }
/* Aviso informativo (permiso bloqueado / no se pudo): NO es error del cliente → sin rojo.
   Bloque --accent-50, icono --accent-ink, texto --ink-strong. */
#edit-address .p7-locm-geomsg{display:flex;align-items:flex-start;gap:8px;margin:4px 0 0;padding:10px 12px;
  border-radius:var(--r-btn);background:var(--accent-50);
  font-size:var(--fs-xs);line-height:1.45;color:var(--ink-strong)}
#edit-address .p7-locm-geomsg svg{flex:none;margin-top:1px;color:var(--accent-ink)}
#edit-address .p7-locm-geomsg[hidden]{display:none}

/* Mapa (vista previa; el marcador se puede arrastrar) */
#edit-address .p7-locm-map{margin-top:var(--s-4)}
#edit-address #address-map-container{width:100%;height:220px;border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;background:var(--band)}
#edit-address #address-map{width:100%;height:100%}
#edit-address .p7-locm-hint{display:flex;align-items:center;gap:6px;margin:8px 0 0;
  font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
#edit-address .p7-locm-hint svg{flex:none;color:var(--accent)}
/* Tras localizar con GPS/red la posición puede errar (en computadora, km): la pista se resalta.
   La quita el script al escribir o al cerrar el modal. */
#edit-address .p7-locm-hint.is-emph{padding:8px 10px;border-radius:var(--r-btn);background:var(--accent-50);
  color:var(--ink-strong);font-weight:var(--w-semi);
  transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease)}
#edit-address .p7-locm-hint.is-emph svg{color:var(--accent-ink)}

/* Acción principal · decisión cerrada: --accent + blanco; hover --brand + blanco */
#edit-address .p7-locm-cta{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;margin:var(--s-5) 0 0;padding:12px 24px;border:0;border-radius:var(--r-btn);
  background:var(--accent);color:#fff;box-shadow:none;cursor:pointer;
  font-family:inherit;font-size:var(--fs-lg);font-weight:var(--w-bold);line-height:1.2;
  text-transform:none;letter-spacing:0;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
#edit-address .p7-locm-cta:hover{background:var(--brand);color:#fff}
#edit-address .p7-locm-cta:active{background:var(--brand-800);color:#fff}
#edit-address .p7-locm-cta:focus{outline:0;box-shadow:none}
#edit-address .p7-locm-cta:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Táctil: cerrar a 44 px también en tabletas */
@media (pointer:coarse){ #edit-address .p7-locm-x{width:44px;height:44px;margin:-10px -10px 0 auto} }

/* Celular: panel ANCLADO ARRIBA (ni centrado ni hoja inferior) — ver decisión 04 */
@media (max-width:575.98px){
  #edit-address .modal-dialog{margin:8px;min-height:0;align-items:flex-start}
  #edit-address .modal-dialog-centered::before{content:none;display:none}
  #edit-address .modal-content{padding:var(--s-4)}
  #edit-address .p7-locm-head{margin-bottom:var(--s-4)}
  #edit-address .p7-locm-x{width:44px;height:44px;margin:-10px -10px 0 auto}
  #edit-address .p7-locm-map{margin-top:var(--s-3)}
  #edit-address #address-map-container{height:160px}
  #edit-address .p7-locm-cta{margin-top:var(--s-4)}
}

/* ── 3. LISTA DE SUGERENCIAS DE GOOGLE (.pac-container, vive en <body>) ──
   Google inyecta su hoja en <head> EN TIEMPO DE EJECUCIÓN (después de la
   nuestra): con la misma especificidad gana él. Por eso «body .pac-container».
   El «powered by Google» (.pac-logo::after) es obligatorio: sólo se le da aire. */
body .pac-container{z-index:9999;margin-top:4px;padding-top:4px;border:1px solid var(--line-2);
  border-radius:var(--r-card);background:var(--p7-surface,#fff);box-shadow:var(--shadow-float);
  font-family:var(--font-ui)}
body .pac-container .pac-item{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;
  align-items:center;min-height:48px;padding:6px 12px;border-top:0;
  font-size:var(--fs-xs);line-height:1.35;color:var(--muted);white-space:nowrap;cursor:pointer}
body .pac-container .pac-item + .pac-item{border-top:1px solid var(--line)}
body .pac-container .pac-item:hover{background:var(--brand-50)}
body .pac-container .pac-item-selected,
body .pac-container .pac-item-selected:hover{background:var(--brand-100)}   /* resaltado con flechas */
body .pac-container .pac-icon{grid-row:1 / span 2;width:14px;height:16px;margin:0;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill-rule='evenodd' d='M.85 6.15A6.15 6.15 0 0 1 7 0a6.15 6.15 0 0 1 6.15 6.15c0 2.03-.99 3.84-2.51 4.96L7.46 15.76a.56.56 0 0 1-.92 0l-3.18-4.65A6.14 6.14 0 0 1 .85 6.15Zm6.15 4.27a4.27 4.27 0 1 0 0-8.55 4.27 4.27 0 0 0 0 8.55Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill-rule='evenodd' d='M.85 6.15A6.15 6.15 0 0 1 7 0a6.15 6.15 0 0 1 6.15 6.15c0 2.03-.99 3.84-2.51 4.96L7.46 15.76a.56.56 0 0 1-.92 0l-3.18-4.65A6.14 6.14 0 0 1 .85 6.15Zm6.15 4.27a4.27 4.27 0 1 0 0-8.55 4.27 4.27 0 0 0 0 8.55Z'/%3E%3C/svg%3E") center/contain no-repeat}
body .pac-container .pac-item-query{grid-column:2;padding:0;overflow:hidden;text-overflow:ellipsis;
  font-size:var(--fs-base);line-height:1.35;color:var(--ink-strong)}
body .pac-container .pac-matched{font-weight:var(--w-bold);color:var(--ink-strong)}
body .pac-container .pac-item > span:last-child:not(.pac-item-query){grid-column:2;overflow:hidden;text-overflow:ellipsis}
body .pac-container.pac-logo::after{margin:4px 10px 6px}

/* ── CROMO: header con buscador protagonista · 84 px, buscador 58 px ── */
/* Sin línea inferior: cabecera y menú se leen como un solo bloque (usuario 2026-09-25) */
.p7-head{position:sticky;top:0;z-index:var(--z-header);background:var(--p7-surface)}
.p7-head .p7-wrap{display:flex;align-items:center;gap:var(--s-6);height:var(--h-header)}
.p7-logo{display:inline-flex;align-items:center;flex:none;height:var(--h-logo);font-weight:700;
  font-size:1.5rem;letter-spacing:-.02em;color:var(--brand-ink)}
.p7-search{flex:1;display:flex;align-items:stretch;height:var(--h-search);max-width:780px;
  background:var(--p7-surface);border:1px solid var(--line-2);border-radius:var(--r-btn);overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.p7-search:focus-within{border-color:var(--brand-ink);box-shadow:var(--focus-ring)}
.p7-search .scope{display:flex;align-items:center;gap:6px;padding:0 14px;border-right:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-md);font-weight:var(--w-semi);white-space:nowrap;background:var(--band)}
.p7-search input{flex:1;border:0;background:transparent;padding:0 16px;font-size:var(--fs-base);
  color:var(--ink);outline:none;min-width:0;font-family:inherit}
.p7-search input::placeholder{color:var(--muted)}
.p7-search .go{border:0;background:var(--brand-ink);color:var(--on-brand);padding:0 22px;display:grid;
  place-items:center;cursor:pointer;transition:background var(--dur) var(--ease)}
.p7-search .go:hover{background:var(--brand-700)}
.p7-acts{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.p7-iconbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-chip);
  color:var(--ink);font-size:var(--fs-sm);font-weight:var(--w-semi);cursor:pointer;position:relative;
  min-height:44px;min-width:44px;justify-content:center;transition:color var(--dur) var(--ease)}
.p7-iconbtn:hover{color:var(--brand-ink)}
.p7-iconbtn .lbl small{display:block;color:var(--muted);font-weight:var(--w-body);font-size:var(--fs-2xs);line-height:1.2}
.p7-iconbtn .lbl span{display:block;line-height:1.2;white-space:nowrap}
.p7-count{position:absolute;top:2px;left:24px;background:var(--price);color:#fff;
  font-size:.62rem;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;
  place-items:center;padding:0 4px}
@container p7 (max-width:680px){
  .p7-head .p7-wrap{flex-wrap:wrap;height:auto;padding-block:10px;gap:var(--s-3)}
  .p7-search{order:3;flex-basis:100%;max-width:none;height:48px}
  .p7-logo{height:32px;font-size:1.25rem}
  .p7-iconbtn{padding:8px}
  .p7-iconbtn .lbl{display:none}
}
/* ── CROMO: riel de categorías · 40 px = 10 + texto 20 + 10 (usuario 2026-09-25;
   antes 56, se quitó el aire sobrante alrededor del texto) ── */
.p7-catrail{background:var(--p7-surface);border-bottom:1px solid var(--line)}
.p7-catrail .p7-wrap{display:flex;align-items:center;gap:var(--s-2);overflow-x:auto;
  height:var(--h-catrail);padding-block:10px;scrollbar-width:none}
/* Categorías del menú SIN borde, sin padding vertical y sin altura mínima: miden
   solo lo que su texto (usuario 2026-09-25, «ir eliminando espacios verticales»).
   El hover sigue siendo solo color. */
.p7-catrail .p7-chip{border:0;padding-top:0;padding-bottom:0;min-height:0}
.p7-catrail .p7-wrap::-webkit-scrollbar{display:none}

/* ── Migas de pan · páginas internas ── */
.p7-crumbs{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted);padding-block:14px;
  border-bottom:1px solid var(--line)}
.p7-crumbs ol{list-style:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.p7-crumbs a{color:var(--brand-ink)}
.p7-crumbs a:hover{text-decoration:underline}
.p7-crumbs li[aria-current]{color:var(--muted)}
.p7-crumbs .sep{color:var(--line-2)}
.p7-back{color:var(--brand-ink);display:inline-flex;align-items:center;gap:6px;font-weight:var(--w-semi)}
.p7-back:hover{text-decoration:underline}
.p7-h1{font-size:var(--fs-2xl);color:var(--brand-ink);font-weight:var(--w-bold);line-height:1.2;
  margin:var(--s-5) 0 0}

/* ── Panel (hero / promo) — plano: sin sombra, radio 8 ── */
.p7-panel{position:relative;overflow:hidden;border-radius:var(--r-panel);color:#fff;
  background:linear-gradient(115deg, var(--hero-3) 0%, var(--hero-2) 55%, var(--hero-1) 100%)}

/* ── SECCIÓN hero · BORDE A BORDE (decisión del usuario 2026-09-23) ──
   Ficha: https://claude.ai/artifact/2nWwtSZsarbwYXvtmwHHd5
   Sustituye: .p7-hero, .p7-hero .copy/.art/h1/p/.cta/.p7-eyebrow, .p7-heroimg,
   .p7-hero-dots (y el @container 900px de .p7-hero). .p7-panel NO se toca:
   lo sigue usando promo_app.
   Única excepción al ancho de 1200: el escenario ocupa todo .p7; el texto
   vuelve a la rejilla con .p7-wrap. */
.p7{
  --fs-hero:clamp(1.375rem, 1rem + 1.6cqi, 2.5rem);        /* 22→40 · SÓLO h1 del hero */
  --fs-hero-sub:clamp(.8125rem, .7rem + .5cqi, 1.125rem);  /* 13→18 · subtítulo del hero */
  --stage-ratio:1920/550;      /* = tamaño sugerido en el panel */
  --stage-ratio-m:2/1;         /* Mobile Banners (320×160) */
  --stage-maxh:550px;          /* > 1920 px recorta arriba/abajo, nunca crece más */
  --stage-copy:520px;          /* ancho máx. del bloque de texto (izq./der.) */
  --stage-copy-c:640px;        /* ancho máx. del bloque centrado */
  --dur-stage:600ms;           /* deslizamiento de un ancho de pantalla */
  /* SIN velo detrás del texto (decisión del usuario 2026-09-24): que el texto
     se lea depende de la imagen; el tono (claro/oscuro) solo elige el color. */
  --hl-on-dark:oklch(from var(--accent) max(l,.80) c h);  /* resaltado con texto claro */
  --hl-on-light:oklch(from var(--brand) min(l,.40) c h);  /* resaltado con texto oscuro */
}
@supports not (color: oklch(from #fff l c h)){
  .p7{--hl-on-dark:var(--accent);--hl-on-light:var(--brand-900)}
}

/* Sección: pegada al cromo, sin aire propio. Conserva .p7-panel-sec para que
   la regla del separador no dibuje línea bajo el hero. */
/* Aire bajo el hero (decisión del usuario 2026-09-24): 1 × --sec-pad, ~36 px
   (24 en celular). Con 2 × le pareció demasiado; sin nada quedaba a 8 px. */
.p7-section.p7-stage-sec{padding:0 0 var(--sec-pad)}
.p7-stage-sec + .p7-panel-sec{padding-top:var(--sec-pad)}

/* Dos carruseles posibles: web (≥768) y móvil (<768). data-dev="all" = no hay
   Mobile Banners y el web se usa en todos los anchos. */
.p7-stage{position:relative}
.p7-stage[data-dev="mob"]{display:none}
@container p7 (max-width:767.98px){
  .p7-stage[data-dev="web"]{display:none}
  .p7-stage[data-dev="mob"]{display:block}
}

.p7-stage-view{overflow:hidden;touch-action:pan-y}
.p7-stage-track{display:flex;transition:transform var(--dur-stage) var(--ease)}
.p7-stage-track > *{flex:0 0 100%}

/* Diapositiva: una sola celda de rejilla; imagen detrás, texto delante.
   aspect-ratio fija el alto; si el texto necesita más, la caja CRECE (el
   min-height:auto de aspect-ratio) y la imagen se recorta con cover. */
/* ⚠️ Sin overflow:hidden aquí: anularía el crecimiento automático de
   aspect-ratio y el texto largo se cortaría. Recorta .p7-stage-view. */
.p7-stage-slide{position:relative;isolation:isolate;display:grid;min-width:0;
  aspect-ratio:var(--stage-ratio);max-height:var(--stage-maxh)}
.p7-stage[data-dev="mob"] .p7-stage-slide{aspect-ratio:var(--stage-ratio-m);max-height:none}
.p7-stage-slide > *,.p7-stage-link > *{grid-area:1/1;min-width:0}
.p7-stage-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.p7-stage-link{display:grid;color:inherit}

/* Tono (lo elige el tenant por banner) */
.p7-stage-slide[data-ink="light"]{--hl:var(--hl-on-dark);color:#fff}
.p7-stage-slide[data-ink="dark"]{--hl:var(--hl-on-light);color:var(--ink-strong)}
/* Bootstrap `a:hover{color:#3827c1}` (0,1,1): el enlace-diapositiva fija su color también en hover */
.p7-stage-link,.p7-stage-link:hover{color:inherit}

/* Bloque de texto alineado a la rejilla de 1200 */
.p7-stage-in{position:relative;z-index:1;display:flex;align-items:center;pointer-events:none;
  padding-block:clamp(16px, 3.4cqi, 52px)}
.p7-stage-slide[data-pos="center"] .p7-stage-in{justify-content:center;text-align:center}
.p7-stage-slide[data-pos="right"] .p7-stage-in{justify-content:flex-end}
.p7-stage-copy{max-width:min(var(--stage-copy), 60%)}
.p7-stage-slide[data-pos="center"] .p7-stage-copy{max-width:min(var(--stage-copy-c), 88%)}
.p7 .p7-stage-t{font-size:var(--fs-hero);line-height:1.15;font-weight:var(--w-bold);color:inherit;
  margin:0;text-wrap:balance}
.p7-stage-t mark{background:none;color:var(--hl);padding:0}
/* color:inherit = el del tono, como el título (ficha). color1-style.css pone
   p{color:#777} y lo dejaba gris sobre cualquier imagen. */
.p7 .p7-stage-sub{color:inherit}
.p7-stage-sub{font-size:var(--fs-hero-sub);line-height:1.45;font-weight:var(--w-body);
  margin:clamp(6px, .8cqi, 12px) 0 0;text-wrap:pretty}
/* Botón = mismo estilo que «Añadir al carrito» (decisión del usuario 2026-09-23,
   frente a la propuesta de letra oscura de la ficha): fondo acento, letra blanca;
   hover fondo principal, letra blanca. */
.p7-stage-cta{pointer-events:auto;margin-top:clamp(12px, 1.7cqi, 24px);
  font-size:var(--fs-lg);min-height:48px;padding:13px 24px;
  background:var(--accent);color:#fff}
.p7-stage-cta:hover{background:var(--brand);color:#fff}

/* Foco: visible sobre cualquier foto */
.p7-stage-slide[data-ink="light"] .p7-stage-cta:focus-visible{outline-color:#fff}
.p7 .p7-stage-link:focus-visible{outline:3px solid #fff;outline-offset:-6px;border-radius:0;
  box-shadow:inset 0 0 0 3px var(--focus)}

/* Puntos: sobre la imagen, abajo al centro, en una pastilla velada (legibles
   sobre cualquier foto sin sombra). Área de toque 24×24; punto visible 8 px. */
.p7-stage-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;
  display:flex;gap:0;padding:0 4px;border-radius:var(--r-pill);
  background:color-mix(in oklab, var(--brand-900) 60%, transparent)}  /* 60%: puntos ≥3:1 aun sobre foto blanca */
.p7-stage-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.p7-stage-dots button::before{content:"";width:8px;height:8px;border-radius:4px;
  background:rgb(255 255 255 / .75);transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.p7-stage-dots button:hover::before{background:#fff}
.p7-stage-dots button[aria-current="true"]::before{width:20px;background:#fff}
.p7 .p7-stage-dots button:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:var(--r-pill)}

/* ── Celular (<768): imagen 2:1, texto más compacto, puntos DEBAJO ── */
@container p7 (max-width:767.98px){
  .p7-stage-in{padding-block:16px}
  .p7-stage-copy{max-width:64%}
  .p7-stage-slide[data-pos="center"] .p7-stage-copy{max-width:88%}
  .p7-stage-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .p7-stage-cta{font-size:var(--fs-md);min-height:40px;padding:9px 16px}
  .p7-stage-dots{position:static;transform:none;background:none;width:max-content;
    margin:4px auto 0;padding:0}
  .p7-stage-dots button::before{background:var(--muted)}       /* ≥3:1 sobre blanco */
  .p7-stage-dots button:hover::before{background:var(--ink-strong)}
  .p7-stage-dots button[aria-current="true"]::before{background:var(--brand-ink)}
  .p7 .p7-stage-dots button:focus-visible{outline-color:var(--focus)}
}

/* Movimiento reducido: sin deslizamiento (el script tampoco rota) */
@media (prefers-reduced-motion: reduce){
  .p7-stage-track{transition:none}
}

/* ── SECCIÓN banda_confianza — plana, separada por líneas ── */
.p7-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.p7-trust .t{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-right:1px solid var(--line)}
.p7-trust .t:last-child{border-right:0}
.p7-trust .ic{width:40px;height:40px;border-radius:var(--r-tile);background:var(--band);
  color:var(--brand-ink);display:grid;place-items:center;flex:none}
.p7-trust b{font-size:var(--fs-md);display:block;color:var(--ink-strong);font-weight:var(--w-bold)}
.p7-trust small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
@container p7 (max-width:900px){ .p7-trust .t{border-right:0;border-bottom:1px solid var(--line)} }

/* ── SECCIÓN grid_categorias ── */
.p7-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--grid-gap);
  justify-content:start}
.p7-cat{background:var(--p7-surface);border:1px solid var(--line);border-radius:var(--r-tile);
  padding:18px 12px;text-align:center;display:block;
  transition:border-color var(--dur) var(--ease)}
.p7-cat:hover{border-color:var(--brand-ink)}
.p7-cat .ic{width:52px;height:52px;margin:0 auto 10px;border-radius:var(--r-tile);display:grid;
  place-items:center;background:var(--band);color:var(--brand-ink);overflow:hidden}
.p7-cat b{font-size:var(--fs-md);display:block;color:var(--brand-ink);font-weight:var(--w-semi)}
.p7-cat small{color:var(--muted);font-size:var(--fs-xs)}

/* ═══ TARJETA DE PRODUCTO · 228 × 429 · radio 8 · SIN SOMBRA ═══════ */
.p7-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--card-w),1fr);
  gap:var(--grid-gap);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:thin}
/* Pocos productos: rejilla sin estirar. Ésta es la regla que evita
   que 2 productos ocupen media pantalla cada uno. */
.p7-rail[data-count="1"],.p7-rail[data-count="2"],.p7-rail[data-count="3"],.p7-rail[data-count="4"]{
  grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(210px,var(--card-w)));
  grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;justify-content:start}
/* Rejilla de 4 columnas: listado de categoría y sección top_categoria */
.p7-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--grid-gap);
  justify-content:start}
/* Borde solo en hover: en reposo es transparente pero ocupa su 1px, para que
   la tarjeta no se mueva al aparecer. */
.p7-card{background:var(--p7-surface);border:1px solid transparent;border-radius:var(--r-card);
  overflow:hidden;scroll-snap-align:start;display:flex;flex-direction:column;
  padding:var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);
  transition:border-color var(--dur) var(--ease)}
.p7-card:hover{border-color:var(--line-2)}
.p7-tile{aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--band);border-radius:4px;margin-bottom:12px}
/* Glifo e imagen en la MISMA celda: la imagen tapa el glifo y, si falla y se
   retira, queda el glifo. Sin esto cada uno ocupaba su propia fila.
   La imagen tapa al glifo por orden en el DOM; SIN z-index, que la subiria
   por encima del corazon de favorito. */
.p7-tile>.glyph,.p7-tile>img{grid-area:1/1}
.p7-tile img{width:100%;height:100%;object-fit:contain;display:block}
.p7-tile .glyph{color:var(--brand-200);width:56px;height:56px}
.p7-tile .p7-disc,.p7-tile .p7-pill{position:absolute;top:0;left:0;z-index:2}
.p7-fav{position:absolute;top:0;right:0;width:32px;height:32px;border:0;border-radius:4px;
  background:rgba(255,255,255,.88);display:grid;place-items:center;color:var(--brand);cursor:pointer;
  transition:color var(--dur) var(--ease)}
/* Decision del usuario 2026-09-23: principal en reposo, acento en hover. */
.p7-fav:hover{color:var(--accent)}
.p7-cbody{display:flex;flex-direction:column;flex:1}
.p7-cbody .p7-rate{margin-bottom:6px}
/* Decisiones del usuario 2026-09-23 (hover SOLO con color, sin subrayado):
   farmacia principal -> acento; nombre oscuro -> acento (antes principal: con
   el principal oscuro de alivia el hover no se distinguia del reposo). */
.p7-vendor{font-size:var(--fs-xs);color:var(--brand);font-weight:var(--w-bold);
  margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color var(--dur) var(--ease)}
a.p7-vendor:hover{color:var(--accent)}
.p7-name{font-size:var(--fs-base);font-weight:var(--w-body);line-height:1.4;color:var(--ink-strong);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.8em;margin-bottom:10px;transition:color var(--dur) var(--ease)}
.p7-name:hover{color:var(--accent)}
.p7-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:16px;min-height:22px}
.p7-price b{font-size:var(--fs-xl);font-weight:var(--w-bold);color:var(--price);
  font-variant-numeric:tabular-nums;line-height:1.2}
.p7-price s{color:var(--muted);font-size:var(--fs-md);font-weight:var(--w-body);
  font-variant-numeric:tabular-nums}
/* Decision del usuario 2026-09-23: fondo de ACENTO con letra blanca; en hover
   el fondo pasa al PRINCIPAL y la letra sigue blanca. */
.p7-add{margin-top:auto;width:100%;height:var(--card-btn-h);background:var(--accent);
  color:#fff;border:0;border-radius:var(--r-btn);font-weight:var(--w-bold);
  font-size:var(--fs-md);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;transition:background var(--dur) var(--ease)}
.p7-add:hover{background:var(--brand);color:#fff}

/* ═══ CARRUSEL · productos, tiendas, marcas ══════════════════════════
   Ficha: https://claude.ai/artifact/SpdKwwjjJL7ZYmA6F6M6Rn
   Decisiones del usuario (cerradas): avance automatico, en bucle, de UNA
   tarjeta en una, SOLO flechas (sin puntos), sin barra de scroll visible.
   Scroll nativo con scroll-snap: el dedo sigue funcionando. Cero sombras.
   Umbral: productos < 5 y tiendas/marcas < 4 NO llevan carrusel (rejilla).
   Controles en la banda .p7-sechead: nunca tapan una tarjeta.
   Script: public/front-assets/js/template-seven-carousel.js */
.p7-carousel{position:relative}
/* Lado derecho de la banda: «Ver todo» + grupo de controles */
.p7-secact{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}
.p7-cctl{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;
  padding-left:var(--s-3);border-left:1px solid var(--line-2)}
.p7-secact>.p7-cctl:first-child{padding-left:0;border-left:0}   /* marcas: sin «Ver todo» */
.p7-cctl[hidden]{display:none}                                 /* sin JS no hay controles */
.p7-carousel[data-static="true"] .p7-cctl{display:none}         /* todo cabe: nada que mover */
.p7-carousel[data-static="true"] [data-clone]{display:none}     /* ...ni copia para el bucle */
/* Boton de control · decision del usuario 2026-09-23: REDONDO 30px, fondo de
   ACENTO con icono blanco; hover al PRINCIPAL (como "Anadir al carrito").
   El area tactil se mantiene en 44px con un ::before invisible. */
.p7-cbtn{position:relative;width:30px;height:30px;flex:none;display:grid;place-items:center;
  padding:0;margin:0;cursor:pointer;background:var(--accent);color:#fff;border:0;border-radius:50%;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.p7-cbtn::before{content:"";position:absolute;inset:-7px}
.p7-cbtn svg{width:16px;height:16px;display:block;pointer-events:none}
@media (hover:hover){
  .p7-cbtn:hover{background:var(--brand);color:#fff}
}
.p7-cbtn:active{background:var(--ink-strong);color:#fff}
.p7 .p7-cbtn:focus-visible{border-radius:50%}
/* Pausa / reanudar: mismo boton, cambia el icono con aria-pressed */
.p7-cbtn--pause .i-play{display:none}
.p7-cbtn--pause[aria-pressed="true"] .i-play{display:block}
.p7-cbtn--pause[aria-pressed="true"] .i-pause{display:none}
.p7-cbtn--pause[aria-pressed="true"]{background:var(--brand)}   /* en pausa: se distingue en reposo */
.p7-carousel[data-rotation="off"] .p7-cbtn--pause{display:none}       /* reduced-motion: nada que pausar */
/* Pista · se suma a .p7-rail (productos) o a los modificadores de abajo.
   padding + margin negativo = aire para el anillo de foco, que overflow recortaria. */
.p7-ctrack{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding:4px;margin:-4px;scroll-padding-inline:4px}
.p7-ctrack>*{scroll-snap-align:start}
/* Sin barra visible solo cuando el script tomo el control (sin JS queda la barra fina). */
.p7-carousel[data-ready] .p7-ctrack{scrollbar-width:none}
.p7-carousel[data-ready] .p7-ctrack::-webkit-scrollbar{display:none}
/* Tiendas y marcas: columnas que encajan una pagina EXACTA (corte limpio) */
.p7-ctrack--vendors,.p7-ctrack--brands{display:grid;grid-auto-flow:column;gap:var(--grid-gap);
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--grid-gap)) / var(--per))}
.p7-ctrack--vendors{--per:4}
.p7-ctrack--vendors .p7-vcard{max-width:none}
.p7-ctrack--brands{--per:8}
@container p7 (max-width:960px){
  .p7-ctrack--vendors{--per:3}
  .p7-ctrack--brands{--per:6}
}
@container p7 (max-width:680px){
  .p7-ctrack--vendors{--per:2}
  .p7-ctrack--brands{--per:4}
}
@container p7 (max-width:560px){
  /* Movil: SIN controles (decision del usuario 2026-09-23): se desliza con el
     dedo; el avance automatico sigue y el toque lo retiene mientras dura. */
  .p7-carousel .p7-cctl{display:none}
  .p7-ctrack--vendors{grid-auto-columns:min(270px,80%)}
  .p7-ctrack--brands{grid-auto-columns:140px}
}

/* ── Esqueleto de carga — misma caja que la tarjeta real ── */
.p7-sk{background:var(--p7-surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);display:flex;flex-direction:column}
.p7-sk .t{aspect-ratio:1/1;background:var(--band);border-radius:4px;margin-bottom:12px}
.p7-sk .b{display:flex;flex-direction:column;gap:8px}
.p7-bar{height:10px;border-radius:4px;background:var(--line)}
.p7-sk .w40{width:40%}.p7-sk .w90{width:90%}.p7-sk .w65{width:65%}
.p7-sk .w30{width:30%;height:18px}.p7-sk .wfull{width:100%;height:40px;border-radius:var(--r-btn);margin-top:8px}
.p7-shimmer{position:relative;overflow:hidden}
.p7-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in oklab,#fff 70%,transparent),transparent);
  animation:p7sh 1.4s infinite}
@keyframes p7sh{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .p7-shimmer::after{animation:none;opacity:.45;transform:none}
  .p7 *{transition-duration:1ms!important;scroll-behavior:auto!important}
}
/* ── Estado vacío / error ── */
.p7-empty{background:var(--p7-surface);border:1px dashed var(--line-2);border-radius:var(--r-card);
  padding:var(--s-8) var(--s-6);text-align:center;color:var(--muted);display:grid;gap:var(--s-3);justify-items:center}
.p7-empty .ic{width:48px;height:48px;border-radius:var(--r-tile);background:var(--band);color:var(--brand-ink);
  display:grid;place-items:center}
.p7-empty b{color:var(--ink-strong);font-size:var(--fs-lg)}
.p7-empty p{margin:0;font-size:var(--fs-base);max-width:44ch}

/* ═══ SECCIÓN top_categoria · lateral de subcategorías + rejilla ═══ */
.p7-topcat{display:grid;grid-template-columns:var(--aside-w) minmax(0,1fr);gap:var(--aside-gap)}
@container p7 (max-width:860px){ .p7-topcat{grid-template-columns:minmax(0,1fr)} }
/* Lista lateral de subcategorías — separadores finos, sin caja */
.p7-sublist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.p7-sublist li{border-bottom:1px solid var(--line)}
.p7-sublist a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 2px;font-size:var(--fs-base);color:var(--ink);min-height:42px}
.p7-sublist a:hover{color:var(--brand-ink)}
.p7-sublist a[aria-current="page"]{color:var(--brand-ink);font-weight:var(--w-bold)}
.p7-sublist .n{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.p7-asidehead{font-size:var(--fs-md);font-weight:var(--w-bold);color:var(--ink-strong);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}

/* ── Filtro de precio (deliberadamente escaso) ── */
.p7-pricefilter{margin-top:var(--s-6)}
.p7-pricebox{display:flex;align-items:center;gap:8px;margin-top:10px}
.p7-pricebox input{width:100%;min-width:0;height:36px;border:1px solid var(--line-2);
  border-radius:var(--r-btn);padding:0 10px;font:inherit;font-size:var(--fs-md);color:var(--ink);
  background:var(--p7-surface)}
.p7-pricebox input:focus{outline:none;border-color:var(--brand-ink);box-shadow:var(--focus-ring)}
.p7-pricebox .dash{color:var(--muted);flex:none}

/* ── Barra de listado: conteo + orden + vista ── */
.p7-listbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;background:var(--band);border-radius:var(--r-card);padding:10px var(--s-4);
  margin-bottom:var(--s-5)}
.p7-listbar .count{font-size:var(--fs-md);color:var(--ink)}
.p7-listbar .tools{display:flex;align-items:center;gap:var(--s-3)}
.p7-select{height:36px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--p7-surface);
  padding:0 10px;font:inherit;font-size:var(--fs-md);color:var(--ink);cursor:pointer}
.p7-viewtog{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:var(--r-btn);overflow:hidden}
.p7-viewtog button{width:36px;height:36px;border:0;background:var(--p7-surface);color:var(--muted);
  display:grid;place-items:center;cursor:pointer}
.p7-viewtog button[aria-pressed="true"]{background:var(--brand-ink);color:var(--on-brand)}

/* ── Paginación ── */
.p7-pager{display:flex;gap:6px;justify-content:center;margin-top:var(--s-6);flex-wrap:wrap}
.p7-pager a,.p7-pager span{min-width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-btn);
  display:grid;place-items:center;font-size:var(--fs-md);color:var(--ink);padding:0 8px}
.p7-pager a:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.p7-pager [aria-current="page"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand);
  font-weight:var(--w-bold)}

/* ═══ FICHA DE PRODUCTO · galería | compra | relacionados ═══════════ */
.p7-pdp{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr) 248px;gap:var(--s-8);
  align-items:start}
@container p7 (max-width:1100px){ .p7-pdp{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
  .p7-pdp .rel{grid-column:1 / -1} }
@container p7 (max-width:760px){ .p7-pdp{grid-template-columns:minmax(0,1fr)} }
.p7-gal{display:grid;gap:10px}
.p7-galmain{aspect-ratio:1/1;background:var(--band);border:1px solid var(--line);border-radius:var(--r-card);
  display:grid;place-items:center;overflow:hidden}
.p7-galmain img{width:100%;height:100%;object-fit:contain}
.p7-galmain .glyph{width:72px;height:72px;color:var(--brand-200)}
.p7-galthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.p7-galthumbs button{aspect-ratio:1/1;background:var(--band);border:1px solid var(--line);
  border-radius:4px;cursor:pointer;display:grid;place-items:center;padding:0;color:var(--brand-200)}
.p7-galthumbs button[aria-current="true"]{border-color:var(--brand-ink)}
.p7-pdphead{margin-bottom:var(--s-4)}
.p7-pdphead .top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}
.p7-pdphead h1{font-size:var(--fs-2xl);color:var(--brand-ink);font-weight:var(--w-bold);line-height:1.25}
.p7-share{display:flex;gap:6px;flex:none}
.p7-share a{width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-btn);
  display:grid;place-items:center;color:var(--muted)}
.p7-share a:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.p7-pdpprice{font-size:var(--fs-price-pdp);font-weight:var(--w-bold);color:var(--price);
  font-variant-numeric:tabular-nums;line-height:1.2;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;margin:var(--s-4) 0}
.p7-pdpprice s{font-size:var(--fs-lg);color:var(--muted);font-weight:var(--w-body)}
.p7-stock{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:var(--w-semi);
  font-size:var(--fs-md)}
.p7-stock[data-out="1"]{color:var(--danger)}
/* Ficha de atributos GENÉRICA: pares etiqueta / valor */
.p7-attrs{display:grid;gap:0;margin:var(--s-5) 0;border-top:1px solid var(--line)}
.p7-attrs div{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);gap:var(--s-4);
  padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
.p7-attrs dt,.p7-attrs .k{color:var(--muted);font-weight:var(--w-body)}
.p7-attrs dd,.p7-attrs .v{margin:0;color:var(--ink-strong);font-weight:var(--w-bold)}
/* Cantidad + dos botones apilados */
.p7-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-btn);
  height:40px;overflow:hidden}
.p7-qty button{width:38px;height:100%;border:0;background:var(--p7-surface);color:var(--ink);
  font-size:1rem;cursor:pointer;display:grid;place-items:center}
.p7-qty button:hover{background:var(--band);color:var(--brand-ink)}
.p7-qty input{width:44px;height:100%;border:0;border-inline:1px solid var(--line);text-align:center;
  font:inherit;font-size:var(--fs-md);font-weight:var(--w-bold);color:var(--ink-strong);
  background:var(--p7-surface);-moz-appearance:textfield}
.p7-qty input::-webkit-outer-spin-button,.p7-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.p7-buybox{display:grid;gap:10px;max-width:428px;margin-top:var(--s-4)}
.p7-buybox .p7-btn{width:100%}
.p7-meta{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  display:grid;gap:6px;font-size:var(--fs-md);color:var(--muted)}
.p7-meta b{color:var(--muted);font-weight:var(--w-body);min-width:92px;display:inline-block}
.p7-meta a{color:var(--brand-ink)}
.p7-meta a:hover{text-decoration:underline}
/* Relacionados: columna estrecha de tarjetas en fila */
.p7-rel{display:grid;gap:12px}
.p7-relrow{display:flex;gap:10px;align-items:flex-start;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.p7-relrow:last-child{border-bottom:0;padding-bottom:0}
.p7-relrow .th{width:64px;height:64px;flex:none;background:var(--band);border-radius:4px;
  display:grid;place-items:center;color:var(--brand-200)}
.p7-relrow .nm{font-size:var(--fs-md);color:var(--brand-ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p7-relrow .pr{font-size:var(--fs-md);font-weight:var(--w-bold);color:var(--price);margin-top:4px}
/* Pestañas + reseñas */
.p7-tabs{display:flex;gap:0;border-bottom:1px solid var(--line-2);margin-top:var(--s-8)}
.p7-tabs button{border:0;background:transparent;font:inherit;font-size:var(--fs-lg);
  font-weight:var(--w-bold);color:var(--muted);padding:12px 20px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.p7-tabs button[aria-selected="true"]{color:var(--brand-ink);border-bottom-color:var(--brand-ink)}
.p7-revwrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s-8);padding-top:var(--s-6)}
@container p7 (max-width:760px){ .p7-revwrap{grid-template-columns:minmax(0,1fr)} }
.p7-revscore{text-align:center}
.p7-revscore .big{font-size:2.5rem;font-weight:var(--w-bold);color:var(--ink-strong);line-height:1}
.p7-revbars{display:grid;gap:6px}
.p7-revbar{display:flex;align-items:center;gap:10px;font-size:var(--fs-md)}
.p7-revbar .track{flex:1;height:8px;border-radius:4px;background:var(--band);overflow:hidden}
.p7-revbar .fill{height:100%;background:var(--accent-ink);border-radius:4px}
.p7-revbar .lbl{width:52px;flex:none;color:var(--muted);font-size:var(--fs-xs)}
.p7-revbar .n{width:28px;text-align:right;color:var(--muted);font-size:var(--fs-xs)}
.p7-review{border-top:1px solid var(--line);padding:14px 0}
.p7-review .who{font-weight:var(--w-bold);color:var(--ink-strong);font-size:var(--fs-md)}
.p7-review p{margin:6px 0 0;font-size:var(--fs-base);color:var(--ink)}

/* ── SECCIÓN vendors ── */
.p7-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--grid-gap);justify-content:start}
/* Borde solo en hover, como la tarjeta de producto (decision del usuario
   2026-09-23): transparente en reposo, conserva su 1px. */
.p7-vcard{background:var(--p7-surface);border:1px solid transparent;border-radius:var(--r-card);padding:8px;
  display:flex;flex-direction:column;gap:12px;max-width:440px;
  transition:border-color var(--dur) var(--ease)}
.p7-vcard:hover{border-color:var(--line-2)}
.p7-vtop{display:flex;align-items:center;gap:12px}
/* 64px (decision del usuario 2026-09-23; la imagen se pide a 128 para pantallas densas).
   Fondo BLANCO: con fondo de marca, cuando la tarjeta cae en una posicion de
   subpixel (anchos de 291,x px) el recorte redondeado dejaba asomar un hilo
   morado alrededor del logo, a veces si y a veces no. Blanco con blanco no se
   ve. El fondo de marca queda solo para la inicial (--txt: sin logo o si falla). */
.p7-vlogo{width:64px;height:64px;border-radius:var(--r-tile);display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:1rem;flex:none;background:var(--p7-surface);overflow:hidden}
.p7-vlogo--txt{background:var(--brand-ink)}
.p7-vlogo img{width:100%;height:100%;object-fit:contain}
/* Nombre de la farmacia (SOLO en esta tarjeta; decision del usuario 2026-09-23):
   tinta oscura en reposo y acento en hover. La tarjeta entera es el enlace, asi
   que el hover (y el foco de teclado) de la tarjeta es el que lo activa. */
.p7-vcard h3{font-size:var(--fs-base);color:var(--ink-strong);font-weight:var(--w-bold);
  transition:color var(--dur) var(--ease)}
.p7-vcard:hover h3,.p7-vcard:focus-visible h3{color:var(--accent)}
.p7-vcat{color:var(--muted);font-size:var(--fs-xs)}
/* Datos de entrega bajo el nombre: tiempo (reloj) y distancia (pin), cada
   uno con su icono. Solo existen en tenants hiperlocales. */
.p7-vfacts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:3px;
  color:var(--muted);font-size:var(--fs-xs);line-height:1.3}
.p7-vfacts>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.p7-vfacts svg{flex:none;width:13px;height:13px;color:var(--accent)} /* iconos en acento (decision del usuario) */
.p7-vmeta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.p7-vmeta .vr{font-size:var(--fs-md);color:var(--muted)}

/* ── SECCIÓN tiendas_destacadas ── */
.p7-strail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:var(--grid-gap);
  overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.p7-strail[data-count="1"],.p7-strail[data-count="2"],.p7-strail[data-count="3"]{
  grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));overflow:visible}
.p7-scard{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--p7-surface);
  border:1px solid var(--line);scroll-snap-align:start;display:block;
  transition:border-color var(--dur) var(--ease)}
.p7-scard:hover{border-color:var(--line-2)}
.p7-scover{aspect-ratio:16/9;background:linear-gradient(140deg,var(--brand-200),var(--brand-300));position:relative}
.p7-scover img{width:100%;height:100%;object-fit:cover;display:block}
.p7-scover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, color-mix(in oklab, var(--brand-900) 72%, transparent), transparent 62%)}
.p7-sbody{display:flex;align-items:center;gap:11px;padding:12px 14px 14px;margin-top:-26px;position:relative;z-index:1}
.p7-sbody .lg{width:48px;height:48px;border-radius:var(--r-tile);background:var(--p7-surface);
  border:2px solid var(--p7-surface);display:grid;place-items:center;font-weight:700;
  color:var(--brand-ink);flex:none;overflow:hidden}
.p7-sbody b{display:block;font-size:var(--fs-base);line-height:1.3;color:var(--brand-ink);font-weight:var(--w-bold)}
.p7-sbody small{color:var(--muted);font-size:var(--fs-xs)}
.p7-sflag{position:absolute;top:10px;left:10px;z-index:2}

/* ── SECCIÓN brands ── */
.p7-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--grid-gap);justify-content:start}
.p7-brand{background:var(--p7-surface);border:1px solid var(--line);border-radius:var(--r-tile);
  aspect-ratio:2/1;display:grid;place-items:center;padding:14px;
  transition:border-color var(--dur) var(--ease)}
.p7-brand:hover{border-color:var(--brand-ink)}
.p7-brand img{max-height:100%;max-width:100%;object-fit:contain;filter:saturate(.15) opacity(.72);
  transition:filter var(--dur) var(--ease)}
.p7-brand:hover img{filter:none}
.p7-brand .txt{font-weight:var(--w-bold);font-size:var(--fs-base);color:var(--muted);text-align:center}

/* ── SECCIÓN promo_app ── */
.p7-promo{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
  padding:32px clamp(24px,3vw,48px);
  background:linear-gradient(115deg, var(--brand-800), var(--brand-500) 82%)}
.p7-promo .pc{position:relative;z-index:1;max-width:52ch}
.p7-promo h2{font-size:var(--fs-2xl);color:#fff;font-weight:var(--w-bold)}
.p7-promo p{color:color-mix(in oklab,#fff 86%,var(--brand));margin:8px 0 0;font-size:var(--fs-base)}
.p7-stores{display:flex;gap:var(--s-3);position:relative;z-index:1;flex-wrap:wrap}
.p7-store{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-btn);padding:9px 16px;color:#fff;min-height:40px}
.p7-store:hover{background:rgba(0,0,0,.4)}
.p7-store small{display:block;font-size:.64rem;opacity:.85}
.p7-store b{font-size:var(--fs-md)}

/* ── SECCIÓN dynamic_page ── */
.p7-dyn{background:var(--p7-surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(18px,2.4vw,28px);--dyn-measure:72ch}
.p7-dyn > *{max-width:var(--dyn-measure)}
.p7-dyn h2,.p7-dyn h3{font-size:var(--fs-xl);margin:0 0 10px;line-height:var(--lh-head);color:var(--ink-strong)}
.p7-dyn h2 + p,.p7-dyn h3 + p{margin-top:0}
.p7-dyn p{margin:0 0 12px;font-size:var(--fs-base);color:var(--ink)}
.p7-dyn p:last-child{margin-bottom:0}
.p7-dyn a{color:var(--brand-ink);font-weight:var(--w-bold);text-decoration:underline;text-underline-offset:2px}
.p7-dyn ul,.p7-dyn ol{margin:0 0 12px;padding-left:20px;font-size:var(--fs-base);color:var(--ink)}
.p7-dyn img{max-width:100%;height:auto;border-radius:var(--r-tile)}
.p7-dyn table{width:100%;border-collapse:collapse;font-size:var(--fs-md);display:block;overflow-x:auto}
.p7-dyn td,.p7-dyn th{border:1px solid var(--line);padding:8px 10px}

/* ── CROMO: footer ── */
.p7-foot{background:var(--band);border-top:1px solid var(--line);padding-block:36px 20px;margin-top:var(--s-8)}
.p7-fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-8)}
.p7-fbrand p{color:var(--muted);font-size:var(--fs-md);max-width:38ch;margin:10px 0 0}
.p7-fsoc{display:flex;gap:8px;margin-top:14px}
.p7-fsoc a{width:40px;height:40px;border-radius:var(--r-btn);border:1px solid var(--line-2);display:grid;
  place-items:center;color:var(--muted);background:var(--p7-surface)}
.p7-fsoc a:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.p7-fcol h4{font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;
  font-weight:var(--w-bold);color:var(--ink-strong)}
.p7-fcol a{display:block;color:var(--muted);font-size:var(--fs-md);padding:6px 0}
.p7-fcol a:hover{color:var(--brand-ink)}
.p7-fbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  border-top:1px solid var(--line-2);margin-top:28px;padding-top:16px;color:var(--muted);font-size:var(--fs-md)}
.p7-pays{display:flex;gap:8px;flex-wrap:wrap}
.p7-pay{height:24px;padding:0 9px;border:1px solid var(--line-2);border-radius:4px;display:grid;
  place-items:center;font-size:.66rem;font-weight:700;color:var(--muted);background:var(--p7-surface)}
@container p7 (max-width:680px){
  .p7-fcols{grid-template-columns:1fr;gap:var(--s-4)}
  .p7-fcol h4{display:flex;justify-content:space-between;align-items:center;padding:12px 0;margin:0;
    border-top:1px solid var(--line-2);cursor:pointer;min-height:44px}
  .p7-fcol h4::after{content:"+";font-size:1.1rem;font-weight:400;color:var(--muted)}
}