/* ============================================================
Tienda estándar Clásica — INTEGRACIÓN DEL PROTOTIPO APROBADO
(2026-08-21). Fuente visual definitiva:
docs/prototipos/tienda-clasica-codex/prototipo-tienda-clasica.css
Este archivo es ese mismo CSS, sin cambiar ningún valor (medidas,
colores, tipografía, espaciado) -- lo único que se le agregó es el
prefijo ".plantilla-clasica" delante de cada selector, necesario para
que conviva en el mismo que el storefront legado sin heredar ni
colisionar con sus reglas (".hero", ".header", etc. ya existían ahí
con !important, ver docs/LIMPIEZA-PENDIENTE-storefront.md). Excepción
real, no cosmética: --accent ahora sale de --circulo-morado (el color
real publicado por cada tienda), no del naranja fijo del prototipo --
así queda conectado a "Color y configuración publicados" como pide la
integración. También se le quitó el truco de background-image con
hero-reference.png (ver el HTML aprobado, sección IMÁGENES): la imagen
real del hero se resuelve con real (necesita
abrir el modal de seguimiento), pero el prototipo original solo tenía
texto plano ahí -- sin resetear su apariencia se veía como un botón
nativo blanco. Mismo trato que "Ayuda" (el de al lado, que ya
hereda el reset global de .plantilla-clasica a). */
.plantilla-clasica .utility button {
border: 0;
background: none;
padding: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
.plantilla-clasica .head { min-height: 104px; display: grid; grid-template-columns: 270px minmax(360px, 1fr) 275px; gap: 32px; align-items: center; }
.plantilla-clasica .brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: .28em; font-size: 36px; }
/* El prototipo solo define el wordmark de texto -- logo_url real (imagen
subida por el comerciante) necesita su propia regla de tamaño, que no
existía. Sin logo, el de respaldo hereda la misma tipografía de
".brand" sin necesitar ninguna regla propia. */
.plantilla-clasica .brand img { max-height: var(--header-logo-alto, 52px); max-width: 100%; object-fit: contain; }
.plantilla-clasica .search { height: 56px; display: grid; grid-template-columns: 1fr 245px 70px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: 0 5px 20px #39251808; }
.plantilla-clasica .search label { display: flex; align-items: center; gap: 12px; padding: 0 20px; color: #8d8580; }
.plantilla-clasica .search input, .plantilla-clasica .search select { border: 0; outline: 0; background: none; width: 100%; height: 100%; font: inherit; }
.plantilla-clasica .search select { padding: 0 18px; border-left: 1px solid var(--line); }
.plantilla-clasica .search button { border: 0; background: var(--accent); color: #fff; font-size: 28px; display: grid; place-items: center; cursor: pointer; }
/* Corrección (checkpoint 4, Bloque 2, 2026-08-21): reconstrucción real del
buscador de la referencia -- un solo control de 3 segmentos (texto |
categoría | botón), no el campo de texto suelto del prototipo original.
Vivían en css/tienda.css marcadas como "legacy que gana por accidente
de especificidad" (id le gana a clase con cualquier prefijo, "body" no
tenía nada que ver) -- se traen aquí, junto a ".search"/".cart", que es
donde pertenecen de verdad: estas reglas por id sí son la fuente
vigente del diseño aprobado, coexistiendo con ".search" (que sigue
aportando el display:grid del contenedor). Mismo selector, mismo
resultado visual, solo el archivo correcto. */
.plantilla-clasica #buscadorTienda {
flex: 1 1 auto;
max-width: 640px;
height: 52px;
padding: 0 0 0 20px;
gap: 0;
overflow: hidden;
border: 1px solid var(--cl-borde, var(--line));
border-radius: 999px;
background: var(--cl-superficie, #fff);
box-shadow: var(--cl-sombra-baja, 0 1px 2px rgba(28, 23, 18, 0.05));
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.plantilla-clasica #buscadorTienda:focus-within {
border-color: var(--cl-acento, var(--accent));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-acento, var(--accent)) 16%, transparent);
}
.plantilla-clasica #buscadorTienda input {
min-width: 0;
color: var(--cl-tinta, var(--ink));
font-size: 14px;
}
.plantilla-clasica #buscadorTienda input::placeholder {
color: var(--cl-tinta-tenue, var(--muted));
}
.plantilla-clasica #buscadorCategoria {
height: 100%;
min-width: 0;
max-width: 178px;
padding: 0 30px 0 18px;
border: 0;
border-left: 1px solid var(--cl-borde, var(--line));
overflow: hidden;
color: var(--cl-tinta, var(--ink));
text-overflow: ellipsis;
background:
url('data:image/svg+xml;utf8, queda "hidden"
real (nunca un texto inventado) -- sin esto, la barra entera
quedaba negra y vacía en vez de ocultarse del todo. */
.plantilla-clasica .utility:has(#avisoEnvioGratis[hidden]) { display: none; }
.plantilla-clasica .head { padding-block: 15px; grid-template-columns: 1fr auto; }
.plantilla-clasica .brand { font-size: 25px; }
.plantilla-clasica .actions { grid-column: 2; }
.plantilla-clasica .actions span { display: none; }
.plantilla-clasica .search { grid-column: 1 / -1; grid-row: 2; height: 50px; margin-top: 12px; grid-template-columns: 1fr 180px 54px; }
.plantilla-clasica .all, .plantilla-clasica .tracking { display: none; }
/* min-width:0 (no "max-content" como en el prototipo original) --
".links" es ahora el único hijo de ".nav-in" en celular y necesita
poder encogerse para que SU PROPIO overflow-x:auto haga el scroll,
en vez de forzar a ".nav-in"/".shell" a desbordar la página. */
.plantilla-clasica .links { gap: 30px; min-width: 0; }
.plantilla-clasica .hero { grid-template-columns: 1fr; }
.plantilla-clasica .copy { min-height: 390px; }
.plantilla-clasica .visual { min-height: 390px; }
.plantilla-clasica .trust { grid-template-columns: 1fr 1fr; }
.plantilla-clasica .trust article { padding: 14px 22px; }
.plantilla-clasica .trust article:nth-child(2) { border-right: 0; }
.plantilla-clasica .trust article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 600px) {
.plantilla-clasica .shell { width: calc(100% - 28px); }
.plantilla-clasica .perks { width: 100%; justify-content: center; }
.plantilla-clasica .head { padding-block: 13px; }
.plantilla-clasica .brand { font-size: 22px; letter-spacing: .2em; }
.plantilla-clasica .actions { gap: 17px; }
.plantilla-clasica .actions a:first-child, .plantilla-clasica .actions button:first-child { display: none; }
.plantilla-clasica .search { grid-template-columns: 1fr 52px; }
.plantilla-clasica .search select { display: none; }
.plantilla-clasica .links { gap: 27px; font-size: 14px; }
.plantilla-clasica .nav-in { height: 48px; }
.plantilla-clasica main { padding-top: 12px; }
.plantilla-clasica .hero { border-radius: 17px; }
.plantilla-clasica .copy { padding: 34px 25px 26px; min-height: 360px; }
.plantilla-clasica .eyebrow { font-size: 11px; margin-bottom: 14px; }
.plantilla-clasica .hero h1 { font-size: 36px; }
.plantilla-clasica .desc { font-size: 15px; margin: 18px 0 22px; }
.plantilla-clasica .ctas { gap: 22px; }
.plantilla-clasica .primary { padding: 15px 19px; }
.plantilla-clasica .secondary { font-size: 14px; }
.plantilla-clasica .safe { font-size: 12px; }
.plantilla-clasica .visual { min-height: 250px; }
.plantilla-clasica .badge { width: 84px; top: 14px; right: 14px; font-size: 12px; border-width: 3px; }
.plantilla-clasica .badge b { font-size: 25px; }
.plantilla-clasica .trust { grid-template-columns: 1fr; padding: 6px 14px; }
.plantilla-clasica .trust article, .plantilla-clasica .trust article:nth-child(2) { border: 0; border-bottom: 1px solid var(--line); padding: 13px 5px; }
.plantilla-clasica .trust article:last-child { border: 0; }
.plantilla-clasica .trust article > b { width: 39px; height: 39px; }
.plantilla-clasica .trust strong { font-size: 14px; }
.plantilla-clasica .trust small { font-size: 12px; }
}