/* Modern chip/pill design for filter items */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .36rem .64rem; /* slightly reduced vertical padding to tighten spacing */
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(6,30,50,0.06);
  box-shadow: 0 4px 12px rgba(6,30,50,0.05);
  color: var(--azul-oscuro);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  -webkit-user-select: none;
  user-select: none;
}
/* Global page background: smooth green → blue gradient applied to body so pages feel unified
   Use a subtle radial light spot to add depth and avoid abrupt color banding on long pages. */
:root{
  /* Blend green with a light blue for a soft, harmonious gradient
     that mixes the mobile green with a touch of blue for desktop. */
  --page-grad-start: rgba(178,233,204,0.90); /* green-blue start (soft) */
  --page-grad-end:   rgba(142,208,235,0.90); /* blue-green end  (soft) */
}
body{
  background-image: radial-gradient(600px 220px at 10% 8%, rgba(255,255,255,0.65), transparent 12%), linear-gradient(180deg, var(--page-grad-start), var(--page-grad-end));
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-font-smoothing:antialiased;
  position: relative; /* allow overlay pseudo-element stacking */
}

/* Global blurred overlay to smooth horizontal seams in the page gradient
   This creates a soft, blurred layer of the same gradient behind content so
   abrupt color bands become visually smoother when scrolling between sections. */
/* expose overlay tuning variables and set new defaults */
:root{
  --bg-overlay-blur: 38px;
  --bg-overlay-opacity: 0.72;
  --bg-overlay-extend: -30%;
}

body::before {
  content: '';
  position: fixed;
  inset: var(--bg-overlay-extend) 0 var(--bg-overlay-extend) 0; /* extend beyond viewport to avoid visible edges */
  background: radial-gradient(900px 360px at 8% 6%, rgba(255,255,255,0.65), transparent 12%), linear-gradient(180deg, var(--page-grad-start), var(--page-grad-end));
  filter: blur(var(--bg-overlay-blur));
  opacity: var(--bg-overlay-opacity);
  pointer-events: none;
  z-index: 0;
  will-change: filter, opacity;
}

/* When a page opts-in (body.bg-blur), increase the overlay blur & opacity
   to make color transitions even smoother for long scrolling pages. */
body.bg-blur::before {
  filter: blur(calc(var(--bg-overlay-blur) * 1.25));
  opacity: min(1, calc(var(--bg-overlay-opacity) + 0.06));
}

/* Ensure main surface elements render above the blurred overlay */
.contenido, header, .catalogo, .hero-nuevo, .site-footer {
  position: relative;
  z-index: 1;
}

/* Ensure main page containers use transparent backgrounds so the body gradient shows through
   and avoid panels with full-bleed backgrounds that create visible seams. */
.contenido, .panel-admin, .panel-editar-destacados, .hero-nuevo, .catalogo {
  background: transparent !important;
}

/* Cards and panels keep their own elevated background with subtle gradients to read on top */
.card.producto, .product-card, .panel-formulario, .panel-admin, .panel-editar-destacados {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.96));
}

.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(6,30,50,0.08);
  background: linear-gradient(90deg, rgba(75,182,138,0.15), rgba(74,136,209,0.08));
  color: #054a36; /* darker green for contrast */
}
.chip:focus { outline: 3px solid rgba(75,182,138,0.22); outline-offset: 3px; }
.chip:focus-visible { outline: 3px solid rgba(74,136,209,0.28); outline-offset: 3px; }
.chip.active, .chip[aria-pressed="true"] { background: linear-gradient(90deg,#eefef6,#f0fff9); border-color: #4bb68a; color: #054a36; }
.chip .chip-icon { width: 22px; height: 22px; display:inline-flex; align-items:center; justify-content:center; }
.beneficios-menu .chip { margin-right: .5rem; }

/* SVG icons inside chips should scale and inherit color from the chip */
.chip .chip-icon svg {
  width: auto; /* allow aspect ratio to drive sizing */
  height: 100%;
  max-width: 100%;
  display: block;
  fill: currentColor; /* prefer currentColor so SVG matches chip text color */
  stroke: none;
  overflow: visible; /* prevent clipping */
}
.chip .chip-icon { display:inline-flex; align-items:center; justify-content:center; width: 28px; height: 28px; }
.chip .chip-icon img { width: 100%; height: 100%; object-fit: contain; }
.chip .chip-icon svg [fill="#000"], .chip .chip-icon svg [fill="#000000"] {
  /* allow some icon sources with fixed fills to be neutralized */
  fill: currentColor;
}
.chip .chip-icon img { display:block; width:100%; height:100%; object-fit:contain; }

/* Reduce visual noise for decorative icons (assistive tech hidden) */
.chip .chip-icon[aria-hidden="true"] { pointer-events: none; }

/* Compact variant for dense layouts */
.chip--compact { padding: .24rem .4rem; font-size: .86rem; gap: .3rem; }

/* Subtle tonal outline variant for accessibility */
.chip[aria-pressed="false"] { box-shadow: none; }

/* Mobile / small viewport adjustments for chips and beneficios menu */
@media (max-width: 767px) {
  .beneficios-menu, .search-bar .beneficios-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: center !important;
    align-items: center !important;
    padding: .28rem .5rem !important;
  }
  /* Allow chips to size naturally and wrap on multiple lines */
  .chip {
    font-size: 0.88rem;
    padding: .28rem .5rem;
    gap: .36rem;
  }
  .beneficios-row--desktop .beneficio-item,
  .beneficios-menu .beneficio-item {
    white-space: normal !important;
  }
  .chip .chip-icon { width: 14px; height: 14px; }
}
/* Fonts are loaded centrally in includes/header.php to avoid duplicate requests */
/* Ajuste especial para imágenes verticales en carrusel */
.carrusel-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* quitar panel/fondo */
  padding: 0; /* eliminar padding que mostraba el fondo */
}

.carrusel-slide img {
  display: block;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  /* Hero styles have been moved to a dedicated file: /css/hero.css
     This keeps the hero component styles isolated and prevents cascade
     conflicts. The component include (includes/hero-simple.php) will
     output a single <link> tag to load this stylesheet when the hero
     component is rendered on a page.
  */
    transition: transform 360ms cubic-bezier(.2,.9,.3,1), box-shadow 360ms ease, filter 360ms ease;
    will-change: transform, filter, box-shadow;
    backface-visibility: hidden;
  }

  .product-thumb-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
  }

  /* Skeleton placeholder for loading cards */
  .skeleton-card { display:flex; flex-direction:column; gap:.6rem; align-items:center; padding:1rem; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow:0 6px 20px rgba(6,30,50,0.03); }
  .skeleton-thumb { width: clamp(140px,20vw,180px); height: clamp(140px,20vw,180px); background:linear-gradient(90deg,#f4f4f4,#e9e9e9,#f4f4f4); border-radius:12px; animation: pulse 1.2s infinite; }
  .skeleton-line { width:70%; height:14px; background:linear-gradient(90deg,#f4f4f4,#e9e9e9,#f4f4f4); border-radius:8px; animation: pulse 1.2s infinite; }
  .skeleton-line.short { width:40%; }
  @keyframes pulse { 0% { opacity:1 } 50% { opacity:0.55 } 100% { opacity:1 } }

/* Product card typography and price badge */
.product-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(6,30,50,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-card__body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Price badge used inside product cards */
.card .precio, .card .price { 
  font-weight:700; color:var(--verde-oscuro); font-size:1.18rem; background:linear-gradient(90deg, var(--verde-claro) 0%, var(--azul-claro) 100%); border-radius:12px; padding:0.45em 1.2em; margin-top:0.2em; box-shadow:0 2px 8px rgba(75,182,138,0.08);
}

/* Site footer styles */
.site-footer{
  border-top: 1px solid rgba(6,30,50,0.04);
  padding: 2rem 1rem 1.2rem 1rem;
  color: rgba(7,34,53,0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.02));
}
.site-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:1.6rem;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-brand{ display:flex; flex-direction:column; gap:0.6rem; }
.footer-logo{ width:72px; height:auto; display:block; }
.footer-tag{ margin:0; color:var(--verde-medio); font-weight:700; }
.footer-nav{ display:flex; gap:1rem; align-items:center; }
.footer-nav a{ color:var(--azul-medio); text-decoration:none; font-weight:600; }
.footer-contact{ color:rgba(7,34,53,0.75); font-size:.95rem; }
.footer-contact a{ color:var(--azul-medio); text-decoration:none; }
.footer-social{ display:flex; gap:.6rem; margin-top:.4rem; }
.footer-social-link{ display:inline-block; width:34px; height:34px; border-radius:8px; background:linear-gradient(90deg,var(--azul-medio),var(--verde-medio)); color:#fff; text-align:center; line-height:34px; text-decoration:none; font-weight:700; }
.site-footer-bottom{ max-width:1200px; margin:1rem auto 0 auto; text-align:center; color:rgba(7,34,53,0.6); font-size:.92rem; }

@media (max-width:720px){
  .site-footer-inner{ flex-direction:column; align-items:center; text-align:center; }
  .footer-nav{ justify-content:center; flex-wrap:wrap; }
  .footer-contact{ margin-top:0.8rem; }
}

.product-title {
  font-size: 1rem;
  font-weight: 700;
  color: #073547;
  margin: 0;
  line-height: 1.15;
}

.product-subtitle {
  font-size: .88rem;
  color: #5b6b72;
}

.price-badge {
  margin-left: auto;
  background: linear-gradient(180deg,#fffbf0,#fff2e0);
  color: #b85a00;
  font-weight: 800;
  padding: .28rem .56rem;
  border-radius: 999px;
  border: 1px solid rgba(184,90,0,0.08);
  box-shadow: 0 6px 18px rgba(184,90,0,0.06);
  font-size: .98rem;
  display: inline-flex;
  align-items: center;
}

/* Make sure chip icons and hero backdrop use webkit-prefixed variants for Safari */
.chip, .product-thumb-overlay, .hero-nuevo-cta {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

  .product-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.6rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(6px);

  border-radius:14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(200,255,230,0.18));
  box-shadow: 0 6px 18px rgba(0,200,255,0.07);
  max-width: 60ch;
}
.hero-nuevo-cta{
  margin-top:0.5rem;
  align-self:flex-start;
  display:inline-block;
  background: linear-gradient(90deg,var(--azul-medio),var(--verde-medio));
  color:#fff;
  padding:0.8em 1.8em;
  font-size:1.05rem;
  font-weight:700;
  border-radius:32px;
  box-shadow: 0 8px 26px rgba(0,200,255,0.12);
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
}
.hero-nuevo-cta:hover,
.hero-nuevo-cta:focus{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,200,255,0.18);
  outline: none;
}
.hero-nuevo-imgbox{
  flex:0 0 220px;
  max-width:220px;
  min-width:120px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.hero-nuevo-img{
  width:100%;
  height:100%;
  max-width:220px;
  max-height:220px;
  object-fit:cover;
  border-radius:16px;
  transition: transform 0.45s cubic-bezier(.2,.9,.3,1), box-shadow var(--trans);
  display:block;
}
.hero-nuevo-imgbox:hover .hero-nuevo-img{ transform: scale(1.04); }

.destacado-info h2{
  margin:0;
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  font-weight:900;
  color:var(--azul-oscuro);
  text-shadow: 0 3px 10px rgba(75,182,138,0.12);
}
.destacado-info .descripcion{
  margin:0;
  color:var(--azul-medio);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  line-height:1.45;
  max-height:10.5em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.destacado-info .precio{
  font-weight:800;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color:var(--verde-oscuro);
}
.hero-controles{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:1rem 0 0;
}
.control-btn{
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid var(--verde-medio);
  background:transparent;
  cursor:pointer;
  transition: background var(--trans), border-color var(--trans);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.control-btn.activo,
  .control-btn:hover,
  .control-btn:focus-visible{
  background:var(--verde-medio);
  border-color:var(--azul-medio);
  outline:none;
}
.hero-placeholder{
  padding:2.2rem;
  text-align:center;
  color:var(--azul-medio);
}

.hero-nuevo-cta:focus-visible,
.control-btn:focus-visible,
.hero-nuevo-cta:focus{
  outline: 3px solid rgba(0,200,255,0.14);
  outline-offset:4px;
  box-shadow:0 6px 18px rgba(0,200,255,0.12);
}
/* Mostrar solo el botón hamburguesa en móvil y ocultar menú header-opciones en móvil */
.hamburger {
  display: none !important;
}

@media (max-width: 600px) {
  .hamburger {
    display: block !important;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    z-index: 1200;
  }
  nav.header-opciones {
    display: none !important;
  }
}

/* En pantallas grandes, ocultar el menú hamburguesa y mostrar la navegación */
@media (min-width: 601px) {
  .hamburger {
    display: none !important;
  }
  nav.header-opciones {
    display: flex !important;
  }
}
/* ===================
   ESTILOS HEADER PRINCIPAL
   =================== */
:root {
  --padding-vertical: 1.6rem;
  --padding-horizontal: 2.4rem;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Make header visually transparent so the body gradient flows continuously
     across navigation. Add a subtle glass overlay to keep readability. */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 0; /* remove rounded corners to avoid visible seams */
  padding: 0.4rem var(--padding-horizontal);
  box-shadow: 0 6px 18px rgba(10,30,50,0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-user-select: none;
  user-select: none;
  transition: box-shadow .22s ease, padding .22s ease, background .22s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

header:hover {
  box-shadow: 0 10px 30px rgba(10,30,50,0.08);
}

/* ===========================
   CONSOLIDATED HERO - Productos Recomendados (authoritative copy)
   Copied from estilos-menu-flotante.css to centralize hero styling.
   Keep this as the single source of truth for hero-related styles.
*/

/* HERO DESTACADOS (PRODUCT.PHP) */
.hero-destacados {
  max-width: 1040px;
  margin: 1.1rem auto;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, var(--verde-claro), var(--azul-claro));
  border-radius: calc(var(--radius-main) - 6px);
  box-shadow: 0 10px 30px var(--shadow-soft);
  overflow: visible;
  font-family: var(--font-stack);
}

.hero-destacados-title {
  text-align: center;
  font-family: 'Inter', var(--font-principal);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.8rem);
  margin: 0.9rem auto 0.4rem;
  line-height: 1.04;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--azul-medio), var(--verde-medio));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.hero-destacados-title::after {
  content: '';
  display: block;
  width: 160px;
  height: 14px;
  margin: 12px auto 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(74,136,209,0.98), rgba(75,182,138,0.98));
  box-shadow: 0 10px 28px rgba(75,182,138,0.16);
}

@media (max-width: 920px) {
  .hero-destacados-title { font-size: clamp(1.8rem, 6.2vw, 2.4rem); }
  .hero-destacados-title::after { width: 120px; height: 10px; }
}

@media (max-width: 480px) {
  .hero-destacados-title { font-size: clamp(1.8rem, 7.8vw, 2.2rem) !important; margin-top: 0.8rem; }
  .hero-destacados-title::after { width: 96px !important; height: 8px !important; margin-top: 8px; }
  .modal .hero-destacados-title { font-size: clamp(2.4rem, 9vw, 3.6rem) !important; }
}

/* Modal helpers */
.modal .hero-destacados-title { font-size: clamp(4rem, 9vw, 8rem); }
.modal .modal-dialog, .modal .modal-content { width: 100%; max-width: 1100px; margin: 1.2rem auto; background: transparent; border: none; box-shadow: none; }
.modal .modal-body { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; padding: 1rem; }
@media (min-width: 901px) {
  .modal .modal-body { grid-template-columns: 60% 40%; gap: 1.6rem; align-items: start; }
  .modal .modal-body .carrusel-imagenes { grid-column: 1 / 2; margin: 0; }
  .modal .modal-body .modal-info-clone, .modal .modal-body .info-producto { grid-column: 2 / 3; display: flex; flex-direction: column; justify-content: center; padding-left: 8px; text-align: left; font-family: var(--font-principal); }
}

/* Ensure images scale inside modal carousel */
.modal .modal-body .carrusel-imagenes img, .modal .modal-body .carrusel-imagenes .hero-img, .modal .modal-body .carrusel-imagenes .destacado-imagen img { width: 100%; height: auto; max-width: 100%; object-fit: cover; border-radius: calc(var(--hero-img-radius)); }

/* Variables de colores claros azul y verde */
:root {
  --color-fondo: #e6f0ff; /* azul claro muy suave */
  --color-texto: #1a2a51; /* azul oscuro para texto */
  --color-destacado: #2a7f62; /* verde azulado */
  --color-verde: #4caf50; /* verde claro */
  --color-azul: #64b5f6; /* azul claro */
  --font-primary: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --transition-function: cubic-bezier(0.4, 0, 0.2, 1);
  --radius-main: 12px;
  --hero-img-size-desktop: 380px;
}

/* estilos-hero.css
   Estilos para .hero-simple (slider) — animaciones suaves, paleta elegante
   Incluye: tipografía, layout responsivo, transiciones, focus/accessibility.
*/

/* Variables globales */
:root{
  --bg-page: #e9f6ff; /* canonical page background color (unified) */
  --card-grad-1: #eaf6ff;    /* azul muy suave */
  --card-grad-2: #e9fff2;    /* verde muy suave */
  --accent-blue: #3b82f6;    /* primary */
  --accent-green: #10b981;   /* secondary */
  --muted: #4b5563;
  --text-dark: #072235;
  --glass: rgba(255,255,255,0.75);
  --radius: 14px;
  --gap: 16px;
  --transition: 420ms cubic-bezier(0.2,0.9,0.2,1);
  --slow-transition: 700ms cubic-bezier(0.16,0.84,0.24,1);
  --dot-size: 42px;
  --media-w-desktop: 420px;
  --media-h-desktop: 320px;
  --font-sans: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --shadow-1: 0 12px 36px rgba(5,25,40,0.08);
  --shadow-2: 0 6px 18px rgba(3,40,80,0.06);
  --hs-transition-duration: 520ms;
}

/* Base (optional page) */
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:linear-gradient(180deg,var(--bg-page),#fff 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Contenedor principal */
.hero-simple{
  width:100%;
  max-width:1200px;
  margin:1.25rem auto;
  padding:1rem;
  box-sizing:border-box;
  position:relative;
  color:var(--text-dark);
  --hs-transition-duration: 520ms;
}

/* Heading compacto encima del track */
.hero-simple-heading{
  margin:0 0 0.6rem 0;
  color:var(--muted);
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding-left:6px;
}

/* Track: container flexible (JS manipula transform & widths) */
.hero-simple-track{
  display:flex;
  gap:var(--gap);
  align-items:stretch;
  will-change:transform;
  transition: transform var(--hs-transition-duration) ease;
  touch-action: pan-y;
  /* prevent accidental selection during drag */
  -webkit-user-select: none;
  user-select:none;
}

/* Slide wrapper (JS sets width equal to root width) */
.hero-simple-slide{
  flex:0 0 auto;
  padding:6px 0;
  box-sizing:border-box;
  position:relative;
}

/* Card (.hero) visual style */
.hero{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:stretch;
  background:linear-gradient(180deg,var(--card-grad-1),var(--card-grad-2));
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  min-height:280px;
  transform: translateZ(0);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  will-change: transform, box-shadow;
}

/* Slight elevation for active slide (class .activo set by JS) */
.hero-simple-slide.activo .hero{
  transform: translateY(-6px) scale(1.005);
  box-shadow: 0 22px 48px rgba(6,30,60,0.12);
}

/* Media block: stable size on desktop using CSS variables & aspect-ratio */
.hero-media{
  position:relative;
  width:100%;
  height:220px;
  background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(16,185,129,0.04));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Desktop: fixed width media column */
@media (min-width: 880px){
  .hero{
    flex-direction:row;
    align-items:stretch;
  }
  .hero-media{
    flex:0 0 var(--media-w-desktop);
    height:var(--media-h-desktop);
    border-radius: calc(var(--radius) - 4px);
    margin: 12px;
    box-shadow: var(--shadow-2);
  }
  .hero-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    min-width:0;
  }
}

/* Image handling: prefer picture/img markup from server */
.hero-media img,
.hero-media picture,
.hero-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center center;
  transition: transform var(--slow-transition), filter var(--transition);
  -webkit-user-drag:none;
}

/* Parallax-ish hover/active interactions (only for non-touch) */
@media (hover: hover) and (pointer: fine){
  .hero:hover img{ transform: scale(1.035) translateY(-6px); }
  .hero-media:active img{ transform: scale(1.02) translateY(-2px); }
}

/* Hero body (text area) */
.hero-body{
  padding:14px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Title & subtitle */
.title{
  margin:0;
  font-size:clamp(1.05rem, 2.4vw, 1.6rem);
  line-height:1.1;
  font-weight:800;
  color:var(--text-dark);
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  padding-right:8px;
}

.subtitle{
  margin:0;
  color:rgba(7,34,53,0.8);
  font-size:clamp(0.95rem,1.6vw,1.05rem);
  line-height:1.45;
  max-height:6.4em;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Row with price */
.hero-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.price{
  background: linear-gradient(90deg, rgba(16,185,129,1), rgba(59,130,246,1));
  color:#fff;
  font-weight:800;
  padding:8px 14px;
  border-radius:12px;
  box-shadow: 0 10px 28px rgba(16,185,129,0.18);
  min-width:96px;
  text-align:center;
  font-size:1rem;
}

/* Controls container (dots) - positioned by JS; but provide base style */
.hero-simple-controls{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  z-index:70;
  pointer-events:auto;
  transition: transform var(--transition);
  position:absolute; /* JS will set left/bottom */
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--glass);
  padding:6px 8px;
  border-radius:999px;
  box-shadow:var(--shadow-2);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* Dot button */
.hs-dot{
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  background:transparent;
  border:none;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform 220ms ease, opacity 220ms ease;
  opacity:0.98;
}

/* SVG ring inside dot */
.hs-dot-ring{ width:24px; height:24px; display:block; }
.hs-dot-circle{
  stroke: rgba(7,34,53,0.12);
  stroke-linecap:round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60; /* JS animates to 0 during autoplay */
  transition: stroke 220ms linear;
  transform-origin:center;
}

/* Active dot state */
.hs-dot.active .hs-dot-circle{
  stroke: var(--accent-green);
  stroke-dashoffset: 0; /* if JS is not present fallback */
}
.hs-dot:focus-visible, .hs-dot:hover{ transform: scale(1.06); outline:none; }

/* Arrows */
.hs-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background: #fff;
  border:1px solid rgba(7,34,53,0.06);
  box-shadow:var(--shadow-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:80;
  transition: transform 200ms ease, background 260ms ease, color 200ms ease;
  color:var(--text-dark);
  font-size:1.15rem;
}
.hs-prev{ left:8px; }
.hs-next{ right:8px; }

.hs-arrow:hover{
  transform:translateY(-50%) scale(1.04);
  background: linear-gradient(90deg,var(--accent-blue),var(--accent-green));
  color:#fff;
  box-shadow: 0 20px 44px rgba(6,30,60,0.12);
}

/* Accessibility focus outlines */
.hs-arrow:focus-visible, .hero:focus-visible, .hs-dot:focus-visible {
  outline:3px solid rgba(16,185,129,0.18);
  outline-offset:4px;
  border-radius:10px;
}

/* Single slide layout adjustments */
.hero-simple--single .hero-simple-controls,
.hero-simple--single .hs-arrow{ display:none; }
.hero-simple--single .hero-simple-track{ gap:0; }

/* Mobile specific adjustments */
@media (max-width:879px){
  .hero{
    flex-direction:column;
  }
  .hero-media{
    height:240px;
    border-radius:calc(var(--radius) - 4px);
    margin:0;
  }
  .hero-body{ padding:16px; }
  .hero-simple-controls{
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
  }
  .hs-arrow{ display:none; } /* hide arrows on small screens for cleaner UI */
  .price{ font-size:1.05rem; padding:10px 14px; }
  .title{ white-space:normal; overflow:hidden; text-overflow:ellipsis; }
}

/* Small tweaks for very narrow screens */
@media (max-width:420px){
  :root{ --dot-size: 36px; }
  .hero-media{ height:200px; }
  .hero-simple{ padding:10px; }
  .hero-body{ gap:8px; padding:12px; }
}

/* Entry animations (subtle) */
@keyframes hs-fade-up {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.hero, .hero-media, .hero-body { animation: hs-fade-up 420ms cubic-bezier(.2,.9,.2,1) both; }

/* Small utility */
.hidden-visually{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }

/* Ensure images don't trigger layout shift if width/height attributes are present
   (server markup in PHP outputs width/height and data-orig if available). */
.hero-media img[width][height]{
  max-width:100%;
  height:auto;
  display:block;
  /* When JS replaces with responsive picture, object-fit preserves crop */
  object-fit:cover;
}

/* Contenedor principal hero */
.hero-simple {
  position: relative;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-primary);
  overflow: hidden;
  border-radius: var(--radius-main);
  padding: 1.2rem 1rem 1.5rem 1rem;
  max-width: 1100px;
  margin: 2rem auto;
  box-shadow: 0 6px 18px rgba(38, 79, 160, 0.12);
  animation: fadeInSmooth 1s ease forwards;
}

:root{
  /* Hero-specific variables: rely on the canonical --bg-page defined earlier */
  --hero-accent-1: #64b5f6;
  --hero-accent-2: #40c184;
  --hero-accent-3: #b8f0d0;
  --text-dark: #0f2b4c;
  --white: #ffffff;
  --radius: 16px;
  --shadow-1: 0 10px 30px rgba(15,43,76,0.12);
  --shadow-2: 0 18px 40px rgba(64,193,132,0.14);
  --hero-img-w: 420px;
  --hero-img-h: 320px;
  --gap: 1.6rem;
  --ease: cubic-bezier(.2,.9,.3,1);
}
/* Hero styles were moved to a dedicated file to avoid cascade conflicts.
  See: /catalogonew/css/hero.css
  The canonical .hero / .hero-simple rules now live there and are loaded
  by the hero include when the component appears on a page.
*/

.hero{width:100%;max-width:1120px;border-radius:calc(var(--radius) + 4px);overflow:hidden;box-shadow:var(--shadow-1);display:flex;gap:var(--gap);align-items:stretch;background:radial-gradient(600px 200px at 10% 10%, rgba(100,181,246,0.08), transparent 10%), linear-gradient(135deg, rgba(100,181,246,0.15), rgba(64,193,132,0.08));padding:1.25rem;transition:box-shadow .35s var(--ease), transform .35s var(--ease)}
.hero:focus-within,.hero:hover{box-shadow:var(--shadow-2);transform: translateY(-4px)}
.hero-media{flex:0 0 var(--hero-img-w);height:var(--hero-img-h);min-width:var(--hero-img-w);max-width:var(--hero-img-w);border-radius:calc(var(--radius) - 2px);overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), conic-gradient(from 120deg at 30% 40%, rgba(100,181,246,0.08), rgba(64,193,132,0.06));box-shadow:0 12px 40px rgba(15,43,76,0.06);display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;border: 1px solid rgba(255,255,255,0.12)}
.hero{align-items:stretch}
.hero-body{min-width:0}
.title{overflow-wrap:break-word;word-break:break-word;display:block}
.subtitle{display:block;max-height:8.8em;overflow:hidden;text-overflow:ellipsis}
.price{flex:0 0 auto}

/* Ensure hero items never overflow the container and wrap safely on smaller widths */
@media (max-width:1120px){
  .hero-nuevo{ flex-direction:column; align-items:center; padding:1rem; gap:0.9rem; }
  .hero-nuevo-content{ text-align:center; align-items:center; }
  .hero-nuevo-imgbox{ width: var(--hero-img-size-mobile); aspect-ratio:1/1; }
  /* Force two columns on narrow screens for denser product layout */
  .catalogo{ grid-template-columns: repeat(2, 1fr) !important; gap:0.9rem; }
  .product-thumb{ width:120px; height:120px; }
  .hero-body{padding-left:0.6rem}
}

/* ===== Hero conflict resolver =====
   Ensure the extracted hero styles in /css/hero.css take precedence and
   neutralize any legacy background/border that caused visible white boxes.
*/
.hero, .hero-media, .hero-simple { background: transparent !important; border: none !important; }
.hero { box-shadow: none !important; }
.hero-media { box-shadow: none !important; }
/* If the external hero.css is present, prefer its shadow and spacing */
@media (min-width:1px) {
  .hero { padding: 0 !important; }
}

/* Desktop polish: enhance layout for large monitors */
@media (min-width:1200px){
  /* widen main content area */
  .contenido{ max-width: 1400px; margin: 2.8rem auto; padding: 0 2rem; }

  /* more columns for catalog and slightly larger gaps */
  .catalogo{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:2rem; }

  /* make product cards more spacious on desktop */
  .card.producto{ padding:2.2rem 1.4rem; border-radius:24px; box-shadow:0 10px 28px rgba(38,79,160,0.06); }

  /* larger product thumbnails */
  .product-thumb{ width: clamp(160px, 16vw, 240px); height: clamp(160px, 16vw, 240px); }

  /* hero adjustments: larger media area on wider screens */
  .hero{ max-width: 1280px; padding:1.6rem; gap:2rem }
  .hero-media{ --hero-img-w: 540px; --hero-img-h: 420px; flex:0 0 var(--hero-img-w); height:var(--hero-img-h); min-width:var(--hero-img-w); }
}

@media (min-width:1400px){
  /* ultra-wide polish: center and expand */
  .contenido{ max-width: 1600px; padding: 0 3rem }
  .catalogo{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:2.4rem }
  .card.producto{ min-height: 360px; }
  .hero{ max-width: 1400px; padding:2rem; gap:2.4rem }
  .hero-media{ --hero-img-w: 640px; --hero-img-h: 480px; flex:0 0 var(--hero-img-w); height:var(--hero-img-h); }
  /* position controls relative to the larger hero */
  .hero-simple-controls{ bottom: 22px !important; }
}
@media (max-width:720px){
  .hero{flex-direction:column;gap:0.8rem;padding:0.9rem}
  .hero-media{width:100%;flex:0 0 auto;height:220px;min-width:0;max-width:100%}
  .hero-body{padding:0}
  .title{font-size: clamp(1.3rem, 5.5vw, 1.8rem)}
  .subtitle{font-size:0.98rem}
  .price{order:-1;width:100%;text-align:center}
  .meta{justify-content:center}
}

/* On very large screens limit hero image so text has room and doesn't wrap awkwardly */
@media (min-width:1400px){
  .hero-media{flex:0 0 calc(var(--hero-img-w) - 40px);max-width:calc(var(--hero-img-w) - 40px)}
  .hero-body{padding-right:1.2rem}
}

/* ===== Ajustes para que el hero se adapte siempre al contenedor ===== */
/* Hacer que los slides ocupen la misma altura que el bloque de imagen y que el texto se distribuya correctamente */
.hero, .hero a{box-sizing:border-box;display:flex;align-items:stretch}
.hero-simple-track .hero-simple-slide{align-items:stretch}
.hero-simple-slide{box-sizing:border-box;display:flex;align-items:stretch;padding:0;border-radius:0;background:transparent}
.hero-media, .hero-simple-img{flex-shrink:0}
.hero-media img, .hero-simple-img img{max-width:100%;height:100%;object-fit:cover;display:block}
.hero-body{display:flex;flex-direction:column;justify-content:space-between;min-width:0}

/* Establecemos una altura mínima de slide basada en la altura de la imagen para evitar recortes */
.hero-simple-slide{min-height: calc(var(--hero-img-h, 220px) + 24px)}

/* Ajustes responsive: en pantallas más pequeñas la altura se reduce y el layout pasa a columna */
@media (max-width:940px){
  .hero-simple-slide{min-height: calc(var(--hero-img-h, 220px) + 12px)}
  .hero-media{max-width:44%;flex:0 0 min(360px,44%);height:auto}
}
@media (max-width:720px){
  .hero-simple-slide{min-height: auto;flex-direction:column}
  .hero{flex-direction:column}
  .hero-media{width:100%;flex:0 0 auto;height:220px;min-width:0;max-width:100%}
  .hero-body{padding:0.4rem 0}
  .title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .subtitle{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* Asegurar que los controles siempre estén encima y no tapen el contenido */
.hero-simple-controls{z-index:90;pointer-events:auto}
.hs-arrow{z-index:95}

/* Desktop tweaks: center the active slide and limit hero width so image doesn't overflow */
@media (min-width:1100px){
  .hero-simple { max-width: 1080px; margin-left: auto; margin-right: auto }
  .hero-simple-track { display:flex; align-items:stretch; }
  .hero-simple-slide { max-width: 100%; margin: 0 auto; padding: 1.25rem; }
  .hero-media { max-width: 480px; flex: 0 0 44%; }
  .hero-body { flex: 1 1 56%; padding-left: 1.6rem }
  .hs-arrow { top: 50%; transform: translateY(-50%); }
}

/* Desktop: place the indicators over the image area so they don't overlap the text */
@media (min-width:1100px) {
  /* compute left offset so controls sit near the left image section */
  .hero-simple-controls {
    left: calc((100% - var(--hero-img-w, 420px)) / 2 + 12px) !important;
    bottom: 18px !important;
    transform: none !important;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    pointer-events: auto;
  }

  /* slightly smaller, less intrusive dots when over image */
  .hero-simple-controls .hs-dot { width: 12px !important; height: 12px !important; background: rgba(255,255,255,0.96); border: 1px solid rgba(8,48,74,0.06); box-shadow: 0 6px 18px rgba(8,48,74,0.06); }
  .hero-simple-controls .hs-dot .hs-dot-ring { width: 18px; height: 18px; }

  /* ensure the text and price remain visually above controls */
  .hero-media, .hero-body, .hero-body .title, .hero-body .subtitle, .hero-body .price { z-index: 40; position: relative; }

  /* nudge price a bit so it's not vertically aligned with dots */
  .hero-body .price { margin-top: 0.6rem; }
}

/* Desktop centering and containment fixes
   Ensure the sliding track centers slides when there's extra space and
   the internal .hero box is constrained so title/price stay visible and
   no large empty area appears on the right. */
@media (min-width:1100px) {
  .hero-simple-track { justify-content: center; }
  .hero-simple-slide { display: flex; justify-content: center; }
  /* Make the inner hero card fill the slide but never exceed the
     hero container width (prevents large empty gaps on wide screens) */
  .hero-simple-slide > .hero { width: 100%; max-width: 1080px; box-sizing: border-box; }
  /* Ensure images and body stay inside the constrained hero */
  .hero-simple-slide .hero { display: flex; gap: var(--gap); align-items: stretch; }
}

/* Move arrows inside hero container to avoid them being cut off on sides */
.hs-prev { left: 14px }
.hs-next { right: 14px }

/* Desktop: make indicators smaller and centered under the slide */
@media (min-width:900px){
  .hero-simple-controls{bottom:18px;left:50%;transform:translateX(-50%);padding:6px 10px}
  .hs-dot{width:14px;height:14px}
}

/* Mobile tweaks: compress gaps and make price compact */
@media (max-width:720px){
  .hero{padding:0.8rem;gap:0.6rem}
  .hero-row{gap:0.5rem}
  .price{padding:8px 10px;font-size:0.95rem}
  .meta{gap:0.6rem}
  .hero-simple-controls{bottom:8px}
  .hs-dot{width:14px;height:14px}
  .hs-arrow{width:40px;height:40px;min-width:40px;min-height:40px}
}

.hero-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .6s var(--ease), filter .35s var(--ease);transform-origin:center;will-change:transform}

/* Compact & polished mobile hero overrides */
@media (max-width: 520px) {
  .hero-simple {
    padding: 0.6rem !important;
    margin: 0.6rem auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(10,30,60,0.06) !important;
    overflow: hidden;
  }
  .hero-simple-track {
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-simple-slide {
    padding: 6px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero-media {
    height: 140px !important;
    border-radius: 10px !important;
    overflow: hidden;
  }
  /* Ensure desktop filter HUD shows as a horizontal, fixed-friendly bar */
  @media (min-width: 768px) {
    .beneficios-row--desktop {
      display: block !important;
      position: relative; /* JS enables sticky via class; fallback is relative */
      /* Keep the bar below the header by default; JS will raise z-index when fixed */
      z-index: 999 !important;
      background: #ffffff; /* neutral background for the bar */
      border-top: 1px solid rgba(6,30,50,0.04);
      padding: .22rem 0 !important; /* slightly larger so chips aren't cramped */
      margin-top: 0 !important; /* remove extra gap between header/search */
      min-height: 48px; /* ensure a comfortable hit area */
    }
    /* When JS enables sticky, use CSS sticky positioning tied to header height variable */
    .beneficios-row--desktop.sticky-enabled {
      position: sticky !important;
      top: var(--header-height, 56px) !important; /* fallback header height when var missing */
      left: 0;
      right: 0;
      width: 100%;
      box-shadow: 0 6px 18px rgba(6,30,50,0.04);
    }
    .beneficios-row--desktop .beneficios-menu {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: .6rem !important; /* balanced spacing */
      align-items: center !important;
      justify-content: center !important; /* center the items inside the bar */
      overflow-x: auto !important;
      padding: .18rem .8rem !important; /* comfortable vertical padding and horizontal breathing room */
      max-width: 1100px !important; /* slightly narrower for better centering */
      margin: 0 auto !important;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .beneficios-row--desktop .beneficio-item { flex: 0 0 auto !important; }

    /* When the bar is fixed, add a subtle shadow to separate from header */
    .beneficios-row--desktop[style*="position: fixed"] { box-shadow: 0 8px 24px rgba(6,30,50,0.06); }
  }
  .hero-body {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .title {
    font-size: clamp(1rem, 4.2vw, 1.15rem) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .catalogo-filter-title {
    text-align: center;
    color: var(--azul-oscuro);
    margin-top: -1rem;
    margin-bottom: 1.6rem;
    font-size: 1rem;
    opacity: 0.95;
  }
  .subtitle {
    font-size: 0.92rem !important;
    color: rgba(15,43,76,0.78) !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-height: 4.5em !important;
  }
  .price {
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
    min-width: 84px !important;
  }
  .hs-dot { width: 12px !important; height: 12px !important; }
  .hero-simple-controls { bottom: 8px !important; padding: 6px !important; }
  .hs-arrow { width: 38px !important; height: 38px !important; }
  .hs-prev { left: 8px !important; }
  .hs-next { right: 8px !important; }
  /* Prevent accidental horizontal overflow from rounding or gap calculations */
  .hero-simple, .hero-simple-track, .hero-simple-slide { overflow-x: hidden !important; }
}

/* Dot progress indicator: SVG ring */
.hs-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.hs-dot .hs-dot-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hs-dot .hs-dot-circle { stroke: rgba(8,48,74,0.14); stroke-linecap: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.hs-dot.active .hs-dot-circle { stroke: var(--accent-green); }

/* Ensure hero content is always visually above controls/dots so nothing covers title/price */
.hero-media, .hero-body, .hero-body .title, .hero-body .subtitle, .hero-body .price {
  position: relative;
  z-index: 40; /* higher than dots/arrows */
}

/* Make controls less intrusive: slightly smaller, translucent, and sit under content */
.hero-simple-controls { z-index: 22 !important; }
.hs-dot { width: 12px; height: 12px; background: rgba(255,255,255,0.88); border: 1px solid rgba(8,48,74,0.06); box-shadow: 0 6px 14px rgba(8,48,74,0.06); }
.hs-dot .hs-dot-ring { width: 18px; height: 18px; }
.hs-dot .hs-dot-circle { stroke-width: 2.2; }

/* Make arrows discreet and ensure they don't overlap text blocks */
.hs-arrow { z-index: 24 !important; background: rgba(255,255,255,0.92); border: 1px solid rgba(8,48,74,0.06); }

/* On small screens keep controls inside but avoid overlapping price by nudging them down */
@media (max-width: 940px) {
  .hero-simple-controls { bottom: 8px !important; }
}


.hero-media:hover img{ transform: scale(1.04) }

/* ==========================
   Product page hero polish
   Targets hero rendered after product detail (.detalle-producto + .hero-simple)
   This gives product pages a more prominent featured-section look without
   changing other hero instances site-wide.
   ========================== */
.detalle-producto + .hero-simple {
  --hero-img-w: 520px;
  --hero-img-h: 420px;
  padding: 1.6rem 1.2rem;
  margin-top: 1.2rem;
  background: linear-gradient(135deg, rgba(6,48,74,0.02), rgba(64,193,132,0.04));
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 18px 48px rgba(6,48,74,0.08);
}

.detalle-producto + .hero-simple .hero {
  padding: 1.2rem;
  gap: 1.6rem;
  align-items: stretch;
}

.detalle-producto + .hero-simple .hero-media {
  flex: 0 0 var(--hero-img-w);
  min-width: var(--hero-img-w);
  height: var(--hero-img-h);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: 0 20px 46px rgba(15,43,76,0.08);
  border: 1px solid rgba(255,255,255,0.05);
}

.detalle-producto + .hero-simple .hero-body { padding: 0 0.6rem; display:flex; flex-direction:column; justify-content:center }

.detalle-producto + .hero-simple .title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.03; }
.detalle-producto + .hero-simple .subtitle { font-size: 1.02rem; color: rgba(15,43,76,0.78); }

.detalle-producto + .hero-simple .price {
  font-size: 1.15rem;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(64,193,132,0.12);
}

/* Make dots and arrows less intrusive over the product hero */
.detalle-producto + .hero-simple .hero-simple-controls { bottom: 18px !important; left: auto !important; right: 20px !important; }
.detalle-producto + .hero-simple .hs-arrow { background: rgba(255,255,255,0.96); box-shadow: 0 6px 18px rgba(8,48,74,0.06); }

/* Responsive tweaks for narrow screens on product pages */
@media (max-width: 920px) {
  .detalle-producto + .hero-simple { --hero-img-w: 360px; --hero-img-h: 300px; padding: 1rem; }
  .detalle-producto + .hero-simple .hero { flex-direction: column; gap: 0.8rem; }
  .detalle-producto + .hero-simple .hero-media { width: 100%; height: 260px; min-width: 0; }
  .detalle-producto + .hero-simple .price { width: auto; order: -1; text-align: left; }
}

@media (max-width: 520px) {
  .detalle-producto + .hero-simple { padding: 0.6rem; margin: 0.6rem auto; }
  .detalle-producto + .hero-simple .title { font-size: clamp(1.15rem, 4.5vw, 1.4rem); }
  .detalle-producto + .hero-simple .subtitle { font-size: 0.95rem; }
  .detalle-producto + .hero-simple .hero-media { height: 160px; }
}
/* Legacy hero/simple styles removed — using the new hero design at EOF */

/* Imagen del slide */
.hero-simple-img {
  flex: 0 0 40%;
  max-height: var(--hero-img-size-desktop);
  border-radius: var(--radius-main);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(74,169,108,0.18);
  animation: zoomInSmooth 1s ease forwards;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow 0.4s ease;
}
.hero-simple-img:hover {
  box-shadow: 0 18px 40px rgba(74,169,108,0.35);
}
.hero-simple-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
  border-radius: var(--radius-main);
}
.hero-simple-img img:hover {
  transform: scale(1.05);
}

/* Meta texto del slide */
.hero-simple-meta {
  flex: 1 1 60%;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: slideInRightSmooth 1s ease forwards;
  color: var(--color-texto);
}

/* Precio destacado */
.hs-price {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: 0.8px;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--hs-accent-1), var(--hs-accent-3));
  box-shadow: 0 10px 26px rgba(74,169,108,0.2);
  -webkit-user-select: none;
  -webkit-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Título dentro del slide */
.hs-title {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--color-destacado);
  text-transform: capitalize;
  line-height: 1.2;
}

/* Descripción */
.hs-desc {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--color-texto);
  line-height: 1.5;
  max-height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: text;
  -webkit-user-select: text;
  -webkit-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}

/* Fondo alternado para slides */
.hero-simple-slide:nth-child(odd) {
  background: linear-gradient(180deg, #d7e8ffcc, #c0daffdd);
}
.hero-simple-slide:nth-child(even) {
  background: linear-gradient(180deg, #c0f0d9cc, #a0e2b3dd);
}
.hero-simple-slide:nth-child(3n) {
  background: linear-gradient(180deg, #def7f3cc, #b6f0e7dd);
}

/* Indicadores de control */
.hero-simple-controls {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7rem;
  z-index: 15;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Puntos de control */
.hs-dot {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid rgba(42, 127, 98, 0.6);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.9;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(42, 127, 98, 0.25);
  transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hs-dot.active,
.hs-dot:hover {
  background: var(--color-verde);
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 8px 28px rgba(46, 143, 86, 0.3);
}

/* Enlaces */
.hero-simple-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hero-simple-link:hover {
  color: var(--hs-accent-2);
}
@media (max-width: 767px) {
  .hero-simple-link {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-simple-meta {
    padding-left: 0;
  }
}

/* Animaciones suaves */
@keyframes fadeInDownSmooth {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInSmooth {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideInRightSmooth {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes zoomInSmooth {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Flechas de navegación */
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffffee, #d0e7ffee);
  border: 1.5px solid var(--color-azul);
  box-shadow: 0 10px 26px rgba(42, 127, 98, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
  color: var(--color-azul);
  font-weight: 700;
  -webkit-user-select: none;
  -webkit-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.hs-prev {
  left: 10px;
}
.hs-next {
  right: 10px;
}
.hs-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  background: linear-gradient(180deg, var(--color-azul), var(--color-verde));
  color: #fff;
  box-shadow: 0 12px 30px rgba(46, 143, 86, 0.38);
}
.hs-arrow:focus {
  outline: 3px solid var(--color-verde);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(74, 169, 108, 0.5);
}

/* Accesibilidad */
.hs-dot:focus-visible,
.hs-arrow:focus-visible,
.hero-simple-link:focus-visible {
  outline: 3px solid var(--color-verde);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(74, 169, 108, 0.3);
}

/* Responsive */
@media (min-width: 768px) {
  .hero-simple {
    max-height: 420px;
  }
  .hero-simple-slide {
    flex-direction: row;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .hero-simple-slide {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  .hero-simple-img {
    width: 100%;
    max-height: 260px;
    margin-bottom: 1rem;
  }
  .hero-simple-meta {
    animation: fadeInSmooth 1s ease forwards;
    padding-left: 0;
  }
}
.hero-placeholder { padding: 1.2rem; text-align: center; color: var(--azul-medio); }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes zoomIn { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
.hs-dot:focus-visible, .hs-arrow:focus-visible, .hero-simple-link:focus-visible { outline: 3px solid var(--color-verde); outline-offset: 2px; box-shadow: 0 0 8px rgba(106,191,105,0.25); }
.hs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 48px; /* larger hit area */
  min-height: 48px;
  width: 48px;
  height: 48px;
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.96));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  display: flex; align-items:center; justify-content:center; cursor:pointer; z-index: 60;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
  opacity: 1;
}
.hs-prev { left: 8px; }
.hs-next { right: 8px; }
.hs-arrow:hover { transform: translateY(-50%) scale(1.06); opacity: 1; }
.hs-arrow:focus, .hs-dot:focus { outline: 3px solid rgba(34,119,255,0.14); outline-offset: 2px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.hero-simple--single .hero-simple-controls, .hero-simple--single .hs-arrow { display: none !important; }
.hero-simple .hs-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .hs-arrow { background: rgba(255,255,255,0.92); border: 0; box-shadow: 0 6px 14px rgba(0,0,0,0.06); } }

@media (max-width: 720px) {
  .hero-simple-controls { right: 10px; left: auto; transform: none; bottom: 10px; padding: 8px; }
  .hero-simple-controls { flex-direction: row; }
  .hs-dot { width: 18px; height: 18px; }
  .hs-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .hs-prev { left: 6px; }
  .hs-next { right: 6px; }
}

/* Slider container and destacado-slide variants */
.hero-slider { position: relative; border-radius: calc(var(--radius-main) - 6px); overflow: hidden; height: auto; min-height: 260px; }
.destacado-slide { position: absolute; inset: 0; display: flex; align-items: center; gap: 2rem; padding: 2rem; box-sizing: border-box; opacity: 0; transform: translateY(8px) scale(.995); transition: opacity 520ms cubic-bezier(.2,.9,.3,1), transform 520ms cubic-bezier(.2,.9,.3,1), filter 420ms ease; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,250,0.92)); border-radius: calc(var(--radius-main) - 6px); }
.destacado-slide.activo { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; position: relative; filter: drop-shadow(0 18px 36px rgba(28,59,102,0.06)); }
.destacado-slide.in-view { transition: transform 420ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease; }
.destacado-slide { will-change: opacity, transform; transition: opacity 520ms var(--transition-function), transform 520ms var(--transition-function), filter 520ms ease; }
.destacado-slide.activo { opacity: 1; transform: translateY(0) scale(1); z-index: 2; }
.destacado-slide:not(.activo) { opacity: 0; transform: translateY(8px) scale(0.995); z-index: 1; pointer-events: none; }
.destacado-imagen img { transition: transform 620ms var(--transition-function), opacity 520ms ease, filter 520ms ease; transform-origin: center center; }
.destacado-slide.activo .destacado-imagen img { transform: scale(1.04) translateZ(0); opacity: 1; filter: saturate(1.06) contrast(1.02); }
.destacado-slide:not(.activo) .destacado-imagen img { transform: scale(0.995); opacity: 0.92; filter: saturate(0.98) contrast(0.98); }
.hero-controles .control-btn { transition: transform 260ms var(--transition-function), background 260ms ease, box-shadow 260ms ease; }
.hero-controles .control-btn:hover, .hero-controles .control-btn:focus { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.08); }
.destacado-slide.activo .destacado-info .precio { transition-delay: 0.06s; }
.destacado-slide.activo .destacado-info h2 { transition-delay: 0.12s; }
.destacado-slide.activo .destacado-info .descripcion { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) { .destacado-slide, .destacado-imagen img, .hero-controles .control-btn { transition: none !important; animation: none !important; transform: none !important; } }
.hero-slider { position: relative; }
.hero-slider .destacado-link { display:flex; gap:1rem; align-items:center; text-decoration:none; color:inherit; }
.hero-slider .destacado-info { display:flex; flex-direction:column; gap:0.6rem; }
.destacado-imagen { flex: 0 0 auto; width: clamp(240px, 28vw, var(--hero-img-size-desktop)); max-width: 40%; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(75,182,138,0.16); }
.destacado-imagen img { width: 100%; height: 100%; object-fit: cover; display:block; }
.destacado-info { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; min-width: 0; }
.destacado-info .precio, .destacado-info h2, .destacado-info .descripcion { opacity: 0; transform: translateX(14px); transition: transform 420ms cubic-bezier(.2,.9,.3,1), opacity 360ms ease; }
.destacado-info h2 { transition-duration: 480ms; }
.destacado-info .descripcion { transition-duration: 520ms; }
.destacado-slide.activo .destacado-info .precio { opacity: 1; transform: translateX(0); transition-delay: 0.06s; }
.destacado-slide.activo .destacado-info h2 { opacity: 1; transform: translateX(0); transition-delay: 0.12s; }
.destacado-slide.activo .destacado-info .descripcion { opacity: 1; transform: translateX(0); transition-delay: 0.18s; }


/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  padding: 0.2rem 0.6rem;
  border-radius: 14px;
  /* Remove solid white background so the header gradient shows through
     but keep a subtle translucent 'floating' look using backdrop-filter */
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(12,40,60,0.08);
  transition: box-shadow var(--transition-suave), transform var(--transition-suave);
}
.logo:hover,
.logo:focus-within {
  box-shadow: 0 12px 36px rgba(12,40,60,0.12);
  transform: translateY(-2px) scale(1.02);
  outline: none;
}

.logo img {
  height: 56px;
  width: auto;
  border-radius: 12px;
  border: 2px solid rgba(75,182,138,0.28);
  background: transparent;
  transition: transform var(--transition-suave);
}

.logo-texto {
  font-family: var(--fuente-principal);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--azul-oscuro);
  /* keep the gradient text treatment but ensure transparent background */
  background: linear-gradient(90deg, var(--verde-medio), var(--azul-medio));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

/* Eslogan */
.slogan {
  margin-top: 1rem;
  font-family: var(--fuente-principal);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--verde-oscuro);
  text-align: center;
  text-shadow: 0 1px 4px rgba(42, 86, 153, 0.15);
  background: linear-gradient(90deg, var(--verde-medio), var(--azul-medio));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 100%;
  max-width: 480px;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.3s ease;
}

/* Opciones inferior (si se agregan) */
nav.header-opciones {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  max-width: 360px;
  -webkit-user-select: none;
  user-select: none;
}

/* Ensure logo area is centered and visually floats above header background */
.logo-link { display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.logo { margin: 0 auto; }

nav.header-opciones a {
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--azul-oscuro);
  text-decoration: none;
  padding: 0.5rem 1.3rem;
  border-radius: 18px;
  background: var(--blanco);
  box-shadow: 0 6px 14px rgba(75, 182, 138, 0.2);
  transition:
    background-color var(--transition-suave),
    box-shadow var(--transition-suave),
    color var(--transition-suave),
    transform var(--transition-suave);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

nav.header-opciones a:hover,
nav.header-opciones a:focus-visible {
  background: var(--verde-medio);
  color: var(--blanco);
  box-shadow: 0 10px 32px rgba(42, 86, 153, 0.5);
  transform: translateY(-3px) scale(1.05);
  outline-offset: 3px;
  outline-color: var(--verde-oscuro);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 600px) {
  header {
    padding: 1.2rem 1.8rem;
    border-radius: 0 0 20px 20px;
  }
  .logo-texto {
    font-size: 1.6rem;
    display: block;
    text-align: center;
  }
  .slogan {
    font-size: 1rem;
    max-width: 320px;
    margin-top: 0.8rem;
  }
  nav.header-opciones {
    gap: 2rem;
    max-width: 100%;
  }
  nav.header-opciones a {
    font-size: 1rem;
    padding: 0.45rem 1rem;
  }
  .logo img { height: 48px; }
  .logo { padding: 0.15rem 0.5rem; }
}

/* Apply the mobile-style rounded header when a page opts into the stronger background blur
   so desktop screens visually match the small-screen appearance if desired. */
@media (min-width: 601px) {
  body.bg-blur header {
    border-radius: 0 0 20px 20px;
    padding: 1.0rem var(--padding-horizontal);
  }
}

/* El menú flotante y el botón hamburguesa usan los estilos avanzados de estilos-menu-flotante.css */
/* No dupliques reglas aquí, solo importa estilos-menu-flotante.css en tu HTML */

/* ===================
   ESTILOS PRODUCTO.PHP
   =================== */
:root {
  --azul-claro: #89c9f4;
  --azul-medio: #4a88d1;
  --azul-oscuro: #1c3b66;
  --verde-claro: #a8e6cf;
  --verde-medio: #4bb68a;
  --verde-oscuro: #2e7d58;
  --blanco: #ffffff;

  --fuente-principal: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --radius: 24px;
  --padding-med: 1.6rem;
  --padding-peq: 1rem;
  --transition-suave: 0.35s ease;
  --sombra-suave: rgba(75, 182, 138, 0.18);
  --sombra-hover: rgba(42, 86, 153, 0.4);

  /* Additional shared variables (previously in estilos-menu-flotante.css) */
  --color-light-blue: #add8ff;
  --color-light-green: #b4ffe6;
  --color-teal: #00c8ff;
  --color-teal-light: #00ffb3;
  --color-text-dark: #0a3d4d;
  --color-text-accent: #1bbfa3;

  /* radius aliases for compatibility */
  --radius-main: var(--radius);
  --radius-small: 12px;
  --hero-img-radius: 18px;

  /* shadows (kept names used across files) */
  --shadow-soft: rgba(75,182,138,0.18);
  --shadow-strong: rgba(0,200,255,0.18);
  --shadow-main: rgba(0,200,255,0.18);
  --shadow-inset: rgba(255,255,255,0.15);

  /* Font aliases for compatibility */
  --font-stack: var(--fuente-principal);
  --font-principal: 'Inter', var(--fuente-principal);

  /* transition aliases */
  --transition-speed: 0.36s;
  --transition-function: cubic-bezier(0.68,-0.55,0.27,1.55);

  /* hero image size tokens */
  --hero-img-size-desktop: 360px;
  --hero-img-size-tablet: 280px;
  --hero-img-size-mobile: 200px;

  /* backdrop */
  --backdrop-blur: 18px;
  --backdrop-saturate: 180%;
}

body {
  font-family: var(--fuente-principal);
  margin: 0;
  background: linear-gradient(135deg, var(--verde-claro), var(--azul-claro));
  color: var(--azul-oscuro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.contenido {
  max-width: 900px;
  margin: 3rem auto 4rem auto;
  padding: 0 1.5rem;
}

.detalle-producto {
  background: linear-gradient(145deg, rgba(255 255 255 / 0.85), rgba(245, 248, 250 / 0.85));
  border-radius: calc(var(--radius) * 1.1);
  box-shadow:
    0 10px 28px rgba(40, 87, 131, 0.15),
    inset 0 3px 8px rgba(255 255 255 / 0.8);
  padding: var(--padding-med);
  border: 1px solid rgba(75, 182, 138, 0.25);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  transition:
    box-shadow var(--transition-suave),
    background-color var(--transition-suave);
  position: relative;
  animation: fadeInUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.detalle-producto:hover,
.detalle-producto:focus-within {
  box-shadow:
    0 20px 48px rgba(40, 87, 131, 0.32),
    inset 0 5px 14px rgba(255 255 255 / 0.9);
  background-color: rgba(255 255 255 / 0.95);
  outline: none;
}

/* Grid para carrusel + info */
.detalle-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

/* Info producto */
.info-producto {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  color: var(--azul-oscuro);
  -webkit-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}

.info-producto h2 {
  font-weight: 900;
  font-size: 2.3rem;
  margin: 0 0 var(--padding-peq) 0;
  text-shadow: 1px 1px 4px rgba(75, 182, 138, 0.2);
}

.precio {
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: 1.8rem;
  margin: 0 0 var(--padding-med) 0;
  letter-spacing: 0.03em;
}

.info-producto p {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--azul-medio);
  margin-top: 0;
  white-space: pre-line;
}


/* Contenedor principal centrado con padding y max-width */
.contenedor-principal {
  max-width: 1120px;
  margin: 2.5rem auto 3rem auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-grande);
}

/* Cards modernas con shadow sutil y borde blur */
.card {
  background: var(--fondo-blanco-transparente);
  border-radius: var(--radius);
  padding: var(--espacio-med);
  box-shadow:
    0 6px 18px var(--sombra-clara),
    inset 0 1px 5px rgba(255 255 255 / 0.5);
  border: 1.8px solid var(--borde-suave);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow var(--transicion-suave);
}

/* Cards hover sutil */
.card:hover,
.card:focus-within {
  box-shadow:
    0 10px 32px var(--sombra-hover),
    inset 0 2px 8px rgba(255 255 255 / 0.6);
  outline: none;
}

/* Títulos limpios */
.card h2, .card h3 {
  margin: 0 0 var(--espacio-peque) 0;
  font-weight: 700;
  color: var(--azul-oscuro);
  letter-spacing: -0.02em;
  line-height: 1.15;
  -webkit-user-select: none;
  user-select: none;
}

/* Texto párrafo */
.card p {
  margin: 0 0 var(--espacio-med) 0;
  color: var(--texto-secundario);
  font-weight: 500;
  font-size: 1rem;
  -webkit-user-select: text;
  user-select: text;
}

/* Imágenes contenidas con bordes y sombra */
.card img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow:
    0 4px 14px var(--sombra-clara);
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* Escalado suave hover imagen */
.card img:hover,
.card img:focus {
  transform: scale(1.05);
  outline: none;
}

/* Botones minimalistas con color */
.boton-primario {
  display: inline-block;
  background: linear-gradient(90deg, var(--verde-medio) 40%, var(--azul-medio) 90%);
  color: #fff;
  padding: 0.65rem 1.8rem;
  border-radius: calc(var(--radius) / 1.5);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition:
    background 0.32s ease,
    box-shadow 0.32s ease,
    transform 0.32s ease;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 6px 18px rgba(75, 182, 138, 0.35);
}

/* Hover y foco botones */
.boton-primario:hover,
.boton-primario:focus-visible {
  background: linear-gradient(90deg, var(--azul-medio) 10%, var(--verde-medio) 95%);
  box-shadow: 0 12px 30px rgba(74, 136, 209, 0.5);
  transform: translateY(-3px) scale(1.05);
  outline-offset: 4px;
  outline-color: var(--verde-oscuro);
  outline-style: solid;
  outline-width: 2px;
}


:root {
  --azul-claro: #89c9f4;
  --azul-medio: #4a88d1;
  --azul-oscuro: #1c3b66;
  --verde-claro: #a8e6cf;
  --verde-medio: #4bb68a;
  --verde-oscuro: #2e7d58;
  --blanco: #ffffff;

  --fuente-principal: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --radius: 24px;
  --padding-med: 1.6rem;
  --padding-peq: 1rem;
  --transition-suave: 0.35s ease;
  --sombra-suave: rgba(75, 182, 138, 0.18);
  --sombra-hover: rgba(42, 86, 153, 0.4);
}

body {
  font-family: var(--fuente-principal);
  margin: 0;
  background: linear-gradient(135deg, var(--verde-claro), var(--azul-claro));
  color: var(--azul-oscuro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.contenido {
  max-width: 900px;
  margin: 3rem auto 4rem auto;
  padding: 0 1.5rem;
}

/* Contenedor detalle */
.detalle-producto {
  background: linear-gradient(145deg, rgba(255 255 255 / 0.85), rgba(245, 248, 250 / 0.85));
  border-radius: calc(var(--radius) * 1.1);
  box-shadow:
    0 10px 28px rgba(40, 87, 131, 0.15),
    inset 0 3px 8px rgba(255 255 255 / 0.8);
  padding: var(--padding-med);
  border: 1px solid rgba(75, 182, 138, 0.25);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  transition:
    box-shadow var(--transition-suave),
    background-color var(--transition-suave);
  position: relative;
}

.detalle-producto:hover,
.detalle-producto:focus-within {
  box-shadow:
    0 20px 48px rgba(40, 87, 131, 0.32),
    inset 0 5px 14px rgba(255 255 255 / 0.9);
  background-color: rgba(255 255 255 / 0.95);
  outline: none;
}

.detalle-producto h2 {
  font-weight: 900;
  font-size: 2.2rem;
  text-align: center;
  margin: var(--padding-peq) 0 var(--padding-peq) 0;
  color: var(--azul-oscuro);
  -webkit-user-select: text;
  user-select: text;
  text-shadow: 1px 1px 4px rgba(75, 182, 138, 0.2);
}

.precio {
  color: var(--verde-oscuro);
  font-weight: 800;
  font-size: 1.7rem;
  margin: 0 0 var(--padding-peq) 0;
  text-align: center;
  -webkit-user-select: text;
  user-select: text;
  letter-spacing: 0.03em;
}

.detalle-producto p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--azul-medio);
  text-align: justify;
  margin-top: 0;
  -webkit-user-select: text;
  user-select: text;
}

.detalle-producto h2[style],
.detalle-producto p[style] {
  color: #c00 !important;
  text-align: center !important;
  -webkit-user-select: none;
  user-select: none;
}

/* ===================
   CARRUSEL DE IMÁGENES
   =================== */
/* Legacy carousel rules removed — modal carousel styles are used instead */
.catalogo {
  display: grid;
  /* On large screens each card is at least 300px, giving airy layout */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.4rem; /* increased spacing between product cards */
  padding: 0;

.producto {
  background: linear-gradient(145deg, rgba(255 255 255 / 0.85), rgba(245, 248, 250 / 0.85));
  border-radius: calc(var(--radius) * 1.1);
  box-shadow:
    0 8px 24px rgba(40, 87, 131, 0.15),
    inset 0 2px 6px rgba(255 255 255 / 0.8);
  border: 1px solid rgba(75, 182, 138, 0.3);
  padding: 1.6rem; /* increased card padding for more breathing room */
  text-align: center;
  transition:
    box-shadow 0.32s cubic-bezier(0.4,0,0.2,1),
    transform 0.32s cubic-bezier(0.4,0,0.2,1),
    border-color 0.32s cubic-bezier(0.4,0,0.2,1),
    background-color 0.32s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  position: relative;
}

.producto:hover,
.producto:focus-within {
  transform: scale(1.035) translateY(-8px);
  box-shadow:
    0 20px 56px rgba(40, 87, 131, 0.32),
    0 2px 16px rgba(75, 182, 138, 0.13),
    inset 0 4px 12px rgba(255 255 255 / 0.9);
  border-color: var(--verde-medio);
  background-color: rgba(255 255 255 / 0.97);
  outline: none;
  z-index: 2;
}

.producto::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(75, 182, 138, 0.12) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity var(--transicion-suave);
  opacity: 0;
  z-index: 0;
  border-radius: calc(var(--radius) * 1.1);
}

.producto:hover::before,
.producto:focus-within::before {
  opacity: 1;
}

.producto:hover,
.producto:focus-within {
  transform: translateY(-8px);
  box-shadow:
    0 20px 56px rgba(40, 87, 131, 0.32),
    inset 0 4px 12px rgba(255 255 255 / 0.9);
  border-color: var(--verde-medio);
  background-color: rgba(255 255 255 / 0.95);
  outline: none;
  z-index: 1;
}

.producto img {
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.8);
  box-shadow: 0 6px 18px rgba(40, 87, 131, 0.12);
  transition: transform var(--transicion-suave), box-shadow var(--transicion-suave);
  will-change: transform;
  position: relative;
  z-index: 2;
}

.producto img:hover,
.producto img:focus {
  transform: scale(1.08);
  box-shadow: 0 12px 35px rgba(40, 87, 131, 0.25);
  outline: none;
}

.producto h3 {
  color: var(--azul-oscuro);
  font-weight: 800;
  font-size: 1.5rem;
  margin: var(--espacio-peque) 0 var(--espacio-peque) 0;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 4px rgba(75, 182, 138, 0.2);
  -webkit-user-select: text;
  user-select: text;
  z-index: 2;
  position: relative;
}

.precio {
  font-weight: 700;
  color: var(--verde-oscuro);
  font-size: 1.25rem;
  margin-top: 0;
  letter-spacing: 0.02em;
  -webkit-user-select: text;
  user-select: text;
  z-index: 2;
  position: relative;
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.producto {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Responsive */

@media (max-width: 900px) {
  .catalogo {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 1.6rem; /* slightly larger gap on tablets */
  }
  .contenedor-principal {
    padding: 0 1rem;
  }
}

@media (max-width: 600px) {
  .catalogo {
    /* Denser grid on small screens: two columns on most phones in portrait when space allows */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.9rem; /* tighter spacing on mobile for denser grid */
  }
  .contenedor-principal {
    margin: 1rem auto 2rem auto;
  }
  .imagenes-producto {
    flex-direction: column;
    align-items: center;
  }
  .img-principal {
    max-width: 280px;
    max-height: 280px;
  }
    .img-extra {
      max-width: 100px;
      max-height: 100px;
      margin-bottom: var(--espacio-peque);
    }
  }
/* Legacy carousel rules removed — modal carousel styles are used instead */

/* ===========================
   CARRUSEL EN MODAL — mostrar imagen completa sin recortar
   =========================== */

/* Variables (usa las de :root si ya las tienes) */
/* Modal styles removed: modal feature disabled and modal CSS cleaned up.
   If you need the modal back, restore the modal CSS or set
   window.__CAROUSEL_ENABLE_MODAL = true and re-add styles. */

/* ===========================
   ESTILOS PROFESIONALES PARA CARRUSEL CON JS DE AJUSTE DE ALTURA
   =========================== */

/* Variables base para colores, tamaños y espaciados */
:root {
  --carrusel-bg-color: transparent;
  --carrusel-radius: 12px;
  --carrusel-shadow: 0 14px 48px rgb(255, 255, 255).4;
  --carrusel-btn-size: 48px;
  --carrusel-btn-bg: rgba(11, 215, 55, 0.899);
  --carrusel-btn-hover-bg: rgba(12, 210, 240, 0.848);
  --carrusel-btn-color: #fff;
  --carrusel-indicator-size: 14px;
  --carrusel-indicator-bg: rgba(255,255,255,0.5);
  --carrusel-indicator-active-bg: #0fdfffef;
  --carrusel-transition: 0.36s cubic-bezier(0.22, 0.9, 0.36, 1);
}

/* Contenedor principal del carrusel */
.carrusel-imagenes {
  width: 100%;
  max-width: 100%;
  height: 160px; /* slightly smaller for denser layouts */
  object-fit: cover;
  border-radius: calc(var(--radius) * 0.6);
  box-shadow: 0 6px 18px rgba(40, 87, 131, 0.12);
  transition: transform var(--transicion-suave), box-shadow var(--transicion-suave);
  will-change: transform;
  position: relative;
  z-index: 2;
}

@media (min-width: 1400px) {
  /* On very large screens, make cards larger and images taller */
  .catalogo { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 3rem; }
  .producto { padding: 2rem; }
  .producto img { height: 220px; }
}
}

/* Transición controlada por JS: solo activa cuando data-height-transition es true */
.carrusel-imagenes[data-height-transition="true"] {
  transition: height var(--carrusel-transition);
}

/* Wrapper track: ocupa todo el contenedor para medidas fiables */
.carrusel-track-wrapper {
  position: relative; /* flujo normal: la altura la da el contenido */
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.carrusel-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.36, 1);
  will-change: transform;
  padding: 0;
  margin: 0;
  list-style: none;
}

.carrusel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: auto; /* dejar que la imagen determine altura */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.carrusel-slide.activo { opacity: 1; }

.carrusel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.carrusel-btn {
  /* Positioning kept as before */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--carrusel-btn-size);
  height: var(--carrusel-btn-size);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;

  /* Match hero arrow visual style */
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(8,48,74,0.06);
  color: rgba(15,43,76,0.95); /* dark icon color, like hero */
  border-radius: 999px; /* pill / circular */
  box-shadow: 0 6px 18px rgba(8,48,74,0.06);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s ease;
  z-index: 24; /* similar stacking to hero controls */
}

.carrusel-btn:hover { transform: translateY(-50%) scale(1.06); opacity: 1; background: rgba(255,255,255,0.98); box-shadow: 0 8px 20px rgba(8,48,74,0.08); }
.carrusel-btn:active { transform: translateY(-50%) scale(0.98); box-shadow: 0 6px 14px rgba(0,0,0,0.06); }
.carrusel-btn.prev { left: 12px; }
.carrusel-btn.next { right: 12px; }

/* accessible focus style similar to other controls */
.carrusel-btn:focus, .carrusel-btn:focus-visible { outline: 3px solid rgba(34,119,255,0.14); outline-offset: 2px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }

/* Slightly smaller and less intrusive on narrow viewports */
@media (max-width: 900px) {
  .carrusel-btn { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .carrusel-btn { width: 36px; height: 36px; }
}

.carrusel-indicadores {
  position: relative;
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  gap: 12px;
  -webkit-user-select: none;
  user-select: none;
}
.carrusel-indicadores button {
  width: var(--carrusel-indicator-size);
  height: var(--carrusel-indicator-size);
  border-radius: 50%;
  border: 2px solid var(--carrusel-indicator-bg);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.carrusel-indicadores button.activo,
.carrusel-indicadores button:hover,
.carrusel-indicadores button:focus-visible {
  background: var(--carrusel-indicator-active-bg);
  border-color: var(--carrusel-indicator-active-bg);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .carrusel-imagenes,
  .carrusel-track,
  .carrusel-slide,
  .carrusel-slide img,
  .carrusel-btn,
  .carrusel-indicadores button {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .carrusel-imagenes { max-width: 100%; min-height: 140px; }
  .carrusel-btn { width: 40px; height: 40px; }
  .carrusel-indicadores { gap: 10px; }
  .carrusel-indicadores button { width: 12px; height: 12px; }
}

@media (max-width: 480px) {
  .carrusel-imagenes { min-height: 120px; }
  .carrusel-btn { width: 36px; height: 36px; }
  .carrusel-indicadores button { width: 10px; height: 10px; }
}

/* Mobile variant: match hero mobile adjustments for arrows */
@media (max-width: 520px) {
  .carrusel-btn { background: rgba(255,255,255,0.92); border: 0; box-shadow: 0 6px 14px rgba(0,0,0,0.06); }
  .carrusel-btn.prev { left: 8px !important; }
  .carrusel-btn.next { right: 8px !important; }
}

/* Desktop: larger carousel arrows and appear animation */
@media (min-width: 900px) {
  /* Smaller, less intrusive arrows on wide screens per request */
  .carrusel-btn { width: 40px; height: 40px; }
  .carrusel-btn.prev { left: 14px; }
  .carrusel-btn.next { right: 14px; }
  .carrusel-indicadores { gap: 14px; }
}

/* Appear animation for controls: container receives .controls-appear to trigger */
@keyframes controls-appear {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.carrusel-imagenes.controls-appear .carrusel-btn {
  opacity: 0; /* start hidden and animate in */
  animation-name: controls-appear;
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.2,.9,.3,1);
  animation-fill-mode: both;
}
.carrusel-imagenes.controls-appear .carrusel-btn.prev { animation-delay: 60ms; }
.carrusel-imagenes.controls-appear .carrusel-btn.next { animation-delay: 120ms; }


@media (hover: hover) and (pointer: fine) {
  .carrusel-slide img:hover { transform: scale(1.04); }
}

/* Mejora visual para imágenes con distintos tamaños/aspect-ratios
   - panel neutro (letterbox) detrás de la imagen
   - padding para separar la imagen del fondo oscuro del modal
   - bordes redondeados y sombra sutil
*/
:root {
  --carrusel-panel-bg: transparent; /* panel transparente detrás de la imagen */
  --carrusel-panel-padding: 0px; /* quitar padding que mostraba el fondo blanco */
  --carrusel-panel-radius: 10px;
  --carrusel-panel-shadow: none; /* quitar sombra del panel */
}

.carrusel-slide {
  padding: 0; /* sin padding de panel */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrusel-slide img {
  background: transparent;
  padding: 0; /* eliminar acolchado */
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;   /* mantener proporciones naturales */
  height: auto;
  display: block;
}

/* Opcional: para imágenes extremadamente verticales/estrechas, limitar ancho interior */
@media (max-width: 600px) {
  .carrusel-slide img { max-width: 92%; }
}

/* Final overrides: ensure large-screen behavior requested by user.
   Make carousel images appear smaller on wide viewports and remove
   hard maximum height limits so images are not artificially clamped.
   Placed at the end to override earlier declarations. */
@media (min-width: 50px) {
  .carrusel-imagenes {
    /* visually smaller container on wide screens */
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure images keep natural proportions and don't get clamped by vh rules */
  .carrusel-slide img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
  }
}
/* ======== Estilos para barra de búsqueda y lista animada ======== */

/* Fuentes y reset básico */

:root {
  --color-verde: #4bb68a;
  --color-azul: #4a88d1;
  --color-fondo-lista: #f0f8ff;
  --color-texto: #222;
  --color-texto-secundario: #555;
  --sombra-lista: rgba(75, 182, 138, 0.25);
  --radio-bordes: 12px;
  --duracion-animacion: 0.3s;
}

/* Contenedor general */
.search-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  z-index: 999;
}

/* Input de búsqueda */
.search-input {
  width: 100%;
  padding: 12px 18px;
  font-size: 1rem;
  border: 2px solid var(--color-verde);
  border-radius: var(--radio-bordes);
  outline-offset: 2px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  color: var(--color-texto);
  background-color: #fff;
}
.search-input::placeholder {
  color: var(--color-texto-secundario);
  font-style: italic;
}
.search-input:focus {
  border-color: var(--color-azul);
  box-shadow: 0 0 8px var(--color-azul);
}

/* Lista desplegable de resultados */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: max(360px, 100%);
  background-color: var(--color-fondo-lista);
  border-radius: 0 0 var(--radio-bordes) var(--radio-bordes);
  box-shadow: 0 8px 24px var(--sombra-lista);
  margin-top: 6px;
  max-height: 320px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity var(--duracion-animacion) ease,
    transform var(--duracion-animacion) ease,
    visibility 0s linear var(--duracion-animacion);
  list-style: none;
  padding: 6px 0;
  z-index: 130001; /* ensure suggestions overlay large titles/header */
  scrollbar-width: thin;
  scrollbar-color: var(--color-verde) transparent;
}
.search-results.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Scrollbar personalizado para Firefox */
.search-results::-webkit-scrollbar {
  width: 8px;
}
.search-results::-webkit-scrollbar-track {
  background: transparent;
}
.search-results::-webkit-scrollbar-thumb {
  background-color: var(--color-verde);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Ítem individual de resultado */
.search-results li {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 14px;
  cursor: pointer;
  transition: background-color 0.22s ease, transform 0.18s ease, box-shadow 0.18s ease;
  border-radius: 10px;
  -webkit-user-select: none;
  user-select: none;
  font-weight: 600;
  color: var(--color-texto);
  font-size: 1rem;
  background: transparent;
}

/* Imagen miniatura en resultado */
.search-results li img,
.search-item-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(75, 182, 138, 0.12);
  flex-shrink: 0;
}

/* Make the anchor fill the whole item so clicks are easy */
.search-results li a.search-item-link,
.search-results li a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.search-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.search-item-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-azul);
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
.search-item-price {
  margin-top: 6px;
  color: var(--color-verde);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Price badge on the far right for compact display */
.search-results li .search-item-price.badge-right {
  margin-left: auto;
  margin-top: 0;
  align-self: flex-start;
  background: linear-gradient(90deg, rgba(75,182,138,0.12), rgba(74,136,209,0.08));
  padding: 6px 10px;
  border-radius: 8px;
}

/* Nombre y precio */
/* Nombre y precio (soporta markup con .info OR .search-item-meta) */
.search-results li .info,
.search-results li .search-item-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  color: var(--color-texto);
}
.search-results li .info .nombre,
.search-results li .search-item-meta .search-item-title {
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--color-azul);
}
.search-results li .info .precio,
.search-results li .search-item-meta .search-item-price {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-verde);
  margin-top: 2px;
}

/* Hover y foco para ítems */
.search-results li:hover,
.search-results li:focus-visible {
  background: linear-gradient(90deg, rgba(74,136,209,0.12), rgba(75,182,138,0.12));
  color: #06304a;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(12, 80, 120, 0.06);
  outline: none;
}
.search-results li:hover .search-item-title,
.search-results li:focus-visible .search-item-title {
  color: #0a2f50;
}
.search-results li:hover .search-item-price,
.search-results li:focus-visible .search-item-price {
  color: #1d6b45;
}

/* separators */
.search-results li + li { border-top: 1px solid rgba(75,182,138,0.06); }

/* Animación de entrada de cada ítem (fade + slide) */
.search-results.show li {
  animation: fadeSlideIn 0.34s cubic-bezier(0.22, 0.9, 0.36, 1);
}
.search-results.show li:nth-child(1) { animation-delay: 0.02s; }
.search-results.show li:nth-child(2) { animation-delay: 0.06s; }
.search-results.show li:nth-child(3) { animation-delay: 0.10s; }
.search-results.show li:nth-child(4) { animation-delay: 0.14s; }

/* Portal container for detached search results (appended to body) */
.search-results-portal {
  pointer-events: auto;
  display: none;
}
.search-results-portal.show { animation: appearUp 220ms ease both; }
/* When the results list is rendered into the detached portal (appended to <body>),
   the global .search-results rules (position:absolute; top:100%; ...) would try to
   position the list relative to the portal and often make it invisible/offscreen.
   Override those properties for the portal-hosted list so it lays out inside the
   portal according to the JS-calculated dimensions (width/top/left applied to the
   portal element itself). */
.search-results-portal .search-results {
  margin: 0;
  position: static; /* avoid re-positioning inside the portal */
  top: auto;
  left: auto;
  width: 100%;
  max-height: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  background-color: var(--color-fondo-lista);
  border-radius: calc(var(--radio-bordes) - 2px);
  box-shadow: 0 8px 24px var(--sombra-lista);
  list-style: none;
  padding: 6px 0;
}

.search-item { padding: 8px 12px; }
.search-item-link { display:flex; gap:10px; align-items:center; color:#222; text-decoration:none; }
.search-item-thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; }
.search-item-meta { font-size:14px; }
.search-item-title { font-weight:600; }
.search-item-price { color:var(--color-verde); font-weight:700; }
.search-results.show li:nth-child(5) { animation-delay: 0.18s; }
.search-results.show li:nth-child(6) { animation-delay: 0.22s; }
.search-results.show li:nth-child(7) { animation-delay: 0.26s; }
.search-results.show li:nth-child(8) { animation-delay: 0.30s; }

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive: adaptaciones para móviles */
@media (max-width: 480px) {
  .search-container {
    max-width: 100%;
    padding: 0 1rem;
  }
  .search-input {
    font-size: 1.1rem;
    padding: 14px 18px;
  }
  .search-results li img {
    width: 36px;
    height: 36px;
  }
  .search-results li {
    padding: 10px 12px;
    font-size: 1rem;
  }
}

/* --- Hero simple: layout tweaks for recommended products --- */
/* Hero layout for recommended products: keep minimal and reuse existing hero-simple styles */
.hero-simple-track { display: flex; }
.hero-simple-slide { display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; padding: 0.6rem; box-sizing: border-box; }
.hero-simple-img { width: 100%; display:flex; align-items:center; justify-content:center; }
.hero-simple-img img { width: 100%; height: auto; max-width: 420px; border-radius: 10px; }
.hero-simple-meta { width: 100%; }

/* ==================================================
   FINAL OVERRIDE: Force the preferred hero-simple design
   Placed at EOF so it wins over earlier conflicting rules.
   Uses `body .hero-simple` to increase specificity slightly.
 ================================================== */

body .hero-simple {
  /* layout */
  width:100%;
  max-width:1200px;
  margin:1.25rem auto;
  padding:1rem;
  box-sizing:border-box;
  position:relative;
  color:var(--text-dark, #072235);
  --hs-transition-duration: 520ms;
  background: linear-gradient(180deg,var(--bg-page, #f6fbff),#fff 60%);
}

body .hero-simple-heading { color:var(--muted, #4b5563); font-weight:700; font-size:0.95rem; padding-left:6px; }

/* track + slides */
body .hero-simple-track{ display:flex; gap:var(--gap,16px); align-items:stretch; transition: transform var(--hs-transition-duration) ease; will-change:transform; }
body .hero-simple-slide{ flex:0 0 auto; padding:6px 0; box-sizing:border-box; position:relative; }

/* hero card */
body .hero-simple-slide .hero{
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
  background:linear-gradient(180deg,var(--card-grad-1,#eaf6ff),var(--card-grad-2,#e9fff2));
  border-radius:var(--radius,14px); box-shadow:var(--shadow-1,0 12px 36px rgba(5,25,40,0.08)); overflow:hidden; text-decoration:none; color:inherit; min-height:280px;
  transform: translateZ(0); transition: transform var(--transition,420ms cubic-bezier(0.2,0.9,0.2,1)), box-shadow var(--transition);
}

body .hero-simple-slide.activo .hero{ transform: translateY(-6px) scale(1.005); box-shadow:0 22px 48px rgba(6,30,60,0.12); }

/* media */
body .hero-simple .hero-media{ position:relative; width:100%; height:220px; display:flex; align-items:center; justify-content:center; overflow:hidden; background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(16,185,129,0.04)); }
body .hero-simple .hero-media img, body .hero-simple .hero-media picture, body .hero-simple .hero-media video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--slow-transition,700ms cubic-bezier(.16,.84,.24,1)), filter var(--transition,420ms); }

/* body/text area */
body .hero-simple .hero-body{ padding:14px; display:flex; flex-direction:column; gap:10px; box-sizing:border-box; }
body .hero-simple .title{ margin:0; font-size:clamp(1.05rem,2.4vw,1.6rem); font-weight:800; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body .hero-simple .subtitle{ margin:0; color:rgba(7,34,53,0.8); font-size:clamp(0.95rem,1.6vw,1.05rem); line-height:1.45; max-height:6.4em; overflow:hidden; }
body .hero-simple .hero-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
body .hero-simple .price{ background: linear-gradient(90deg, rgba(16,185,129,1), rgba(59,130,246,1)); color:#fff; font-weight:800; padding:8px 14px; border-radius:12px; box-shadow:0 10px 28px rgba(16,185,129,0.18); min-width:96px; text-align:center; font-size:1rem; }

/* controls */
body .hero-simple .hero-simple-controls{ display:flex; gap:8px; align-items:center; justify-content:center; z-index:90; pointer-events:auto; position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,0.75); padding:6px 8px; border-radius:999px; box-shadow:0 6px 18px rgba(3,40,80,0.06); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
body .hero-simple .hs-dot{ width:var(--dot-size,42px); height:var(--dot-size,42px); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
body .hero-simple .hs-dot-ring{ width:24px; height:24px; }
body .hero-simple .hs-dot-circle{ stroke: rgba(7,34,53,0.12); stroke-dasharray:60; stroke-dashoffset:60; }
body .hero-simple .hs-dot.active .hs-dot-circle{ stroke: var(--accent-green,#10b981); stroke-dashoffset:0; }

/* arrows */
body .hero-simple .hs-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:#fff; border:1px solid rgba(7,34,53,0.06); box-shadow:0 6px 18px rgba(3,40,80,0.06); display:flex; align-items:center; justify-content:center; z-index:95; }
body .hero-simple .hs-prev{ left:8px; } body .hero-simple .hs-next{ right:8px; }

/* responsive overrides */
@media (min-width: 880px){
  body .hero-simple .hero{ flex-direction:row; align-items:stretch; }
  body .hero-simple .hero-media{ flex:0 0 var(--media-w-desktop,420px); height:var(--media-h-desktop,320px); border-radius: calc(var(--radius,14px) - 4px); margin:12px; box-shadow:var(--shadow-2,0 6px 18px rgba(3,40,80,0.06)); }
  body .hero-simple .hero-body{ padding:22px; display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; }
}

@media (max-width:879px){
  body .hero-simple .hero{ flex-direction:column; }
  body .hero-simple .hero-media{ height:240px; border-radius:calc(var(--radius,14px) - 4px); margin:0; }
  body .hero-simple .hero-body{ padding:16px; }
  body .hero-simple .hero-simple-controls{ bottom:10px; left:50%; transform:translateX(-50%); }
  body .hero-simple .hs-arrow{ display:none; }
  body .hero-simple .price{ font-size:1.05rem; padding:10px 14px; }
  body .hero-simple .title{ white-space:normal; overflow:hidden; text-overflow:ellipsis; }
}

/* small screens */
@media (max-width:420px){ body .hero-simple{ padding:10px; } body .hero-simple .hero-media{ height:200px; } }

/* final ensure: active animations and entry animation */
body .hero-simple .hero, body .hero-simple .hero-media, body .hero-simple .hero-body { animation: hs-fade-up 420ms cubic-bezier(.2,.9,.2,1) both; }


@media (min-width: 768px) {
  .hero-simple-slide { flex-direction: row; align-items: center; }
  .hero-simple-img { flex: 0 0 36%; max-width: 36%; }
  .hero-simple-meta { flex: 1 1 64%; padding-left: 1rem; }
}

/* ===== Barra de búsqueda sencilla con lupa CSS y animación 2D ===== */
:root {
  --color-verde: #4bb68a;
  --color-azul: #4a88d1;
  --color-fondo: #f9fcff;
  --color-texto: #1a1a1a;
  --color-placeholder: #6b7c93;
  --radio-bordes: 12px;
  --transicion: 0.3s ease;
}

/* Contenedor de la barra */
.search-bar {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  z-index: 130000; /* ensure the search container sits above large headings */
}

/* Input de búsqueda */
.search-bar input[type="search"], .search-bar .search-input {
  width: 100%;
  padding: 12px 44px 12px 16px; /* espacio para lupa */
  font-size: 1rem;
  border: 2px solid var(--color-verde);
  border-radius: var(--radio-bordes);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  outline-offset: 2px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
  box-sizing: border-box;
}
.search-bar input[type="search"]::placeholder, .search-bar .search-input::placeholder {
  color: var(--color-placeholder);
  font-style: italic;
}
.search-bar input[type="search"]:focus, .search-bar .search-input:focus {
  border-color: var(--color-azul);
  box-shadow: 0 0 8px var(--color-azul);
}

/* Icono lupa CSS puro */
.search-bar .lupa {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  cursor: default;
  pointer-events: none;
  /* Animación pulsante */
  animation: pulse 2.5s infinite ease-in-out;
}

/* Círculo de la lupa */
.search-bar .lupa .circulo {
  width: 14px;
  height: 14px;
  border: 3px solid var(--color-verde);
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  transition: border-color var(--transicion);
}

/* Mango de la lupa */
.search-bar .lupa .mango {
  position: absolute;
  width: 6px;
  height: 3.5px;
  background-color: var(--color-verde);
  border-radius: 2px;
  top: 80%;
  left: 65%;
  transform-origin: left center;
  transform: rotate(45deg);
  transition: background-color var(--transicion);
}

/* Cambiar color al enfocar input */
.search-bar input[type="search"]:focus ~ .lupa .circulo,
.search-bar .search-input:focus ~ .lupa .circulo {
  border-color: var(--color-azul);
}
.search-bar input[type="search"]:focus ~ .lupa .mango,
.search-bar .search-input:focus ~ .lupa .mango {
  background-color: var(--color-azul);
}

/* Animación pulsante suave */
@keyframes pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    opacity: 0.7;
  }
}

/* Responsive para móviles */
@media (max-width: 480px) {
  .search-bar {
    max-width: 100%;
    padding: 0 1rem;
  }
  .search-bar input[type="search"] {
    font-size: 1.1rem;
    padding-right: 44px;
  }
  .search-bar .lupa {
    width: 22px;
    height: 22px;
    right: 16px;
  }
  .search-bar .lupa .circulo {
    width: 16px;
    height: 16px;
    border-width: 3.5px;
  }
  .search-bar .lupa .mango {
    width: 7px;
    height: 4px;
    top: 82%;
    left: 66%;
  }
}

/* Strong desktop overrides to make product cards more square and consistent
   Placed at the end to take precedence over earlier rules. */
@media (min-width: 1200px) {
  /* Force five equal columns on wide viewports and make cards more square */
  .contenido .catalogo,
  .catalogo {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1.8rem !important;
    align-items: start !important;
  }

  /* Use a grid layout inside each card so the thumbnail occupies the top area
     and text/price stay below. This gives a more square appearance. */
  .catalogo .card.producto {
    display: grid !important;
    /* make image portion larger to achieve a more square look */
    grid-template-rows: 1.6fr auto auto !important; /* larger image / title / price */
    gap: 0.6rem !important;
    min-height: 320px !important; /* slightly taller so image has room */
    box-sizing: border-box !important;
  }

  /* Make thumbnail fill the first grid row and stay square */
  .catalogo .product-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    overflow: hidden !important;
  }
  .catalogo .product-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    border-radius: 12px !important;
    /* Ensure images are centered within the card grid cell */
    justify-self: center !important;
    align-self: center !important;
  }
  
  /* Center title and price horizontally in the card and keep consistent spacing */
  .catalogo .card.producto h3 {
    justify-self: center !important;
    text-align: center !important;
    align-self: center !important;
    padding: 0 0.5rem !important;
  }
  .catalogo .card.producto .precio {
    justify-self: center !important;
    align-self: start !important; /* keep price just under title */
  }

  /* If the anchor inside the card used flex centering on smaller viewports, ensure grid children remain centered */
  .catalogo .card.producto > a {
    display: block !important; /* make anchor behave as block inside grid */
    width: 100% !important;
  }

  /* Index-specific tweaks: slightly larger thumbs and stronger centering on home page */
  .page-index .catalogo .card.producto {
    grid-template-rows: 1.7fr auto auto !important; /* give a touch more space to the thumb on index */
  }
  .page-index .catalogo .product-thumb {
    /* increase max size a bit on the index hero area for a more visual impact */
    width: 100% !important;
    height: 100% !important;
    max-width: calc(100% - 16px) !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .catalogo .card.producto h3 { margin: 0.5rem 0 0.25rem 0 !important; }
  .catalogo .card.producto .precio { margin-top: 0.4rem !important; }
}

/* ===== Appear-on-scroll animation (used by index.php & catalogo.php) ===== */
/* Enhanced: blur -> clear, stronger easing, subtle scale, and longer stagger */
.appear,
.appear--stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  filter: blur(6px) saturate(0.9);
  will-change: opacity, transform, filter;
  transition: opacity 520ms cubic-bezier(.16,.9,.3,1), transform 520ms cubic-bezier(.16,.9,.3,1), filter 520ms cubic-bezier(.16,.9,.3,1);
}
.appear.in-view,
.appear--stagger.in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
}

/* Stagger helpers: children animate with incremental delays when the parent receives .in-view */
.appear--stagger.in-view > * {
  transition-delay: calc(var(--appear-index, 0) * 90ms);
}
.appear--stagger > * { --appear-index: 0; }

/* Provide a small pop after reveal when user hovers (subtle) */
.appear.in-view:hover,
.appear--stagger.in-view > *:hover {
  transform: translateY(-2px) scale(1.01);
  transition: transform 240ms cubic-bezier(.2,.9,.3,1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .appear,
  .appear--stagger > * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ===== Skeleton UI (temporary placeholders while content loads) ===== */
.skeleton-root {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,245,247,0.98));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 120000;
  pointer-events: none; /* allow clicks to pass through if needed */
}
.skeleton-inner { width: min(1200px, 96%); max-width:1200px; }
.skeleton-hero { display:flex; gap:20px; align-items:center; margin-bottom:18px; }
.skeleton-rect { background: linear-gradient(90deg, #efefef 0%, #e8e8e8 50%, #efefef 100%); background-size:200% 100%; animation: skeleton-shimmer 0.9s linear infinite; border-radius:12px; }
.skeleton-hero .rect-main { width: 60%; height: 120px; }
.skeleton-hero .rect-side { width: 32%; height: 120px; border-radius:12px; }
.skeleton-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.skeleton-card { padding:12px; border-radius:14px; display:flex; flex-direction:column; gap:10px; align-items:center; background:transparent; }
.skeleton-thumb { width: 100%; height: 140px; border-radius:10px; }
.skeleton-line { height: 14px; width: 80%; border-radius:8px; }
.skeleton-line.short { width: 48%; }
.skeleton-root.skeleton--hide { opacity: 0; transition: opacity 420ms ease; }

@keyframes skeleton-shimmer { 0% { background-position: 200% 0%; } 100% { background-position: -200% 0%; } }

/* Small screens adjustments */
@media (max-width:720px) {
  .skeleton-hero { flex-direction: column; align-items: stretch; }
  .skeleton-hero .rect-main, .skeleton-hero .rect-side { width: 100%; height: 160px; }
  .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}


/* User request: force 2 columns on mobile and 5 columns on desktop
   These overrides are intentionally placed at the end and use
   !important to ensure they take precedence over earlier rules. */
@media (max-width: 600px) {
  .catalogo {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.9rem !important; /* keep a compact gap on phones */
  }
}

@media (min-width: 1200px) {
  .catalogo {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2.4rem !important; /* airy spacing on large screens */
  }
}