/* =========================================================================
Farmacia Institucional — hoja de estilos única
-------------------------------------------------------------------------
Un solo archivo, sin dependencias ni framework. Sustituye a las 27 hojas de
estilo y los 110 scripts que la auditoría contabilizó en la portada de Divi.
Orden: 1 Tokens · 2 Base · 3 Utilidades · 4 Cabecera · 5 Portada
6 Catálogo · 7 Ficha de producto · 8 Carrito y pago · 9 Contenido
10 Pie · 11 Impresión
========================================================================= */
/* 1 · Tokens ============================================================== */
:root {
/* -----------------------------------------------------------------------
Los tres colores salen del logo, medidos sobre el archivo original:
azul #08288f tipografía «Farmacia Institucional»
naranja #d2471d lema «Especialistas en Salud»
verdes #9cc03c → #489c3c → #247830 degradado de la cruz
Reparto de papeles, para que no domine un solo color:
AZUL estructura — cabecera, pie, títulos, enlaces, precios
VERDE salud y disponibilidad — franjas, stock, WhatsApp, acentos
NARANJA acción — botones de compra, ofertas y descuentos
----------------------------------------------------------------------- */
--azul-900: #061d6b;
--azul-700: #08288f; /* azul de marca */
--azul-500: #2a54c9;
--azul-100: #dde5fa;
--azul-050: #f3f6fe;
--verde-700: #247830; /* sombra de la cruz */
--verde-600: #3f8f2f; /* verde de marca */
--verde-500: #55a233;
--verde-300: #9cc03c; /* luz de la cruz */
--verde-100: #e8f4d8;
/* OJO con el contraste: el blanco sobre --naranja-600 queda en 2,87:1, por
debajo del mínimo legible de 4,5:1. Es un color elegido a propósito por su
viveza; si en algún momento se quiere cumplir el estándar, basta con usar
--naranja-700 en los botones, que con blanco encima da 4,52:1.
Por eso el bloque promocional, que lleva un párrafo entero en blanco, usa
el tono oscuro y no este. */
/* El 700 llega a 4,5:1 sobre blanco puro, pero el portal no tiene blanco
puro detrás: lleva la imagen de fondo de la casa, con manchas azules que
bajan a rgb(220,222,237) por debajo del pie. Medido ahí, el 700 se queda
en 3,3:1 y el 800 en 3,8:1. Este aguanta 4,7:1 en el peor punto. */
--naranja-800: #a83c05; /* texto pequeño encima de la imagen de fondo */
--naranja-700: #d04910; /* hover y superficies con texto largo */
--naranja-600: #f07541; /* botones y ofertas */
--naranja-500: #f79068; /* acento claro, sin texto encima */
--naranja-100: #f9e9e1;
--ambar-600: #9a6b00;
--ambar-100: #fff2d4;
--rojo-600: #c0392b;
--rojo-100: #fde8e5;
--tinta: #10151c;
--tinta-70: #46505e;
--tinta-50: #6d7686;
--linea: #e2e6ec;
--fondo: #f6f8fb;
--superficie: #ffffff;
/* Filete tricolor que se repite como firma de marca. */
--filete-marca: linear-gradient(90deg,
var(--azul-700) 0 33.33%, var(--verde-600) 33.33% 66.66%, var(--naranja-600) 66.66%);
--radio: 12px;
--radio-sm: 8px;
--sombra: 0 1px 2px rgba(16, 21, 28, .06), 0 4px 12px rgba(16, 21, 28, .05);
--sombra-alta: 0 8px 28px rgba(16, 21, 28, .12);
--ancho: 1200px;
--tipografia: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
/* 2 · Base ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
/* La ilustración de marca va en el fondo de todo el sitio, no página por
página. Donde una sección pinta su propio color —la portada lo hace en
todas— queda tapada sola, así que solo asoma justo donde antes había un
gris plano: formularios, listados sueltos, páginas de contenido.
Se fija para que no se desplace con el texto: una ilustración que sube y
baja distrae de lo que se está leyendo. El color de debajo se mantiene
como respaldo mientras la imagen carga. */
background: var(--fondo) url("../img/fondo-cuenta.webp") center / cover fixed no-repeat;
color: var(--tinta);
font-family: var(--tipografia);
font-size: 16px;
line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
/* Cualquier regla de autor con «display» pisa el [hidden] del navegador, y las
tarjetas y contadores lo llevan. Sin esta línea, ocultar algo desde
JavaScript no surte efecto. */
[hidden] { display: none !important; }
a { color: var(--azul-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p, ul, ol { margin: 0 0 1em; }
:focus-visible {
outline: 3px solid var(--azul-500);
outline-offset: 2px;
border-radius: 4px;
}
/* 3 · Utilidades ========================================================== */
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.visualmente-oculto {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.salto-contenido {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--azul-700); color: #fff; padding: .75rem 1.25rem;
}
.salto-contenido:focus { left: 0; }
/* El botón principal va en naranja: es el color de acción de la marca y
destaca sobre el azul de la estructura sin competir con él. */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .8rem 1.4rem; border: 0; border-radius: var(--radio-sm);
background: var(--naranja-600); color: #fff;
font: inherit; font-weight: 600; cursor: pointer; text-align: center;
transition: background .15s ease, transform .15s ease;
}
.boton:hover { background: var(--naranja-700); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton[disabled] { background: var(--tinta-50); cursor: not-allowed; }
/* Mientras se envía: un aro que gira antes del texto, para que se vea que el
botón está trabajando y no colgado. */
.boton.cargando { cursor: progress; }
.boton.cargando::before {
content: ""; width: 1em; height: 1em; flex: 0 0 auto;
border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
border-radius: 50%; animation: boton-giro .7s linear infinite;
}
@keyframes boton-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.boton.cargando::before { animation: none; }
}
.boton--secundario { background: var(--superficie); color: var(--azul-700); box-shadow: inset 0 0 0 2px var(--azul-700); }
.boton--secundario:hover { background: var(--azul-050); color: var(--azul-900); }
.boton--azul { background: var(--azul-700); }
.boton--azul:hover { background: var(--azul-900); }
.boton--whatsapp { background: var(--verde-600); }
.boton--whatsapp:hover { background: var(--verde-700); }
/* Agregar al carrito, en naranja para que destaque sobre el verde de WhatsApp. */
.boton--naranja { background: var(--naranja-600); }
.boton--naranja:hover { background: var(--naranja-700); }
/* Icono dentro de un botón (carrito, WhatsApp…). */
.boton > .icono { width: 19px; height: 19px; flex: 0 0 auto; }
.boton--ancho { width: 100%; }
/* Para lo que borra. Rojo con blanco encima da 4,84:1, por encima del mínimo. */
.boton--rojo { background: var(--rojo-600); }
.boton--rojo:hover { background: #96271b; }
/* Producto agotado: botón inerte y gris que lo dice claro en la tarjeta, sin
parecer una acción. Doble anclaje para ganarle a «.boton[disabled]». */
.boton--agotado[disabled],
.boton--agotado[disabled]:hover {
background: #eceff3; color: var(--tinta-50);
box-shadow: inset 0 0 0 1px var(--linea); cursor: not-allowed; transform: none;
}
.etiqueta {
display: inline-block; padding: .2rem .6rem; border-radius: 999px;
font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
/* El descuento se marca en azul; «Oferta» va en verde. Son dos avisos
distintos y así no compiten, y el naranja queda libre para la acción. */
.etiqueta--oferta { background: var(--azul-700); color: #fff; }
.etiqueta--promo { background: var(--verde-600); color: #fff; }
/* «Nuevo» va en el verde oscuro de la cruz para no confundirse con «Oferta»,
que usa el verde de marca. Con blanco encima queda en 5,5:1. */
.etiqueta--nuevo { background: var(--verde-700); color: #fff; }
/* Texto blanco, que es lo que más resalta en una etiqueta de aviso. Para que
además se lea bien, el fondo baja un tono desde el #F56542 pedido: con ese
naranja exacto el blanco se queda en 3,08:1, y con este llega a 4,99:1. Es
el mismo color, un punto más profundo. */
.etiqueta--agotado { background: #C8401C; color: #fff; }
.etiqueta--stock { background: var(--verde-100); color: var(--verde-700); }
.etiqueta--linea { background: var(--verde-100); color: var(--verde-700); }
.aviso {
padding: 1rem 1.25rem; border-radius: var(--radio-sm);
border-left: 4px solid var(--verde-500); background: var(--verde-100);
margin-bottom: 1.5rem;
}
.aviso--atencion { border-color: #d9a400; background: var(--ambar-100); }
/* El «.aviso» base es verde, que es el color de que algo salió bien. Sin estas
dos variantes un error se anunciaba en verde, que es exactamente lo contrario
de lo que hay que comunicar. */
.aviso--error { border-color: var(--rojo-600); background: var(--rojo-100); }
.aviso--exito { border-color: var(--verde-500); background: var(--verde-100); }
.seccion { padding: 3rem 0; }
.seccion__cabecera {
display: flex; flex-wrap: wrap; gap: 1rem;
align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem;
}
.seccion__cabecera h2 { margin: 0; padding-bottom: .5rem; position: relative; }
.seccion__cabecera h2::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 68px; height: 4px;
border-radius: 2px; background: var(--filete-marca);
}
/* Es un rótulo de orientación, no contenido: cuanto menos pese en la página,
mejor. La línea se ajusta al texto en vez de heredar la altura de párrafo. */
.migas {
font-size: .82rem; color: var(--tinta-50);
padding: .7rem 0 0; line-height: 1.3;
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: .4rem; color: var(--tinta-50); }
/* 4 · Cabecera ============================================================ */
/* Alto de la cabecera pegajosa: lo que se pega debajo de ella —los filtros del
catálogo, el resumen del checkout— se separa con esta medida en vez de con un
número escrito a mano.
Son dos valores porque la cabecera mide distinto según la fila de líneas esté
desplegada o recogida. tienda.js los mide una vez al arrancar; los de aquí
son el respaldo hasta que lo haga. Se cambia de uno a otro con una clase, no
reescribiendo la variable: escribir estilos mientras la fila se anima
reiniciaba la transición y la dejaba encallada a media altura. */
:root {
/* Incluyen la barra de aviso, que ahora también va pegada arriba. tienda.js
publica los valores exactos al arrancar; estos son el respaldo. */
--alto-cabecera-abierta: 173px;
--alto-cabecera-recogida: 112px;
--alto-cabecera: var(--alto-cabecera-abierta);
}
.fila-recogida { --alto-cabecera: var(--alto-cabecera-recogida); }
/* La barra de aviso y la cabecera van juntas en este contenedor pegajoso: así
ambas quedan fijas arriba al bajar la página, apiladas y sin solaparse. */
.cabecera-fija { position: sticky; top: 0; z-index: 50; }
/* Barra de aviso institucional: franja delgada en verde claro, con el texto en
cinta (se desliza en bucle). Queda fija arriba con el contenedor. */
.barra-aviso {
background: var(--verde-100);
overflow: hidden;
}
/* La pista lleva dos copias del texto, una tras otra; al desplazarla justo el
ancho de una copia (-50 %) el bucle no deja huecos. */
.barra-aviso__pista {
display: flex; width: max-content;
animation: aviso-cinta 30s linear infinite;
}
/* Al poner el cursor encima (o al enfocar un enlace con el teclado) se detiene,
para poder leerlo y hacer clic con calma. */
.barra-aviso:hover .barra-aviso__pista,
.barra-aviso:focus-within .barra-aviso__pista { animation-play-state: paused; }
.barra-aviso__texto {
flex: 0 0 auto; margin: 0; padding: .28rem 0; padding-right: 4rem;
white-space: nowrap; line-height: 1.3;
font-size: .82rem; color: var(--verde-700);
}
.barra-aviso__enlace {
color: var(--verde-700); font-weight: 700;
text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.barra-aviso__enlace:hover { color: var(--verde-600); }
@keyframes aviso-cinta {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 560px) { .barra-aviso__texto { font-size: .8rem; } }
/* Aviso flotante «correo copiado»: aparece abajo y se desvanece solo. */
.aviso-copiado {
position: fixed; left: 50%; bottom: 24px; z-index: 200;
transform: translateX(-50%) translateY(10px);
max-width: 90vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: var(--tinta); color: #fff;
padding: .7rem 1.15rem; border-radius: 999px;
font-size: .88rem; font-weight: 700; box-shadow: var(--sombra);
opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.aviso-copiado--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
.aviso-copiado { transition: opacity .2s ease; transform: translateX(-50%); }
.aviso-copiado--visible { transform: translateX(-50%); }
}
/* Sin animación para quien lo prefiere: una sola copia, centrada y quieta. */
@media (prefers-reduced-motion: reduce) {
.barra-aviso { overflow: visible; }
.barra-aviso__pista { animation: none; width: 100%; justify-content: center; }
.barra-aviso__texto { white-space: normal; text-align: center; padding-right: 0; }
.barra-aviso__texto[aria-hidden="true"] { display: none; }
}
.cabecera { background: var(--superficie); box-shadow: var(--sombra); }
/* La fila de líneas se recoge al bajar y vuelve al subir: en un catálogo se
baja mucho, y recuperar esos 60 px de alto se nota. Se colapsa el alto en
lugar de desplazarla porque va dentro del flujo de la cabecera: moverla
dejaría un hueco donde estaba. Solo en escritorio — por debajo de 820 px
este mismo elemento es el menú desplegable. */
@media (min-width: 821px) {
/* La opacidad va algo por delante del alto —.18 frente a .24— para que las
pastillas no se vean recortadas mientras el alto se cierra. Los dos tiempos
son iguales en ambos sentidos a propósito: con un retardo asimétrico, una
transición interrumpida se quedaba visible pero translúcida. */
.navegacion {
overflow: hidden;
max-height: 6rem;
transition: max-height .24s ease, opacity .18s ease;
}
.fila-recogida .navegacion {
max-height: 0;
opacity: 0;
/* Sin esto queda una raya de 1 px bajo la cabecera al recogerse, que
parece un defecto y no una separación. */
border-top-color: transparent;
}
}
@media (prefers-reduced-motion: reduce) {
.navegacion { transition: none; }
}
/* Mientras la pestaña no está a la vista, sin animación: el navegador congela
el reloj de las transiciones y la fila se quedaba a medio recorrido, con las
pastillas recortadas, hasta que alguien volvía. Lo pone y lo quita tienda.js
al cambiar la visibilidad. */
.sin-transicion-cabecera .navegacion { transition: none; }
/* Filete verde superior: primer acento de marca antes que nada. */
.cabecera__filete { height: 4px; background: var(--verde-600); }
.cabecera__principal {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 1.5rem; padding: .85rem 0;
}
.marca { display: block; flex: 0 0 auto; }
.marca:hover { text-decoration: none; }
.marca img { width: auto; height: 46px; }
/* Buscador ovalado, como el resto de los controles de la cabecera. */
.buscador { display: flex; max-width: 620px; width: 100%; position: relative; }
.buscador input {
flex: 1; min-width: 0; padding: .72rem 3rem .72rem 1.4rem; font: inherit;
border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo);
}
.buscador input::placeholder { color: var(--tinta-50); font-style: italic; }
.buscador input:focus { background: var(--superficie); border-color: var(--verde-500); }
.buscador button {
position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px;
border: 0; border-radius: 999px; background: transparent;
font-size: 1rem; cursor: pointer; color: var(--tinta-70);
}
.buscador button:hover { background: var(--verde-100); }
.buscador button svg { width: 19px; height: 19px; margin-inline: auto; }
.cabecera__acciones { display: flex; align-items: center; gap: .5rem; }
/* Consultar domicilio: pastilla verde de llamado a la acción, delante de la
cuenta y el carrito. Verde para separarla de la cuenta (azul) y el carrito
(tinta) y que se lea como «pídelo a tu casa». */
.pastilla-domicilio {
display: inline-flex; align-items: center; gap: .45rem;
padding: .6rem 1.05rem; border-radius: 999px;
background: var(--verde-600); color: #fff;
font-size: .875rem; font-weight: 700; white-space: nowrap;
transition: background .15s ease;
}
.pastilla-domicilio:hover { background: var(--verde-700); text-decoration: none; }
.pastilla-domicilio__icono { display: grid; place-items: center; }
.pastilla-domicilio__icono svg { width: 19px; height: 19px; }
.pastilla-carrito {
position: relative; display: inline-flex; align-items: center; gap: .5rem;
padding: .6rem 1.15rem; border-radius: 999px;
background: var(--tinta); color: #fff; font-size: .9rem; font-weight: 700;
transition: background .15s ease;
}
.pastilla-carrito:hover { background: var(--azul-900); text-decoration: none; }
.pastilla-carrito__icono { display: grid; place-items: center; }
.pastilla-carrito__icono svg { width: 20px; height: 20px; }
.contador-carrito {
min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px;
background: var(--verde-500); color: #fff;
border-radius: 999px; font-size: .72rem; font-weight: 700;
}
.alternar-menu {
display: none; padding: .5rem .75rem; line-height: 0;
background: none; border: 1px solid var(--linea); border-radius: 999px; cursor: pointer;
color: var(--tinta-70);
}
.alternar-menu svg { width: 22px; height: 22px; }
/* ---- Menú de líneas: todo en pastillas ---- */
.navegacion { border-top: 1px solid var(--linea); background: var(--superficie); }
/* Las nueve pastillas van siempre en una sola fila y en su orden. Antes se
repartían en dos cuando no cabían, y la segunda fila —«Movilidad», «Farmi
Ahorro» y «Ver todo»— quedaba suelta debajo. Si el ancho no da, la fila se
arrastra en horizontal en lugar de partirse. */
.navegacion ul {
list-style: none; display: flex; flex-wrap: nowrap; align-items: center;
gap: .4rem; padding: .7rem 0;
/* Repartidas de borde a borde. Alineadas a la izquierda dejaban un hueco
muerto a la derecha que hacía parecer que faltaba algo. */
justify-content: space-between;
/* «margin: 0» pisaría el centrado de .contenedor, que es menos específico. */
margin-block: 0; margin-inline: auto;
overflow-x: auto;
/* Sin barra a la vista: estorba en una fila de 40 px de alto. */
scrollbar-width: none; -ms-overflow-style: none;
}
.navegacion ul::-webkit-scrollbar { display: none; }
.navegacion li { flex: none; }
.pastilla {
display: inline-flex; align-items: center; gap: .4rem;
/* Relleno y cuerpo algo más ajustados que antes: con los de partida las nueve
pastillas pedían 1.176 px y solo entraban a partir de 1.256 de ventana. */
padding: .5rem .8rem; border-radius: 999px;
background: var(--verde-600); color: #fff;
font-size: .84rem; font-weight: 600; line-height: 1.3;
border: 2px solid transparent; white-space: nowrap;
transition: background .15s ease, transform .15s ease;
}
.pastilla svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pastilla:hover { background: var(--verde-700); text-decoration: none; transform: translateY(-1px); }
.pastilla[aria-current="page"] { background: var(--verde-700); box-shadow: inset 0 0 0 2px var(--verde-300); }
.pastilla--oferta { background: var(--naranja-600); }
.pastilla--oferta:hover, .pastilla--oferta[aria-current="page"] { background: var(--naranja-700); }
/* «Ver todo» no es una línea de producto, así que se distingue en azul. */
.pastilla--azul { background: var(--azul-700); }
.pastilla--azul:hover { background: var(--azul-900); }
.pastilla--azul[aria-current="page"] { background: var(--azul-900); box-shadow: inset 0 0 0 2px var(--azul-500); }
/* 5 · Portada ============================================================= */
/* ---- Carrusel de banners ---- */
.carrusel { position: relative; background: var(--azul-900); overflow: hidden; }
.carrusel__pista { list-style: none; margin: 0; padding: 0; }
/* Las láminas se apilan y solo la activa se ve; así el alto no salta al pasar
de una a otra. La primera define el espacio con su proporción 20:7. */
/* Las láminas se apilan todas en la misma celda para poder fundirse entre sí.
Con solo «opacity: 0» la oculta seguía ahí: recibía los clics y el tabulador
por encima de la visible, así que pinchar en un banner activaba el enlace de
otro —el que estuviera último en el HTML, que es el que queda arriba—.
«visibility» lo resuelve de una vez: quita el elemento del alcance del ratón
y del teclado. Se transiciona con retardo al ocultarse para que el fundido de
salida se llegue a ver, y sin retardo al aparecer. */
.carrusel__lamina {
grid-area: 1 / 1;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .45s ease, visibility 0s linear .45s;
}
.carrusel__pista { display: grid; }
.carrusel__lamina--activa {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .45s ease, visibility 0s;
}
.carrusel__lamina img { width: 100%; aspect-ratio: 20 / 7; object-fit: cover; }
.carrusel__flecha {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
display: grid; place-items: center; width: 46px; height: 46px;
border: 0; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, .82); color: var(--azul-900);
box-shadow: 0 2px 10px rgba(16, 21, 28, .2);
transition: background .15s ease;
}
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha svg { width: 22px; height: 22px; }
.carrusel__flecha--atras { left: 1rem; }
.carrusel__flecha--adelante { right: 1rem; }
.carrusel__puntos {
position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%);
z-index: 2; display: flex; gap: .5rem;
}
.carrusel__punto {
width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .15s ease;
}
.carrusel__punto:hover { background: rgba(255, 255, 255, .85); }
.carrusel__punto[aria-current] { background: var(--verde-300); width: 26px; border-radius: 999px; }
/* En el teléfono el banner es pequeño y las flechas se montaban sobre el texto.
Se ocultan: para cambiar de banner quedan los puntos (que se pueden pulsar),
el deslizar con el dedo y las flechas del teclado. Los puntos crecen un poco
para que se toquen bien con el dedo. */
@media (max-width: 760px) {
.carrusel__flecha { display: none; }
.carrusel__punto { width: 12px; height: 12px; }
.carrusel__punto[aria-current] { width: 30px; }
}
/* ---- Bloque azul «por qué nos eligen» ---- */
/* Se llama .razones y no .promesas porque esa clase ya la usa la lista verde
de la cabecera de cada línea. */
/* Banda a todo el ancho bajo el carrusel, en el azul de marca (#08288f), el
mismo del logo y del menú. Sobre él el texto blanco llega a 12,3:1. */
.razones { background: var(--azul-700); color: #fff; padding: 1.9rem 0; }
.razones .antetitulo { color: #c3d3f7; } /* 8,2:1 */
.razones .titulo-centrado { color: #fff; margin-bottom: 1.4rem; }
.razones .titulo-centrado em { color: var(--verde-300); }
.razones__lista {
list-style: none; margin: 0 auto; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem;
/* Tres columnas —una por promesa—. Sin este tope se estirarían a todo el
contenedor y el bloque quedaría desangelado; así el grupo se mantiene
compacto y centrado. */
max-width: 48rem;
}
.razones__lista li {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .55rem;
}
/* Azulejo redondeado con el icono, un tono más claro que el fondo. */
.razones__icono {
display: grid; place-items: center;
width: 56px; height: 56px; border-radius: 16px;
background: var(--azul-500); color: #fff;
}
.razones__icono svg { width: 28px; height: 28px; }
.razones__lista strong { font-size: .95rem; line-height: 1.3; }
.razones__lista span { font-size: .85rem; color: #c3d3f7; line-height: 1.4; }
/* ---- Título principal de la portada ---- */
/* Ancho y contenido: con el ancho original de 24ch el titular caía en tres
renglones y por sí solo se llevaba 156 px. Cabe en dos, se lee igual, y la
sección deja de empujar las ofertas fuera de la pantalla. */
.titulo-principal {
text-align: center; max-width: 40ch; margin: 0 auto .15rem;
color: var(--azul-900); text-wrap: balance;
font-size: clamp(1.25rem, .9rem + 1.2vw, 1.7rem);
}
.subtitulo-centrado {
text-align: center; max-width: 62ch; margin: 1.1rem auto 0;
font-size: 1.02rem; color: var(--tinta-70);
}
.seccion--lineas .antetitulo { margin-top: .6rem; margin-bottom: .35rem; }
.portada {
background: linear-gradient(135deg, var(--azul-900), var(--azul-700) 60%, var(--azul-500));
color: #fff; padding: 3.5rem 0 4rem; position: relative;
}
/* Franja verde inferior: el degradado de la cruz cerrando la portada. */
.portada::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
background: linear-gradient(90deg, var(--verde-700), var(--verde-500), var(--verde-300));
}
.portada__rejilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; }
.portada h1 { color: #fff; margin-bottom: .6rem; }
.portada p { font-size: 1.05rem; color: #dbeaff; max-width: 52ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.portada .boton--secundario { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.portada .boton--secundario:hover { background: rgba(255,255,255,.12); color: #fff; }
.portada__datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dato {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radio); padding: 1.1rem;
}
.dato strong { display: block; font-size: 1.7rem; line-height: 1; }
.dato span { font-size: .82rem; color: #cfe3ff; }
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ventaja {
background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
padding: 1.5rem; box-shadow: var(--sombra);
}
.ventaja__icono {
display: grid; place-items: center; width: 50px; height: 50px;
border-radius: 14px; background: var(--azul-100); color: var(--azul-700);
}
.ventaja__icono svg { width: 26px; height: 26px; }
.ventaja h3 { margin: .9rem 0 .3rem; font-size: 1rem; }
.ventaja p { margin: 0; font-size: .9rem; color: var(--tinta-70); }
/* ---- Sección de líneas: antetítulo, título a dos tonos y tarjetas ---- */
/* Esta sección va más apretada que el resto: es un índice de categorías, no
una sección de contenido, y con el relleno general ocupaba media pantalla. */
.seccion--lineas { background: var(--superficie); padding: 1.4rem 0; }
.seccion--lineas .seccion__pie { margin-top: .8rem; }
.antetitulo {
display: flex; align-items: center; justify-content: center; gap: .75rem;
margin: 0 0 .75rem;
font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--verde-600);
}
/* Las rayitas laterales son decoración: se dibujan, no se escriben. */
.antetitulo::before, .antetitulo::after {
content: ""; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
}
.titulo-centrado {
text-align: center; max-width: 40ch; margin: 0 auto 2.5rem;
font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.35rem);
text-wrap: balance;
}
.titulo-centrado em { font-style: normal; color: var(--verde-600); }
/* Las ocho líneas van en una sola fila que desfila de lado a lado. Ocupa todo
el ancho de la ventana, no el del contenedor, para que las tarjetas entren y
salgan por los bordes de la pantalla. El degradado de los extremos las funde
con el fondo en lugar de cortarlas de golpe. */
.desfile-categorias {
overflow: hidden; padding-block: .5rem;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* La separación va como margen de cada tarjeta y no como «gap» del contenedor:
con «gap» la última no lleva hueco detrás, así que la mitad del ancho total
se queda corta por medio hueco y el bucle daría un salto de 8 px por vuelta. */
.desfile-categorias__pista {
list-style: none; display: flex; margin: 0; padding: 0;
width: max-content;
animation: desfilar 38s linear infinite;
}
/* 145 px. La tarjeta lleva el nombre corto de la línea, así que ninguno pasa
de dos renglones a esta anchura y las ocho conservan la misma altura. */
.desfile-categorias__pista > li { flex: 0 0 145px; display: flex; margin-right: .75rem; }
.desfile-categorias__pista .categoria { width: 100%; }
/* Se para al pasar por encima o al llegar con el tabulador: son enlaces, y no
se puede pedir que se pulse algo que se está moviendo. */
.desfile-categorias:hover .desfile-categorias__pista,
.desfile-categorias:focus-within .desfile-categorias__pista {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
/* Sin movimiento vuelven a la rejilla de cuatro columnas: ocho líneas, dos
filas llenas, y las copias del bucle sobran. */
.desfile-categorias { -webkit-mask-image: none; mask-image: none; }
.desfile-categorias__pista {
animation: none; display: grid; grid-template-columns: repeat(4, 1fr);
width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto;
}
.desfile-categorias__pista { gap: 1rem; }
.desfile-categorias__pista > li { flex: initial; margin-right: 0; }
.desfile-categorias__pista > li[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1000px) {
.desfile-categorias__pista { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.categoria {
display: flex; flex-direction: column; align-items: center; gap: .55rem;
padding: 1rem .65rem .85rem;
background: var(--superficie); border: 1.5px solid var(--linea);
border-radius: 14px; color: var(--tinta); text-align: center;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.categoria:hover, .categoria:focus-visible {
text-decoration: none; border-color: var(--verde-600);
transform: translateY(-2px); box-shadow: var(--sombra);
}
.categoria__icono {
display: grid; place-items: center; width: 42px; height: 42px;
border-radius: 12px; background: var(--verde-100); color: var(--verde-600);
transition: background .18s ease, color .18s ease;
}
.categoria__icono svg { width: 22px; height: 22px; }
/* Al enfocar la tarjeta, el icono se rellena: el color pasa de fondo a figura. */
.categoria:hover .categoria__icono,
.categoria:focus-visible .categoria__icono {
background: var(--verde-600); color: #fff;
}
.categoria__nombre { font-size: .82rem; font-weight: 600; line-height: 1.3; }
/* Empuja el contador al fondo para que quede a la misma altura en todas las
tarjetas, aunque el nombre ocupe una línea o dos. */
.categoria__total { margin-top: auto; font-size: .72rem; color: var(--tinta-50); }
.seccion__pie { text-align: center; margin: 2.25rem 0 0; font-weight: 600; }
/* 5b · Cabecera de línea =================================================== */
.cabecera-linea {
background:
radial-gradient(120% 90% at 78% 30%, rgba(156, 192, 60, .30), transparent 60%),
linear-gradient(115deg, #f2f8ec 0%, #e6f2dc 45%, #dcece9 100%);
overflow: hidden;
}
.cabecera-linea__rejilla {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 2rem; align-items: center; min-height: 340px; padding: 2.5rem 0;
}
.cabecera-linea__panel {
background: rgba(255, 255, 255, .82);
backdrop-filter: blur(6px);
border-radius: var(--radio); padding: 2rem 2.25rem;
box-shadow: 0 10px 34px rgba(16, 21, 28, .07);
}
.cabecera-linea__panel h1 { margin-bottom: .75rem; text-wrap: balance; }
.cabecera-linea__panel h1 em { font-style: normal; color: var(--verde-600); }
.cabecera-linea__panel p { margin: 0; color: var(--tinta-70); max-width: 46ch; }
/* Banners puestos desde el panel
------------------------------
El hueco viene vacío y oculto en el HTML; lo rellena «banners.js» con lo
que responda la API. Si no hay ninguno para ese sitio, no ocupa nada. */
.franja-banner {
display: grid;
gap: 1rem;
margin: 1.5rem 0;
}
.franja-banner__pieza img,
.franja-banner__pieza a {
display: block;
width: 100%;
height: auto;
border-radius: var(--radio);
}
/* Dos o tres seguidos se reparten la fila en vez de apilarse a pantalla
completa, que sería una portada de puros banners. */
@media (min-width: 720px) {
.franja-banner:has(.franja-banner__pieza + .franja-banner__pieza) {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
}
.promesas {
list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 1.75rem;
margin: 1.5rem 0 0; padding: 0;
}
.promesas li {
display: flex; align-items: center; gap: .5rem;
font-size: .875rem; font-weight: 700; color: var(--verde-700);
}
.promesa__icono { display: grid; place-items: center; color: var(--verde-600); }
.promesa__icono svg { width: 20px; height: 20px; }
/* Bodegón con fotos reales de la línea; decorativo, sin texto alternativo. */
/* --- Cabecera con banner de diseño ---------------------------------------
La imagen manda su propia proporción: no se le impone ninguna, así que sirve
igual una apaisada de 1600x648 que otra más cuadrada. Se ve entera y sin
recortar, que para una pieza diseñada es la única forma decente.
El fondo degradado de la cabecera se apaga aquí: el banner trae el suyo, y
dos fondos discutiendo se notan en los bordes. */
.cabecera-linea--banner { background: none; padding: .8rem 0 0; }
/* Banner de cabecera puesto desde el panel: se coloca en el lugar de la imagen
fija de la línea. Mientras no haya ninguno se queda oculto y manda la de
siempre; en cuanto «banners.js» lo muestra, la fija se aparta. */
.franja-banner[data-banners="cabecera"] { margin: 0; }
.franja-banner[data-banners="cabecera"]:not([hidden]) ~ .cabecera-linea__banner {
display: none;
}
.cabecera-linea__banner {
display: block;
width: 100%; height: auto;
border-radius: var(--radio);
/* Arranca invisible para no parpadear: si hay una imagen de cabecera puesta
desde el panel, esa manda y esta no debe asomarse antes. «banners.js» le
añade «esta-lista» en cuanto confirma que no hay ninguna del panel (o que
la API no respondió), y entonces aparece con una transición suave. */
opacity: 0;
transition: opacity .25s ease;
}
.cabecera-linea__banner.esta-lista { opacity: 1; }
/* La de cabecera del panel también entra con un fundido, para que el cambio de
«vacío» a la imagen correcta no dé un salto brusco. */
.franja-banner[data-banners="cabecera"]:not([hidden]) { animation: cabecera-aparece .25s ease; }
@keyframes cabecera-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.cabecera-linea__banner { transition: none; }
.franja-banner[data-banners="cabecera"]:not([hidden]) { animation: none; }
}
/* El titular y las promesas siguen en la página aunque no se vean: lo que está
dibujado dentro de una imagen no lo lee un buscador ni un lector de
pantalla. Se apartan de la vista, no se borran. */
.cabecera-linea--banner .cabecera-linea__texto {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.collage { position: relative; aspect-ratio: 16 / 11; }
.collage__base {
position: absolute; left: 12%; right: 12%; bottom: 12%; height: 26%;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
/* Las fotos de producto vienen sobre fondo blanco opaco, así que en vez de
fingir que flotan se presentan como fichas: el blanco pasa a ser parte del
diseño y no un recorte fallido. */
.collage__pieza {
position: absolute; aspect-ratio: 1; object-fit: contain;
background: #fff; border-radius: 18px; padding: .75rem;
box-shadow: 0 14px 30px rgba(16, 21, 28, .14);
}
.collage__pieza--1 { width: 44%; left: 28%; bottom: 14%; z-index: 3; transform: rotate(-2deg); }
.collage__pieza--2 { width: 32%; left: 2%; bottom: 26%; z-index: 2; transform: rotate(-6deg); }
.collage__pieza--3 { width: 32%; right: 3%; bottom: 24%; z-index: 2; transform: rotate(5deg); }
/* La página de línea usaba aquí una barra de filtros horizontal propia. Ahora
comparte el panel lateral del catálogo —«.catalogo» y «.filtros»— para que
las dos vistas se manejen igual, así que aquella barra ya no existe. */
.rango__valores { font-weight: 700; color: var(--azul-700); font-variant-numeric: tabular-nums; }
/* Deslizador de dos manijas: dos superpuestos sobre una
pista dibujada aparte. Cada manija recibe los eventos solo en su pulgar,
por eso los carriles llevan pointer-events: none. */
/* La barra entera es la zona sensible, no solo los pulgares: se pulsa o se
arrastra en cualquier punto y se mueve la manija más cercana. */
.rango {
position: relative; height: 34px; display: flex; align-items: center;
cursor: pointer; touch-action: none;
}
.rango__pista, .rango__activo {
position: absolute; height: 6px; border-radius: 999px; pointer-events: none;
}
.rango__pista { left: 0; right: 0; background: var(--linea); }
.rango__activo { background: var(--verde-600); }
/* Los quedan solo para el teclado y los lectores de pantalla; el
puntero lo gestiona activarRango() en tienda.js. */
.rango input[type="range"] {
position: absolute; left: 0; width: 100%; margin: 0;
height: 34px; background: none; pointer-events: none;
-webkit-appearance: none; appearance: none;
}
.rango input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px; height: 22px; border-radius: 50%;
background: var(--verde-600); border: 3px solid #fff;
box-shadow: 0 1px 5px rgba(16, 21, 28, .3);
}
.rango input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: var(--verde-600); border: 3px solid #fff;
box-shadow: 0 1px 5px rgba(16, 21, 28, .3);
}
.rango:active input[type="range"]::-webkit-slider-thumb { transform: scale(1.08); }
.rango input[type="range"]::-moz-range-track { background: none; }
.rango input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--azul-500); }
.lista-subcategorias { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
/* --- Banner de cierre de Farmi Ahorro: una sola imagen enlazada --- */
.promo-banner {
display: block; border-radius: 22px; overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.promo-banner:hover {
text-decoration: none; transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
}
.promo-banner img { display: block; width: 100%; height: auto; }
/* ---- Carrusel horizontal de productos ---- */
/* La separación deja ver el fondo de la página entre el carrusel de banners y
esta franja, para que no se lean como una sola pieza. */
/* Recién llegados: el fondo de farmacia —estantería, cruces y una fórmula
médica, casi todo en blanco— detrás del carrusel. El centro queda claro, que
es donde van el texto y las tarjetas, así que se leen sin esfuerzo. Un color
claro de respaldo mientras la imagen carga. */
.seccion--novedades {
background: #f6f8f5 url("../img/fondo-novedades.webp") center top / cover no-repeat;
}
/* El antetítulo va en verde oscuro de la cruz: sobre este fondo claro el verde
de marca se quedaría por debajo del 4,5:1 que pide el texto pequeño. */
.seccion--novedades .antetitulo { color: var(--verde-700); }
.seccion--novedades .titulo-centrado { color: var(--azul-900); margin-bottom: .55rem; }
/* Cruces de salud a los lados del antetítulo, en vez de las rayitas. */
.antetitulo--cruces::before,
.antetitulo--cruces::after {
content: "\271A"; width: auto; height: auto; background: none;
font-size: 1rem; line-height: 1;
}
/* Subtítulo bajo el título de una sección. */
.subtitulo-seccion {
text-align: center; max-width: 52ch; margin: 0 auto 2.4rem;
color: var(--tinta-70); font-size: 1rem; line-height: 1.5;
}
.seccion--ofertas {
background: #f6f8f5 url("../img/fondo-novedades.webp") center top / cover no-repeat;
}
/* Mismo caso que en recién llegados: sobre este verde pálido el verde de marca
se queda en 3,5:1 y el antetítulo pasa al verde oscuro de la cruz, 5,0:1. */
.seccion--ofertas .antetitulo { color: var(--verde-700); }
.seccion--comprado {
background: #f6f8f5 url("../img/fondo-novedades.webp") center top / cover no-repeat;
}
.seccion--comprado .titulo-centrado { margin-bottom: 2rem; }
/* Los tres carruseles —novedades, ofertas y lo más comprado— se estrechan por
igual: con cuatro tarjetas a la vista el contenedor de 1200 px las dejaría en
254 px, el tamaño de partida. Con este tope quedan en 219 px, algo más
pequeñas, y el hueco lateral deja las flechas fuera de la fila en vez de
encima de la primera y la última tarjeta. */
.seccion--novedades .contenedor,
.seccion--ofertas .contenedor,
.seccion--comprado .contenedor { width: min(100% - 2.5rem, 1040px); }
.carrusel-productos {
position: relative; padding-inline: 58px;
/* Color al que se funden los bordes: el del fondo de cada sección. */
--velo: var(--fondo);
}
.seccion--novedades .carrusel-productos,
/* El velo del borde va claro, como la zona clara del fondo de farmacia por
donde entran y salen las tarjetas. */
.seccion--ofertas .carrusel-productos { --velo: #f6f8f5; }
.seccion--comprado .carrusel-productos { --velo: #f6f8f5; }
/* Velo a los lados mientras la fila se desplaza: las tarjetas que entran y
salen se funden con el fondo en vez de aparecer y desaparecer de golpe. Solo
se ve durante el movimiento —lo pone y lo quita carrusel.js— porque en
reposo las cuatro tarjetas encajan justas y teñirles el borde parecería un
fallo, no un detalle. */
.carrusel-productos::before,
.carrusel-productos::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 1;
pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.carrusel-productos::before {
left: 58px; background: linear-gradient(90deg, var(--velo), transparent);
}
.carrusel-productos::after {
right: 58px; background: linear-gradient(270deg, var(--velo), transparent);
}
.carrusel-productos--desplazando::before,
.carrusel-productos--desplazando::after { opacity: 1; }
/* El desplazamiento es nativo: con el dedo o la rueda funciona sin JavaScript,
y scroll-snap deja cada tarjeta alineada al soltar. */
.carrusel-productos__pista {
--por-vista: 4;
--hueco: 1rem;
list-style: none; display: flex; gap: var(--hueco); margin: 0; padding: .5rem 0 .75rem;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
/* Sin barra de desplazamiento: la fila se sigue moviendo con el dedo, la
rueda y las flechas, y en móvil asoma media tarjeta para indicar que hay
más. Firefox y los navegadores WebKit la ocultan de forma distinta. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.carrusel-productos__pista::-webkit-scrollbar { display: none; }
/* Mientras carrusel.js mueve la fila fotograma a fotograma. Sin esto el anclaje
tiraría de vuelta a la tarjeta más cercana y el «smooth» convertiría cada
posición en una animación propia que cancelaría la anterior. */
.carrusel-productos__pista--animando {
scroll-snap-type: none;
scroll-behavior: auto;
}
/* El ancho sale del contenedor, no de una medida fija: así entran justo las
tarjetas de --por-vista y ninguna queda cortada a media imagen. */
.carrusel-productos__pista > li {
flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--hueco)) / var(--por-vista));
scroll-snap-align: start;
}
.carrusel-productos__pista > li > .tarjeta { height: 100%; }
.carrusel-productos__flecha {
position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
display: grid; place-items: center; width: 44px; height: 44px;
border: 1px solid var(--linea); border-radius: 50%; cursor: pointer;
background: var(--superficie); color: var(--azul-900);
box-shadow: var(--sombra-alta); transition: background .15s ease;
}
.carrusel-productos__flecha:hover { background: var(--azul-050); }
.carrusel-productos__flecha[disabled] { opacity: .35; cursor: default; }
.carrusel-productos__flecha svg { width: 22px; height: 22px; }
.carrusel-productos__flecha--atras { left: 0; }
.carrusel-productos__flecha--adelante { right: 0; }
/* Menos tarjetas a la vista según baja el ancho, siempre en número exacto. */
@media (max-width: 1024px) { .carrusel-productos__pista { --por-vista: 3; } }
@media (max-width: 820px) {
.carrusel-productos { padding-inline: 0; }
/* Sin hueco lateral el velo se pega al borde de la fila. */
.carrusel-productos::before { left: 0; }
.carrusel-productos::after { right: 0; }
.carrusel-productos__flecha { display: none; }
/* Con decimales asoma parte de la siguiente, que es lo que invita a deslizar. */
.carrusel-productos__pista { --por-vista: 2.3; }
}
@media (max-width: 560px) { .carrusel-productos__pista { --por-vista: 1.35; } }
/* ---- Desfile de marcas ---- */
/* Fondo en el verde oscuro de la cruz (#247830) y no en el verde de marca:
sobre este el texto blanco llega a 5,52:1 y sobre el otro se quedaba en
4,05:1, por debajo del mínimo legible. */
.marcas { background: var(--verde-700); color: #fff; overflow: hidden; }
.marcas .antetitulo { color: #dff0ca; }
.marcas .titulo-centrado { color: #fff; margin-bottom: 2.5rem; }
.marcas .titulo-centrado em { color: var(--verde-300); }
/* El degradado de los extremos hace que las marcas se desvanezcan al entrar y
salir, en vez de aparecer y cortarse de golpe contra el borde. */
.marcas__fila {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marcas__fila + .marcas__fila { margin-top: 1.1rem; }
/* La lista va duplicada y se desplaza justo la mitad: al acabar el primer
juego, el segundo está donde empezó el primero y el bucle no da tirón.
La separación va como margen de cada marca y no como «gap» del contenedor:
con «gap» la última no lleva hueco detrás y la mitad del ancho total se queda
corta por medio hueco, con lo que cada vuelta daba un salto de 28 px. */
.marcas__pista {
list-style: none; display: flex; align-items: center;
margin: 0; padding: 0; width: max-content;
animation: desfilar 42s linear infinite;
}
.marcas__pista > li { margin-right: 3.5rem; }
.marcas__fila--inversa .marcas__pista { animation-direction: reverse; }
@keyframes desfilar { to { transform: translateX(-50%); } }
/* Se para al pasar por encima, por si alguien quiere leer una marca concreta. */
.marcas__fila:hover .marcas__pista { animation-play-state: paused; }
.marcas__nombre {
font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
color: #dff0ca; white-space: nowrap; letter-spacing: -.01em;
}
.marcas__nombre--fuerte { font-weight: 700; color: #fff; }
.marcas__nombre--cursiva { font-style: italic; }
@media (prefers-reduced-motion: reduce) {
/* Sin movimiento: la fila se queda quieta y centrada. */
.marcas__pista { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.marcas__pista > li { margin-right: 0; }
.marcas__pista > li:nth-child(n + 10) { display: none; }
}
/* 6 · Catálogo ============================================================ */
.catalogo { display: grid; grid-template-columns: 288px 1fr; gap: 2rem;
align-items: start; padding: 2rem 0 4rem; position: relative; }
/* Con los filtros recogidos la rejilla se queda en una sola columna y los
productos se reparten los 260 px que ocupaba el panel: en pantallas de
escritorio suele entrar una tarjeta más por fila. */
.catalogo--sin-filtros { grid-template-columns: 1fr; }
.catalogo--sin-filtros .filtros { display: none; }
/* --- Botón de ocultar: discreto, en la cabecera del panel --- */
.filtros__acciones { display: flex; align-items: center; gap: .5rem; }
.filtros__plegar {
display: grid; place-items: center;
width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
margin-left: auto; /* empuja el botón al borde derecho */
border: 0; border-radius: 9px;
background: var(--azul-100); color: var(--azul-700); cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.filtros__plegar:hover,
.filtros__plegar:focus-visible {
background: var(--azul-500); color: #fff;
}
.filtros__plegar svg { width: 17px; height: 17px; }
/* --- Botón de mostrar: pestaña a media altura del borde izquierdo --- */
/* Pestaña para volver a mostrar los filtros: fija al borde izquierdo de la
ventana y centrada en alto, así se ve siempre y se busca donde estaba el
panel. Fuera del grid —posición fija— para no estirarse a lo ancho de la
columna. El texto va en vertical para ocupar poco. */
/* Botón para volver a mostrar los filtros: solo una flecha, pegada al borde
izquierdo y centrada verticalmente. Fija (no ocupa columna) para no quitarle
ancho a las tarjetas; delgada, así apenas roza el margen. */
.filtros__mostrar {
position: fixed; left: 0; top: 50%; transform: translateY(-50%);
z-index: 40;
display: none; /* solo con el panel recogido */
align-items: center; justify-content: center;
width: 34px; height: 56px; padding: 0; cursor: pointer;
border: 0; border-radius: 0 12px 12px 0;
background: var(--verde-600); color: #fff;
box-shadow: 0 6px 18px rgba(16, 21, 28, .18);
transition: background-color .15s ease, padding-left .15s ease;
}
.catalogo--sin-filtros .filtros__mostrar { display: inline-flex; }
.filtros__mostrar:hover,
.filtros__mostrar:focus-visible { background: var(--verde-700); }
.filtros__mostrar svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
.filtros__plegar, .filtros__mostrar { transition: none; }
}
.filtros {
background: var(--superficie); border: 1px solid var(--linea);
border-radius: var(--radio-lg, 18px); box-shadow: var(--sombra);
position: sticky; top: var(--alto-cabecera);
max-height: calc(100vh - var(--alto-cabecera) - 20px); overflow-y: auto;
}
/* --- Cabecera: FILTROS con embudo · Limpiar con recargar --- */
.filtros__cabecera {
display: flex; align-items: center; gap: .4rem;
padding: .8rem .6rem; border-bottom: 1px solid var(--linea);
}
/* El embudo en un recuadro azul claro, como en el mockup. */
.filtros__titulo-caja {
display: grid; place-items: center; flex: 0 0 auto;
width: 32px; height: 32px; border-radius: 9px;
background: var(--azul-100); color: var(--azul-700);
}
.filtros__titulo-caja .icono { width: 18px; height: 18px; }
.filtros__titulo {
margin: 0; flex: 0 0 auto;
font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
color: var(--azul-900);
}
/* Filete vertical que separa el título de las acciones. */
.filtros__divisor { flex: 0 0 auto; width: 1px; height: 22px; background: var(--linea); margin: 0 .1rem; }
.filtros__limpiar {
display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
background: none; border: 0; padding: 0; cursor: pointer;
font: inherit; font-size: .8rem; font-weight: 600;
color: var(--azul-700); text-decoration: underline;
}
.filtros__limpiar .icono { width: 14px; height: 14px; flex: 0 0 auto; }
.filtros__limpiar:hover { color: var(--azul-900); }
/* --- Buscador con icono dentro --- */
.filtros__busqueda { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--linea); gap: .55rem; }
.filtros__busqueda > label {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .9rem; font-weight: 700; color: var(--tinta);
}
/* El icono de búsqueda viene de «icono_ui», que no pone la clase «.icono», así
que se dimensiona por «svg» directo o saldría a su tamaño natural. */
.filtros__busqueda > label > svg { width: 17px; height: 17px; color: var(--azul-700); flex: 0 0 auto; }
.filtros__busqueda-marco {
position: relative; display: flex; align-items: center;
}
.filtros__busqueda-marco > svg {
position: absolute; left: 1rem; width: 18px; height: 18px;
color: var(--tinta-50); pointer-events: none;
transition: color .15s ease;
}
/* Doble clase para ganarle en orden a «.campo input», que si no pisa el
padding izquierdo y el texto se mete debajo de la lupa. */
.campo.filtros__busqueda input {
width: 100%; height: 46px; padding: 0 1.1rem 0 2.7rem; font: inherit;
border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo);
color: var(--tinta);
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.campo.filtros__busqueda input::placeholder { color: var(--tinta-50); opacity: 1; }
.campo.filtros__busqueda input:hover { border-color: var(--azul-200, #c9d6f2); }
.campo.filtros__busqueda input:focus {
outline: 0; background: var(--superficie);
border-color: var(--azul-500); box-shadow: 0 0 0 3px var(--azul-100);
}
/* Al enfocar, la lupa se tiñe de azul: refuerza que el campo está activo. */
.filtros__busqueda-marco:focus-within > svg { color: var(--azul-600, var(--azul-700)); }
/* La «x» nativa de los input[type=search] en Chrome desentona con el pill. */
.campo.filtros__busqueda input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* --- Grupos plegables --- */
.grupo-filtro { border-bottom: 1px solid var(--linea); padding: .35rem .6rem; }
.grupo-filtro summary {
display: flex; align-items: center; gap: .6rem;
padding: .7rem .65rem; cursor: pointer; list-style: none;
border-radius: 12px;
font-size: .95rem; font-weight: 700; color: var(--tinta);
transition: background-color .15s ease;
}
.grupo-filtro summary::-webkit-details-marker { display: none; }
.grupo-filtro summary:hover { background: var(--azul-050); }
/* Grupo abierto: la cabecera se resalta, como en el mockup. */
.grupo-filtro[open] > summary { background: var(--azul-050); color: var(--azul-900); }
.grupo-filtro__icono {
display: grid; place-items: center; flex: 0 0 auto;
width: 30px; height: 30px; border-radius: 9px;
background: var(--azul-100); color: var(--azul-700);
}
.grupo-filtro__icono .icono { width: 17px; height: 17px; }
.grupo-filtro__flecha {
display: grid; place-items: center; margin-left: auto;
color: var(--azul-700); transition: transform .2s ease;
}
.grupo-filtro__flecha svg { width: 18px; height: 18px; }
.grupo-filtro[open] > summary .grupo-filtro__flecha { transform: rotate(180deg); }
/* El cuerpo del grupo va en una tarjeta suave, con las filas separadas. */
.grupo-filtro__cuerpo {
margin: .25rem .3rem .5rem; padding: .35rem .5rem;
border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie);
}
.grupo-filtro__cuerpo--alto { max-height: 280px; overflow-y: auto; }
.grupo-filtro--precio { padding: 1.1rem 1.25rem 1.4rem; border-bottom: 0; }
.grupo-filtro__titulo {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .95rem; font-weight: 700; margin-bottom: .9rem; color: var(--tinta);
}
.grupo-filtro--precio .rango__valores {
display: block; margin-top: .75rem; text-align: center;
font-weight: 700; color: var(--azul-700); font-variant-numeric: tabular-nums;
}
/* --- Filas de opción: casilla · nombre · conteo en píldora --- */
.filtros label {
display: flex; align-items: center; gap: .6rem;
padding: .55rem .55rem; font-size: .9rem; color: var(--tinta); cursor: pointer;
border-radius: 9px;
transition: background-color .12s ease;
}
/* Separador fino entre filas, salvo la última. */
.grupo-filtro__cuerpo label + label { border-top: 1px solid var(--linea); }
.filtros label:hover { background: var(--fondo); }
/* Fila marcada: fondo azul tenue y su conteo en azul, como en el mockup. */
.filtros label:has(input:checked) { background: var(--azul-050); color: var(--azul-900); }
.filtros label:has(input:checked) .cuenta {
background: var(--azul-100); color: var(--azul-700);
}
.filtros input[type="checkbox"], .filtros input[type="radio"] {
width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--azul-500);
cursor: pointer;
}
/* El conteo, en una píldora gris a la derecha. */
.filtros .cuenta {
margin-left: auto; flex: 0 0 auto;
padding: .1rem .5rem; border-radius: 999px;
background: var(--fondo); color: var(--tinta-50);
font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* --- Cabecera del catálogo: icono en recuadro + título + adorno --- */
.cabecera-catalogo {
position: relative; overflow: hidden;
display: flex; align-items: flex-start; gap: 1rem;
margin-bottom: 1.25rem;
}
/* Con el banner de portada, el título «Catálogo» y su texto sobran a la vista;
se ocultan pero se dejan en el HTML para el buscador y los lectores de
pantalla (la página conserva su h1). */
.cabecera-catalogo--oculta {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
border: 0;
}
.cabecera-catalogo__icono {
display: grid; place-items: center; flex: 0 0 auto;
width: 54px; height: 54px; border-radius: 15px;
background: var(--azul-100); color: var(--azul-700);
}
.cabecera-catalogo__icono .icono { width: 28px; height: 28px; }
.cabecera-catalogo__texto { min-width: 0; }
.cabecera-catalogo__texto h1 { margin: 0 0 .25rem; }
.cabecera-catalogo__texto p { margin: 0; max-width: 60ch; color: var(--tinta-70); }
/* Frasco y pastilla, muy tenues, en la esquina superior derecha. Se ocultan en
pantallas estrechas, donde el texto necesita todo el ancho. */
.cabecera-catalogo__adorno {
position: absolute; top: -.5rem; right: -.25rem; z-index: -1;
width: 108px; height: 108px; color: var(--azul-500); opacity: .28;
pointer-events: none;
}
.cabecera-catalogo__adorno svg { width: 100%; height: 100%; }
/* Eslogan manuscrito: en escritorio manda el frasco, así que este no se ve. */
.cabecera-catalogo__lema { display: none; }
@media (max-width: 640px) {
.cabecera-catalogo__adorno { display: none; }
/* En el teléfono el eslogan sustituye al frasco: flota a la derecha y el
texto del catálogo lo rodea. Fuente cursiva del sistema (el sitio no carga
tipografías externas), en verde de marca y con un subrayado curvo. */
.cabecera-catalogo__lema {
display: block; float: right; width: 6.6rem; margin: .1rem -.1rem .2rem .7rem;
text-align: center; line-height: 1.12; transform: rotate(-4deg);
color: var(--verde-600); font-weight: 600; font-size: 1.12rem;
font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;
}
.cabecera-catalogo__lema::after {
content: ""; display: block; width: 78%; height: 7px; margin: 1px auto 0;
border: 0 solid var(--verde-500); border-bottom-width: 2px;
border-radius: 0 0 70% 60%;
}
}
/* --- Barra de resultados: conteo · divisor · «Ordenar por» --- */
.barra-resultados {
display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center;
background: var(--superficie); border: 1px solid var(--linea);
border-radius: var(--radio-lg, 18px); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.barra-resultados__conteo {
display: inline-flex; align-items: center; gap: .7rem;
font-size: .95rem; color: var(--tinta);
}
.barra-resultados__conteo strong { font-weight: 800; }
.barra-resultados__icono {
display: grid; place-items: center; flex: 0 0 auto;
width: 38px; height: 38px; border-radius: 11px;
background: var(--azul-100); color: var(--azul-700);
}
.barra-resultados__icono .icono { width: 21px; height: 21px; }
.barra-resultados__divisor { flex: 0 0 auto; width: 1px; height: 40px; background: var(--linea); }
.barra-resultados__orden {
display: grid; gap: .3rem; margin-left: auto; min-width: 0;
}
.barra-resultados__orden-etiqueta { font-size: .82rem; font-weight: 600; color: var(--tinta-70); }
/* El desplegable de orden, con la flecha de ordenar dentro y su propia flecha
de abrir a la derecha. Se le quita la de sistema y se dibuja la nuestra. */
.barra-resultados__select { position: relative; display: flex; align-items: center; }
.barra-resultados__orden-icono {
position: absolute; left: .8rem; width: 18px; height: 18px;
color: var(--azul-700); pointer-events: none;
}
.barra-resultados__select > svg:last-child {
position: absolute; right: .75rem; width: 18px; height: 18px;
color: var(--tinta-50); pointer-events: none;
}
.barra-resultados select {
appearance: none; -webkit-appearance: none;
width: 100%; min-width: 15rem;
padding: .65rem 2.4rem .65rem 2.6rem; font: inherit; cursor: pointer;
color: var(--tinta); background: var(--superficie);
border: 1.5px solid var(--azul-500); border-radius: 12px;
transition: box-shadow .15s ease;
}
.barra-resultados select:focus {
outline: 0; box-shadow: 0 0 0 3px var(--azul-100);
}
/* En el teléfono la barra se apila dentro de la tarjeta: arriba el conteo con su
ícono redondeado y debajo «Ordenar por» con su desplegable. Antes se quitaba
el marco y el ícono; ahora se conservan para que se vea como una tarjeta
ordenada y no como una línea suelta. */
@media (max-width: 640px) {
.barra-resultados {
flex-direction: column; align-items: stretch; flex-wrap: nowrap;
gap: .7rem; padding: .85rem 1rem; margin-bottom: .9rem;
border-radius: 14px;
}
.barra-resultados__divisor { display: none; }
.barra-resultados__conteo { font-size: .9rem; gap: .6rem; min-width: 0; }
/* Ícono del conteo en verde de marca, como el resto de sellos de la tienda. */
.barra-resultados__icono {
width: 34px; height: 34px; border-radius: 10px;
background: var(--verde-100); color: var(--verde-700);
}
.barra-resultados__icono .icono { width: 19px; height: 19px; }
.barra-resultados__orden {
display: flex; align-items: center; gap: .5rem; margin-left: 0;
min-width: 0; max-width: 100%;
}
.barra-resultados__orden-etiqueta { font-size: .85rem; white-space: nowrap; }
/* El desplegable ocupa lo que queda de la fila; el texto largo se recorta con
puntos suspensivos en vez de desbordar la página. */
.barra-resultados__select { flex: 1 1 auto; min-width: 0; }
.barra-resultados select {
width: 100%; min-width: 0; max-width: 100%; font-size: .88rem;
padding: .5rem 2.2rem .5rem 2.3rem;
text-overflow: ellipsis;
}
.barra-resultados__orden-icono { left: .7rem; width: 16px; height: 16px; }
.barra-resultados__select > svg:last-child { right: .65rem; width: 16px; height: 16px; }
}
.rejilla-productos {
display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
/* Con muchas fichas la fila se llena de borde a borde; con pocas (una búsqueda
con dos resultados, por ejemplo) quedan centradas y sin hueco a un lado. */
.rejilla-productos > .tarjeta { flex: 1 1 250px; max-width: 340px; }
/* El aviso de «no encontramos productos» ocupa todo el ancho. */
.rejilla-productos > .estado-mascota { flex-basis: 100%; max-width: none; }
.tarjeta {
display: flex; flex-direction: column; background: var(--superficie);
border: 1px solid var(--linea); border-radius: 20px; overflow: hidden;
box-shadow: 0 6px 20px rgba(16,21,28,.06);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tarjeta:hover, .tarjeta:focus-within {
transform: translateY(-4px); box-shadow: 0 16px 38px rgba(16,21,28,.13);
border-color: #cde9d6;
}
/* Agotado: la foto del producto se mantiene nítida; solo se atenúa un poco el
cuerpo. El estado ya lo dicen el badge de esquina y el botón «Agotado». */
.tarjeta--agotado { opacity: 1; }
.tarjeta--agotado .tarjeta__cuerpo { opacity: .82; }
/* La foto va sobre un lienzo suave con cruces y puntos muy tenues. El tono
base rota entre cuatro familias según la posición en la parrilla, para que
una rejilla de tarjetas no se vea plana; es puro adorno, no informa nada. */
.tarjeta__imagen { position: relative; aspect-ratio: 1 / 1; background: #fff; }
/* La foto se posiciona en absoluto para que el «aspect-ratio: 1» de arriba se
respete siempre: con la imagen en flujo, una foto vertical (900 × 1200)
estiraba el marco a 331 px y esa tarjeta quedaba descuadrada respecto a las
demás de la fila. */
.tarjeta__imagen img {
position: absolute; inset: 0;
/* «contain» y no «cover»: muchas fichas traen imágenes de diseño (banners con
texto y proporciones distintas a 1:1). Con «cover» se recortaban los bordes
y se comían el texto; con «contain» se ven completas sobre el fondo blanco
del marco, sin recorte, y todas las tarjetas conservan el mismo tamaño. */
width: 100%; height: 100%; object-fit: contain;
}
/* Foto que no cargó: se muestra el marcador sin recorte ni relleno. */
.imagen-fallida { object-fit: contain !important; padding: 0 !important; background: var(--fondo); }
.tarjeta__insignias { position: absolute; top: .7rem; left: .7rem; display: flex; flex-direction: column; gap: .3rem; z-index: 1; }
/* Badge de «Agotado» en la esquina, con el mismo cuerpo que la píldora de
descuento para que se lea como un distintivo de esquina. */
.tarjeta__insignias .etiqueta--agotado {
padding: .34rem .72rem; box-shadow: 0 4px 10px rgba(16, 21, 28, .2);
}
/* Insignia de descuento: pastilla redonda arriba a la derecha. */
.tarjeta__descuento {
position: absolute; top: .7rem; right: .7rem; z-index: 1;
padding: .34rem .72rem; border-radius: 999px;
background: var(--azul-900); color: #fff;
font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
box-shadow: 0 4px 10px rgba(16,21,28,.2);
}
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: .85rem 1rem .95rem; gap: .4rem; }
/* Chip de categoría: pastilla tenue con icono de etiqueta. */
.tarjeta__categoria {
align-self: flex-start;
display: inline-flex; align-items: center; gap: .38rem;
max-width: 100%;
padding: .32rem .7rem .32rem .55rem; border-radius: 999px;
background: var(--verde-100); color: var(--verde-700);
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; line-height: 1.2;
}
.tarjeta__categoria svg, .tarjeta__categoria .icono { width: 15px; height: 15px; flex: 0 0 auto; }
.tarjeta__categoria > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cada línea con su color propio (fondo tenue + texto de la misma familia),
como en el diseño. El verde base queda de reserva para líneas sin color. */
.tarjeta__categoria--adulto-mayor { background: #e8f2d6; color: #3f7a1e; }
.tarjeta__categoria--terapia-respiratoria { background: #efe8fb; color: #6d38c4; }
.tarjeta__categoria--farmi-ahorro { background: #dcf3ee; color: #0e7a63; }
.tarjeta__categoria--nutricionales { background: #fcefd6; color: #a56d17; }
.tarjeta__categoria--equipos-medicos { background: #e4edfc; color: #1e56c9; }
.tarjeta__categoria--insumos-medicos { background: #e9e8fb; color: #4a45b3; }
.tarjeta__categoria--movilidad { background: #e0f4f8; color: #0b7f95; }
.tarjeta__categoria--ostomia-y-cuidado-de-heridas { background: #fce6ed; color: #b03a68; }
/* La pastilla «Nuevo» del carrusel de recién llegados va sobre el chip, en su
propia línea; sin esto heredaría las versalitas de la etiqueta. */
.tarjeta__cuerpo > .etiqueta--nuevo { align-self: flex-start; text-transform: none; letter-spacing: 0; font-size: .7rem; padding: .12rem .55rem; }
.tarjeta__nombre { margin: .1rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.32; }
.tarjeta__nombre a { color: var(--azul-900); }
.tarjeta__nombre a:hover { color: var(--azul-700); }
.tarjeta__sku {
font-size: .76rem; color: var(--tinta-50); font-variant-numeric: tabular-nums;
padding-bottom: .6rem; border-bottom: 1px solid var(--linea);
}
.tarjeta__precios { margin-top: auto; padding-top: .2rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tarjeta__precio { font-size: 1.25rem; font-weight: 800; color: var(--verde-700); }
.tarjeta__antes { font-size: .9rem; color: var(--tinta-50); text-decoration: line-through; }
/* Botones apilados a lo ancho: «Ver detalles» en contorno azul y «Agregar al
carrito» en verde sólido, como en el diseño. */
.tarjeta__ver {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
margin-top: .7rem; padding: .55rem 1rem;
border: 1.5px solid #c9d6f2; border-radius: 12px;
color: var(--azul-700); font-size: .9rem; font-weight: 600;
}
.tarjeta__ver:hover { background: #eef2fb; border-color: var(--azul-500); text-decoration: none; }
.tarjeta__ver svg, .tarjeta__ver .icono { width: 18px; height: 18px; flex: 0 0 auto; }
.tarjeta .boton {
margin-top: .4rem; padding: .58rem 1rem; border-radius: 12px; font-size: .92rem;
}
.tarjeta .boton svg, .tarjeta .boton .icono { width: 18px; height: 18px; flex: 0 0 auto; }
/* El botón de compra de la tarjeta va en verde (el naranja base se reserva para
la ficha); WhatsApp y «Ver ficha» conservan su propio color. */
.tarjeta .boton[data-agregar] { background: var(--verde-600); }
.tarjeta .boton[data-agregar]:hover { background: var(--verde-700); }
.sin-resultados { padding: 3rem 1rem; text-align: center; color: var(--tinta-50); }
/* Fichas de los filtros activos: se quitan de una en una sin volver al panel. */
.fichas-filtro { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ficha-filtro {
display: inline-flex; align-items: center; gap: .45rem;
padding: .35rem .75rem; border-radius: 999px;
border: 1px solid var(--verde-500); background: var(--verde-100);
color: var(--verde-700); font: inherit; font-size: .82rem; font-weight: 600;
cursor: pointer; transition: background .15s ease;
}
.ficha-filtro:hover { background: #dcecc6; }
.ficha-filtro span[aria-hidden] { font-size: 1.05rem; line-height: 1; }
.ficha-filtro--todo { background: none; border-color: var(--linea); color: var(--tinta-70); }
.ficha-filtro--todo:hover { background: var(--fondo); }
.cargar-mas { display: flex; justify-content: center; margin-top: 2rem; }
.paginacion { display: flex; justify-content: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.paginacion button, .paginacion a {
min-width: 40px; padding: .5rem .75rem; border: 1px solid var(--linea);
border-radius: var(--radio-sm); background: var(--superficie);
color: var(--tinta-70); font: inherit; font-weight: 600; cursor: pointer;
}
.paginacion [aria-current="page"] { background: var(--verde-600); color: #fff; border-color: var(--verde-600); }
/* 7 · Ficha de producto =================================================== */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 1.5rem 0 3rem; align-items: start; }
.ficha__galeria {
background: var(--superficie); border: 1px solid var(--linea);
border-radius: var(--radio); padding: 0; overflow: hidden; box-shadow: var(--sombra);
}
.ficha__galeria img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.ficha__sin-imagen { display: grid; place-items: center; aspect-ratio: 1; color: var(--tinta-50); background: var(--fondo); border-radius: var(--radio-sm); }
/* El panel de datos, como tarjeta blanca redondeada: el fondo de farmacia del
sitio asoma alrededor y da las formas decorativas del diseño. */
.ficha__datos {
position: relative;
background: var(--superficie) url("../img/ficha-adorno.svg") no-repeat top right;
border: 1px solid var(--linea); border-radius: 22px;
box-shadow: 0 12px 34px rgba(16, 21, 28, .07);
padding: 1.9rem 1.9rem 2rem;
}
/* El contenido por encima del adorno. */
.ficha__datos > * { position: relative; }
/* Estado de disponibilidad, como píldora con un visto. */
.ficha__estado {
display: inline-flex; align-items: center; gap: .4rem;
padding: .35rem .85rem; border-radius: 999px;
font-size: .82rem; font-weight: 700;
}
.ficha__estado .icono { width: 17px; height: 17px; }
.ficha__estado--ok { background: var(--verde-100); color: var(--verde-700); }
.ficha__estado--no { background: var(--ambar-100); color: var(--ambar-600); }
.ficha__datos h1 { margin: .75rem 0 0; }
.ficha__precio { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: .9rem 0 1.25rem; }
.ficha__precio strong { font-size: 2rem; color: var(--azul-900); }
.ficha__precio del { font-size: 1.1rem; color: var(--tinta-50); }
/* Meta: cada dato con su icono en una cajita, la clave y el valor. */
.ficha__meta { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--linea); }
.ficha__meta li {
display: grid; grid-template-columns: auto 120px 1fr; align-items: center; gap: .9rem;
padding: .7rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem;
}
.ficha__meta-icono {
width: 34px; height: 34px; display: grid; place-items: center;
border-radius: 10px; background: var(--fondo); color: var(--verde-700);
}
.ficha__meta-icono .icono { width: 18px; height: 18px; }
.ficha__meta .clave { color: var(--tinta-50); }
.ficha__meta .valor { color: var(--tinta); }
.ficha__meta .valor em { color: var(--tinta-50); font-style: normal; font-size: .82rem; }
@media (max-width: 460px) {
/* En pantalla estrecha la clave se va encima del valor y el icono al lado. */
.ficha__meta li { grid-template-columns: auto 1fr; row-gap: .1rem; }
.ficha__meta .clave { grid-column: 2; }
.ficha__meta .valor { grid-column: 2; }
.ficha__meta-icono { grid-row: span 2; }
}
/* Caja de envíos: verde tenue con el camión. */
.ficha__envio {
display: flex; align-items: flex-start; gap: .9rem;
padding: 1rem 1.15rem; border-radius: 14px;
background: #f3f8ee; border: 1px solid var(--verde-100);
border-left: 4px solid var(--verde-600);
}
.ficha__envio-icono { flex: 0 0 auto; color: var(--verde-600); }
.ficha__envio-icono .icono { width: 26px; height: 26px; }
.ficha__envio p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--tinta-70); }
.ficha__envio strong { color: var(--verde-700); }
.selector-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-sm); overflow: hidden; }
.selector-cantidad button { width: 42px; height: 44px; border: 0; background: var(--fondo); font-size: 1.1rem; cursor: pointer; }
.selector-cantidad button:hover { background: var(--azul-100); }
.selector-cantidad input { width: 54px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 600; }
/* Todo en una sola línea: la cantidad a la izquierda y los dos botones a su
lado, ambos del mismo ancho para que quede simétrico. */
.ficha__acciones { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; margin: 1.5rem 0; }
.ficha__acciones .boton { width: 100%; padding-inline: .8rem; font-size: .88rem; white-space: nowrap; }
/* Agotado o a consultar: sin selector ni «Agregar», el botón de WhatsApp ocupa
todo el ancho. */
.ficha__acciones--consulta { grid-template-columns: 1fr; }
/* El aviso de estado y la caja de envíos ahora encabezan la descripción. */
.ficha__descripcion > .aviso,
.ficha__descripcion > .ficha__envio { margin: 0 0 1.2rem; }
@media (max-width: 560px) {
/* Cuando ya no caben en fila: cantidad arriba y los dos botones debajo,
todavía a ancho igual. */
.ficha__acciones { grid-template-columns: 1fr 1fr; }
.ficha__acciones .selector-cantidad { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 380px) {
.ficha__acciones { grid-template-columns: 1fr; }
}
.ficha__descripcion { padding: 0 0 4rem; }
.ficha__descripcion h2 { border-bottom: 2px solid var(--linea); padding-bottom: .5rem; }
/* Aviso legal al pie de la descripción: caja con acento azul a la izquierda. */
.ficha__nota {
margin-top: 2.2rem;
padding: 1.1rem 1.3rem;
background: var(--azul-50, #eef2fb);
border: 1px solid var(--azul-100, #dbe4f6);
border-left: 4px solid var(--azul-700);
border-radius: 14px;
}
.ficha__nota strong {
display: block;
margin-bottom: .35rem;
color: var(--azul-900);
font-size: .95rem;
}
.ficha__nota p {
margin: 0;
color: var(--tinta-50);
font-size: .87rem;
line-height: 1.6;
}
/* 8 · Carrito y pago ====================================================== */
.pagina-estrecha { padding: 2rem 0 4rem; }
/* Entrar a la cuenta: una tarjeta centrada, no un formulario pegado al margen
izquierdo de una página ancha. La mascota acompaña en escritorio y se retira
en móvil, donde el espacio hace falta para el formulario. */
.acceso {
display: flex; align-items: center; justify-content: center;
gap: 3rem; max-width: 860px; margin-inline: auto;
}
.acceso__mascota { flex: 0 0 auto; }
.acceso__panel {
flex: 1 1 400px; max-width: 440px;
background: var(--superficie);
border: 1px solid var(--linea);
border-radius: var(--radio);
box-shadow: var(--sombra);
padding: 2.25rem;
}
.acceso__panel h1 { margin-top: 0; font-size: 1.65rem; }
.acceso .cuenta__lema { margin-bottom: 1.25rem; }
@media (max-width: 820px) {
.acceso { gap: 0; }
.acceso__mascota { display: none; }
.acceso__panel { padding: 1.5rem; }
}
/* Páginas que son un formulario y poco más: una columna centrada en vez de
ocupar los 1200 px del sitio. */
.pagina-estrecha--formulario { max-width: 900px; margin-inline: auto; }
/* Dentro de esa columna el formulario deja su propio tope: si no, se queda en
720 pegado a la izquierda mientras el título, las pestañas y el resultado de
la consulta ocupan los 900, que es justo lo que se veía descentrado. */
.pagina-estrecha--formulario .cuenta__forma { max-width: none; }
.carrito { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.lista-carrito { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
/* Cuatro columnas desde que se puede elegir qué comprar: la casilla, la
foto, el nombre y el precio. */
.lista-carrito li { display: grid; grid-template-columns: auto 88px 1fr auto; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--linea); align-items: center; }
.lista-carrito li:last-child { border-bottom: 0; }
.lista-carrito img { width: 88px; height: 88px; object-fit: contain; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-sm); }
.lista-carrito .nombre { font-weight: 600; font-size: .95rem; }
.lista-carrito .sku { font-size: .78rem; color: var(--tinta-50); }
.lista-carrito .quitar { background: none; border: 0; color: var(--rojo-600); font: inherit; font-size: .82rem; cursor: pointer; padding: 0; }
.lista-carrito .quitar:hover { text-decoration: underline; }
.resumen {
background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
padding: 1.5rem; box-shadow: var(--sombra); position: sticky; top: var(--alto-cabecera);
}
.resumen h2 { font-size: 1.1rem; }
.resumen dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; margin: 1rem 0; font-size: .92rem; }
.resumen dt { color: var(--tinta-70); }
.resumen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.resumen .total { border-top: 1px solid var(--linea); padding-top: .8rem; font-size: 1.15rem; }
.resumen .total dd { color: var(--azul-900); }
.formulario { display: grid; gap: 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .875rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
padding: .7rem .85rem; font: inherit; background: var(--superficie);
border: 1px solid var(--linea); border-radius: var(--radio-sm);
/* El navegador no le hereda el color al campo: le pone negro puro por su
cuenta, mientras el resto del sitio escribe en «--tinta». La diferencia es
mínima, pero salta cuando dos campos vecinos no la comparten —uno normal y
otro deshabilitado o autocompletado, que sí usan la paleta—. */
color: var(--tinta);
/* Al ancho de su hueco. Sin esto un input usa el ancho por defecto del
navegador —unos 210 px, que vienen del atributo «size»— y se sale de la
columna: en la tarjeta de registro, el campo de celular asomaba fuera del
panel. Funcionaba de milagro mientras el formulario era ancho. */
width: 100%;
/* El relleno y el borde entran dentro de ese 100 %, no encima. */
box-sizing: border-box;
}
/* «:user-invalid» solo entra después de que la persona haya intentado algo.
Antes esto era «:invalid:not(:placeholder-shown)», que pintaba de rojo los
campos obligatorios vacíos nada más abrir la página: sin atributo
«placeholder», «:placeholder-shown» no coincide y la negación daba cierto. */
.campo input:user-invalid,
.campo select:user-invalid,
.campo textarea:user-invalid { border-color: var(--rojo-600); }
.campo .ayuda { font-size: .78rem; color: var(--tinta-50); }
/* Estado interactivo de los campos: al enfocarlos, un aro verde suave. Da la
sensación de que el formulario responde y unifica todas las páginas con
formulario (PQRS, contacto, cuenta, checkout). */
.campo input, .campo select, .campo textarea {
transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #c3cad4; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none; border-color: var(--verde-500);
box-shadow: 0 0 0 3px rgba(85, 162, 51, .16);
}
/* Flecha propia para los desplegables, en lugar de la del sistema. */
.campo select {
appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right .85rem center;
}
/* Los campos que rellena el navegador
------------------------------------
Chrome pinta de lila lo que autocompleta, y ese color no se quita con
«background»: lo dibuja el navegador por encima de lo que diga la hoja de
estilos. La sombra interior sí lo tapa, porque se pinta después y encima. El
texto va aparte, con «text-fill-color», por el mismo motivo.
Sin esto, en el formulario de entrar el correo salía lila y la contraseña
blanca: dos campos pegados con dos fondos distintos.
Los estados se repiten uno a uno porque Chrome vuelve a pintar el lila al
pasar el ratón, al enfocar y al pulsar. Y van en reglas separadas de la de
«:autofill» a propósito: si un navegador no entiende uno de los dos
selectores, descarta la regla entera y se perdería también el otro. */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus,
.campo input:-webkit-autofill:active,
.campo select:-webkit-autofill,
.campo textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px var(--superficie) inset;
box-shadow: 0 0 0 100px var(--superficie) inset;
-webkit-text-fill-color: var(--tinta);
/* La sombra tapa también el cursor si no se le dice el color. */
caret-color: var(--tinta);
}
.campo input:autofill,
.campo select:autofill,
.campo textarea:autofill {
box-shadow: 0 0 0 100px var(--superficie) inset;
-webkit-text-fill-color: var(--tinta);
caret-color: var(--tinta);
}
.campo--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Una celda de rejilla no se encoge por debajo de su contenido a menos que se
le diga. Es el otro medio del mismo problema. */
.campo--dos > * { min-width: 0; }
/* Ciudad y dirección no piden lo mismo: «Bogotá D.C.» cabe de sobra en
quince caracteres y una dirección con apartamento no. Va antes de la
consulta de pantalla estrecha que las apila, para que allí siga mandando
ella. */
.campo--ciudad { grid-template-columns: minmax(0, 15rem) 1fr; }
/* Campo que se escribe y se despliega
-----------------------------------
La lista va por encima del resto en vez de empujarlo hacia abajo: si
abrirla moviera los campos de sitio, la dirección saltaría cada vez. */
.combo { position: relative; display: block; }
.combo > input { width: 100%; box-sizing: border-box; padding-right: 2.6rem; }
.combo__flecha {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
display: grid; place-items: center;
width: 1.9rem; height: 1.9rem;
border: 0; border-radius: var(--radio-sm);
background: none; color: var(--tinta-50); cursor: pointer;
}
.combo__flecha:hover { background: var(--fondo); color: var(--tinta); }
.combo__flecha .icono { width: 18px; height: 18px; }
.combo > input[aria-expanded="true"] + .combo__flecha .icono { transform: rotate(180deg); }
.combo__lista {
position: absolute; z-index: 30;
top: calc(100% + .25rem); left: 0; right: 0;
margin: 0; padding: .3rem;
list-style: none;
/* Doce y pico de alto: bastante para hacerse una idea de la lista y poco
para no tapar media pantalla. El resto se alcanza rodando. */
max-height: 17rem; overflow-y: auto;
background: var(--superficie);
border: 1px solid var(--linea); border-radius: var(--radio-sm);
box-shadow: 0 12px 28px rgba(16, 21, 28, .14);
}
.combo__grupo {
padding: .55rem .6rem .3rem;
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--tinta-50);
}
.combo__opcion {
padding: .5rem .6rem;
border-radius: var(--radio-sm);
font-size: .9rem; cursor: pointer;
}
.combo__opcion:hover,
.combo__opcion--marcada { background: var(--verde-100); color: var(--verde-700); }
.combo__vacio {
padding: .6rem; font-size: .82rem; color: var(--tinta-70);
}
.opciones-pago { display: grid; gap: .75rem; }
.opcion-pago input { accent-color: var(--verde-600); }
.opcion-pago {
display: flex; gap: .85rem; align-items: flex-start; padding: 1rem;
border: 2px solid var(--linea); border-radius: var(--radio); cursor: pointer; background: var(--superficie);
}
.opcion-pago:has(input:checked) { border-color: var(--verde-600); background: var(--verde-100); }
/* La forma de entrega, cuando no hay otra que elegir: se ve como la escogida,
porque lo es, pero no se puede pulsar ni lo aparenta. */
.opcion-pago--fija {
margin: 0; cursor: default;
border-color: var(--verde-600); background: var(--verde-100);
}
.opcion-pago--fija .icono { width: 22px; height: 22px; flex: 0 0 auto; color: var(--verde-700); }
.opcion-pago strong { display: block; }
.opcion-pago span { font-size: .82rem; color: var(--tinta-70); }
/* --- Checkout mejorado: pasos, métodos de pago y confianza ------------- */
/* Encabezado de cada paso: un círculo con ícono, el título y un subtítulo. */
.paso { display: flex; align-items: center; gap: .85rem; margin: 0 0 .35rem; }
.paso__icono {
flex: 0 0 auto; display: grid; place-items: center;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
}
.paso__icono .icono { width: 22px; height: 22px; }
.paso__icono--azul { background: var(--azul-050); color: var(--azul-700); }
.paso__icono--verde { background: var(--verde-100); color: var(--verde-700); }
.paso__txt { display: flex; flex-direction: column; }
.paso__txt h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.paso__sub { font-size: .82rem; color: var(--tinta-50); font-weight: 400; }
/* Caja de «Envío a domicilio»: check de seleccionado, ícono, texto y badge. */
.opcion-entrega { display: flex; align-items: center; gap: .85rem; }
.opcion-entrega__check {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--verde-600); display: grid; place-items: center;
}
.opcion-entrega__check::after {
content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--verde-600);
}
.opcion-entrega__icono { flex: 0 0 auto; color: var(--verde-700); }
.opcion-entrega__icono .icono { width: 24px; height: 24px; }
.opcion-entrega__txt { flex: 1 1 auto; }
.opcion-entrega__txt strong { display: block; }
.opcion-entrega__txt span { font-size: .82rem; color: var(--tinta-70); }
.opcion-entrega__badge {
flex: 0 0 auto; background: var(--verde-100); color: var(--verde-700);
font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: .35rem .6rem; border-radius: 999px; white-space: nowrap;
}
/* Marca principal del método (logo de PSE junto al nombre). */
.opcion-pago__marca { display: inline-flex; align-items: center; gap: .5rem; }
.opcion-pago__marca img { height: 24px; width: auto; }
/* Logos de los demás medios de pago dentro de la opción. */
.opcion-pago__logos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.opcion-pago__logos img {
height: 18px; width: auto; background: #fff;
border: 1px solid var(--linea); border-radius: 5px; padding: 1px 4px;
}
/* --- Opción de pago destacada (PSE): logo en chip + sello de seguridad --- */
.opcion-pago--destacada {
align-items: center; flex-wrap: wrap;
gap: .65rem; padding: .5rem .8rem;
}
/* Logo circular de PSE (fondo azul propio de la marca), a la izquierda. */
.opcion-pago__logo {
flex: 0 0 auto; display: grid; place-items: center;
width: 40px; height: 40px;
}
.opcion-pago__logo img { width: 40px; height: 40px; border-radius: 50%; }
.opcion-pago__cuerpo { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.opcion-pago__titulo { font-size: .95rem; line-height: 1.15; }
.opcion-pago--destacada .opcion-pago__desc { font-size: .8rem; line-height: 1.25; }
/* Sello verde de «Transacción segura» a la derecha. */
.opcion-pago__sello {
flex: 0 0 auto; margin-left: auto;
display: inline-flex; align-items: center; gap: .5rem;
padding: .5rem .7rem; border-radius: 12px;
background: #fff; border: 1px solid rgba(63, 143, 47, .3);
box-shadow: 0 1px 2px rgba(20, 40, 20, .04);
}
.opcion-pago__sello-icono { flex: 0 0 auto; display: grid; place-items: center; color: var(--verde-700); }
.opcion-pago__sello-icono .icono { width: 22px; height: 22px; }
.opcion-pago__sello-txt { display: flex; flex-direction: column; line-height: 1.15; }
.opcion-pago__sello-txt strong { font-size: .82rem; color: var(--verde-700); }
.opcion-pago__sello-txt span { font-size: .72rem; color: var(--verde-700); opacity: .8; }
.opcion-pago__sello-flecha { flex: 0 0 auto; color: var(--verde-700); font-size: 1.1rem; opacity: .65; }
@media (max-width: 560px) {
.opcion-pago__sello { margin-left: 0; padding: .45rem; }
.opcion-pago__sello-txt, .opcion-pago__sello-flecha { display: none; }
/* El badge «Rápido y seguro» robaba el ancho y partía el texto en muchas
líneas; en teléfono se oculta para que la descripción respire. */
.opcion-entrega__badge { display: none; }
}
/* Fila de logos de medios de pago (confianza). */
.pago-metodos {
display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .8rem;
margin: 1rem 0 0;
}
.pago-metodos__txt { font-size: .8rem; color: var(--tinta-50); }
.pago-metodos__logos { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pago-metodos__logos img {
height: 26px; width: auto; background: #fff;
border: 1px solid var(--linea); border-radius: 6px; padding: 2px 5px;
}
/* Sello de pago seguro debajo del botón. */
.pago-seguro {
display: flex; align-items: center; gap: .6rem;
margin: .9rem 0 0; padding: .75rem .9rem;
background: var(--verde-100); border-radius: var(--radio-sm);
font-size: .82rem; color: var(--tinta-70); line-height: 1.45;
}
.pago-seguro strong { color: var(--verde-700); }
.pago-seguro .icono { width: 20px; height: 20px; flex: 0 0 auto; color: var(--verde-700); }
/* Recuadro de instrucciones de la transferencia bancaria. */
.pago-transferencia {
margin: 1rem 0 0; padding: 1.25rem;
border: 1px solid var(--linea); border-radius: var(--radio);
background: var(--superficie);
}
.pago-transferencia__titulo { margin: 0 0 1rem; font-size: 1rem; color: var(--tinta); }
.pago-transferencia__aviso {
border: 1px solid var(--verde-600); border-radius: var(--radio-sm); overflow: hidden;
}
.pago-transferencia__cabecera {
background: var(--verde-600); color: #fff;
padding: .5rem .9rem; font-weight: 700; font-size: .9rem;
}
.pago-transferencia__aviso p {
margin: 0; padding: .9rem; font-size: .86rem; line-height: 1.6; color: var(--tinta-70);
}
.pago-transferencia__aviso a { color: var(--verde-700); font-weight: 700; }
/* Datos de la cuenta: el número grande y fácil de copiar, con banco/titular
encima solo si están puestos. */
.pago-transferencia__cuenta {
display: grid; gap: .7rem; margin-bottom: 1rem; padding: 1rem 1.1rem;
border: 1px solid var(--linea); border-radius: var(--radio-sm); background: #f5f7f9;
}
.pago-transferencia__dato { display: flex; flex-direction: column; gap: .1rem; }
.pago-transferencia__dato > span {
font-size: .76rem; color: var(--tinta-50); text-transform: uppercase; letter-spacing: .03em;
}
.pago-transferencia__dato > strong { font-size: .95rem; color: var(--tinta); }
.pago-transferencia__numero {
display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .1rem;
}
.pago-transferencia__numero > strong {
font-size: 1.4rem; font-weight: 800; letter-spacing: .05em;
color: var(--azul-900); font-variant-numeric: tabular-nums;
}
.pago-transferencia__copiar {
display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem;
font: inherit; font-size: .82rem; font-weight: 700; line-height: 1;
color: var(--verde-700); background: var(--verde-100);
border: 1px solid var(--verde-600); border-radius: 999px; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.pago-transferencia__copiar:hover,
.pago-transferencia__copiar--ok { background: var(--verde-600); color: #fff; }
.pago-transferencia__copiar svg { width: 16px; height: 16px; }
/* Resumen «Tu pedido» con miniaturas. Con muchos productos, la lista se queda
en su alto y se desplaza por dentro en vez de estirar toda la página. */
.resumen__items {
list-style: none; padding: 0; margin: 0 0 1rem;
max-height: 17rem; overflow-y: auto;
}
.resumen__items:not(:hover)::-webkit-scrollbar { width: 8px; }
.resumen__items::-webkit-scrollbar { width: 8px; }
.resumen__items::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 999px; }
.resumen__items::-webkit-scrollbar-thumb:hover { background: #c3cad4; }
/* La lista del carrito: con muchos productos se desplaza dentro de su caja en
vez de estirar la página. Con pocos no se nota (no aparece la barra). */
.lista-carrito::-webkit-scrollbar { width: 8px; }
.lista-carrito::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 999px; }
.lista-carrito::-webkit-scrollbar-thumb:hover { background: #c3cad4; }
.resumen__item {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: .8rem;
padding: .65rem 0; border-bottom: 1px solid var(--linea);
}
.resumen__item:last-child { border-bottom: 0; }
.resumen__foto {
position: relative; flex: 0 0 auto;
width: 48px; height: 48px; border-radius: 10px;
background: #fff; border: 1px solid var(--linea);
}
.resumen__foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.resumen__cant {
position: absolute; top: -8px; right: -8px;
min-width: 20px; height: 20px; padding: 0 5px;
display: grid; place-items: center;
background: var(--verde-600); color: #fff;
border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1;
}
.resumen__nombre { font-size: .84rem; line-height: 1.35; color: var(--tinta); }
.resumen__precio { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.resumen__seguro {
display: flex; align-items: center; gap: .5rem;
margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea);
font-size: .8rem; color: var(--tinta-50);
}
.resumen__seguro .icono { width: 17px; height: 17px; flex: 0 0 auto; color: var(--verde-600); }
/* ---- Checkout editorial: encabezado, íconos en campos y resumen ------- */
.checkout-cab {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.5rem; margin: 0 0 1.7rem;
}
.checkout-cab__eyebrow {
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 700; color: var(--verde-600); margin: 0 0 .5rem;
}
.checkout-cab h1 { margin: 0; }
.checkout-cab__sub { margin: .35rem 0 0; color: var(--tinta-70); font-size: 1rem; }
.checkout-cab__adorno { position: relative; flex: 0 0 auto; width: 210px; height: 96px; display: none; }
.checkout-cab__firma {
position: absolute; top: 4px; right: 54px; transform: rotate(-7deg);
font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;
font-size: 1.4rem; line-height: 1.15; color: var(--verde-600); text-align: right;
}
.checkout-cab__hojas { position: absolute; right: -6px; top: 6px; width: 156px; height: 92px; color: var(--verde-500); }
@media (min-width: 760px) { .checkout-cab__adorno { display: block; } }
/* Íconos dentro de los campos */
.campo__control { position: relative; display: flex; align-items: center; }
.campo__control > .icono {
position: absolute; left: .9rem; width: 18px; height: 18px;
color: var(--tinta-50); pointer-events: none;
}
.campo__control input { padding-left: 2.6rem; }
.campo__control:focus-within > .icono { color: var(--verde-600); }
.combo--icono > .icono {
position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); z-index: 1;
width: 18px; height: 18px; color: var(--tinta-50); pointer-events: none;
}
.combo--icono input { padding-left: 2.6rem; }
/* Resumen «Tu pedido»: cabecera con carrito y conteo */
.resumen__cab { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; }
.resumen__cab .icono { width: 22px; height: 22px; color: var(--verde-700); flex: 0 0 auto; }
.resumen__cab h2 { margin: 0; font-size: 1.15rem; }
.resumen__cuenta {
margin-left: auto; font-size: .76rem; color: var(--tinta-50); white-space: nowrap;
background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: .2rem .6rem;
}
.resumen__cuentas { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 1rem 0 .9rem; font-size: .92rem; }
.resumen__cuentas dt { color: var(--tinta-70); }
.resumen__cuentas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.resumen__total {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin: .9rem 0; padding: .9rem 1.05rem; background: var(--verde-100); border-radius: var(--radio);
}
.resumen__total span { font-weight: 600; color: var(--verde-700); }
.resumen__total strong { font-size: 1.35rem; color: var(--azul-900); font-variant-numeric: tabular-nums; }
.resumen__pagar {
width: 100%; gap: .55rem; background: var(--verde-600); color: #fff;
}
.resumen__pagar:hover { background: var(--verde-700); }
.resumen__pagar .icono { width: 18px; height: 18px; flex: 0 0 auto; }
.resumen__pagar-flecha { font-size: 1.15em; }
.resumen__pagar:disabled { opacity: .6; cursor: default; }
/* Cada paso en su propia tarjeta blanca translúcida (efecto vidrio). */
.paso-card {
display: grid; gap: 1.1rem; margin: 0; min-width: 0;
padding: clamp(1.15rem, 3vw, 1.6rem);
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(25, 45, 25, .04), 0 12px 30px rgba(30, 70, 30, .06);
}
/* La