/* Tienda publica. Pensada primero para el celular, que es de donde va a venir casi todo
   el trafico desde Instagram, y despues para pantallas grandes. */

:root {
    --negro: #1a1a1a;
    --gris: #6b6b6b;
    --gris-claro: #ededed;
    --fondo: #ffffff;
    --acento: #c8553d;
    --borde: #e3e3e3;
    --radio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--negro);
    background: var(--fondo);
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* --- Cabecera --- */
.cabecera { border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--fondo); z-index: 10; }
.cabecera-fila { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.marca { font-weight: 800; font-size: 1.4rem; letter-spacing: 2px; }
.buscador { flex: 1; display: flex; gap: 6px; }
.buscador input {
    flex: 1; padding: 9px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio); font-size: 0.95rem; min-width: 0;
}
.buscador button, .boton {
    padding: 9px 16px; border: 0; border-radius: var(--radio);
    background: var(--negro); color: #fff; cursor: pointer; font-size: 0.95rem;
    display: inline-block; text-align: center;
}
.boton.grande { padding: 13px 22px; font-size: 1.05rem; width: 100%; margin-top: 14px; }
.boton.chico { padding: 6px 10px; font-size: 0.85rem; }
.boton.deshabilitado { background: var(--gris); cursor: not-allowed; }
.carrito-link { position: relative; font-weight: 600; white-space: nowrap; }
.globito {
    background: var(--rojo); color: #fff; border-radius: 999px;
    padding: 1px 7px; font-size: 0.78rem; margin-left: 4px;
}

.menu { border-top: 1px solid var(--borde); overflow-x: auto; }
.menu-fila { display: flex; gap: 18px; padding: 10px 16px; white-space: nowrap; }
.menu-fila a { font-size: 0.9rem; color: var(--gris); }
.menu-fila a:hover { color: var(--negro); }

/* --- Portada --- */
.portada { padding: 36px 0 12px; }
.portada h1 { font-size: 1.9rem; margin: 0 0 6px; }
.portada p { color: var(--gris); margin: 0; }

.titulo-seccion { font-size: 1.25rem; margin: 28px 0 12px; }
.conteo { color: var(--gris); margin: -8px 0 14px; font-size: 0.9rem; }

.categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px; font-size: 0.9rem; }
.chip span { color: var(--gris); font-size: 0.8rem; }

/* --- Grilla de productos --- */
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grilla { grid-template-columns: repeat(4, 1fr); } }

.tarjeta { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: block; }
.tarjeta:hover { border-color: var(--negro); }
.tarjeta-foto { position: relative; aspect-ratio: 1; background: var(--gris-claro); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; }
.sin-stock {
    position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.72); color: #fff;
    font-size: 0.72rem; padding: 3px 8px; border-radius: 999px;
}
.tarjeta-texto { padding: 10px 12px 14px; }
.tarjeta-texto h3 { font-size: 0.9rem; font-weight: 500; margin: 0 0 6px; line-height: 1.3; }
.precio { margin: 0; font-weight: 700; }
.precio .desde { font-weight: 400; color: var(--gris); font-size: 0.8rem; }
.tachado { color: var(--gris); text-decoration: line-through; font-weight: 400; font-size: 0.85rem; margin-left: 6px; }

/* --- Ficha de producto --- */
.miga { color: var(--gris); font-size: 0.85rem; padding: 16px 0 0; display: flex; gap: 6px; }
.ficha { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 18px 0 40px; }
@media (min-width: 860px) { .ficha { grid-template-columns: 1fr 1fr; gap: 40px; } }

.ficha-fotos img { width: 100%; border-radius: var(--radio); background: var(--gris-claro); object-fit: contain; aspect-ratio: 1; }
.miniaturas { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.miniaturas img { width: 74px; height: 74px; aspect-ratio: auto; cursor: pointer; border: 1px solid var(--borde); }
.foto-vacia {
    aspect-ratio: 1; background: var(--gris-claro); border-radius: var(--radio);
    display: grid; place-items: center; color: var(--gris);
}

.ficha-datos h1 { font-size: 1.5rem; margin: 0 0 6px; }
.marca-producto { color: var(--gris); margin: 0 0 4px; font-size: 0.9rem; }
.sku-producto { color: var(--gris); margin: 0 0 12px; font-size: 0.8rem; }
.precio.grande { font-size: 1.7rem; margin: 12px 0; }
.agotado { color: var(--rojo); font-weight: 600; }
.etiqueta { display: block; margin: 14px 0 4px; font-size: 0.85rem; color: var(--gris); }
select, input[type="number"] { padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--radio); width: 100%; font-size: 0.95rem; }
.descripcion { margin-top: 26px; border-top: 1px solid var(--borde); padding-top: 18px; }
.descripcion img { max-width: 100%; height: auto; }

/* --- Carrito --- */
.carrito { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.renglon { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--borde); }
@media (min-width: 720px) { .renglon { grid-template-columns: 80px 1fr 170px 110px 40px; } }
.renglon:last-child { border-bottom: 0; }
.renglon-foto img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--gris-claro); border-radius: 6px; }
.renglon-datos a { font-weight: 500; }
.renglon-cantidad { display: flex; gap: 6px; align-items: center; }
.renglon-cantidad input { width: 78px; }
.renglon-subtotal { font-weight: 700; white-space: nowrap; }
.quitar { background: none; border: 0; font-size: 1.4rem; color: var(--gris); cursor: pointer; line-height: 1; }

.total-caja { margin: 22px 0 40px; max-width: 380px; }
.total { font-size: 1.2rem; margin: 0 0 4px; }
.vaciar { background: none; border: 0; color: var(--gris); text-decoration: underline; cursor: pointer; margin-top: 12px; padding: 0; }

.chico { font-size: 0.85rem; color: var(--gris); margin: 2px 0; }
.vacio { color: var(--gris); padding: 22px 0; }
.ver-mas { margin: 26px 0 40px; }
.paginado { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 26px 0 40px; color: var(--gris); }
.paginado a { font-weight: 600; color: var(--negro); }

/* --- Pie --- */
.pie { border-top: 1px solid var(--borde); padding: 24px 0 40px; color: var(--gris); font-size: 0.9rem; margin-top: 20px; }
.pie p { margin: 2px 0; }

/* --- Checkout y confirmacion --- */
.checkout { display: grid; grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
@media (min-width: 860px) { .checkout { grid-template-columns: 1.4fr 1fr; gap: 40px; } }
.checkout-form h2, .checkout-resumen h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.checkout-form input, .checkout-form select, .checkout-form textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio); font-size: 0.95rem; font-family: inherit;
}
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opciones { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }

/* Cada opcion (forma de entrega, forma de pago, que envio elegir) se ve como una tarjeta
   angosta que se puede tocar entera, no solo el circulito. La elegida queda marcada con
   el borde de la marca para que no haya dudas de cual quedo tildada. */
.opciones label {
    display: flex; gap: 10px; align-items: center;
    border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 11px 14px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.opciones label:hover { border-color: var(--rojo); }
.opciones label:has(input:checked) { border-color: var(--rojo); background: var(--acento-suave); }
.opciones input { width: auto; accent-color: var(--rojo); }
.opciones input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
/* Codigo de descuento: el campo y el boton "Aplicar", uno al lado del otro. Sin esto el
   campo se lleva todo el ancho (los inputs del checkout son width:100%) y el boton cae
   abajo, separado de lo que aplica. */
.cupon { display: flex; gap: 8px; align-items: center; }
.cupon input { text-transform: uppercase; }
.cupon button { white-space: nowrap; }

.checkout-resumen { border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; align-self: start; }
/* align-items: flex-start porque el nombre del producto puede ocupar 2 lineas; sin esto
   quedaba centrado contra el precio y encima el precio (el ultimo span) se dejaba
   partir a la mitad ($ en una linea, el numero en la siguiente) cuando el nombre era
   largo. flex-shrink:0 + white-space:nowrap en el precio evita las dos cosas. */
.resumen-linea { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 5px 0; font-size: 0.92rem; }
.resumen-linea > span:last-child { white-space: nowrap; flex-shrink: 0; }
.resumen-linea.total { border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 1rem; }
/* La comparacion con MercadoLibre, pegada abajo de su producto: aclara de donde sale el
   descuento sin sumar otra vez al total (que ya viene con el precio real de la web). */
.resumen-sublinea {
    display: flex; flex-direction: column; gap: 1px;
    padding: 0 0 8px; margin-top: -3px; font-size: 0.78rem; color: var(--gris);
}
.resumen-sublinea .ahorro { color: var(--verde-ahorro); font-weight: 600; }
.error { background: #fdecea; color: #8d2718; border-radius: var(--radio); padding: 12px 14px; }
.gracias { max-width: 620px; margin: 30px auto 60px; text-align: center; }
.gracias h1 { font-size: 1.5rem; }
.gracias-detalle { text-align: left; border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 22px 0; }

/* ============================================================
   Identidad de la marca
   Los colores y las tipografias son los mismos que usa maremtienda.ar,
   para que quien venga de Instagram o de la tienda vieja reconozca el lugar.
   ============================================================ */
:root {
    --acento: #664D3A;      /* el marron de la marca */
    --acento-suave: #f3efe9;
}

body { font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

h1, h2, h3, .marca, .precio, .portada h1 {
    font-family: "Sofia Sans Extra Condensed", "Public Sans", system-ui, sans-serif;
    letter-spacing: 0.2px;
}
h1, .portada h1 { font-weight: 700; }

/* Cintillo de arriba: los tres mensajes que siempre conviene tener a la vista. */
.cintillo { background: var(--negro); color: #fff; font-size: 0.82rem; }
.cintillo-fila { display: flex; gap: 26px; justify-content: center; padding: 7px 16px; overflow-x: auto; white-space: nowrap; }
.cintillo span { opacity: .92; }
@media (max-width: 560px) { .cintillo-fila span:nth-child(3) { display: none; } }

/* El logo reemplaza al nombre escrito. */
.marca img { height: 34px; width: auto; display: block; }
@media (max-width: 560px) { .marca img { height: 26px; } }

.portada {
    background: var(--acento-suave);
    border-radius: var(--radio);
    padding: 40px 26px;
    margin-top: 20px;
}
.portada h1 { font-size: 2.4rem; margin: 0 0 6px; color: var(--acento); }
.portada .boton { margin-top: 14px; background: var(--acento); }

.titulo-seccion { font-size: 1.45rem; }

/* Etiqueta de descuento, cuando el producto tiene precio promocional. */
.descuento {
    position: absolute; right: 8px; top: 8px; background: var(--rojo); color: #fff;
    font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.descuento.chica { position: static; font-size: 0.8rem; margin-left: 8px; }

/* Mismo recuadro que .descuento pero en verde, para el % de ahorro por transferencia/efectivo. */
.descuento-verde {
    display: inline-block; background: var(--verde-ahorro); color: #fff;
    font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    margin-left: 6px; vertical-align: middle;
}

/* Franja de servicios, arriba del pie. */
.servicios { background: var(--acento-suave); margin-top: 34px; padding: 22px 0; }
.servicios-fila { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: center; }
@media (min-width: 720px) { .servicios-fila { grid-template-columns: repeat(3, 1fr); } }
.servicios strong { display: block; color: var(--rojo); font-size: 0.98rem; }
.servicios span { color: var(--gris); font-size: 0.86rem; }

.chip:hover, .tarjeta:hover { border-color: var(--rojo); }
.carrito-link:hover, .menu-fila a:hover { color: var(--rojo); }

/* Pago por transferencia. Mismo verde que el precio con transferencia de las tarjetas:
   es el mismo concepto (lo que se ahorra) en dos pantallas distintas. */
.ahorro { color: var(--verde-ahorro); }
.ahorro-linea { color: var(--verde-ahorro); font-weight: 600; }
.datos-transferencia {
    text-align: left; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 14px 16px; margin: 18px 0; background: var(--acento-suave);
}
.datos-transferencia div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; }
.datos-transferencia span { color: var(--gris); font-size: 0.88rem; }
.datos-transferencia strong { font-size: 0.98rem; word-break: break-all; text-align: right; }

/* ============================================================
   Fotos parejas
   Las fotos vienen de distintos tamanos y proporciones. Para que la grilla y la ficha
   no queden desprolijas, todas se muestran en un cuadrado del mismo tamano, con la foto
   centrada adentro y fondo blanco: nunca se estira ni se recorta el producto.
   ============================================================ */
.tarjeta-foto { background: #fff; border-bottom: 1px solid var(--borde); }
.tarjeta-foto img { object-fit: contain; padding: 8px; }

.ficha-fotos img { background: #fff; border: 1px solid var(--borde); }

.miniaturas img {
    width: 74px; height: 74px; min-width: 74px;
    aspect-ratio: 1; object-fit: contain; background: #fff; padding: 4px;
    border: 1px solid var(--borde); border-radius: 8px;
}
.miniaturas img:hover { border-color: var(--rojo); }

.renglon-foto img { background: #fff; border: 1px solid var(--borde); object-fit: contain; padding: 4px; }

/* La marca: el cocinerito al lado del nombre. */
.marca { display: flex; align-items: center; gap: 8px; }
.marca-mascota { height: 42px; width: auto; }
.marca-nombre { height: 26px; width: auto; }
@media (max-width: 560px) {
    .marca-mascota { height: 34px; }
    .marca-nombre { height: 20px; }
}

/* ============================================================
   Que la ficha se vea igual en todos los productos
   ------------------------------------------------------------
   El problema: en una grilla, una columna no puede achicarse por debajo del ancho real
   de la imagen que tiene adentro. Con fotos originales grandes (algunas vienen de 1200 px
   o mas), la columna de la foto se agrandaba sola, se comia el espacio de los datos y el
   titulo quedaba cayendo palabra por palabra.

   La solucion es dejar que esa columna pueda achicarse (minmax(0, 1fr)) y ponerle un
   tope al tamano de la foto, asi todas las fichas se ven parejas venga la foto que venga.
   ============================================================ */
.ficha { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
    .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ficha-fotos { max-width: 520px; width: 100%; min-width: 0; }
.ficha-fotos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ficha-datos { min-width: 0; }
.ficha-datos h1 { overflow-wrap: break-word; }

/* Mismo cuidado en la grilla del catalogo y en el carrito. */
.grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.renglon { grid-template-columns: 72px minmax(0, 1fr) auto; }
@media (min-width: 720px) { .renglon { grid-template-columns: 80px minmax(0, 1fr) 170px 110px 40px; } }

/* --- Paginas legales y pie --- */
.legal { max-width: 760px; margin: 26px auto 50px; }
.legal h1 { font-size: 1.7rem; margin-bottom: 4px; }
.legal h2 { font-size: 1.1rem; margin: 26px 0 6px; color: var(--rojo); }
.legal p { margin: 8px 0; }
.aviso-ok { background: var(--acento-suave); border-radius: var(--radio); padding: 14px 16px; }

.pie-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.pie-links a { text-decoration: underline; }
.boton-arrepentimiento {
    display: inline-block; border: 1px solid var(--negro); color: var(--negro);
    border-radius: var(--radio); padding: 8px 16px; font-size: 0.86rem; font-weight: 600;
    background: #fff; margin: 4px 0 12px;
}
.boton-arrepentimiento:hover { background: var(--negro); color: #fff; }

/* --- Boton flotante de WhatsApp --- */
.whatsapp-flotante {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    display: inline-flex; align-items: center; gap: 8px;
    background: #25D366; color: #fff; font-weight: 700; font-size: 0.92rem;
    padding: 11px 16px 11px 13px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.whatsapp-flotante svg { width: 22px; height: 22px; fill: currentColor; }
.whatsapp-flotante:hover { background: #1da851; }

/* En el celular queda solo el circulito con el icono, para no tapar la pantalla. */
@media (max-width: 560px) {
    .whatsapp-flotante { padding: 13px; }
    .whatsapp-flotante span { display: none; }
}

/* Aire abajo de todo, asi el boton no tapa los links del pie. */
.pie { padding-bottom: 78px; }

/* Datos del negocio en el pie, en tres columnas. */
.pie-datos { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 18px 0 14px; }
@media (min-width: 720px) { .pie-datos { grid-template-columns: repeat(3, 1fr); } }
.pie-datos strong { color: var(--negro); display: block; margin-bottom: 4px; }
.pie-datos p { margin: 2px 0; }
.pie-datos a { text-decoration: underline; }

/* ---------- Carrusel de banners de la portada ---------- */
/* La pista lleva todos los banners uno al lado del otro y se corre de a uno.
   El alto se fija por proporcion para que no salte la pagina mientras carga la imagen. */
.carrusel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin: 0 0 1.5rem;
    background: #f3f4f6;
}

.carrusel-pista {
    display: flex;
    transition: transform .5s ease;
}

.carrusel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.carrusel-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    /* Si el banner esta puesto para verse entero, la imagen no llena la franja: lo que
       queda a los costados se pinta de blanco en vez del gris del fondo. */
    background: #fff;
}

.carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: .5rem .75rem;
    border-radius: 999px;
    cursor: pointer;
}

.carrusel-flecha:hover { background: rgba(0, 0, 0, .55); }
.carrusel-flecha.izquierda { left: .75rem; }
.carrusel-flecha.derecha { right: .75rem; }

.carrusel-puntos {
    position: absolute;
    bottom: .75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.carrusel-punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.carrusel-punto.activo { background: #fff; }

/* En el celular el banner se ve mas alto: una tira de 16/5 queda una linea finita. */
@media (max-width: 700px) {
    .carrusel-slide img { aspect-ratio: 16 / 9; }
    .carrusel-flecha { display: none; }
}

:root {
    --rojo: #e1322a;         /* el rojo del logo */
    --rojo-oscuro: #b8241d;
    --verde-ahorro: #1f7a3d; /* lo que se ahorra pagando con transferencia o efectivo */
}

/* ============================================================
   Tarjeta de producto: segunda foto, precios y boton de comprar
   ------------------------------------------------------------
   La tarjeta dejo de ser un solo link para poder tener adentro el boton "Comprar"
   (un link dentro de otro link no es valido). Ahora la foto, el nombre y el boton son
   tres links separados que van al mismo lugar: la ficha del producto.
   ============================================================ */
.tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tarjeta:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); }

.tarjeta-foto { display: block; }

.foto-vacia-chica {
    aspect-ratio: 1; background: var(--gris-claro); color: var(--gris);
    display: grid; place-items: center; font-size: 0.85rem;
}

/* La segunda foto va tapando a la primera: aparece cuando se pasa el mouse.
   En el celular no hay mouse, asi que simplemente nunca se muestra. */
.tarjeta-foto .foto-hover {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
}
@media (hover: hover) {
    .tarjeta:hover .foto-hover { opacity: 1; }
}

.tarjeta-texto { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.tarjeta-nombre h3 { min-height: 2.4em; }
.tarjeta-nombre:hover h3 { color: var(--rojo); }

/* El precio con descuento por transferencia o efectivo, abajo del precio de lista. */
.precio-transferencia {
    margin: 2px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--verde-ahorro);
    line-height: 1.25;
}

/* En la ficha del producto va un poco mas grande que en las tarjetas del listado: ahi el
   precio es el protagonista de la pantalla y este renglon tiene que competirle. */
.precio-transferencia-ficha {
    font-size: 1rem;
    margin: -6px 0 14px;
}

/* Boton de comprar: rojo de la marca con letras blancas, pegado abajo de la tarjeta
   para que todas las tarjetas de la fila terminen a la misma altura. */
.tarjeta-texto p:last-of-type { margin-bottom: 12px; }
.boton-comprar {
    margin-top: auto;
    align-self: flex-start;
    display: inline-block;
    background: var(--rojo);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: 6px;
}
.boton-comprar:hover { background: var(--rojo-oscuro); }

/* ============================================================
   Portada en los colores de la marca: fondo blanco con el rojo del logo
   ------------------------------------------------------------
   El fondo es blanco como el resto de la pagina, asi que el bloque se distingue
   con el filete rojo de arriba y un borde suave alrededor.
   ============================================================ */
.portada {
    background: #fff;
    border-top: 4px solid var(--rojo);
    border-right: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
    color: var(--negro);
}
.portada h1 { color: var(--rojo); }
.portada p { color: var(--gris); }
.portada .boton { background: var(--rojo); color: #fff; }
.portada .boton:hover { background: var(--rojo-oscuro); }

/* --- Instagram en el pie --- */
.pie-redes { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.pie-redes a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--negro); }
/* El icono se dibuja con lineas (no relleno) para que se vea igual de nitido
   en cualquier tamano. */
.pie-redes svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pie-redes svg .relleno { fill: currentColor; stroke: none; }
.pie-redes a:hover { color: var(--rojo); }

/* ============================================================
   Franja "Seguinos en Instagram"
   Las publicaciones se cargan a mano desde el panel. Se ven en cuadraditos parejos,
   como en el perfil de Instagram, y al tocarlos se abre el post de verdad.
   ============================================================ */
.instagram { margin: 34px 0 10px; }

.instagram-titulo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.instagram-titulo .titulo-seccion { margin: 0; }
.instagram-usuario { color: var(--rojo); font-weight: 700; font-size: 0.92rem; }
.instagram-usuario:hover { text-decoration: underline; }

.instagram-grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) { .instagram-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .instagram-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.instagram-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--gris-claro);
}
.instagram-item img,
.instagram-item video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
@media (hover: hover) {
    .instagram-item:hover img,
    .instagram-item:hover video { transform: scale(1.06); }
}

/* El triangulito que avisa que ese cuadradito es un video. */
.instagram-play {
    position: absolute; right: 8px; top: 6px;
    color: #fff; font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    pointer-events: none;
}

/* La miniatura de la opcion elegida queda marcada, para que se entienda que la foto
   grande cambio porque cambio la opcion. */
.miniaturas img.elegida { border-color: var(--rojo); border-width: 2px; }

/* Rubros de adentro de una categoria (las subcategorias que vienen de Tienda Nube). */
.rubros { margin: 0 0 20px; }
.rubros .chip.actual { background: var(--negro); color: #fff; border-color: var(--negro); }
.rubros .chip.actual span { color: rgba(255,255,255,.7); }

/* Productos sin stock que ya estan comprados: se avisa cuando vuelven en vez de esconderlos.
   Los que no tienen compra en camino directamente no se listan. */
.sin-stock.proximo { background: var(--rojo); }
.proximo-ingreso {
    background: var(--acento-suave); border-left: 3px solid var(--rojo);
    border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 14px 0;
}
.proximo-ingreso strong { color: var(--rojo); }
.proximo-ingreso .chico { color: var(--gris); }


/* ============================================================
   Cuentas de los compradores
   ------------------------------------------------------------
   Ingresar, crear cuenta y "Mi cuenta" con los pedidos.
   ============================================================ */
.cuenta-link { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cuenta-link:hover { color: var(--rojo); }
.cuenta-inicial {
    background: var(--rojo); color: #fff; border-radius: 999px;
    width: 24px; height: 24px; display: inline-grid; place-items: center;
    font-size: 0.78rem; font-weight: 700;
}
@media (max-width: 560px) { .cuenta-nombre { display: none; } }

.cuenta-caja {
    max-width: 420px; margin: 34px auto 60px; padding: 0 16px;
}
.cuenta-caja h1 { font-size: 1.6rem; margin: 0 0 10px; }
.cuenta-ayuda { color: var(--gris); font-size: 0.9rem; line-height: 1.5; }
.cuenta-caja .etiqueta { display: block; font-size: 0.85rem; font-weight: 600; margin: 12px 0 4px; }
.cuenta-caja .campo {
    width: 100%; padding: 10px 12px; border: 1px solid var(--borde);
    border-radius: var(--radio); font-size: 0.95rem;
}
.cuenta-links { font-size: 0.9rem; margin-top: 16px; text-align: center; color: var(--gris); }
.cuenta-links a { color: var(--rojo); font-weight: 600; }
.cuenta-links span { margin: 0 6px; }

/* El boton de Google va en blanco con borde, como pide su guia de marca. */
.boton-google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1a1a1a; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 11px 16px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.boton-google:hover { border-color: var(--negro); }
.boton-google .g { color: var(--rojo); font-weight: 800; font-size: 1.05rem; }

.separador { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--gris); font-size: 0.82rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* --- Mi cuenta --- */
.cuenta-panel { max-width: 780px; margin: 28px auto 60px; padding: 0 16px; }
.cuenta-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cuenta-encabezado h1 { font-size: 1.6rem; margin: 0 0 2px; }
.cuenta-datos { display: grid; gap: 10px; }
.cuenta-datos div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--borde); padding-bottom: 8px; }
.cuenta-datos span { color: var(--gris); font-size: 0.9rem; }
.cuenta-datos strong { font-size: 0.92rem; text-align: right; }

.cuenta-pedidos { display: grid; gap: 10px; }
.cuenta-pedido {
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px;
}
.cuenta-pedido .cuenta-ayuda { display: block; font-size: 0.82rem; }
.cuenta-pedido-derecha { text-align: right; white-space: nowrap; }
.cuenta-estado {
    display: block; font-size: 0.8rem; font-weight: 700; color: var(--rojo); margin-bottom: 2px;
}
.checkout-cuenta {
    background: var(--acento-suave); border-radius: var(--radio); padding: 10px 12px;
    font-size: 0.88rem; color: var(--gris); margin: 0 0 12px;
}
.checkout-cuenta a { color: var(--rojo); font-weight: 600; }