/* --- General Styles & Variables --- */
:root {
    --menu-width: 160px;              /* ancho de cada pestaña del menú (desktop) */
    --menu-height: 40px;              /* alto del botón */
    --tri-h: 6px;
    --header-h: 44px;   
    --menu-anim: .28s;                 /* velocidad de la cortina */
    --submenu-max: 60vh;  
    --edeltec-blue: #004277;
    --edeltec-orange: #EE7826;
    --edeltec-dark-blue: #005fbe;
    --edeltec-light-gray: #f8f9fa;
    --cartv-blue:#0a4a73; 
    --cartv-rule:#cfe0ea;
    --cart-blue: var(--cartv-blue);
    --cart-rule: var(--cartv-rule);
    --cartv-text:#0b4a6b;
    --cartv-border:#e5eef5; 
    --c-blue:#0b4a6b;           /* mismo azul de tu marca */
    --c-orange:#EE7826;         /* CTA */
    --c-placeholder:#9bb1c0; 
    --cursive-font: 'Dancing Script', cursive;
    --body-font: 'Montserrat', sans-serif;
    --toast-success: #34C759;
    --toast-error:#ef4444; 
    --glass-fill:  rgba(255,255,255,.16);     /* base translúcida */
    --glass-tint:  rgba(8,38,64,.40);         /* tinte azul oscuro encima */
    --glass-brdr:  rgba(255,255,255,.35);
    --glass-shad:  rgba(13,45,78,.42);
  }

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--body-font);
    background-image: url("../img/main/Fondo.bbaed3d32f61.png");
    background-size: cover; /* Asegura que la imagen cubra todo el espacio */
    background-position: center center; /* Centra la imagen */
    background-attachment: fixed;
    padding-top: 88px;
}

footer {
    overflow-x: hidden;
    max-width: 100%;
}

/* --- Animaciones --- */
.fade-in-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Header --- */
.cursive-title {
    font-family: var(--cursive-font);
    color: var(--edeltec-blue);
    font-size: 3rem;
    font-weight: 700;
}


.edeltec-header {
    background-color: var(--edeltec-blue); 
    border: none; 
    transition: background-color 0.4s ease;
    z-index: 1030;
}

.edeltec-header.is-scrolled{
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.edeltec-header .nav-link,
.edeltec-header .navbar-brand {
    color: white;
}

.edeltec-header .nav-link i {
    color: white;
}

.edeltec-header .btn-login {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.edeltec-header .btn-login:hover {
    background-color: white;
    color: var(--edeltec-blue);
}

.navbar-transparent .nav-link,
.navbar-transparent .navbar-brand {
    padding: 8px 15px;  
    text-decoration: none;
    color: white;
    transition: background-color 0.3s ease; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-transparent .nav-link i {
    color: white;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: white;
}

.navbar-transparent .btn-login {
    border-color: white;
    color: white;
}

.navbar-transparent .btn-login:hover {
    background-color: white;
    color: var(--edeltec-blue); 
}

.nav-links a:not(.login-button) {
    padding: 8px 15px; 
    border-radius: 8px; 
    text-decoration: none;
    color: white;
    transition: background-color 0.3s ease; 
}

.navbar-toggler {
    background-color: #f8f9fa;
}

.nav-links a:not(.login-button):hover {
    background-color: rgba(255, 255, 255, 0.15); 
}



.cart-title{ font-weight:800; color:var(--cart-blue); }
.cart-head-icon{ color:var(--cart-blue); font-size:26px; }
.cart-rule{ height:4px; background:var(--cart-rule); border-radius:999px; margin:8px 0 14px; }

/* Lista */
.cart-list{ max-height:min(56vh,540px); overflow-y:auto; padding-right:6px; }
.cart-item{ padding:10px 0; border-bottom:1px dashed #eef3f6; }
.cart-item:last-child{ border-bottom:0; }
.cart-thumb{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.cart-subtle{ color:#6c7b88; font-weight:700; }
.cart-name{ color:var(--cart-blue); font-weight:900; }
.cart-qty{ color:#385364; font-weight:600; }
.cart-qty b{ color:var(--cart-blue); }

/* Basurero a la derecha con aire */
.cart-remove{
  margin-left:auto;           /* empuja a la derecha */
  border-radius:10px;
  padding:.4rem .55rem;
  display:inline-flex; align-items:center; justify-content:center;
}



.btn-danger-subtle{
  background:#fbe9ea; color:#b32d2f; border:1px solid #f2c7cb;
}
.btn-danger-subtle:hover{ background:#f6d6d9; }

/* Acciones */
.cart-actions{ padding-bottom:4px; }
.cart-btn-primary{
  background: #004277; color:#fff; border:none; border-radius: 8px;
  padding:.1rem .1rem; font-weight:800; box-shadow:0 16px 36px rgba(10,74,115,.22);
}
.cart-btn-primary:hover{ 
  background: #e4945a; 
}
.cart-btn-outline{
  background:#f7fbff; color: #004277;
  border:2px solid #cfe2f3; border-radius: 8px; padding:.5rem .1rem; font-weight:800;
}

.cart-btn-outline:hover{ 
  background: #e4945a; 
}

/* Vaciar carrito estilo link */
.cart-empty{
  color:#c0392b; font-weight:700; background:transparent; border:0;
}
.cart-empty:hover{ text-decoration:underline; }

/* Área scrolleable y altura mínima para que se vea el placeholder */
.cart-scroll { max-height: 60vh; overflow-y: auto; min-height: 160px; position: relative; }

/* Estado base: placeholder oculto (ignoramos d-none con !important cuando corresponda) */
#cartEmpty { display: none; }

/* Mostrar placeholder SOLO cuando NO hay <li> en la lista */
.cart-scroll:not(:has(#listaCarrito > li)) #cartEmpty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Opcional: ocultar lista y acciones cuando está vacío */
.cart-panel:not(:has(#listaCarrito > li)) #listaCarrito { display: none; }
.cart-panel:not(:has(#listaCarrito > li)) #accionesCarrito,
.cart-panel:not(:has(#listaCarrito > li)) .cart-empty { display: none !important; }

/* Opcional: mostrar/ocultar badge del ícono (el número no se puede calcular sin JS) */
#carrito_compras #contadorCarrito { display: none; }
#carrito_compras:has(#listaCarrito > li) #contadorCarrito { display: inline-flex; }

/* Empty state */
.cart-emptystate-icon{
  font-size: 42px;
  color: #9fb5c6;
}
.cart-emptystate h6{
  color: var(--cart-blue);
}

/* Si quieres desactivar acciones cuando está vacío */
.cart-actions.disabled { opacity: .5; pointer-events: none; }
.cart-empty.d-none { display: none !important; } /* “Vaciar carrito” oculto al estar vacío */

/* ------ estilos para mejorar el ver carrito ------ */
.cartv-line + .cartv-line { border-top: 1px solid var(--bs-border-color); }

/* Grid: Nombre | Kilos | Alergenos | Descripción + botón guardar */
.cartv-edit-grid {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: .6rem .8rem;
}
.cartv-desc { grid-column: 1 / -1; }
.cartv-label {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* Inputs minimal: solo línea inferior */
.cartv-edit-input {
  border: none !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  border-radius: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cartv-edit-input-nombre {
  border: none !important;
  border-bottom: 1px solid var(white) !important;
  border-radius: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cartv-edit-input:focus { border-bottom-color: var(--bs-primary) !important; }

.cartv-kilos { text-align: right; }

/* Botón pequeñito para "Sin alérgenos" */
.btn-xxs {
  --bs-btn-padding-y: .125rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .7rem;
  line-height: 1;
}

/* Vista: corta textos largos */
.cartv-line .view .text-truncate { max-width: 38ch; }

.cartv-alerg-wrap .form-check-input { margin-top: 0; }
.cartv-alerg-wrap .form-check-label { cursor: pointer; }
/* === SCOPE: solo afecta al modal del carrito === */
.cartv-modal .cartv-thumb{width:56px;height:56px;border-radius:12px;object-fit:cover}
.cartv-modal .md-elev{box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 8px rgba(0,0,0,.06)}
.cartv-modal .md-elev-btn{box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cartv-modal .cartv-edit-card{border-radius:12px;background:var(--bs-body-bg);border:1px solid var(--bs-border-color);padding:.85rem .9rem}
.cartv-modal .cartv-edit-head{display:flex;align-items:center;gap:.75rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px dashed var(--bs-border-color)}
.cartv-modal .cartv-edit-title{margin:0;font-size:.98rem;font-weight:700}
.cartv-modal .cartv-edit-grid{display:grid;grid-template-columns:1fr 160px 1fr;gap:.9rem 1rem}
@media (max-width:768px){.cartv-modal .cartv-edit-grid{grid-template-columns:1fr}}
.cartv-modal .cartv-desc{grid-column:1/-1}
.cartv-modal .cartv-label{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--bs-secondary-color)}
.cartv-modal .cartv-hint{font-size:.72rem;color:var(--bs-secondary-color);margin-top:.2rem}
.cartv-modal .cartv-edit-input{border:0!important;border-bottom:2px solid rgba(var(--bs-primary-rgb),.15)!important;border-radius:0!important;padding-left:0!important;padding-right:0!important;background:transparent!important;box-shadow:none!important}
.cartv-modal .cartv-edit-input:focus{border-bottom-color:var(--bs-primary)!important}
.cartv-modal .cartv-kilos{text-align:right}
.cartv-modal .segmented{display:inline-flex;border:1px solid var(--bs-border-color);border-radius:999px;padding:2px;gap:2px;background:var(--bs-body-bg)}
.cartv-modal .segmented-btn{font-size:.78rem;line-height:1;padding:.35rem .7rem;border-radius:999px;cursor:pointer;user-select:none;color:var(--bs-secondary-color)}
.cartv-modal .btn-check:checked+.segmented-btn{background:rgba(var(--bs-primary-rgb),.12);color:var(--bs-primary);font-weight:600}
.cartv-modal .cartv-edit-actions{position:sticky;bottom:-1px;display:flex;justify-content:flex-end;gap:.5rem;padding-top:.75rem;margin-top:.25rem;border-top:1px solid var(--bs-border-color);background:linear-gradient(to top,var(--bs-body-bg),rgba(0,0,0,0))}
.cartv-modal .btn-ghost{background:transparent;border:1px solid var(--bs-border-color)}
.cartv-modal .btn-ghost:hover{background:var(--bs-light)}
.cartv-modal .btn-text{background:transparent;border:0;color:var(--bs-secondary-color)}
.cartv-modal .btn-text:hover{color:var(--bs-body-color);background:rgba(0,0,0,.03)}
/* fila horizontal para radios + input (Grid) */
.cartv-modal .cartv-alerg-row {
  display: grid;
  grid-template-columns: max-content 1fr; /* radios | input que se estira */
  align-items: center;
  column-gap: .75rem;
  row-gap: .5rem;
}

/* el input ocupa la segunda columna y no se apila */
.cartv-modal .cartv-alerg-input {
  width: 100%;
  margin-top: 0 !important; /* evita saltos */
}

.cartv-modal .cartv-alerg-wrap {
  grid-column: 2 / -1; /* desde la 2ª columna hasta el final */
}

/* en móviles, que se apile prolijo */
@media (max-width: 768px) {
  .cartv-modal .cartv-alerg-row { grid-template-columns: 1fr; }
}
/* en pantallas pequeñas, que pueda ocupar toda la fila si no cabe */
@media (max-width: 768px) {
  .cartv-modal .cartv-alerg-input { flex: 1 1 100%; }
}
/* ------ FIN estilos para mejorar el ver carrito ------ */

.btn-login {
    background-color: white;
    color: var(--edeltec-blue);
    border: 2px solid var(--edeltec-blue);
    border-radius: 8px;
    padding: 5px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: var(--edeltec-blue);
    color: white;
}

/* --- Custom Buttons --- */
.btn-primary-custom {
    background-color: var(--edeltec-blue);
    color: white;
    border-radius: 8px;
    padding: 10px 30px;
    font-weight: 600;
    border: none;
}
.btn-primary-custom:hover {
    background-color: var(--edeltec-dark-blue);
    color: white;
}
.btn-secondary-custom {
    color: white;
    background-color: var(--edeltec-orange); 
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease; 
    text-decoration: none; 
}
.btn-secondary-custom:hover {
    background-color: #ff8923; 
    color: white; 
    cursor: pointer; 
}

/* --- Dropdown suave --- */

.navbar .dropdown-menu{
  /* mantenerlo siempre en flujo para que Bootstrap lo posicione */
  display: block;
  /* animación */
  transform-origin: top;          /* se abre desde arriba */
  transform: scaleY(0);           /* cerrado */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-top: .25rem;             /* un pelín separado del botón */
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    opacity   .20s ease,
    visibility 0s linear .26s;    /* oculto al final */
  will-change: transform, opacity;
  overflow: hidden;               /* recorta contenido durante la animación */
}

.navbar .dropdown-menu.show{
  transform: scaleY(1);           /* abierto */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .30s cubic-bezier(.2,.8,.2,1),
    opacity   .22s ease,
    visibility 0s;                /* visible de inmediato */
}

.navbar .dropdown-menu{ transform: translateY(-6px) scaleY(0); }
.navbar .dropdown-menu.show{ transform: translateY(0) scaleY(1); }

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .navbar .dropdown-menu{ transition: none !important; }
}


:root{ --header-h: 72px; } /* por si no estuviera definida */

/* === Carrito: estilos base (estructura/colores) === */
.cart-panel{
  position: fixed;
  right: 18px;
  top: calc(var(--header-h) + 12px);
  width: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;                 /* <- fondo BLANCO */
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 2000;                    /* sobre el header (z=1030) */
  overflow: hidden;
}
@media (max-width: 640px){
  .cart-panel{ width:min(94vw,520px); right:3vw; top:80px; }
}



/* 1) Separación entre items del navbar */
.edeltec-header .navbar-nav{
  gap: .5rem;                 /* separa <li> entre sí (en mobile separa verticalmente) */
}
@media (min-width: 992px){
  .edeltec-header .navbar-nav{ gap: .6rem; }
}

/* 3) El separador “|” no debe tener hover/click ni fondo */
.edeltec-header .nav-divider{
  padding: 0 .25rem;
  background: transparent !important;
  pointer-events: none;
  opacity: .7;
}

/* Quitar la “puntita” del globo del submenú */
.navbar .dropdown-menu::before,
.navbar .dropdown-menu::after{
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}

/* Quitar el puntito naranja de los items */
.navbar .dropdown-menu li,
.navbar .dropdown-menu .dropdown-item{
  list-style: none !important;            /* por si viniera como marcador */
}
.navbar .dropdown-menu .dropdown-item::before,
.navbar .dropdown-menu li::marker{
  content: none !important;               /* por si fuera un ::before personalizado */
  display: none !important;
}

/* Cortina azul: el submenú hereda el azul del header */
.edeltec-header .dropdown-menu{
  background: var(--edeltec-blue) !important;
  border: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  border-radius: 0 0 14px 14px;         /* arriba recto, abajo redondeado */
  margin-top: 0;                        /* pegado al botón */
  padding: .5rem 0;
  background-image: none !important;    /* por si algún gradiente queda */
}

/* Items en blanco y sin “fondo pastilla” */
.edeltec-header .dropdown-menu .dropdown-item{
  color: #fff !important;
  font-weight: normal;
  padding: .6rem 1rem;
  border-radius: 0;                      /* evita esquinas internas redondeadas */
  background: transparent !important;
}

/* Hover/active: leve aclarado para sensación de cortina */
.edeltec-header .dropdown-menu .dropdown-item:hover,
.edeltec-header .dropdown-menu .dropdown-item:focus{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}
.edeltec-header .dropdown-menu .dropdown-item.active,
.edeltec-header .dropdown-menu .dropdown-item:active{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* --- Dropdown en modo VIDRIO --- */
/* Se aplica cuando el header tiene la clase .navbar-transparent */
.edeltec-header.navbar-transparent .dropdown-menu{
  /* vidrio azulado */
  background: linear-gradient(180deg, rgba(0,66,119,.55), rgba(0,66,119,.42)) !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  border-radius: 12px;            /* puedes mantener 0 0 14px 14px si quieres arriba recto */
  margin-top: .15rem;

  /* frosted glass */
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

/* Ítems sobre vidrio: texto blanco y hover sutil */
.edeltec-header.navbar-transparent .dropdown-menu .dropdown-item{
  color:#fff !important;
  background: transparent !important;
}
.edeltec-header.navbar-transparent .dropdown-menu .dropdown-item:hover,
.edeltec-header.navbar-transparent .dropdown-menu .dropdown-item:focus{
  background: rgba(255,255,255,.12) !important;
  color:#fff !important;
}

/* Cuando el header está scrolleado (no vidrio) mantenemos la cortina azul sólida */
.edeltec-header.is-scrolled .dropdown-menu{
  background: var(--edeltec-blue) !important;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Evitar que el dropdown se cierre al pasar del botón al menú --- */
@media (min-width: 992px){
  .edeltec-header .dropdown{
    position: relative;
  }

  /* Puente invisible para que no se corte el :hover al bajar */
  .edeltec-header .dropdown::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;              /* justo bajo el botón */
    height:12px;           /* puedes subir a 14–16 si lo necesitas */
  }

 
}

/* Evitar huecos: que el menú quede pegado al botón */
.edeltec-header .dropdown-menu{
  margin-top: 0 !important;
}

/* ========== NAVBAR MOBILE: NO FIJO, EN EL FLUJO ========== */
:root{ --header-h: 72px; }  /* ajusta si tu barra mide distinto */

@media (max-width: 575.98px){

  html, body {
    padding-top: 88px;
}

   header.navbar,
  .navbar,
  .navbar-transparent{
    top: 0; left: 0; right: 0;
    height: clamp(90px, 7.5svh, 72px);
    background-color: #004277 !important; /* color sólido de marca */
    background-image: none !important;    /* sin degradado */
    backdrop-filter: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 1000;
  }

  /* Que el contenido no reserve espacio para un header fijo */
  body{ padding-top: 0 !important; }

  /* Menú colapsado: panel debajo de la barra que EMPUJA el contenido */
  .navbar-collapse{
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: var(--edeltec-blue) !important;  /* mantiene fondo sólido */
    box-shadow: none !important;
    padding: .5rem 1rem 1rem !important;
  }

  /* Estados (igual que Bootstrap, pero nos aseguramos) */
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.show     { display: block !important; }

  /* Legibilidad del menú */
  .navbar-nav .nav-link{ color:#fff; padding:.7rem 0; }
  .navbar-toggler{ background:#f8f9fa; }

  /* El contenedor apila y centra */
  .edeltec-header .navbar-nav{
    flex-direction: column;
    align-items: center;              /* centra el eje cruzado */
  }

  /* Todas las opciones como bloque centrado */
  .edeltec-header .navbar-nav .nav-link{
    width: 100%;
    display: flex;                    /* centramos con flex */
    justify-content: center;
    align-items: center;
    padding: .75rem 0;
    text-align: center;
    color: #fff;
  }

  /* El dropdown debe comportarse igual que un link normal */
  .edeltec-header .navbar-nav .dropdown-toggle{
    padding-left: 0;
    padding-right: 0;
    gap: .35rem;                      /* espacio entre texto y caret */
  }
  /* Ajustes del caret (►▼) para que no “empuje” hacia la izquierda */
  .edeltec-header .navbar-nav .dropdown-toggle::after{
    margin-left: .35rem;              /* en vez de padding del link */
    transform: translateY(1px);       /* ajuste óptico vertical */
  }

  /* Si algún estilo previo le puso text-start/align-left al dropdown, anúlalo */
  .edeltec-header .navbar-nav .dropdown .nav-link,
  .edeltec-header .navbar-nav .dropdown-toggle{
    text-align: center !important;
  }

  .navbar-nav .dropdown-menu{
    position: static !important;          /* empuja contenido cuando abre */
    display: none !important;             /* cerrado no ocupa espacio */
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: .25rem 0 !important;
    background: var(--edeltec-blue) !important;
    box-shadow: none !important;
  }
  .navbar-nav .dropdown-menu.show,
  .navbar-nav .dropdown.show > .dropdown-menu{
    display: block !important;            /* abierto: aparece y empuja */
  }

  /* Opcional: reduce la separación vertical entre items del menú móvil */
  .edeltec-header .navbar-nav{ gap: .25rem; }
  .edeltec-header .navbar-nav .nav-link{ padding: .7rem 0; }

  /* Indicador del caret girando cuando está abierto */
  .edeltec-header .navbar-nav .dropdown-toggle::after{
    transition: transform .2s ease;
  }
  .edeltec-header .navbar-nav .dropdown.show > .dropdown-toggle::after{
    transform: rotate(180deg);
  }

  
  
}

@media (min-width: 992px){
  .navbar .dropdown-menu{
    display: block;                       /* tu animación original */
    transform-origin: top;
    transform: translateY(-6px) scaleY(0);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .20s ease, visibility 0s linear .26s;
    overflow: hidden;
  }
  .navbar .dropdown-menu.show{
    transform: translateY(0) scaleY(1);
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .30s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility 0s;
  }
}

/* Punto rojo en el botón de menú cuando hay productos en el carrito (mobile) */
@media (max-width: 575.98px){
  .navbar-toggler{ position: relative; }

  /* Si el carrito tiene al menos un <li>, mostramos el puntito en el hamburguesa */
  body:has(#carrito_compras #listaCarrito > li) .navbar-toggler::after{
    content: "";
    position: absolute;
    top: 4px;         /* ajusta fino según tu header */
    right: 4px;
    width: 10px;
    height: 10px;
    background: #dc3545;   /* rojo Bootstrap */
    border-radius: 50%;
    border: 2px solid #f8f9fa; /* aro para contraste sobre el botón claro */
    pointer-events: none;
  }
}


/* --- Footer --- */

footer {
    background-color: #838383; 
    color: white; 
    padding: 50px 0;
}


footer h4 {
    color: white;
    font-weight: bold;
    margin-bottom: 20px;
}


.certifications-container {
    display: flex; 
    align-items: center; 
    gap: 25px; 
}


.certifications-container img {
    height: 100px; 
    width: auto;
}

/* --- Footer links (clean, legible, accesibles) --- */
.edeltec-footer .footer-link{
  color: inherit;                 /* hereda el blanco del footer */
  text-decoration: none;          /* sin subrayado por defecto */
  opacity: .9;                    /* un toque más suave */
  font-weight: 500;
  display: inline-block;
  padding: 2px 0;
  transition: opacity .2s ease, color .2s ease, text-decoration-color .2s ease;
}

/* igual para visitados: evita el morado del navegador */
.edeltec-footer .footer-link:visited{
  color: inherit;
}

/* hover/focus: subrayado sutil y mejor contraste */
.edeltec-footer .footer-link:hover,
.edeltec-footer .footer-link:focus-visible{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;     /* subrayado separado del texto */
  text-decoration-thickness: 1px;
}

/* foco accesible para teclado */
.edeltec-footer .footer-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
  border-radius: 2px;
}

/* espaciar los ítems del listado */
.edeltec-footer .list-unstyled > li + li{
  margin-top: .35rem;
}


/* --- Floating Chat Bubble --- */
.chat-bubble {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: var(--edeltec-orange);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.2s;
}
.chat-bubble:hover {
    transform: scale(1.1);
    color: white;
}

/* opcional, en tu main.css */
#toastAgregado.toast{
  min-width: 280px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.toast-rich{
  background: var(--toast-success);
  color: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  min-width: 520px;              /* ancho similar al mockup */
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

/* layout interno */
.toast-rich__inner{
  display: flex;
  align-items: center;
  gap: 16px;
}

.toast-rich__icon{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.toast-rich__icon i{
  font-size: 30px; line-height: 1; color: #fff;
}

.toast-rich__title{
  font-weight: 800;
  font-size: clamp(1.1rem, .6vw + 1rem, 1rem);
  margin: 0;
}

/* animación suave al aparecer */
@keyframes toast-pop {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.toast-rich.show{
  animation: toast-pop 260ms ease-out;
}

.toast-container{ z-index:1080; }

.edeltec-header.navbar-transparent .dropdown-menu{
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border-radius: 14px;
  padding: .4rem;
}

/* items en blanco para buen contraste */
.edeltec-header.navbar-transparent .dropdown-item{
  color: #fff;
  border-radius: 10px;
}
.edeltec-header.navbar-transparent .dropdown-item:hover{
  background: rgba(255,255,255,.18);
  color: #fff;
}
.edeltec-header.navbar-transparent .dropdown-divider{
  border-color: rgba(255,255,255,.25);
}

/* caret/blip del toggle en blanco */
.edeltec-header.navbar-transparent .dropdown-toggle::after{
  border-top-color: #fff; /* Bootstrap usa border-top para el caret */
  opacity: .9;
}

/* ——— Mantén el dropdown blanco cuando NO esté en modo vidrio ——— */
.edeltec-header:not(.navbar-transparent) .dropdown-menu{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.edeltec-header:not(.navbar-transparent) .dropdown-item{
  color: #0d2d4e;
}
.edeltec-header:not(.navbar-transparent) .dropdown-item:hover{
  background: rgba(0,66,119,.08);
  color: #0d2d4e;
}

/* =========================
   Dropdown en header SÓLIDO
   ========================= */
.edeltec-header:not(.navbar-transparent) .dropdown-menu{
  background:#fff;
  border:1px solid rgba(13,45,78,.06);
  box-shadow:0 16px 40px rgba(13,45,78,.15);
  border-radius:14px;
  padding:.35rem;
  min-width:240px;

  /* micro-animación */
  transform-origin: top;
  opacity:0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.edeltec-header:not(.navbar-transparent) .dropdown-menu.show{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* “puntita” que apunta al botón */
.edeltec-header:not(.navbar-transparent) .dropdown-menu::after{
  content:'';
  position:absolute; top:-8px; left:22px;
  width:14px; height:14px; background:#fff;
  border-left:1px solid rgba(13,45,78,.06);
  border-top:1px solid rgba(13,45,78,.06);
  transform: rotate(45deg);
  box-shadow:-3px -3px 8px rgba(13,45,78,.04);
}

/* items */
.edeltec-header:not(.navbar-transparent) .dropdown-item{
  padding:.6rem .9rem .6rem 1rem;
  font-weight:600;
  color:#0d2d4e;
  border-radius:10px;
  position:relative;
}
.edeltec-header:not(.navbar-transparent) .dropdown-item:hover,
.edeltec-header:not(.navbar-transparent) .dropdown-item:focus{
  background:linear-gradient(90deg, rgba(0,66,119,.10), rgba(0,66,119,.02));
  color:#0d2d4e;
}
/* pequeño acento circular al hover/focus */
.edeltec-header:not(.navbar-transparent) .dropdown-item:hover::before,
.edeltec-header:not(.navbar-transparent) .dropdown-item:focus::before{
  content:'';
  position:absolute; left:6px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--edeltec-orange);
  transform:translateY(-50%);
}

/* activo / página actual */
.edeltec-header:not(.navbar-transparent) .dropdown-item.active{
  background:rgba(0,66,119,.12);
  color:#0d2d4e;
}

/* separador */
.edeltec-header:not(.navbar-transparent) .dropdown-divider{
  margin:.35rem 0;
  border-color:rgba(13,45,78,.08);
}

/* nav links: hover suave en sólido */
.edeltec-header:not(.navbar-transparent) .nav-link:hover{
  background:rgba(255,255,255,.10);
  border-radius:10px;
}

/* accesibilidad: foco visible */
.edeltec-header .nav-link:focus-visible,
.edeltec-header .dropdown-item:focus-visible{
  outline:3px solid rgba(238,120,38,.35);
  outline-offset:2px;
  border-radius:10px;
}


/* ==============================
   Dropdown en header MODO VIDRIO
   ============================== */
.edeltec-header.navbar-transparent .dropdown-menu{
  /* frosted glass */
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);

  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  border-radius:14px;
  padding:.35rem;
  min-width:240px;
  z-index: 1100;

  /* micro-animación */
  transform-origin: top;
  opacity:0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.edeltec-header.navbar-transparent .dropdown-menu.show{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* items */
.edeltec-header.navbar-transparent .dropdown-item{
  padding:.6rem .9rem .6rem 1rem;
  font-weight:700;
  color:#fff;
  border-radius:10px;
  position:relative;
}
.edeltec-header.navbar-transparent .dropdown-item:hover,
.edeltec-header.navbar-transparent .dropdown-item:focus{
  background: rgba(255,255,255,.14);
  color:#fff;
}
/* acento naranja al hover/focus */
.edeltec-header.navbar-transparent .dropdown-item:hover::before,
.edeltec-header.navbar-transparent .dropdown-item:focus::before{
  content:'';
  position:absolute; left:6px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background: var(--edeltec-orange);
  transform: translateY(-50%);
}

/* activo */
.edeltec-header.navbar-transparent .dropdown-item.active{
  background: rgba(255,255,255,.20);
  color:#fff;
}

/* separador */
.edeltec-header.navbar-transparent .dropdown-divider{
  margin:.35rem 0;
  border-color: rgba(255,255,255,.25);
}

/* hover de los links en vidrio (sutil) */
.edeltec-header.navbar-transparent .nav-link:hover{
  background: rgba(255,255,255,.10);
  border-radius:10px;
}

/* Foco accesible */
.edeltec-header.navbar-transparent .nav-link:focus-visible,
.edeltec-header.navbar-transparent .dropdown-item:focus-visible{
  outline:3px solid rgba(238,120,38,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* Fallback si el navegador no soporta backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .edeltec-header.navbar-transparent .dropdown-menu{
    background: rgba(13,45,78,.92);
    border-color: rgba(255,255,255,.08);
  }
  .edeltec-header.navbar-transparent .dropdown-menu::after{
    background: rgba(13,45,78,.92);
    border-left-color: rgba(255,255,255,.08);
    border-top-color: rgba(255,255,255,.08);
  }
}

/* Dropdown en NAVBAR TRANSPARENTE con tinte extra */
.edeltec-header.navbar-transparent .dropdown-menu{
  /* 2 capas: tinte + vidrio */
  background:
    linear-gradient(180deg, var(--glass-tint) 0%, rgba(8,38,64,.28) 60%, rgba(8,38,64,.20) 100%),
    var(--glass-fill);

  color:#fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.30);

  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);

  border:1px solid var(--glass-brdr);
  box-shadow: 0 20px 60px var(--glass-shad);
  border-radius:14px;
  padding:.35rem;
  min-width:240px;

  transform-origin: top;
  opacity:0; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.edeltec-header.navbar-transparent .dropdown-menu.show{
  opacity:1; transform: translateY(0) scale(1);
}

/* Items: blancos y legibles */
.edeltec-header.navbar-transparent .dropdown-item{
  padding:.6rem .9rem .6rem 1rem;
  font-weight:800;
  color:#fff;
  border-radius:10px;
  position:relative;
}
.edeltec-header.navbar-transparent .dropdown-item:hover,
.edeltec-header.navbar-transparent .dropdown-item:focus{
  background: rgba(255,255,255,.14);
  color:#fff;
}
/* acento naranja */
.edeltec-header.navbar-transparent .dropdown-item:hover::before,
.edeltec-header.navbar-transparent .dropdown-item:focus::before{
  content:'';
  position:absolute; left:6px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background: var(--edeltec-orange);
  transform: translateY(-50%);
}
.edeltec-header.navbar-transparent .dropdown-item.active{
  background: rgba(255,255,255,.20);
  color:#fff;
}

/* Fallback sin backdrop-filter */
@supports not ((-webkit-backdrop-filter:none) or (backdrop-filter:none)) {
  .edeltec-header.navbar-transparent .dropdown-menu{
    background: rgba(13,45,78,.92);
    border-color: rgba(255,255,255,.10);
  }
  .edeltec-header.navbar-transparent .dropdown-menu::after{
    background: rgba(13,45,78,.92);
    border-left-color: rgba(255,255,255,.10);
    border-top-color: rgba(255,255,255,.10);
  }
}

/* contenedor */
.cartv-modal{ border:0; border-radius:22px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.18); }

/* header */
.cartv-head{ align-items:flex-end; gap:18px; background:#fff; border-bottom:1px solid var(--cartv-border); padding:16px 20px 8px; }
.cartv-title{ margin:0; color:var(--cartv-blue); font-weight:800; letter-spacing:.2px; font-size:clamp(1.35rem,.9vw + 1rem,1.8rem); }
.cartv-rule{ height:6px; width:280px; border-radius: 8; background:linear-gradient(90deg,var(--cartv-blue),var(--cartv-rule)); opacity:.9; margin-top:6px; }
.cartv-cta{ background:var(--cartv-blue); color:#fff; font-weight:800; border:none; border-radius: 8px; padding:.7rem 1.2rem; box-shadow:0 14px 50px rgba(10, 75, 115, 0.164); }
.cartv-cta:hover{ background: #e4945a;  }

/* lista y líneas */
.cartv-list{ background:#fff; }
.cartv-line{ position:relative; padding:18px 20px; border-bottom:1px solid var(--cartv-border); }
.cartv-line:last-child{ border-bottom:0; }

/* thumb */
.cartv-thumb{ width:64px; height:64px; border-radius:50%; object-fit:cover; box-shadow:0 8px 18px rgba(0,0,0,.12); }

/* meta superior (3 columnas) */
.cartv-meta{ display:grid; grid-template-columns:1.2fr .9fr 1fr; gap:16px; row-gap:6px; }
.cartv-label{ display:block; font-weight:800; color:var(--cartv-blue); }
.cartv-val{ color:var(--cartv-text); margin-top:.35rem; line-height:1.45; }
.cartv-kg{ font-weight:900; }

/* descripción */
.cartv-desc{ color:var(--cartv-text); margin-top:.35rem; line-height:1.45; }

/* eliminar */
.cartv-remove{ position:absolute; right:14px; top:12px; border:0; background:transparent; color:#7f8c97; padding:.25rem .4rem; border-radius:10px; }
.cartv-remove:hover{ background:#f0f5f9; color:#c0392b; }

.contact-modal .modal-content{
  border:0;
  border-radius:22px;
  padding:.5rem 1rem 1rem;
}

.contact-title{
  color:var(--c-blue);
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.1;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
}

.contact-close{
  transform: scale(1.35);
  opacity:.9;
}
.contact-close:focus-visible{ outline:3px solid rgba(238,120,38,.35); outline-offset:2px; }

/* Etiquetas tipo “Nombre* :” */
.contact-label{
  display:block;
  color:var(--c-blue);
  font-weight:800;
  margin-bottom:.35rem;
  letter-spacing:.2px;
}
.req-star{ color:var(--c-blue); } /* el mockup muestra el * en azul */

/* Inputs */
.contact-control{
  border:2px solid var(--c-blue);
  border-radius:10px;
  padding:.7rem .95rem;
  font-weight:600;
  color:var(--c-blue);
  box-shadow:none;
}
.contact-control::placeholder{
  color:var(--c-placeholder);
  font-style:italic;
  opacity:1;
}
.contact-control:focus{
  border-color:var(--c-blue);
  box-shadow:0 0 0 .15rem rgba(11,74,107,.12);
}

/* Textarea grande como en el mockup */
.contact-textarea{
  min-height: 9rem;
}

/* CTA naranja, redondeado, a la derecha */
.contact-cta{
  background: var(--c-orange);
  color:#fff;
  border:none;
  border-radius: 8px;
  font-weight:800;
  padding:.9rem 1.5rem;
  box-shadow:0 10px 24px rgba(238,120,38,.28);
}
.contact-cta:hover{ background-color: #e4945a; }
.contact-cta:active{ filter:brightness(.92); }
.contact-cta:focus-visible{ outline:3px solid rgba(238,120,38,.45); outline-offset:2px; }

/* Quitar la negrita del submenú en todos los estados del header */
.edeltec-header .dropdown-item {
  font-weight: 400 !important; /* o 'normal' */
}


/* Responsive: bordes y paddings un poco más compactos */
@media (max-width: 575.98px){
  .contact-control{ padding:.6rem .8rem; }
  .contact-textarea{ min-height:7rem; }
}

/* responsive */
@media (max-width:991.98px){
  .cartv-meta{ grid-template-columns:1fr; }
  .cartv-line{ padding-right:42px; }
  :root{ --header-h: 72px; } /* tablets/móvil */
}


@media (max-width: 1400px) {
    

    .certifications-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .certifications-container {
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 15px;
    }

    .certifications-container img {
        max-height: 200px; 
    }
}

@media (max-width: 768px) {
    footer {
        padding: 30px 0;
        text-align: center; 
    }

    footer .container {
        padding: 0 20px;
    }

    .certifications-container img {
        max-height: 200px; 
    }
}

@media (max-width: 640px){
  .toast-rich{ min-width: min(92vw, 520px); }
  .cart-panel{ width:min(94vw,520px); right:3vw; top:80px; }
}

/* Aumenta la zona clickeable del botón de cierre en TODOS los modales */
.modal .btn-close,
.contact-close {
  width: 26px;              /* área clickeable */
  height: 26px;             /* área clickeable */
  padding: 12px;            /* centra el ícono dentro del área */
  background-size: 16px 16px; /* mantiene el tamaño visual del ícono */
  border-radius: 50%;
  opacity: .85;
}

.modal .btn-close:hover { opacity: 1; }
.modal .btn-close:focus { box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }

.barrita{
  color: white;
}

/* ====== Overlay sobre el contenido ====== */
.menu-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: 998; /* por debajo del header (z=1000) y por encima del contenido */
}
body.menu-open .menu-overlay{ opacity: 1; pointer-events: auto; }

/* Bloquea el scroll cuando el menú está abierto */
body.menu-open{ overflow: hidden; height: 100dvh; }

/* ====== Hamburguesa animada -> X ====== */
.hamburger{ border:0; background:#f8f9fa; border-radius:.5rem; width:42px; height:42px;
  display:grid; place-items:center; position:relative; z-index:1001; }
.hamburger-box{ width:22px; height:16px; position:relative; display:block; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  content:""; position:absolute; left:0; right:0;
  height:2px; background:#0d2d4e; border-radius:2px;
  transition: transform .22s ease, opacity .18s ease, top .22s ease, bottom .22s ease;
}
.hamburger-inner{ top:7px; }
.hamburger-inner::before{ top:-6px; }
.hamburger-inner::after { bottom:-6px; }
.hamburger.is-active .hamburger-inner{ transform: rotate(45deg); }
.hamburger.is-active .hamburger-inner::before{ top:0; transform: rotate(90deg); }
.hamburger.is-active .hamburger-inner::after { bottom:0; transform: rotate(90deg); }

/* ====== Panel móvil con micro-animación ====== */
@media (max-width: 575.98px){

  .navbar-collapse.show{
    animation: nav-drop .18s ease-out both; /* antes .24s */
  }
  @keyframes nav-drop{
    from{ opacity:0; transform: translateY(-8px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* Ítems: transiciones más cortas */
  .edeltec-header .navbar-nav .nav-item{
    opacity:0; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease; /* antes .28s */
  }

  /* Escalonado compacto (último ~0.33s) */
  body.menu-open .navbar-collapse.show .nav-item{ opacity:1; transform:none; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(1){ transition-delay: .00s; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(2){ transition-delay: .03s; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(3){ transition-delay: .06s; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(4){ transition-delay: .09s; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(5){ transition-delay: .12s; }
  body.menu-open .navbar-collapse.show .nav-item:nth-child(6){ transition-delay: .15s; }

  /* (opcional) Submenú acordeón un pelín más vivo */
  .navbar-nav .dropdown-menu{
    transition: max-height .20s ease; /* antes .25s */
  }

  .navbar-nav .dropdown.show > .dropdown-menu{
    max-height: 60vh;               /* abierto (altura límite) */
    padding: .25rem 0 !important;
  }
  /* aspecto de los items del submenú en móvil */
  .edeltec-header .dropdown-menu .dropdown-item{
    padding: .55rem .75rem !important;
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .menu-overlay, .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after,
  .navbar-collapse.show, .edeltec-header .navbar-nav .nav-item,
  .navbar-nav .dropdown-menu { transition: none !important; animation: none !important; }
}

/* ===== Widget WhatsApp ===== */
.wsp-widget{
  position: fixed;
  right: 25px;
  bottom: 95px;                /* encima de la burbuja */
  width: min(92vw, 360px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 1100;               /* sobre la burbuja (z=1000) */
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wsp-widget.show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.wsp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(13,45,78,.08);
  background: #f7fbff;
}
.wsp-header-left{ display:flex; align-items:center; gap:10px; color: var(--c-blue, #0b4a6b); }
.wsp-wa-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,.15);
}
.wsp-close{
  border:0; background: transparent; font-size: 24px; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  color:#7f8c97;
}
.wsp-close:hover{ background:#eef3f6; }

.wsp-body{ padding: 12px; }
.wsp-greeting{ margin: 0 0 8px; color: var(--c-blue, #0b4a6b); font-weight: 700; }

.wsp-input{
  width: 100%;
  border: 2px solid var(--c-blue, #0b4a6b);
  border-radius: 10px;
  padding: .7rem .95rem;
  font-weight: 600;
  color: var(--c-blue, #0b4a6b);
  resize: vertical;
  min-height: 90px;
}
.wsp-input::placeholder{ color: var(--c-placeholder, #9bb1c0); font-style: italic; }
.wsp-input:focus{ outline: none; box-shadow: 0 0 0 .15rem rgba(11,74,107,.12); }

.wsp-send{
  display: inline-block;
  margin-top: 10px;
  width: 100%;
  background: var(--edeltec-orange, #EE7826);
  color: #fff; border: 0;
  font-weight: 800;
  padding: .8rem 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(238,120,38,.28);
  cursor: pointer;
}
.wsp-send:hover{ background: #e4945a; }

.wsp-note{
  display:block; margin-top:8px;
  color:#6c7b88; font-size: .85rem;
}

/* Opcional: en pantallas pequeñas, mueve el widget un poco */
@media (max-width: 640px){
  .wsp-widget{ right: 3vw; bottom: 88px; }
}

/* Laptop en Bootstrap: lg = 992px en adelante */
@media (min-width: 992px) {
  #btnSideCTA{
    /* Tamaño fijo (ajusta a tu gusto) */
    width: 64px !important;      /* ancho de la pestaña */
    height: 320px !important;    /* alto de la pestaña */
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.1;
    max-width: 64px !important;
    max-height: 320px !important;
    overflow: hidden;             /* evita que el contenido la estire */
  }
  #btnSideCTA .label{
    white-space: nowrap;          /* que el texto no haga saltos de línea */
    font-size: inherit;
  }
}

/* --- Animación carrito --- */
.cart-panel{
  /* estado cerrado (cuando NO tiene .is-open) */
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.cart-panel.is-open{
  /* estado abierto */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .cart-panel{ transition: none !important; }
}


/* Para que SWEETALERT quede sobre los modals */
.swal2-container {
  z-index: 200000 !important;
}

/* ===== Widget WhatsApp ===== */
.wsp-widget{
  position: fixed;
  right: 25px;
  bottom: 95px;                /* encima de la burbuja */
  width: min(92vw, 360px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  z-index: 1100;               /* sobre la burbuja (z=1000) */
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wsp-widget.show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.wsp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(13,45,78,.08);
  background: #f7fbff;
}
.wsp-header-left{ display:flex; align-items:center; gap:10px; color: var(--c-blue, #0b4a6b); }
.wsp-wa-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 0 3px rgba(37,211,102,.15);
}
.wsp-close{
  border:0; background: transparent; font-size: 24px; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  color:#7f8c97;
}
.wsp-close:hover{ background:#eef3f6; }

.wsp-body{ padding: 12px; }
.wsp-greeting{ margin: 0 0 8px; color: var(--c-blue, #0b4a6b); font-weight: 700; }

.wsp-input{
  width: 100%;
  border: 2px solid var(--c-blue, #0b4a6b);
  border-radius: 10px;
  padding: .7rem .95rem;
  font-weight: 600;
  color: var(--c-blue, #0b4a6b);
  resize: vertical;
  min-height: 90px;
}
.wsp-input::placeholder{ color: var(--c-placeholder, #9bb1c0); font-style: italic; }
.wsp-input:focus{ outline: none; box-shadow: 0 0 0 .15rem rgba(11,74,107,.12); }

.wsp-send{
  display: inline-block;
  margin-top: 10px;
  width: 100%;
  background:  #1ebe5d;
  color: #fff; border: 0;
  font-weight: 800;
  padding: .8rem 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(238,120,38,.28);
  cursor: pointer;
}
.wsp-send:hover{ background: #e4945a; }

.wsp-note{
  display:block; margin-top:8px;
  color:#6c7b88; font-size: .85rem;
}

/* Opcional: en pantallas pequeñas, mueve el widget un poco */
@media (max-width: 640px){
  .wsp-widget{ right: 3vw; bottom: 88px; }
}

/* Laptop en Bootstrap: lg = 992px en adelante */
@media (min-width: 992px) {
  #btnSideCTA{
    /* Tamaño fijo (ajusta a tu gusto) */
    width: 64px !important;      /* ancho de la pestaña */
    height: 320px !important;    /* alto de la pestaña */
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.1;
    max-width: 64px !important;
    max-height: 320px !important;
    overflow: hidden;             /* evita que el contenido la estire */
  }
  #btnSideCTA .label{
    white-space: nowrap;          /* que el texto no haga saltos de línea */
    font-size: inherit;
  }
}

/* --- Animación carrito --- */
.cart-panel{
  /* estado cerrado (cuando NO tiene .is-open) */
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
.cart-panel.is-open{
  /* estado abierto */
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .cart-panel{ transition: none !important; }
}

.chat-bubble{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  text-decoration: none;
  cursor: pointer;
}
.chat-bubble:hover{ background:#1ebe5d; }
.chat-bubble:focus{ outline: 2px solid #128C7E; outline-offset: 2px; }
.wsp-icon{ font-size: 28px; line-height: 1; }