/* =====================================================================
   TEMA "VERTE BIEN" (tanda 1 + 2)
   Archivo de estilos aparte, escrito a mano: NO hace falta compilarlo con
   Tailwind. Se carga después de estilos.css. Para volver al diseño anterior
   alcanza con borrar la línea que lo enlaza en index.html.

   AJUSTES RÁPIDOS (cambiá solo estos valores):
   --contraste        color de contraste (etiquetas de producto)
   --opacidad-flor    flor del pie de página: .03 muy suave · .06 actual · .12 marcada
   --desenfoque       intensidad del desenfoque de productos agotados
   --proporcion-foto  forma de TODAS las fotos de las tarjetas: 1 / 1 (cuadrada) · 4 / 5 (vertical)
   ===================================================================== */
:root {
  --contraste: #0F5257;
  --opacidad-flor: .06;
  --desenfoque: 0x;
  --proporcion-foto: 3 / 4;
  --rosa-agotado: #f70000;
  --t-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --t-texto: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* ---------- Tipografías: condensada para títulos y menú, serif para textos ---------- */
body.font-sans { font-family: var(--t-texto); }
h1, h2, h3, h4, .uppercase, header nav button, [data-marca] { font-family: var(--t-titulo); }
.uppercase[class*="tracking"] { letter-spacing: .07em; }
h1, h2, h3 { font-weight: 700; }

/* ---------- Íconos de línea fina (SVG) ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico-sm { width: 18px; height: 18px; }
.ico-inline { display: inline-block; vertical-align: -4px; margin-right: 8px; }

/* ---------- Encabezado y menú de escritorio ---------- */
@media (min-width: 768px) { #logo-header { height: 68px !important; } }
header nav > button, header nav > .group > button { font-size: 15px; font-weight: 600; letter-spacing: .07em; color: #3a3733; }
header nav .group > div button { font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: #3a3733; font-weight: 500; }
header nav .group > div button:hover { color: #E3050F; }

/* ---------- Portada: título centrado, botón tipo cinta y borde de papel rasgado ---------- */
#vista-inicio > section:first-of-type > .bg-gradient-to-r { background-image: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.52) 100%) !important; }
#vista-inicio > section:first-of-type .max-w-2xl { margin-left: auto; margin-right: auto; text-align: center; }
#vista-inicio > section:first-of-type .max-w-md { margin-left: auto; margin-right: auto; }
#vista-inicio > section:first-of-type .flex-wrap { justify-content: center; }
#vista-inicio > section:first-of-type h1 { font-size: clamp(3.4rem, 11vw, 8.5rem); line-height: .92; letter-spacing: 0; font-weight: 800; }
#vista-inicio > section:first-of-type button.bg-marca {
  border-radius: 0 !important; padding: 16px 56px !important; font-family: var(--t-titulo); font-size: 20px; letter-spacing: .08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
}
/* El logo de la portada va centrado junto al título */
#hero-logo img { margin-left: auto; margin-right: auto; }
/* PARA QUITAR EL LOGO DE LA PORTADA: en la linea que empieza con #hero-logo, borra las marcas de comentario que la rodean (barra y asterisco al principio, asterisco y barra al final). */
/* Si queres que en su lugar se vea el nombre en texto, hace lo mismo con la linea de #hero-eyebrow. */
/*#hero-logo { display: none !important; }*/
/*#hero-eyebrow { display: block !important; }*/
#hero-dots { bottom: 46px !important; }
#vista-inicio > section:first-of-type::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; z-index: 15; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28'%3E%3Cpath fill='%23fff' d='M0 28 L0 18.7 L5 10.3 L11 16.1 L21 4.5 L33 9.1 L47 8.2 L58 16.8 L64 10.1 L69 8.9 L80 16.3 L88 8.0 L96 16.6 L108 17.2 L115 14.8 L120 8.2 L134 15.7 L144 11.6 L156 11.7 L167 15.4 L179 7.3 L190 14.3 L196 10.0 L206 9.8 L220 18.3 L229 17.4 L237 11.1 L244 18.2 L252 9.9 L263 8.5 L274 9.7 L288 16.0 L298 10.8 L305 17.8 L315 13.6 L324 18.8 L334 7.8 L343 18.6 L356 12.4 L370 14.7 L375 18.9 L387 16.6 L396 9.3 L404 8.9 L417 8.0 L429 11.0 L441 8.0 L448 16.2 L463 14.0 L472 17.1 L485 18.5 L496 7.5 L509 18.4 L520 8.0 L529 13.6 L544 11.2 L557 8.9 L567 14.8 L572 9.4 L582 7.9 L589 16.5 L597 21.1 L611 18.1 L618 8.7 L624 3.8 L636 9.2 L646 18.6 L653 13.6 L659 9.8 L669 8.5 L679 16.5 L689 18.6 L696 14.0 L702 9.9 L710 10.1 L722 10.3 L734 10.0 L749 11.2 L759 16.1 L765 14.1 L774 10.1 L782 11.4 L790 11.6 L804 9.7 L818 16.0 L828 12.2 L840 18.5 L845 12.3 L851 9.7 L861 19.6 L876 10.7 L890 16.7 L899 10.6 L914 11.9 L925 9.4 L934 17.3 L948 17.4 L957 10.0 L962 11.9 L976 18.9 L990 17.0 L995 11.2 L1003 18.9 L1010 15.1 L1019 9.6 L1026 11.5 L1032 10.0 L1043 9.1 L1056 17.8 L1066 17.6 L1071 17.7 L1078 7.9 L1092 13.2 L1106 18.2 L1117 13.1 L1130 11.5 L1137 7.8 L1150 8.3 L1160 14.4 L1168 8.9 L1174 10.3 L1186 9.2 L1197 8.6 L1200 18.7 L1200 28Z'/%3E%3C/svg%3E") repeat-x center bottom; background-size: 1200px 28px;
}

/* ---------- Tarjetas de producto: cuadradas, nombre centrado ---------- */
.product-image-shell { border-radius: 0 !important; aspect-ratio: var(--proporcion-foto) !important; background: #fff !important; border: 1px solid #ececec !important; }
.product-image-shell span[class*="left-3"].bg-neutral-900 { background: var(--contraste) !important; }
article h4 { font-family: var(--t-texto); text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 500; line-height: 1.25; text-align: center; }
article > button { text-align: center !important; width: 100%; }
article > button > div { align-items: center; }
article > button > div > div:last-child { justify-content: center; }
article > button p { text-align: center; }
article > button span.text-xs { font-family: var(--t-texto); font-size: 16px; font-weight: 600; }

/* ---------- Productos sin stock: se mantiene el color, con desenfoque ---------- */
.tarjeta-agotada .cs-slide { filter: blur(var(--desenfoque)); } 
.tarjeta-agotada .cs-slide.on { opacity: .9; }
.tarjeta-agotada .product-image-shell span[class*="left-3"] { background: var(--rosa-agotado) !important; }
.tarjeta-agotada > button, .tarjeta-agotada h4 { color: #9b9488; }

/* ---------- Flor del pie de página ---------- */
footer > svg.pointer-events-none { opacity: var(--opacidad-flor) !important; }

/* ---------- Celular: grilla más ajustada y menú lateral completo ---------- */
@media (max-width: 767px) {
  #grilla-productos { column-gap: 8px !important; }
  article h4 { font-size: 15px; }
  #sidebar-content { width: 92% !important; max-width: 420px !important; }
}
#sidebar-content .overflow-y-auto { text-transform: none; letter-spacing: 0 !important; font-family: var(--t-texto); }
#sidebar-content .overflow-y-auto > button, #sidebar-categorias button.flex-1 {
  width: 100%; font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 14px 0; border-bottom: 1px solid #ececec;
}
#sidebar-categorias > div { border-bottom: 1px solid #ececec !important; }
#sidebar-categorias button.flex-1 { border-bottom: 0; }
#sidebar-categorias [id^="tipos-"] button { font-family: var(--t-texto); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #555; }
#sidebar-content .border-t .text-xs { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- Pie de página: redes sociales y columnas desplegables en el celular ---------- */
#footer-redes a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #d4d4d4; color: #171717; font-size: 17px; transition: background .2s, color .2s, border-color .2s; }
#footer-redes a:hover { background: #E3050F; border-color: #E3050F; color: #fff; }
@media (max-width: 767px) {
  footer .grid.grid-cols-1 { row-gap: 0 !important; }
  footer .grid > div:first-child { margin-bottom: 24px; }
  footer .pie-acordeon { border-bottom: 1px solid #e5e5e5; }
  footer .pie-acordeon h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 !important; padding: 14px 0; cursor: pointer; font-size: 15px; }
  footer .pie-acordeon h4::after { content: "+"; font-family: var(--t-texto); font-size: 22px; font-weight: 400; }
  footer .pie-acordeon:not(.cerrado) h4::after { content: "\2013"; }
  footer .pie-acordeon.cerrado > :not(h4) { display: none; }
  footer .pie-acordeon:not(.cerrado) > :last-child { padding-bottom: 16px; }
}

/* ---------- Carrusel de fotos en la tarjeta: flechas, avance automático y puntos ---------- */
.cs-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity .5s ease; z-index: 2; pointer-events: none; }
.cs-slide.on { opacity: 1; }

/* ---------- Tarjetas más grandes: 4 por fila en computadora, 2 en celular ---------- */
#grilla-productos, .grilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 768px) { #grilla-productos, .grilla-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 22px !important; } }
@media (min-width: 1024px) {
  #grilla-productos, .grilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 28px !important; }
  #grilla-productos { row-gap: 52px !important; }
  article h4 { font-size: 19px; }
  article > button span.text-xs { font-size: 17px; }
}

/* ---------- Las fotos se ven completas (sin recortes), en las tarjetas y en el detalle del producto ---------- */
.product-image-shell img, .cs-slide, #detalle-imagen { object-fit: contain !important; object-position: center !important; }
#filters-content { border-radius: 0 !important; }

/* ---------- Páginas informativas (términos, privacidad, consultas, contacto) ---------- */
#vista-pagina .pagina-contenedor { max-width: 820px; margin: 0 auto; padding: 40px 20px 90px; }
.pagina-miga { font-family: var(--t-titulo); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 14px; }
.pagina-miga a { color: inherit; text-decoration: none; } .pagina-miga a:hover { color: #E3050F; }
#pagina-titulo { font-family: var(--t-titulo); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; text-transform: uppercase; font-weight: 800; margin: 0 0 6px; }
.pagina-fecha { color: #8a8a8a; font-size: 14px; margin: 0 0 26px; min-height: 1px; }
.pagina-contenido { font-family: var(--t-texto); font-size: 17px; line-height: 1.7; color: #262626; }
.pagina-contenido h2 { font-family: var(--t-titulo); text-transform: uppercase; font-size: 22px; letter-spacing: .03em; margin: 34px 0 8px; padding-top: 14px; border-top: 1px solid #ececec; }
.pagina-contenido p, .pagina-contenido ul, .pagina-contenido ol { margin: 0 0 14px; }
.pagina-contenido ul { list-style: disc; padding-left: 22px; } .pagina-contenido ol { list-style: decimal; padding-left: 24px; } .pagina-contenido li { margin-bottom: 6px; }
.pagina-contenido a { color: #E3050F; text-decoration: underline; text-underline-offset: 3px; }
.pagina-contenido details { border-bottom: 1px solid #ececec; padding: 14px 0; }
.pagina-contenido summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.pagina-contenido details > div { padding-top: 8px; }
.aviso-legal, .nota-pagina { font-size: 14px; line-height: 1.55; color: #525252; background: #f6f6f6; border-radius: 6px; padding: 12px 14px; }
.form-pagina { display: grid; gap: 16px; margin: 20px 0; position: relative; }
.form-pagina label, .form-pagina legend { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form-pagina input:not([type="radio"]), .form-pagina select, .form-pagina textarea { font: inherit; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; width: 100%; }
.form-pagina :focus-visible { outline: 2px solid #171717; outline-offset: 1px; }
.form-pagina fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; } .form-pagina label.radio { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.boton-pagina { background: #171717; color: #fff; padding: 14px 28px; font-family: var(--t-titulo); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; border: 0; cursor: pointer; justify-self: start; }
.boton-pagina:hover:not(:disabled) { background: #E3050F; } .boton-pagina:disabled { opacity: .6; cursor: default; }
.error-pagina { color: #b42318; font-weight: 600; margin: 0; } .ok-pagina { background: #eef6ee; border-radius: 8px; padding: 6px 20px 14px; } [hidden] { display: none !important; }

/* ---------- Aviso de cookies ---------- */
#aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 55; max-width: 720px; margin: 0 auto; background: #171717; color: #fff; padding: 14px 16px; border-radius: 10px; display: flex; gap: 14px; align-items: center; box-shadow: 0 10px 30px #0005; font-size: 14px; line-height: 1.45; }
#aviso-cookies p { margin: 0; } #aviso-cookies a { color: #fff; text-decoration: underline; }
#aviso-cookies button { flex: none; background: #fff; color: #171717; border: 0; padding: 10px 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; cursor: pointer; border-radius: 6px; }
@media (max-width: 767px) { #aviso-cookies { bottom: 76px; flex-direction: column; align-items: stretch; } }

/* ---------- Guía de talles (ventana de ayuda) ---------- */
.guia-talles-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #ececec; margin-bottom: 12px; }

.product-image-shell > button[onclick^="abrirProducto"] { position: relative; z-index: 1; }
/* el botón "Agregar rápido" siempre queda por encima de las fotos */
.product-image-shell > div.absolute { z-index: 12; }

/* ---------- Galería del detalle: miniaturas a la izquierda, foto cuadrada completa a la derecha ---------- */
.galeria-detalle { width: 100%; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.visor-detalle { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; touch-action: pan-y; }
.visor-detalle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; }
#detalle-imagen { cursor: zoom-in; z-index: 1; }
.visor-detalle > img.saliente { pointer-events: none; z-index: 1; cursor: default; }
.visor-detalle > button, .visor-detalle > #detalle-dots { z-index: 6; }
.miniaturas-detalle { display: none !important; }
.mini-detalle { width: 100%; aspect-ratio: 1 / 1; flex: none; background: #fff; border: 1px solid #e5e5e5; padding: 0; cursor: pointer; overflow: hidden; opacity: .85; transition: border-color .2s, opacity .2s; }
.mini-detalle img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini-detalle:hover { opacity: 1; border-color: #171717; }
.mini-detalle.activa { border: 2px solid #171717; opacity: 1; }
.mini-detalle:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }
@media (min-width: 768px) {
  .galeria-detalle { width: 50%; height: 100%; flex-direction: row; align-items: center; justify-content: center; gap: 20px; padding: 32px 28px; }
  .miniaturas-detalle:not(.hidden) { display: flex !important; flex-direction: column; gap: 12px; width: 96px; flex: none; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 2px; scrollbar-width: thin; }
  .visor-detalle { flex: 0 1 calc(100dvh - 100px); width: auto; max-width: calc(100dvh - 100px); }
}