html { scroll-behavior: smooth; }
        section { scroll-margin-top: 70px; }
        .navbar-brand { font-weight: 700; letter-spacing: 1px; }

        /* ===== Slider: imagen completa en cualquier pantalla ===== */
        #miCarrusel {
            max-width: 1600px;
            margin: 0 auto;
        }
        #miCarrusel .carousel-item img {
            width: 100%;
            height: auto;
            max-height: calc(100vh - 56px); /* nunca más alto que la pantalla */
            object-fit: contain;
            background-color: #ffffff;
            display: block;
        }

        /* Indicadores: tres rayitas pequeñas */
        #miCarrusel .carousel-indicators {
            left: 0;
            right: 0;
            margin: 0 auto 1rem;
            justify-content: center;
        }
        #miCarrusel .carousel-indicators [data-bs-target] {
            width: 30px !important;
            height: 4px !important;
            flex: 0 0 30px !important;
            margin: 0 4px;
            border: 0;
            border-radius: 2px;
            background-color: #0c2f50;
        }


        body {
  background-color: rgba(12, 47, 80, 0.5); /* El último valor (0.5) controla la opacidad */
}

      
        .logo-menu {
            height: clamp(32px, 4vw, 70px);  /* mínimo 32px, máximo 70px */
            width: auto;
        }

        /* Pantallas grandes: un poco más alto */
        @media (min-width: 1400px) {
            .logo-menu { height: 60px; }
        }
        @media (min-width: 1800px) {
            .logo-menu { height: 70px; }
        }


        .seccion-nosotros {
            background-color: #0c2f50;
            color: #ffffff;
        }

        .seccion-nosotros h2 {
            color: #0c2f50;
        }

        .seccion-nosotros p {
            color: #0c2f50;
            line-height: 1.7;
        }

        .aviso-privacidad {
          background-color: #0c2f50;      /* azul marino sólido, sin transparencia */
          color: #ffffff;
        }
        .aviso-privacidad a {
          color: #ffffff;
          font-weight: 600;
          text-decoration: none;
        }
        .aviso-privacidad a:hover,
        .aviso-privacidad a:focus-visible {
          text-decoration: underline;
        }
        .aviso-privacidad small {
          color: #c9d6e6;                 /* azul claro sólido para el texto de derechos */
        }
 
  /* ---------- Rejilla fluida: 4 -> 2 -> 1 columnas ---------- */
  .productos-wrap { max-width: 1600px; padding-inline: clamp(1rem, 4vw, 3rem); }
  .productos-grid {
    display: grid;
    gap: clamp(.75rem, 2vw, 1.75rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* pantalla grande: las 4 en una fila */
  }
  .productos-grid > .col { width: auto; min-width: 0; }
 
  /* Tablet / laptop pequeña: 2 x 2 */
  @media (max-width: 991.98px) {
    .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Celular: una debajo de otra, centradas y con ancho máximo */
  @media (max-width: 479.98px) {
    .productos-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  }
 
  /* Textos y espacios que escalan con el ancho de la pantalla */
  .producto__info { padding: clamp(.6rem, 1.4vw, 1rem); }
  .producto__info p  { font-size: clamp(.75rem, 1.1vw + .3rem, .95rem); }
  .producto__info ul { font-size: clamp(.7rem, 1vw + .3rem, .88rem); }
  .producto__pie h5  { font-size: clamp(.9rem, 1vw + .5rem, 1.15rem); }
  .producto__icono   { width: clamp(2rem, 3vw, 2.75rem); height: clamp(2rem, 3vw, 2.75rem); }
 
  /* ---------- Tarjeta de producto ---------- */
  .producto {
    position: relative;
    height: 100%;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: box-shadow .25s ease, transform .25s ease;
  }
  .producto:hover,
  .producto:focus-visible,
  .producto.activo {
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .15);
    transform: translateY(-4px);
  }
  .producto:focus-visible { outline: 3px solid #6f42c1; outline-offset: 2px; }
 
  /* Imagen con proporción fija: se adapta a cualquier ancho de pantalla */
  .producto__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
  .producto__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
  }
  .producto:hover .producto__media img,
  .producto.activo .producto__media img { transform: scale(1.06); }
 
  /* Capa de información sobre la imagen */
  .producto__info {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: .35rem;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(to top, rgba(15, 20, 40, .94) 0%, rgba(15, 20, 40, .82) 55%, rgba(15, 20, 40, .35) 100%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
    overflow-y: auto;
  }
  .producto:hover .producto__info,
  .producto:focus-visible .producto__info,
  .producto.activo .producto__info {
    opacity: 1;
    transform: none;
  }
  .producto__info p { margin: 0 0 .25rem; font-size: .9rem; line-height: 1.35; }
  .producto__info ul { margin: 0 0 .5rem; padding: 0; list-style: none; font-size: .85rem; line-height: 1.35; }
  .producto__info li { padding: .15rem 0; }
  .producto__info .btn { align-self: flex-start; }
 
  /* Pie con icono y título */
  .producto__pie {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1rem;
  }
  .producto__icono {
    flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1.15rem;
  }
  .producto__pie h5 { margin: 0; font-size: 1.05rem; font-weight: 700; }
 
  /* Pista "toca para ver más" solo en dispositivos táctiles */
  .producto__hint { display: none; margin-left: auto; font-size: .75rem; color: #6c757d; }
  @media (hover: none) {
    .producto__hint { display: inline; }
    .producto.activo .producto__hint { display: none; }
  }
 
  /* Pantallas pequeñas: más espacio para el texto de la capa */
  @media (max-width: 991.98px) {
    .producto__media { aspect-ratio: 1 / 1; }   /* en 2 columnas la imagen es más alta para que quepa el texto */
  }
  @media (max-width: 479.98px) {
    .producto__media { aspect-ratio: 4 / 3; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .producto, .producto__media img, .producto__info { transition: none; }
  }


       :root {
    --bs-primary-rgb: 27, 61, 93; 
    --azul-marino: #0c2f50;
    --menu-rgb: 12, 47, 80;          /* = #0c2f50 en RGB */
    --menu-opacidad: .92;            /* arriba de la página */
    --menu-opacidad-scroll: .55;     /* al bajar el scroll (más bajo = más transparente) */
  }
 
  /* Que los títulos no queden tapados por el menú al navegar con los enlaces */
  section[id] { scroll-margin-top: 6rem; }
  html { scroll-behavior: smooth; }
 
  /* ---------- Contenedor flotante ---------- */
  .menu-wrap {
    position: fixed; top: 0; left: 0; right: 0;     /* siempre disponible, sin depender de "sticky" */
    z-index: 1030;
    padding: clamp(.4rem, 1.2vw, .9rem) clamp(.5rem, 2vw, 1.5rem);
    background: transparent;
    pointer-events: none;                           /* los lados vacíos no bloquean la página */
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  }
  .menu-wrap > .menu-moderno { pointer-events: auto; }
 
  /* Menú oculto: se esconde hacia arriba al bajar el scroll */
  .menu-wrap.menu-oculto { transform: translateY(-130%); }
  .menu-wrap:has(:focus-visible) { transform: none; }   /* con teclado (Tab), siempre visible */
 
  /* ---------- Cápsula ---------- */
  .menu-moderno {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
    padding: .45rem .6rem .45rem 1.1rem;
    border-radius: 999px;
    background: rgba(var(--menu-rgb), var(--menu-opacidad));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
            backdrop-filter: blur(12px) saturate(1.3);
    transition: background-color .35s ease, box-shadow .35s ease, border-radius .3s ease;
  }
  .menu-moderno.menu-scrolled {
    background: rgba(var(--menu-rgb), var(--menu-opacidad-scroll));
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .18);
  }
 
  /* Logo: crece o se reduce con la ventana */
  .menu-moderno .logo-menu {
    height: clamp(30px, 3.2vw, 44px);
    width: auto;
    display: block;
    transition: height .3s ease;
  }
  .menu-moderno.menu-scrolled .logo-menu { height: clamp(28px, 2.8vw, 38px); }
 
  /* ---------- Enlaces ---------- */
  .menu-moderno .nav-link {
    position: relative;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    padding: .5rem 1rem;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease;
  }
  .menu-moderno .nav-link:hover,
  .menu-moderno .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .12);
  }
  .menu-moderno .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .20);
  }
  .menu-moderno .nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
 
  /* ---------- Botón destacado ---------- */
  .menu-cta {
    display: inline-block;
    padding: .55rem 1.3rem;
    border-radius: 999px;
    background: #fff;
    color: var(--azul-marino);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .menu-cta:hover { color: var(--azul-marino); transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25); }
 
  /* ---------- Botón hamburguesa animado ---------- */
  .menu-moderno .navbar-toggler {
    border: 0; box-shadow: none !important;
    width: 2.75rem; height: 2.75rem; padding: 0;
    display: grid; place-content: center; gap: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
  }
  .menu-moderno .navbar-toggler span {
    display: block; width: 1.25rem; height: 2px; border-radius: 2px;
    background: #fff;
    transition: transform .3s ease, opacity .2s ease;
  }
  .menu-moderno .navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-moderno .navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-moderno .navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 @media (min-width: 992px) {
  .menu-moderno .navbar-toggler { display: none !important; }
}
  /* ---------- Barra de progreso de lectura ---------- */
  .menu-progreso {
    position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0;
    height: 2px; border-radius: 2px; overflow: hidden;
    pointer-events: none;
  }
  .menu-progreso i {
    display: block; height: 100%; width: 100%;
    background: #fff; transform-origin: left; transform: scaleX(0);
  }
 
  /* ---------- Celular y tablet: panel desplegable ---------- */
  @media (max-width: 991.98px) {
    .menu-moderno { padding: .5rem .6rem .5rem 1rem; }
    .menu-moderno:has(.navbar-collapse.show),
    .menu-moderno:has(.navbar-collapse.collapsing) {
      border-radius: 1.5rem;
      background: rgba(var(--menu-rgb), .94);   /* más sólido para leer bien */
    }
    .menu-moderno .navbar-collapse { padding: .75rem 0 .5rem; }
    .menu-moderno .navbar-nav { gap: .25rem; }
    .menu-moderno .nav-link { padding: .85rem 1rem; font-size: 1.05rem; }   /* zona táctil grande */
    .menu-cta { display: block; text-align: center; margin-top: .75rem; padding: .85rem 1rem; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .menu-wrap, .menu-moderno, .menu-moderno *, .menu-cta { transition: none !important; }
  }


/* ---------- ESTILOS DE mapa ---------- */
  .contacto__mapa { position: relative; overflow: hidden; border-radius: 1.1rem;
  box-shadow: 0 1rem 2.25rem rgba(0,0,0,.18); aspect-ratio: 4/3; min-height: 260px; background: #e9ecef; }
    .contacto__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .contacto__lista { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .9rem; }
    .contacto__lista li { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.45; }
    .contacto__icono { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
    border-radius: 50%; background: #e9eef8; font-size: 1.1rem; }
    .contacto__lista small { display: block; color: #6c757d; }
    .contacto__lista a { color: inherit; text-decoration: none; font-weight: 600; }
    @media (max-width: 575.98px) { .contacto__mapa { aspect-ratio: 1/1; } }




    /* ---------- cookies ---------- */
    /* ---------- Banner de cookies ---------- */
  .cookies {
    position: fixed; z-index: 1080;
    left: clamp(.6rem, 2vw, 1.5rem); right: clamp(.6rem, 2vw, 1.5rem); bottom: clamp(.6rem, 2vw, 1.5rem);
    max-width: 760px; margin-inline: auto;
    padding: 1rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
    color: #fff;
    background: rgba(12, 47, 80, .92);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 1.1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .cookies.visible { opacity: 1; transform: none; }
  .cookies[hidden] { display: none; }
  .cookies__texto { flex: 1 1 280px; margin: 0; font-size: .9rem; line-height: 1.5; }
  .cookies__texto a { color: #fff; font-weight: 600; }
  .cookies__botones { display: flex; gap: .5rem; flex: 0 0 auto; }
  .cookies__btn {
    border: 0; border-radius: 999px; padding: .55rem 1.2rem;
    font-weight: 700; font-size: .9rem; cursor: pointer;
  }
  .cookies__btn--aceptar { background: #fff; color: #0c2f50; }
  .cookies__btn--rechazar { background: rgba(255, 255, 255, .16); color: #fff; }
  .cookies__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  @media (max-width: 575.98px) {
    .cookies__botones { width: 100%; }
    .cookies__btn { flex: 1; }
  }
 
  /* ---------- Aviso sobre el mapa (si no se han aceptado cookies) ---------- */
  .mapa-aviso {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; padding: 1rem; text-align: center;
    background: #e9ecef; color: #495057;
  }
  .mapa-aviso[hidden] { display: none; }
 
  @media (prefers-reduced-motion: reduce) { .cookies { transition: none; } }