/* ============================================================================
   IDENTIDAD DE MARCA POROTOS — la paleta de los flyers, en toda la tienda
   ----------------------------------------------------------------------------
   Agregado 2026-08-26. Junior pidió que TODA la página use la misma paleta de
   los flyers de Facebook, para que se vea como un solo conjunto y la gente lo
   asocie a POROTOS apenas lo ve.

   Paleta del flyer:
     rojo profundo de fondo · paneles azul marino · dorado de acción
     naranja del poroto (mascota/logo) · blanco

   Este archivo se carga DESPUÉS de styles.css a propósito: pisa los colores
   viejos sin tocar las 1.400 líneas de allá. Para volver atrás, se saca el
   <link> de este archivo en index.html y la página queda como estaba.
   ========================================================================== */

:root {
  /* --- Rojos: el fondo del flyer --- */
  --rojo-marca: #b5121a;
  --rojo-prof: #6b0a0e;
  --rojo-vivo: #dc1f26;

  /* --- Azul marino: los paneles del precio y el zócalo del flyer --- */
  --navy-marca: #0d1a31;
  --navy-2: #142949;
  --navy-borde: #2b4e86;

  /* --- Dorado: el color de acción del flyer --- */
  --oro: #ffc414;
  --oro-claro: #ffd95c;
  --oro-osc: #e0a800;

  /* El naranja del poroto se mantiene: es la mascota y el logo */
  --poroto: #e8721c;

  /* Fredoka: gorda y redondeada, va con el poroto de dibujo animado.
     Junior descartó Anton (muy dura) el 26-08. */
  --font-cartel: "Fredoka", "Sora", system-ui, sans-serif;

  --grad-oro: linear-gradient(180deg, #ffd95c 0%, #ffc414 55%, #e9ae00 100%);

  /* Textura de puntos del flyer (halftone) */
  --puntos: radial-gradient(circle, rgba(0, 0, 0, 0.16) 1.1px, transparent 1.2px);
}

/* ---------- Fondo general: rojo profundo con textura de puntos ---------- */
/* Sin background-attachment: fixed a propósito — en Safari de iPhone el fondo
   fijo se rompe o se pone lento. Así el degradado recorre toda la página. */
body {
  min-height: 100vh;
  background:
    var(--puntos),
    radial-gradient(130% 60% at 50% 0%, var(--rojo-vivo) 0%, var(--rojo-marca) 40%, var(--rojo-prof) 100%);
  background-size: 9px 9px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: #fff;
}

/* ---------- HERO: el flyer hecho portada ---------- */
.hero2 {
  background:
    var(--puntos),
    radial-gradient(115% 100% at 50% -5%, var(--rojo-vivo) 0%, var(--rojo-marca) 42%, var(--rojo-prof) 100%);
  background-size: 9px 9px, auto;
  border-bottom: 4px solid var(--oro);
}
.hero2-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.orb-1 { background: var(--oro); opacity: 0.28; }
.orb-2 { background: var(--rojo-vivo); opacity: 0.5; }
.orb-3 { background: var(--poroto); opacity: 0.3; }

.hero2-title,
.hero-slogan {
  font-family: var(--font-cartel);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 10px 30px rgba(0, 0, 0, 0.4);
}
.hero2-title .grad {
  background: var(--grad-oro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25));
}
.hero2-sub { color: rgba(255, 255, 255, 0.86); }

/* Franja de datos: más de 1.000 productos · despacho · pagas al recibir */
.hero2-stats {
  background: rgba(13, 26, 49, 0.55);
  border: 1.5px solid rgba(255, 196, 20, 0.35);
  border-radius: 16px;
  padding: 14px 22px;
  backdrop-filter: blur(6px);
  justify-content: center;
}
.hstat b {
  font-family: var(--font-cartel);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--oro);
  font-size: 21px;
}
.hstat small { color: rgba(255, 255, 255, 0.75); }
.hstat-sep { background: rgba(255, 196, 20, 0.3); }

/* Etiqueta "Ferretería · Hogar · y más" */
.eyebrow {
  color: var(--navy-marca);
  background: var(--grad-oro);
  border: none;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.eyebrow-dot {
  background: var(--rojo-marca);
  box-shadow: 0 0 0 3px rgba(181, 18, 26, 0.25);
}

/* El cartelito del hero tiene su propia regla en styles.css (.hero-head .eyebrow),
   que le gana a .eyebrow a secas. Hay que igualarle la especificidad. */
.hero-head .eyebrow {
  color: var(--navy-marca);
  background: var(--grad-oro);
  border-color: transparent;
}

/* ---------- El rubro como TITULAR ----------
   26-08: Junior sacó "Todo a precio de poroto" y pidió que "Ferretería · Hogar
   · y más" quede grande y con un color llamativo. Va en dorado degradado, que
   es el color de acción de la marca y es el que más salta sobre el rojo. */
.hero-rubro {
  margin: 0;
  font-family: var(--font-cartel);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-size: clamp(30px, 4.6vw, 62px);
  background: var(--grad-oro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
  text-align: left;
}
@media (max-width: 620px) {
  .hero-rubro { text-align: center; }
}

/* ---------- El logo, bien grande (Junior lo pidió el 26-08) ----------
   La mascota nueva es vertical (alto ≈ 1.5 × ancho), así que necesita
   bastante altura para que se le vean el gorro y las herramientas. */
.hero2-inner.centrado .hero-head .hero-logo {
  height: clamp(200px, 24vw, 340px);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.5));
}
@media (max-width: 620px) {
  .hero2-inner.centrado .hero-head .hero-logo { height: 210px; }
}

/* ---------- Buscador ---------- */
.search input {
  background-color: #fff;
  border: 2.5px solid var(--oro);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  color: var(--navy-marca);
  font-weight: 500;
}
.search input:focus {
  border-color: var(--oro-claro);
  box-shadow: 0 0 0 4px rgba(255, 196, 20, 0.3), 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* ---------- Barra de categorías ---------- */
.hero2-marquee,
.cats-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  background: rgba(13, 26, 49, 0.45);
}
.marquee-track span { color: rgba(255, 255, 255, 0.6); }
.marquee-track span:nth-child(even) { color: var(--oro); }

.cat-chip {
  background: var(--navy-marca);
  border: 1.5px solid var(--navy-borde);
  color: #fff;
}
.cat-chip:hover {
  border-color: var(--oro);
  color: var(--oro);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.cat-chip.on {
  background: var(--grad-oro);
  border-color: var(--oro-osc);
  color: var(--navy-marca);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

/* Los botones de la barra del hero usan .mq-item / .mq-more (no .cat-chip).
   La especificidad tiene que igualar la de styles.css: .hero2-marquee.estatica X */
.hero2-marquee.estatica .mq-item {
  color: #fff;
  background: var(--navy-marca);
  border: 1.5px solid var(--navy-borde);
}
.hero2-marquee.estatica .mq-item:hover {
  color: var(--oro);
  background: var(--navy-2);
  border-color: var(--oro);
}
.hero2-marquee.estatica .mq-item.on {
  color: var(--navy-marca);
  background: var(--grad-oro);
  border-color: var(--oro-osc);
  font-weight: 800;
}
.hero2-marquee.estatica .mq-more {
  color: #fff;
  background: var(--navy-marca);
  border: 1.5px solid var(--navy-borde);
}
.hero2-marquee.estatica .mq-more:hover {
  color: var(--oro);
  border-color: var(--oro);
}

/* ---------- Barra de herramientas del catálogo ---------- */
.toolbar select {
  background: var(--navy-marca);
  border: 1.5px solid var(--navy-borde);
  color: #fff;
  font-weight: 600;
}
.toolbar select:hover,
.toolbar select:focus { border-color: var(--oro); }
.toolbar select:focus { box-shadow: 0 0 0 3px rgba(255, 196, 20, 0.28); }
.count { color: rgba(255, 255, 255, 0.82); font-weight: 600; }

/* ---------- Tarjetas de producto ----------
   Se quedan blancas a propósito: las fotos de los productos vienen con fondo
   blanco y sobre rojo no se leerían. El marco dorado y el precio rojo son los
   que las amarran a la marca, igual que los recuadros del flyer sobre el rojo. */
.card {
  background: #fff;
  border: 2px solid rgba(255, 196, 20, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.card:hover {
  border-color: var(--oro);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(255, 196, 20, 0.22);
}
.card .foto { border-bottom: 2px solid rgba(255, 196, 20, 0.4); }
.card .titulo { color: var(--navy-marca); font-weight: 600; }
.card .precio {
  font-family: var(--font-cartel);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
  color: var(--rojo-marca);
}
.card .tiers {
  background: #fff8e1;
  border: 1px solid rgba(255, 196, 20, 0.5);
  color: #6b4e00;
}
.card .stock { color: #4b5563; }
.card .stock.pocas { color: var(--rojo-marca); }
.badge {
  background: var(--navy-marca);
  color: var(--oro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Botón de acción = dorado con texto marino (la franja "DESPACHOS" del flyer) */
.btn-comprar,
.btn-agregar,
.btn-primario,
.cuenta-submit,
.btn-pagar {
  background: var(--grad-oro);
  color: var(--navy-marca);
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
}
.btn-comprar:hover,
.btn-agregar:hover,
.btn-primario:hover,
.cuenta-submit:hover,
.btn-pagar:hover {
  filter: brightness(1.06);
  box-shadow: 0 9px 22px rgba(255, 196, 20, 0.4);
}
.btn-comprar:disabled { background: #d8dce3; color: #8b93a1; }

/* ---------- Títulos de sección ---------- */
.seccion-title {
  font-family: var(--font-cartel);
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.seccion-sub { color: rgba(255, 255, 255, 0.8); }

/* ---------- Ventajas y testimonios: paneles marinos ---------- */
.ventajas,
.testimonios { background: transparent; }
.vent-card,
.testi-card {
  background: linear-gradient(170deg, var(--navy-2) 0%, var(--navy-marca) 100%);
  border: 2px solid var(--navy-borde);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.vent-card:hover,
.testi-card:hover {
  border-color: var(--oro);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.45);
}
.vent-card::before { background: var(--grad-oro); }
.vent-card h3,
.testi-autor b { color: var(--oro); }
.vent-card p,
.testi-txt { color: rgba(255, 255, 255, 0.82); }
.testi-autor small { color: rgba(255, 255, 255, 0.55); }
.testi-stars { color: var(--oro); }
.vent-ico {
  background: linear-gradient(160deg, rgba(255, 196, 20, 0.22), rgba(255, 196, 20, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 196, 20, 0.35);
}

/* ---------- Paginación ---------- */
.pagination button {
  background: var(--navy-marca);
  border: 1.5px solid var(--navy-borde);
  color: #fff;
  font-weight: 600;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--oro);
  color: var(--oro);
}
.pagination .pag-info { color: rgba(255, 255, 255, 0.8); }
.vacio { color: rgba(255, 255, 255, 0.85); }

/* ---------- Barra del carrito ---------- */
.cart-bar {
  background: var(--grad-oro);
  color: var(--navy-marca);
  border-top: 3px solid var(--oro-osc);
}
.cart-bar .cart-count { background: var(--navy-marca); color: var(--oro); }

/* ---------- Pie de página: el zócalo marino del flyer ---------- */
.site-footer {
  background: var(--navy-marca);
  border-top: 4px solid var(--oro);
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0;
}
.foot-social a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.foot-social .tk svg { fill: #fff; }
.foot-place { color: rgba(255, 255, 255, 0.75); }
.foot-place svg { fill: var(--oro); }
.foot-como { border-color: var(--oro); color: var(--oro); }
.foot-como:hover { background: var(--oro); color: var(--navy-marca); }
.foot-copy {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
}
.foot-copy a { color: var(--oro); }
.foot-copy a:hover { color: var(--oro-claro); }

/* ---------- Ventanas: detalle, carrito, cuenta, checkout ----------
   Por dentro se quedan claras para que se lean bien, pero con cabecera
   marina y detalles dorados para que sigan siendo Porotos. */
.detail-modal,
.cart-panel,
.cuenta-modal,
.checkout-modal {
  border: 3px solid var(--oro);
  color: var(--texto);
}
.cart-head {
  background: var(--navy-marca);
  border-bottom: 3px solid var(--oro);
}
.cart-head h2 { color: #fff; }
.cart-x { color: rgba(255, 255, 255, 0.8); }
.detail-modal .ficha h2,
.cuenta-modal h2,
.checkout-modal h2 { color: var(--navy-marca); }
.ficha .precio-grande {
  font-family: var(--font-cartel);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rojo-marca);
}
.tramo-op.on { border-color: var(--oro); background: #fff8e1; }
.tramo-op.on b { color: var(--rojo-marca); }
.thumb.on,
.foto-item.principal { border-color: var(--oro); }
.cart-tramo.on {
  background: var(--navy-marca);
  border-color: var(--navy-marca);
}
.cart-item-sub,
.cart-total b,
.co-total span,
.co-total b { color: var(--navy-marca); }
.btn-wa-pedir { box-shadow: 0 5px 14px rgba(37, 211, 102, 0.35); }

/* ---------- Botón de cuenta en el hero ---------- */
.cuenta-btn { border-color: rgba(255, 196, 20, 0.45); }
.cuenta-btn:hover {
  border-color: var(--oro);
  background: rgba(255, 196, 20, 0.16);
}
.cuenta-btn.logueado {
  background: var(--grad-oro);
  color: var(--navy-marca);
}
.cuenta-btn.logueado:hover { color: var(--navy-marca); }

/* ============================================================================
   TARJETAS EN EL TELÉFONO — 26-08-2026
   Junior avisó que "se ven muy largas". Medido: a 390px de pantalla la tarjeta
   quedaba 178 de ancho por ~355 de alto, casi el doble de alta que ancha,
   porque el cuerpo pesaba más que la foto (badge + título + precio + caja del
   precio por mayor + "Disponible" + botón, cada uno con su espacio).

   Se achica el cuerpo, no la foto: la foto es lo que vende. La línea
   "Disponible" se saca porque dice lo mismo en todos los productos, y el
   precio por mayor pasa de caja a una línea fina.
   ========================================================================== */
@media (max-width: 620px) {
  .grid { gap: 8px; padding: 0 10px 24px; }

  .card { border-width: 1.5px; border-radius: 14px; }
  .card .foto { height: 124px; flex-basis: 124px; padding: 6px; }

  .card .cuerpo { padding: 7px 8px 8px; gap: 3px; }

  /* El "NUEVO" se monta arriba de la foto en vez de gastar una línea entera
     del cuerpo. Son ~17px menos de alto por tarjeta. */
  .card { position: relative; }
  .card .cuerpo .badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    font-size: 9px;
    padding: 2px 6px;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .card .titulo {
    font-size: 12.5px;
    line-height: 1.3;
    min-height: 32px;
  }

  .card .precio { font-size: 19px; }

  /* El precio por mayor deja de ser un recuadro y pasa a ser una línea */
  .card .tiers {
    background: none;
    border: none;
    padding: 0;
    font-size: 10.5px;
    line-height: 1.35;
    color: #8a6d00;
  }

  /* "Disponible" dice lo mismo en todos: en el teléfono solo ocupa alto.
     El aviso de pocas unidades SÍ se deja, porque ese sí informa. */
  .card .stock { display: none; }
  .card .stock.pocas { display: block; font-size: 10.5px; }

  /* Lo que más alto sumaba era el texto partido en dos líneas: el botón medía
     52px porque "Agregar al carrito" no entraba, y el precio por mayor 28px por
     lo mismo. En el teléfono se usan las versiones cortas. */
  .txt-largo { display: none; }
  .txt-corto { display: inline; }
  .card .tiers { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-comprar {
    font-size: 12.5px;
    padding: 8px 6px;
    border-radius: 9px;
    white-space: nowrap;
  }
}

/* De 621px para arriba manda el texto largo (es el que estaba desde siempre) */
.txt-corto { display: none; }

/* Pantallas medianas (teléfono grande de lado, tablet chica): la grilla metía
   3 columnas con la tarjeta de escritorio y también quedaban largas. */
@media (min-width: 621px) and (max-width: 900px) {
  .card .foto { height: 170px; flex-basis: 170px; }
  .card .cuerpo { padding: 10px 12px 12px; gap: 6px; }
  .card .precio { font-size: 22px; }
  .card .stock { font-size: 11.5px; }
}

/* ============================================================================
   QUE LA FOTO OCUPE EL RECUADRO — 26-08-2026
   Junior avisó que "algunas imágenes cuando se abren se ven pequeñas".
   Además de que venían en tamaño chico (eso se arregló en app.js pidiéndolas
   en -F.jpg), el CSS tenía solo max-width/max-height: eso LIMITA el tamaño
   pero no agranda. Una foto de 200px quedaba flotando en el medio de un
   recuadro de 340px, rodeada de blanco.

   Con width/height al 100% y object-fit: contain la foto usa todo el espacio
   sin deformarse.
   ========================================================================== */
.galeria-main img,
.card .foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* En el teléfono la foto es lo que vende: se le da más alto al visor. */
@media (max-width: 680px) {
  .galeria-main { height: 320px; }
}

/* ---------- Detalles finos ---------- */
::selection { background: var(--oro); color: var(--navy-marca); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }