/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.rdn-nav__burger
Version: 1.2
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/
/*************** ADD YOUR CUSTOM CSS HERE ***************/


/* =================== VARIABLES BASE =================== */
:root{
  --rdn-top-h: 86px;
  --rdn-gap: 14px;
  --rdn-sep-h: 20px;
  --rdn-popup-bg:#1e1f22;

  --rdn-text:#222;
  --rdn-dark:#1f1f1f;
  --rdn-dark-2:#2b2b2b;
  --rdn-white:#fff;
  --rdn-shadow-lg: 0 10px 24px rgba(0,0,0,.22);

  /* margen derecho del CTA (alineado con el TOP) */
  --rdn-nav-edge-right: 26px;
	
	/* Colores de Marca */
      --brand: #03A9F4;
      --ink: #1e293b;
      --muted: #64748b;
      --bg: #f2f7fc;
      --green: #4CAF50;
      --red: #ED5B55;
      
      /* WhatsApp & Social */
      --wa: #25D366;
      --ig-grad: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      --tt-black: #000000;
      
      /* UI System */
      --radius: 18px; /* Bordes redondos generales */
      --pill-radius: 99px; /* Para el CTA */
      
      /* Glassmorphism System */
      --glass-bg: rgba(255, 255, 255, 0.90);
      --glass-blur: saturate(180%) blur(20px);
      --glass-border: rgba(255, 255, 255, 0.6);
      
      /* Sombras */
      --shadow-float: 0 -5px 20px rgba(0,0,0,0.08);
      --shadow-cta: 0 0 20px rgba(237, 91, 85, 0.4); /* Glow rojo */
      
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =================== TOP: FILA + BLUR =================== */
.rdn-top{
  position: relative;
  z-index: 500;
  isolation: isolate;
}
.rdn-top__row > .elementor-widget-wrap{
  display:flex; align-items:center;
  gap:var(--rdn-gap); min-height:var(--rdn-top-h);
  overflow:visible;
}

/* ---- blur universal macOS  
#header .header-main.sticky .rdn-header.rdn-nav--glass,
#header.sticky-header .rdn-header.rdn-nav--glass{
  background: rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
/*

/* ---- blur universal macOS ---- */
#header .header-main.sticky .rdn-header.rdn-nav--glass,
#header.sticky-header .rdn-header.rdn-nav--glass{
  background: rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
@media (max-width: 991px) {
  .rdn-top.rdn-top--glass {
    background: rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
    /* Borde sutil inferior */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
}

/* ---- Common (solid) ---- */
#header .header-main.sticky .rdn-header.rdn-nav--solid,
#header.sticky-header .rdn-header.rdn-nav--solid{
  background: rgba(255,255,255,.35) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}



/*
=============================================
Estilos del Header "macOS" para Landing
(PRUEBA v25 - page-id-7493 - Solo hidden y visible)
=============================================
*/

body.page-id-7493 #header {
	/* Ocultamiento */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
body.page-id-7493 #header.header-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


body.page-id-7492 #header {
	/* Ocultamiento */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
body.page-id-7492 #header.header-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =================== LOGO =================== */
#header .logo img{ height:auto !important; width:auto !important; display:block !important; }
.site-header .site-logo img,
.elementor-location-header .elementor-widget-image img.custom-logo,
.header-builder .logo img,
#header .logo img{
  max-width: 500px !important;
  max-height: 84px !important;
  width:auto !important; height:auto !important; object-fit:contain !important;
}
.rdn-top__logo{ margin-right:auto; }
.rdn-top__row > .elementor-widget-wrap{ min-height: var(--rdn-top-h) !important; }

/* =================== TELÉFONO + SEPARADORES + SOCIALES =================== */
.rdn-top__phone .porto-sicon-title,
.rdn-top__phone h2.porto-sicon-title{ font-size:20px !important; font-weight:700 !important; line-height:1 !important; }

.rdn-top__sep{ margin:0 6px !important; }
.rdn-header--absolute .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.35); display:inline-block; }
.rdn-header--common  .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.12); display:inline-block; }

.rdn-top__phone .porto-just-icon-wrapper i{ font-size:25px !important; line-height:1 !important; }
.rdn-top__social .elementor-social-icons-wrapper{ display:flex !important; align-items:center !important; gap:12px !important; }
.rdn-top__social .elementor-icon{
  width:28px !important; height:28px !important; line-height:28px !important; font-size:18px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
  transition:transform .18s ease, opacity .18s ease;
}
.rdn-top__social .elementor-icon:hover{ transform:translateY(-1px); opacity:.95; }

/* =================== MI CUENTA (PÍLDORA) =================== */
.elementor-widget-porto_hb_myaccount.rdn-top__account{ position:relative; z-index:600; }
.elementor-widget-porto_hb_myaccount .elementor-widget-container{ overflow:visible; }

.rdn-top__account.rdn-account.rdn-account--pill.rdn-account--blur a.my-account{
  display:inline-flex !important; align-items:center !important; justify-content:center; gap:8px !important;
  height:40px !important; padding:0 22px !important; border-radius:9999px !important;
  background:rgba(255,255,255,.25) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
  color:#111 !important; border:0 !important; box-shadow:0 12px 30px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.12);
  font-weight:700 !important; font-size:14px !important; letter-spacing:.02em !important; text-transform:uppercase !important; line-height:1 !important;
}
.rdn-top__account.rdn-account.rdn-account--pill.rdn-account--blur a.my-account:hover{
  background:#03A9F4 !important; color:#fff !important; transform:translateY(-1px);
}
.rdn-top__account a.my-account i{ font-size:16px; line-height:1; transform:none; }
.rdn-top__account a.my-account:not(.rdn-has-name)::after{
  content:"MI CUENTA"; margin-left:8px; font-weight:700; font-size:14px; letter-spacing:.02em;
  text-transform:uppercase; color:inherit; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
.rdn-top__account a.my-account.rdn-has-name::after{ content:none !important; }
.rdn-top__account a.my-account .rdn-account-name{
  margin-left:8px; font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; line-height:1;
  white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; display:inline-block; color:inherit;
}

/* Badge rojo */
.elementor-widget-porto_hb_myaccount.rdn-top__account .rdn-badge{
  position:absolute; top:-8px; right:-8px;
  display:inline-block; min-width:18px; height:18px; padding:0 6px;
  background:#e53935; color:#fff; border-radius:999px;
  font-size:11px; font-weight:700; line-height:18px; text-align:center;
  text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:1210;
}

/* Dropdown oscuro (1 solo fondo) */
.rdn-top__account .account-dropdown{ position:relative !important; }
.rdn-top__account .account-dropdown .popup{
  background:#1e1f22 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:14px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18) !important; padding:8px !important;
  min-width:260px !important; width:max-content !important;
  overflow:hidden !important; margin-top:0 !important;
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:1210 !important;
}
.rdn-top__account .account-dropdown.show-arrow .popup::before,
.rdn-top__account .account-dropdown.show-arrow .popup::after{
  background:#1e1f22 !important; border-color:rgba(255,255,255,.08) !important; left:28px !important;
}
.rdn-top__account .account-dropdown .popup .inner,
.rdn-top__account .account-dropdown .popup .inner > .porto-narrow-sub-menu,
.rdn-top__account .porto-narrow-sub-menu{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; }
.rdn-top__account .porto-narrow-sub-menu.sub-menu > li{ margin:2px 0; }
.rdn-top__account .porto-narrow-sub-menu.sub-menu > li > a{
  display:block; padding:12px 14px !important; border-radius:10px !important;
  color:#f5f5f7 !important; background:transparent !important; font-weight:600; letter-spacing:.01em;
  transform:translateX(0); transition:transform .18s ease, background .18s ease, color .18s ease;
}
.rdn-top__account .porto-narrow-sub-menu.sub-menu > li > a:hover,
.rdn-top__account .porto-narrow-sub-menu.sub-menu > li.is-active > a{
  transform:translateX(4px); background:rgba(255,255,255,.08) !important; color:#fff !important;
}
/* “Puente” hover */
.rdn-top__account .menu-item.has-sub{ position:relative; }
.rdn-top__account .menu-item.has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.rdn-top__account .menu-item.has-sub:hover > .popup,
.rdn-top__account .menu-item.has-sub:focus-within > .popup{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
/* Pill activa mientras está abierto */
.rdn-top__account .menu-item.has-sub:hover > a.my-account,
.rdn-top__account .menu-item.has-sub:focus-within > a.my-account{
  background:#03A9F4 !important; color:#fff !important; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(3,169,244,.35), 0 2px 6px rgba(0,0,0,.10) !important;
}

/* =================== MENÚ (BARRA + NIVELES) =================== */
.rdn-nav{ font-size:16px; position:relative; z-index:700; overflow:visible; }
.rdn-nav__row{ display:flex; align-items:center; }

/* Nivel 1 */
.rdn-header .rdn-nav__menu.rdn-menu .main-menu{
  display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; padding:0 !important;
}
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li{ position:relative !important; margin:0 !important; }
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:10px 15px !important; font-weight:700 !important; line-height:1.35 !important;
  color:var(--rdn-text) !important; background:transparent !important; text-decoration:none !important;
  border-radius:10px !important; margin:0 !important;
  transition: background-color .2s ease, color .2s ease, border-radius .2s ease, box-shadow .2s ease !important;
}
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:hover > a,
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li.current-menu-item > a,
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li.current-menu-ancestor > a{
  background:var(--rdn-dark) !important; color:#fff !important;
}
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li.has-sub:hover > a,
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li.menu-item-has-children:hover > a{
  border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;
}

/* Dropdowns */
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > .popup{
  position:absolute !important; left:0 !important; top:100% !important; right:auto !important;
  margin:0 !important; z-index:999 !important;
  display:block !important; opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  pointer-events:none;
}
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:hover > .popup,
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:focus-within > .popup{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}

/* Submenús */
.rdn-header .rdn-nav__menu.rdn-menu .sub-menu,
.rdn-header .rdn-nav__menu.rdn-menu .porto-narrow-sub-menu{
  background:var(--rdn-dark) !important; border-radius:0 0 10px 10px !important;
  box-shadow:var(--rdn-shadow-lg) !important; padding:8px 0 !important; min-width:210px !important;
}
.rdn-header .rdn-nav__menu.rdn-menu .sub-menu > li > a,
.rdn-header .rdn-nav__menu.rdn-menu .porto-narrow-sub-menu > li > a{
  display:block !important; padding:12px 16px !important; border-radius:8px !important;
  color:#f5f5f7 !important; text-decoration:none !important; font-size:.95em !important; line-height:1.4 !important;
  transition: background .15s ease, transform .12s ease, color .15s ease !important;
}
.rdn-header .rdn-nav__menu.rdn-menu .sub-menu > li > a:hover,
.rdn-header .rdn-nav__menu.rdn-menu .porto-narrow-sub-menu > li > a:hover{
  background:rgba(255,255,255,.08) !important; color:#fff !important; transform:translateX(2px);
}

/* Sticky (solo tonos) */
.rdn-header .header-main.is-sticky .rdn-nav__menu.rdn-menu .main-menu > li:hover > a,
.rdn-header .header-main.is-sticky .rdn-nav__menu.rdn-menu .main-menu > li.current-menu-item > a,
.rdn-header .header-main.sticky    .rdn-nav__menu.rdn-menu .main-menu > li:hover > a,
.rdn-header .header-main.sticky    .rdn-nav__menu.rdn-menu .main-menu > li.current-menu-item > a{
  background:var(--rdn-dark-2) !important; color:#fff !important; border-radius:6px !important;
}
.rdn-header .header-main.is-sticky .rdn-nav__menu.rdn-menu .sub-menu,
.rdn-header .header-main.is-sticky .rdn-nav__menu.rdn-menu .porto-narrow-sub-menu,
.rdn-header .header-main.sticky    .rdn-nav__menu.rdn-menu .sub-menu,
.rdn-header .header-main.sticky    .rdn-nav__menu.rdn-menu .porto-narrow-sub-menu{ background:var(--rdn-dark-2) !important; }

/* Ocultar Log out */
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="customer-logout" i],
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="logout" i]{ display:none !important; }
/* ---------- Ocultar "Login" / "Mi cuenta" redundante ---------- */
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="login" i],
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="wp-login" i],
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="/mi-cuenta" i],
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li > a[href*="/my-account" i]{
  display:none !important;
}

/* (Opcional) quitar el <li> entero si el navegador soporta :has() */
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:has(> a[href*="login" i]),
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:has(> a[href*="wp-login" i]),
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:has(> a[href*="/mi-cuenta" i]),
.rdn-header .rdn-nav__menu.rdn-menu .main-menu > li:has(> a[href*="/my-account" i]){
  display:none !important;
}

/* =================== CTA ROJO (ÚNICO BLOQUE) =================== */
.rdn-nav__row,
.header-main.sticky .rdn-nav__row,
.header-main.is-sticky .rdn-nav__row{ display:flex !important; align-items:center !important; }

.rdn-nav__row > .elementor-widget-wrap{
  display:flex !important; align-items:center !important; width:100% !important;
}
.rdn-nav__row > .elementor-widget-wrap > .elementor-widget{ flex:0 0 auto !important; }

.rdn-nav__cta-desktop,
.header-main.sticky .rdn-nav__cta-desktop,
.header-main.is-sticky .rdn-nav__cta-desktop{
  margin-left:auto !important; flex:0 0 auto !important; width:auto !important; position:static !important;
}
.rdn-nav__cta-desktop,
.rdn-nav__cta-desktop .elementor-widget-container,
.header-main.sticky .rdn-nav__cta-desktop,
.header-main.sticky .rdn-nav__cta-desktop .elementor-widget-container,
.header-main.is-sticky .rdn-nav__cta-desktop,
.header-main.is-sticky .rdn-nav__cta-desktop .elementor-widget-container{
  margin-right: var(--rdn-nav-edge-right) !important;
}
.rdn-nav__cta-desktop .btn,
.rdn-nav__cta-desktop .elementor-button{ display:inline-flex !important; width:auto !important; margin:0 !important; }

/* Estilos del botón rojo (como los viejos) */
.rdn-nav__cta-desktop.rdn-cta.rdn-cta--primary .btn,
.rdn-nav__cta-desktop.rdn-cta.rdn-cta--primary .elementor-button,
.rdn-nav__cta-desktop .btn,
.rdn-nav__cta-desktop .elementor-button{
  background-color:#e53935 !important; border-color:#e53935 !important; color:#fff !important;
  font-weight:600 !important; transition: all .15s ease;
}
.rdn-nav__cta-desktop.rdn-cta.rdn-cta--primary .btn:hover,
.rdn-nav__cta-desktop.rdn-cta.rdn-cta--primary .elementor-button:hover,
.rdn-nav__cta-desktop .btn:hover,
.rdn-nav__cta-desktop .elementor-button:hover{
  background-color:#c62828 !important; border-color:#c62828 !important;
}

/* =================== CTA WHATSAPP (MOBILE SÍ, DESKTOP NO) =================== */
.rdn-nav__cta-whatsapp.rdn-cta.rdn-cta--whatsapp .btn,
.rdn-nav__cta-whatsapp.rdn-cta.rdn-cta--whatsapp .elementor-button,
.rdn-nav__cta-whatsapp .btn,
.rdn-nav__cta-whatsapp .elementor-button{
  position:relative; display:inline-flex !important; align-items:center !important; justify-content:center;
  gap:6px; padding-left:46px !important; background-color:#25D366 !important; border-color:#25D366 !important; color:#fff !important;
  border-radius:999px !important; font-weight:600 !important; transition: background .2s ease; text-decoration:none !important; white-space:nowrap;
}
.rdn-nav__cta-whatsapp .btn:hover,
.rdn-nav__cta-whatsapp .elementor-button:hover{ background-color:#1DA851 !important; border-color:#1DA851 !important; }
.rdn-nav__cta-whatsapp .btn::before,
.rdn-nav__cta-whatsapp .elementor-button::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; background:url("https://cdnjs.cloudflare.com/ajax/libs/simple-icons/13.16.0/whatsapp.svg") no-repeat center / contain;
  filter:brightness(0) invert(1);
}

/* Mobile: a la derecha */
@media (max-width:1024px){
  .rdn-nav__cta-whatsapp{
    margin-left:auto !important; margin-right:var(--rdn-nav-edge-right,12px) !important;
    display:inline-flex !important; justify-content:flex-end !important; flex:0 0 auto !important; width:auto !important; order:99 !important; text-align:right !important;
  }
  .rdn-nav__cta-whatsapp .btn,
  .rdn-nav__cta-whatsapp .elementor-button{
    position: relative; overflow: hidden;
  }
/* === REEMPLAZO: SIN SHIMMER + LATIDO SUTIL (solo mobile) === */
.rdn-nav__cta-whatsapp .btn::after,
.rdn-nav__cta-whatsapp .elementor-button::after{
  content: none !important; /* elimina el brillo diagonal (shimmer) */
}

@media (max-width:1024px){
  .rdn-nav__cta-whatsapp .btn,
  .rdn-nav__cta-whatsapp .elementor-button{
    position: relative;
    overflow: visible;                /* por si hay sombras/glow */
    animation: ctaLatido 2.8s cubic-bezier(.22,.61,.36,1) infinite;
    transform-origin: center;
    will-change: transform;
  }
}

/* Latido MUY sutil */
@keyframes ctaLatido{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.015); } /* antes 1.05 → ahora casi imperceptible */
}

}
@media (prefers-reduced-motion: reduce){
  .rdn-nav__cta-whatsapp .btn::after,
  .rdn-nav__cta-whatsapp .elementor-button::after{ animation:none !important; }
}

/* Desktop: oculto de verdad */
@media (min-width:1025px){
  .rdn-nav__cta-whatsapp,
  .header-main.sticky .rdn-nav__cta-whatsapp{
    display:none !important; visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; pointer-events:none !important;
  }
}
/* PARCHE — CTA WhatsApp alineado al burger en móvil */
@media (max-width:1024px){
  .rdn-nav__cta-whatsapp{
    margin-right: 0px !important; /* ajustá a 18px/22px si ves 1–2px de diferencia */
  }
}
/* === AJUSTE VERTICAL: SUBIR CTA EN MOBILE (añadir al final) === */
@media (max-width:1024px){
  .rdn-nav__cta-whatsapp .btn,
  .rdn-nav__cta-whatsapp .elementor-button{
    position: relative;      /* ya lo tenés, lo reafirmo por las dudas */
    top: -14px !important;    /* <- sube el botón (tocar a -6 / -10 si querés) */
  }
}

/* Si en header sticky varía 1–2px, afiná acá */
@media (max-width:1024px){
  .header-main.sticky .rdn-nav__cta-whatsapp .btn,
  .header-main.sticky .rdn-nav__cta-whatsapp .elementor-button{
    top: -0px !important;    /* ajuste fino en sticky */
  }
}

/* ==== Vars */
:root{ --rdn-red:#e53935; --rdn-red-dark:#c62828; --rdn-wa:#25D366; --rdn-wa-dark:#1DA851; }

/* ==== Contenedores: que NO corten la sombra y aíslen el blur del header */
.rdn-header, .header-main, .rdn-nav__row,
.rdn-nav__cta-desktop, .rdn-nav__cta-whatsapp{
  overflow:visible !important;
  position:relative; isolation:isolate;
}

/* ==== CTA PRIMARIO (ROJO) — aplica a .btn y .elementor-button dentro del bloque */
.rdn-nav__cta-desktop .btn,
.rdn-nav__cta-desktop .elementor-button{
  background-color:var(--rdn-red) !important;
  border-color:var(--rdn-red) !important;
  color:#fff !important; font-weight:600 !important;
  border-radius:999px !important;
  /* Sombra en capas, sin halo frío */
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 2px rgba(229,57,53,.10),
    0 0 18px 5px rgba(229,57,53,.32) !important;
}
.rdn-nav__cta-desktop .btn:hover,
.rdn-nav__cta-desktop .elementor-button:hover{
  background-color:var(--rdn-red-dark) !important;
  border-color:var(--rdn-red-dark) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.14),
    0 0 0 2px rgba(229,57,53,.14),
    0 0 22px 7px rgba(229,57,53,.42) !important;
}

/* ==== CTA WHATSAPP (VERDE) — mismo criterio */
.rdn-nav__cta-whatsapp .btn,
.rdn-nav__cta-whatsapp .elementor-button{
  background-color:var(--rdn-wa) !important;
  border-color:var(--rdn-wa) !important;
  color:#fff !important; font-weight:600 !important;
  border-radius:999px !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.10),
    0 0 0 2px rgba(37,211,102,.10),
    0 0 18px 5px rgba(37,211,102,.30) !important;
}
.rdn-nav__cta-whatsapp .btn:hover,
.rdn-nav__cta-whatsapp .elementor-button:hover{
  background-color:var(--rdn-wa-dark) !important;
  border-color:var(--rdn-wa-dark) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.12),
    0 0 0 2px rgba(37,211,102,.14),
    0 0 22px 7px rgba(37,211,102,.40) !important;
}

/* ==== MOBILE: tu shimmer necesita overflow:hidden en el BOTÓN.
         Para que el glow NO se recorte, lo ponemos en el WRAPPER con drop-shadow */
@media (max-width:1024px){
  .rdn-nav__cta-whatsapp{
    /* glow externo sin recorte */
    filter:
      drop-shadow(0 6px 16px rgba(0,0,0,.10))
      drop-shadow(0 0 18px rgba(37,211,102,.30));
  }
  /* mantené tu overflow:hidden del botón para el brillo diagonal */
  .rdn-nav__cta-whatsapp .btn,
  .rdn-nav__cta-whatsapp .elementor-button{
    overflow:hidden; /* lo necesitas para el ::after */
  }
}

/* ==== Reuso: si querés que coincida con tus clases del hero */
.cta-shadow{      box-shadow:0 6px 16px rgba(0,0,0,.12), 0 0 0 2px rgba(229,57,53,.10), 0 0 18px 5px rgba(229,57,53,.32) !important; }
.cta-shadow-wa{   box-shadow:0 6px 16px rgba(0,0,0,.10), 0 0 0 2px rgba(37,211,102,.10), 0 0 18px 5px rgba(37,211,102,.30) !important; }

/* Sombra burger (celeste #03A9F4) */
.rdn-nav__burger{
  filter: drop-shadow(0 0 14px rgba(3,169,244,.34));
}
.rdn-nav__burger:hover{
  filter: drop-shadow(0 0 18px rgba(3,169,244,.46));
}


/* =================== POPUPS: CERRADOS POR DEFECTO, ABIERTOS AL HOVER =================== */
.rdn-top  .account-dropdown .popup,
.rdn-nav  .main-menu > li > .popup{
  display:none !important; opacity:0 !important; visibility:hidden !important;
  pointer-events:none !important; transform:translateY(8px);
}
.rdn-top .menu-item.has-sub:hover > .popup,
.rdn-top .menu-item.has-sub:focus-within > .popup,
.rdn-nav .main-menu > li:hover > .popup,
.rdn-nav .main-menu > li:focus-within > .popup{
  display:block !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important; transform:translateY(0);
}

/* =================== Z-INDEX GENERAL =================== */
.header-builder{ position:relative; }
.rdn-top{ z-index:800 !important; }
.rdn-nav{ z-index:700 !important; overflow:visible !important; }

/* =================== RESPONSIVE (TUS CLAMP() ORIGINALES) =================== */
/* LOGO RESPONSIVE (0–990px) - FIX FINAL */
@media (max-width: 990px){

  /* 1. APAGAR EL "mr-auto" SOLO EN MOBILE */
  /* Esto sobreescribe la clase de Elementor sin borrarla del HTML */
  .rdn-top__logo.mr-auto,
  #header .logo.mr-auto,
  .elementor-widget-porto_hb_logo.mr-auto {
      margin-right: 0 !important;  /* Chau empuje a la derecha */
      margin-left: 0 !important;   /* Chau empuje a la izquierda */
      margin: 0 auto !important;   /* Hola centrado */
      width: 100% !important;      /* Ocupar todo el ancho */
      text-align: center !important; 
  }

  /* 2. EL WIDGET CONTENEDOR */
  #header .logo,
  .site-header .site-logo,
  .elementor-location-header .elementor-widget-image {
    /* Variables en 0 para limpiar espacios fantasmas */
    --rdn-logo-left: 0px; 
    --rdn-burger: 0px; 
    --rdn-air: 0px;
    
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important; /* Asegura que la caja ocupe todo */
    text-align: center !important;
  }

  /* 3. LA IMAGEN DEL LOGO */
  #header .logo img,
  .site-header .site-logo img,
  .elementor-location-header .elementor-widget-image img.custom-logo {
    /* Tu CLAMP original (el que te gusta) */
    max-width: clamp(240px, 90vw, 600px) !important;
    max-height: clamp(52px, 15vw, 100px) !important;
    
    height: auto !important; 
    width: auto !important; 
    
    /* Centrado interno */
    display: inline-block !important; 
    
    object-fit: contain !important;
  }

  /* Sticky */
  .header-main.sticky #header .logo img,
  .header-main.sticky .site-logo img,
  .header-main.sticky .elementor-widget-image img.custom-logo {
    max-width: clamp(230px, 85vw, 550px) !important;
    max-height: clamp(48px, 14vw, 96px) !important;
  }

  /* Limpieza */
  .rdn-top__sep { display: none !important; }
  .rdn-top__row > .elementor-widget-wrap { gap: 8px !important; min-height: 60px !important; }
}






/* TOP DESKTOP (1280–1919) */
@media (min-width:1280px) and (max-width:1919.98px){
  :root{
    --rdn-logo-maxw: clamp(240px, 20vw, 420px);
    --rdn-logo-maxh: clamp(56px, 4.8vw, 80px);
    --rdn-gap:       clamp(10px, 0.9vw, 16px);
    --rdn-sep-h:     clamp(14px, 1.8vw, 20px);
    --rdn-phone-size: clamp(16px, 1.3vw, 20px);
    --rdn-ico-size:   clamp(16px, 1.2vw, 20px);
    --rdn-pill-h:    clamp(32px, 2.2vw, 38px);
    --rdn-pill-pad:  clamp(14px, 1.6vw, 20px);
    --rdn-pill-fz:   clamp(12px, 1.0vw, 14px);
    --rdn-pill-ico:  clamp(14px, 1.1vw, 17px);
  }
  .rdn-top__row > .elementor-widget-wrap{ gap: var(--rdn-gap) !important; min-height: calc(var(--rdn-logo-maxh) + 6px) !important; }
  #header .logo img, .header-builder .rdn-top__logo .logo img, .rdn-top__logo .logo img{
    max-width:var(--rdn-logo-maxw) !important; max-height:var(--rdn-logo-maxh) !important; width:auto !important; height:auto !important; display:block !important; object-fit:contain !important;
  }
  .rdn-top__logo{ margin-right:auto; }
  .rdn-top__sep{ margin:0 clamp(4px, .5vw, 7px) !important; }
  .rdn-header--absolute .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.35); display:inline-block; }
  .rdn-header--common  .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.12); display:inline-block; }
  .rdn-top__phone .porto-sicon-title, .rdn-top__phone h2.porto-sicon-title{ font-size: var(--rdn-phone-size) !important; font-weight:700 !important; line-height:1 !important; }
  .rdn-top__phone .porto-just-icon-wrapper{ width:calc(var(--rdn-ico-size) + 8px) !important; height:calc(var(--rdn-ico-size) + 8px) !important; line-height:calc(var(--rdn-ico-size) + 8px) !important; display:inline-flex; align-items:center; justify-content:center; }
  .rdn-top__phone .porto-just-icon-wrapper i{ font-size: var(--rdn-ico-size) !important; line-height:1 !important; }
  .rdn-top__social .elementor-social-icons-wrapper{ gap:clamp(8px, .8vw, 12px) !important; }
  .rdn-top__social .elementor-icon{ width:calc(var(--rdn-ico-size) + 8px) !important; height:calc(var(--rdn-ico-size) + 8px) !important; line-height:calc(var(--rdn-ico-size) + 8px) !important; font-size:var(--rdn-ico-size) !important; }
  .rdn-top__account.rdn-account.rdn-account--pill.rdn-account--blur a.my-account{
    gap: clamp(6px, .7vw, 9px) !important; height: var(--rdn-pill-h) !important; padding: 0 var(--rdn-pill-pad) !important; font-size: var(--rdn-pill-fz) !important;
  }
  .rdn-top__account a.my-account i{ font-size: var(--rdn-pill-ico) !important; }
  .rdn-top__account a.my-account:not(.rdn-has-name)::after{ margin-left: clamp(6px, .7vw, 9px); font-size: var(--rdn-pill-fz); }
  .rdn-top__account a.my-account .rdn-account-name{ margin-left: clamp(6px, .7vw, 9px); font-size: var(--rdn-pill-fz); }
}

/* ≥1920: FHD fijos */
@media (min-width:1920px){
  #header .logo img, .header-builder .rdn-top__logo .logo img, .rdn-top__logo .logo img{ max-width: 500px !important; max-height: 84px !important; }
  .rdn-top__row > .elementor-widget-wrap{ gap: 14px !important; }
  .rdn-top__phone .porto-sicon-title{ font-size: 20px !important; }
  .rdn-top__social .elementor-icon, .rdn-top__phone .porto-just-icon-wrapper i{ font-size: 18px !important; }
  .rdn-top__account a.my-account{ height: 40px !important; padding: 0 22px !important; font-size:14px !important; }
}

/* TOP DESKTOP (1024–1919) — iPad minimos */
@media (min-width:1024px) and (max-width:1919.98px){
  :root{
    --rdn-logo-maxw: clamp(300px, 19vw, 420px);
    --rdn-logo-maxh: clamp(62px, 4.8vw, 80px);
    --rdn-gap:       clamp(12px, 1vw, 16px);
    --rdn-sep-h:     clamp(16px, 2vw, 20px);
    --rdn-phone-size: clamp(17px, 1.3vw, 20px);
    --rdn-ico-size:   clamp(17px, 1.25vw, 20px);
    --rdn-pill-h:    clamp(33px, 2.3vw, 38px);
    --rdn-pill-pad:  clamp(15px, 1.7vw, 20px);
    --rdn-pill-fz:   clamp(12.5px, 1.05vw, 14px);
    --rdn-pill-ico:  clamp(15px, 1.1vw, 17px);
  }
  .rdn-top__row > .elementor-widget-wrap{ gap: var(--rdn-gap) !important; min-height: calc(var(--rdn-logo-maxh) + 6px) !important; overflow: visible; }
  #header .logo img, .header-builder .rdn-top__logo .logo img, .rdn-top__logo .logo img{
    max-width:var(--rdn-logo-maxw) !important; max-height:var(--rdn-logo-maxh) !important; width:auto !important; height:auto !important; display:block !important; object-fit:contain !important;
  }
  .rdn-top__logo{ margin-right:auto; }
  .rdn-top__sep{ margin:0 clamp(6px, .6vw, 8px) !important; }
  .rdn-header--absolute .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.35); display:inline-block; }
  .rdn-header--common  .rdn-top__sep .separator{ width:1px; height:var(--rdn-sep-h); background:rgba(0,0,0,.12); display:inline-block; }
  .rdn-top__phone .porto-sicon-title, .rdn-top__phone h2.porto-sicon-title{ font-size: var(--rdn-phone-size) !important; font-weight:700 !important; line-height:1 !important; }
  .rdn-top__phone .porto-just-icon-wrapper{ width:calc(var(--rdn-ico-size) + 8px) !important; height:calc(var(--rdn-ico-size) + 8px) !important; line-height:calc(var(--rdn-ico-size) + 8px) !important; display:inline-flex; align-items:center; justify-content:center; }
  .rdn-top__phone .porto-just-icon-wrapper i{ font-size: var(--rdn-ico-size) !important; line-height:1 !important; }
  .rdn-top__social .elementor-social-icons-wrapper{ gap:clamp(8px, .9vw, 12px) !important; }
  .rdn-top__social .elementor-icon{ width:calc(var(--rdn-ico-size) + 8px) !important; height:calc(var(--rdn-ico-size) + 8px) !important; line-height:calc(var(--rdn-ico-size) + 8px) !important; font-size:var(--rdn-ico-size) !important; }
  .rdn-top__account.rdn-account.rdn-account--pill.rdn-account--blur a.my-account{
    gap: clamp(6px, .75vw, 9px) !important; height: var(--rdn-pill-h) !important; padding: 0 var(--rdn-pill-pad) !important; font-size: var(--rdn-pill-fz) !important;
  }
  .rdn-top__account a.my-account i{ font-size: var(--rdn-pill-ico) !important; }
  .rdn-top__account a.my-account:not(.rdn-has-name)::after{ margin-left: clamp(6px, .75vw, 9px); font-size: var(--rdn-pill-fz); }
  .rdn-top__account a.my-account .rdn-account-name{ margin-left: clamp(6px, .75vw, 9px); font-size: var(--rdn-pill-fz); }
}

/* ≥1920 duplicado fijado (mismo que arriba, se mantiene) */
@media (min-width:1920px){
  #header .logo img, .header-builder .rdn-top__logo .logo img, .rdn-top__logo .logo img{ max-width: 500px !important; max-height: 84px !important; }
  .rdn-top__row > .elementor-widget-wrap{ gap: 14px !important; }
  .rdn-top__phone .porto-sicon-title{ font-size: 20px !important; }
  .rdn-top__social .elementor-icon, .rdn-top__phone .porto-just-icon-wrapper i{ font-size: 18px !important; }
  .rdn-top__account a.my-account{ height: 40px !important; padding: 0 22px !important; font-size:14px !important; }
}
/* ============================================================
   MENÚ PADRE — Desktop <1920 (NO toca ≥1920)
   - El menú encoge entre padres y “se amontona” progresivo
   - CTA hereda altura/padding/fuente de “Mi cuenta” (<1920)
   ============================================================ */

/* Estructura base sub-1920 */
@media (min-width:1024px) and (max-width:1919.98px){

  /* La fila ocupa 100% y no envuelve */
  .rdn-nav__row > .elementor-widget-wrap{
    display:flex !important; align-items:center !important;
    width:100% !important; flex-wrap:nowrap !important;
  }

  /* El widget del MENÚ crece/encoge; clave para que entre */
  .rdn-header .rdn-nav__menu{
    flex:1 1 auto !important; min-width:0 !important;
  }

  /* Barra de ítems (padres) compacta y en una línea */
  .rdn-header .rdn-nav__menu .main-menu{
    display:flex !important; align-items:center !important;
    margin:0 !important; padding:0 !important;
    white-space:nowrap !important; flex-wrap:nowrap !important;
    gap: clamp(6px, 0.8vw, 12px) !important;
  }
  .rdn-header .rdn-nav__menu .main-menu > li{
    margin:0 !important; flex:0 0 auto !important;
  }
  .rdn-header .rdn-nav__menu .main-menu > li > a{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    /* Compacto y consistente con tu estilo */
    padding:
      clamp(8px, .75vw, 11px)
      clamp(10px, .9vw, 14px) !important;
    font-size: clamp(12.5px, .9vw, 14px) !important;
    line-height:1.3 !important;
    border-radius:10px !important;
  }

  /* CTA = “Mi cuenta” (hereda tokens del TOP) */
  .rdn-nav__cta-desktop{
    margin-left:auto !important; flex:0 0 auto !important; width:auto !important; position:static !important;
  }
  .rdn-nav__cta-desktop,
  .rdn-nav__cta-desktop .elementor-widget-container{
    margin-right: var(--rdn-nav-edge-right) !important;
  }
  .rdn-nav__cta-desktop .btn,
  .rdn-nav__cta-desktop .elementor-button{
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    height: var(--rdn-pill-h) !important;          /* = Mi cuenta */
    padding: 0 var(--rdn-pill-pad) !important;     /* = Mi cuenta */
    font-size: var(--rdn-pill-fz) !important;      /* = Mi cuenta */
    line-height:1 !important; border-radius:9999px !important;
    gap: clamp(6px, .75vw, 9px);                   /* si lleva icono */
  }
}

/* Sub-intervalos: “amontonado” progresivo (sin tocar ≥1920) */
@media (min-width:1600px) and (max-width:1919.98px){
  .rdn-header .rdn-nav__menu .main-menu{ gap: clamp(8px, .6vw, 12px) !important; }
  .rdn-header .rdn-nav__menu .main-menu > li > a{
    padding-left: clamp(10px, .75vw, 14px) !important;
    padding-right: clamp(10px, .75vw, 14px) !important;
    font-size: clamp(12.5px, .9vw, 14px) !important;
  }
}

@media (min-width:1366px) and (max-width:1599.98px){
  .rdn-header .rdn-nav__menu .main-menu{ gap: clamp(6px, .6vw, 10px) !important; }
  .rdn-header .rdn-nav__menu .main-menu > li > a{
    padding-left: clamp(9px, .7vw, 12px) !important;
    padding-right: clamp(9px, .7vw, 12px) !important;
    font-size: clamp(12.5px, .85vw, 13.5px) !important;
  }
}

@media (min-width:1024px) and (max-width:1365.98px){
  .rdn-header .rdn-nav__menu .main-menu{ gap: clamp(4px, .55vw, 8px) !important; }
  .rdn-header .rdn-nav__menu .main-menu > li > a{
    padding-left: clamp(8px, .65vw, 11px) !important;
    padding-right: clamp(8px, .65vw, 11px) !important;
    font-size: clamp(12px, .8vw, 13px) !important;
  }
}

/* PARCHE TOP — microajuste izquierda (+8px) para 1024–1487.98 */
@media (min-width:1024px) and (max-width:1487.98px){
  :root{
    /* subo un poco el gutter izquierdo del TOP */
    --rdn-top-left-gutter: clamp(32px, 2.4vw, 48px);
    --rdn-top-right-gutter: var(--rdn-nav-edge-right, 26px);
  }

  .rdn-top .elementor-container,
  .rdn-top .container{
    max-width:100% !important;
    width:100% !important;
    padding-left:  var(--rdn-top-left-gutter) !important;   /* ← logo apenas más a la derecha */
    padding-right: var(--rdn-top-right-gutter) !important;  /* ← alinea con CTA */
  }

  .rdn-top__logo{ margin-left:0 !important; }
  .rdn-top__account{ margin-right:0 !important; }
}


/* ===== MENÚ MOBILE RDN – TARJETAS LIGHT SOBRE MENU EXISTENTE ===== */

/* Fondo y padding general dentro del panel mobile */
html.panel-opened #menu-main-menu-3{
  list-style: none;
  margin: 0;
  padding: 72px 14px 18px;
  background: #F9FAFB;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Reseteo básico: sacamos bordes/lines feos del theme dentro del panel */
html.panel-opened #menu-main-menu-3 li,
html.panel-opened #menu-main-menu-3 a{
  border: 0 !important;
}

/* Tarjetas (primer nivel) */
html.panel-opened #menu-main-menu-3 > li.rdn-menu-item,
html.panel-opened #menu-main-menu-3 > li.rdn-menu-group,
html.panel-opened #menu-main-menu-3 > li.rdn-menu-cta-envio{
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.30);
  box-shadow: 0 8px 18px rgba(15,23,42,0.06);
  overflow: hidden;
}

/* Enlaces de primer nivel como “cards” */
html.panel-opened #menu-main-menu-3 > li > a.menu-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 15px;
  text-decoration: none;
  color: #111827;
  background: #ffffff;
}
html.panel-opened #menu-main-menu-3 > li > a.menu-link:hover{
  background: #EFF6FF;
  color: #0f172a;
}

/* Flechita del acordeón */
html.panel-opened #menu-main-menu-3 .toggle-arrow{
  font-size: 12px;
  opacity: 0.7;
  transform: translateY(1px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  color: #6B7280;
}
html.panel-opened #menu-main-menu-3 .rdn-menu-group.open > a .toggle-arrow{
  transform: translateY(1px) rotate(180deg);
  opacity: 1;
  color: #0277BD;
}

/* Submenús como bloque suave debajo de la tarjeta */
html.panel-opened #menu-main-menu-3 .sub-menu{
  list-style: none;
  margin: 0;
  padding: 0 0 6px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease-out;
  background: #F3F4F6;
  border-top: 1px solid rgba(148,163,184,0.25);
}
html.panel-opened #menu-main-menu-3 .rdn-menu-group.open > .sub-menu{
  max-height: 260px; /* suficiente para varios ítems */
}

/* Links dentro del submenú */
html.panel-opened #menu-main-menu-3 .sub-menu > li > a{
  display: block;
  padding: 8px 14px 8px 44px;
  font-size: 14px;
  color: #4B5563;
  text-decoration: none;
  background: transparent;
}
html.panel-opened #menu-main-menu-3 .sub-menu > li > a:hover{
  color: #E53935;
  background: #E5F2FF;
}

/* CTA "Enviá tu equipo" como pill roja */
html.panel-opened #menu-main-menu-3 > li.rdn-menu-cta-envio{
  border-radius: 999px;
}
html.panel-opened #menu-main-menu-3 > li.rdn-menu-cta-envio > a.menu-link{
  margin: 2px;
  border-radius: 999px;
  justify-content: center;
  background: #E53935;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(229,57,53,0.45);
}
html.panel-opened #menu-main-menu-3 > li.rdn-menu-cta-envio > a.menu-link:hover{
  background: #D32F2F;
}

/* Ocultamos flechitas originales de Porto si existieran */
html.panel-opened #menu-main-menu-3 .menu-arrow,
html.panel-opened #menu-main-menu-3 .caret{
  display:none !important;
}

/* Un poco más de padding para dedos gordos en táctil */
@media (pointer:coarse){
  html.panel-opened #menu-main-menu-3 > li > a.menu-link{
    padding: 12px 16px;
  }
  html.panel-opened #menu-main-menu-3 .sub-menu > li > a{
    padding: 10px 16px 10px 46px;
  }
}





/* Micro animación botón WhatsApp mobile */
.rdn-btn-mobile{ animation: heartbeat-subtle 2s infinite; transform-origin:center; }
@keyframes heartbeat-subtle{ 0%,100%{transform:scale(1)} 30%{transform:scale(1.025)} 60%{transform:scale(1)} }

/* ===== Login Lightbox (popup de login del header) ===== */
.mfp-content #login-form-popup .login-btn{
  background:#0277BD; border-color:#0277BD; color:#fff; border-radius:9999px;
  padding:.9rem 1.25rem; line-height:1.1; box-shadow:0 6px 16px rgba(2,119,189,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.mfp-content #login-form-popup .login-btn:hover{
  background:#026aa7; border-color:#026aa7; transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(2,119,189,.22);
}
.mfp-content #login-form-popup .login-btn:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(2,119,189,.18); }
.mfp-content #login-form-popup .login-btn:focus{ outline:2px solid #03A9F4; outline-offset:2px; }
.mfp-content #login-form-popup .woocommerce-Input{ border-radius:12px; border-color:#d7e3ef; }
.mfp-content #login-form-popup .woocommerce-Input:focus{ border-color:#0277BD; box-shadow:0 0 0 3px rgba(2,119,189,.15); }
.mfp-content #login-form-popup .porto-control-input{ accent-color:#0277BD; }
.mfp-content #login-form-popup .lost_password a{ color:#0277BD; text-decoration: underline; }
.mfp-content #login-form-popup .lost_password a:hover{ opacity:.85; }
.mfp-content #login-form-popup .register-btn{
  color:#0277BD !important; background:transparent !important; border:0 !important; text-decoration: underline;
  padding:.75rem 0 !important;
}
.mfp-content #login-form-popup .register-btn:hover{ opacity:.85; }
.mfp-wrap .mfp-close{ opacity:.9; }
.mfp-wrap .mfp-close:hover{ opacity:1; }
.mfp-content #login-form-popup.lightbox-content{ border-radius:20px; overflow:hidden; }
.mfp-content #login-form-popup .featured-box,
.mfp-content #login-form-popup .box-content{ border-radius:20px; overflow:hidden; }
#login-form-popup .porto-social-login-section .social-button.google-plus{
  display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; height:56px; border-radius:9999px; font-weight:700; font-size:16px; box-shadow:0 4px 14px rgba(0,0,0,.10);
}
#login-form-popup .porto-social-login-section .social-button.google-plus i{ font-size:20px; line-height:1; }
.mfp-wrap.mfp-close-btn-in .mfp-content{ position: relative !important; }
#login-form-popup.lightbox-content + .mfp-close{
  position:absolute !important; top:10px !important; right:10px !important; left:auto !important;
  width:34px; height:34px; line-height:34px; border-radius:9999px; background:#fff; color:#111; opacity:1;
  box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:5;
}
@media (max-width:480px){
  #login-form-popup.lightbox-content + .mfp-close{ top:8px !important; right:8px !important; }
}
/* ==== Panel móvil: fondo sólido hasta el borde superior e inferior ==== */
html.panel-opened .rdn-mobile-menu-pro{
  background:#1c1c1c !important;        /* mismo color que las tarjetas */
  min-height:100dvh !important;          /* ocupa todo el alto visible */
  box-sizing:border-box !important;
  /* respeta notch / barra inferior en iOS/Android */
  padding-top: max(env(safe-area-inset-top, 0px), 14px) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 18px) !important;
}

/* Fallback para navegadores sin 100dvh */
@supports not (height: 100dvh){
  html.panel-opened .rdn-mobile-menu-pro{ min-height:100vh !important; }
}

/* (por si tu panel padre sigue siendo transparente en alguna vista) */
html.panel-opened .mobile-panel,
html.panel-opened .side-panel,
html.panel-opened .menu-panel,
html.panel-opened .side-menu,
html.panel-opened .menu-wrap{
  background:#1c1c1c !important;
}

/************************************************************
= RESTO DEL SITIO (NO HEADER)
  - HERO / DECORACIONES / TICKERS
  - FORMULARIO DE CONTACTO (CF7 + intl-tel-input)
  - UTILIDADES SUELTAS
  - UTILIDADES ELEMENTOR
************************************************************/


/* =========================================================
   HERO / DECORACIONES / TICKERS / FORMULARIO (visual)
   ========================================================= */

/* ----- Fancy (texto animado) — fijar altura de línea para que no salte ----- */
.rdn-fancy .elementor-headline,
.rdn-fancy .porto-fancy-text { display: inline-flex; align-items: baseline; }
.rdn-fancy .elementor-headline-dynamic-wrapper,
.rdn-fancy .porto-fancy-text-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
}

/* ----- Ticker de marcas (solo velocidad de animación) ----- */
.brand-ticker [class*="marquee"]{
  animation-duration: 110s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  white-space: nowrap;
}
@media (max-width: 767px){
  .brand-ticker [class*="marquee"]{ animation-duration: 200s !important; }
}
@media (max-width: 480px){
  .brand-ticker [class*="marquee"]{ animation-duration: 230s !important; }
}

/* ----- Bandera Hero (Argentina) — radial sun + franjas ----- */
.hero-flag{
  --celeste-top:#9edcff; --celeste-mid:#c8ecff; --blanco:#fff; --dorado:#FFD100;
  --sol-x:50%; --sol-y:50%;
  --r1:0%; --r2:8%; --r3:14%; --r4:20%; --r5:28%;
  --sol-a1:.85; --sol-a2:.28; --sol-a3:.14; --sol-a4:.05;
  --white-start:29%; --white-end:65%;
  background:
    radial-gradient(circle at var(--sol-x) var(--sol-y),
      rgba(255,209,0,var(--sol-a1)) var(--r1),
      rgba(255,209,0,var(--sol-a2)) var(--r2),
      rgba(255,209,0,var(--sol-a3)) var(--r3),
      rgba(255,209,0,var(--sol-a4)) var(--r4),
      rgba(255,209,0,0) var(--r5)
    ),
    linear-gradient(to bottom,
      var(--celeste-top) 0%,
      var(--celeste-mid) calc(var(--white-start) - 14%),
      var(--blanco) var(--white-start),
      var(--blanco) var(--white-end),
      var(--celeste-mid) calc(var(--white-end) + 14%),
      var(--celeste-top) 100%
    ) !important;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,100% 100%;
  background-position:center,center;
}
.hero-flag > .elementor-background-overlay{ background:none !important; opacity:0 !important; }

/* Hero: versión móvil (+45% radio del sol, misma intensidad) */
@media (max-width: 1024px){
  .elementor .elementor-section.hero-flag, .elementor .hero-flag.hero-flag{
    --sol-y: 50%;
    --r2: 11.6%; --r3: 20.3%; --r4: 29%; --r5: 40.6%;
    --sol-a1: .85; --sol-a2:.28; --sol-a3:.14; --sol-a4:.05;
    background:
      radial-gradient(circle at var(--sol-x) var(--sol-y),
        rgba(255,209,0,var(--sol-a1)) var(--r1),
        rgba(255,209,0,var(--sol-a2)) var(--r2),
        rgba(255,209,0,var(--sol-a3)) var(--r3),
        rgba(255,209,0,var(--sol-a4)) var(--r4),
        rgba(255,209,0,0) var(--r5)
      ),
      linear-gradient(to bottom,
        var(--celeste-top) 0%,
        var(--celeste-mid) calc(var(--white-start) - 14%),
        var(--blanco) var(--white-start),
        var(--blanco) var(--white-end),
        var(--celeste-mid) calc(var(--white-end) + 14%),
        var(--celeste-top) 100%
      ) !important;
    background-size:100% 100%,100% 100% !important;
  }
}
@media (max-width: 767.98px){
  .elementor .elementor-section.hero-flag, .elementor .hero-flag.hero-flag{
    --r2:11.6%; --r3:20.3%; --r4:29%; --r5:40.6%;
  }
}

/* Hero: layout móvil (si el notebook va debajo del marquee) */
@media (max-width: 1024px){
  .notebook-hero{ order:2; margin-top:20px; }
}

/* Hero wrapper de prueba */
.hero-wrap{ min-height:800px; position:relative; overflow:hidden; }

/* Stage reservado para futuros elementos absolutos */
.hero-stage{ position:relative; }

/* reCAPTCHA badge: oculto global (lo activás si Google lo exige visible) */
.grecaptcha-badge{ visibility: hidden; }



/* =========================================================
   FORMULARIO DE CONTACTO (CF7 + intl-tel-input)
   ========================================================= */

/* Caja general */
#contacto-form{
  --primary: var(--porto-primary-color, #0073e6);
  --text:#111; --muted:#666;
  max-width:950px; margin:40px auto; padding:30px;
  background:rgba(255,255,255,.95);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.15);
}
#contacto-form h2{ margin:0 0 22px; text-align:center; font-size:28px; font-weight:700; }

/* Campos */
#contacto-form input[type="text"],
#contacto-form input[type="email"],
#contacto-form input[type="tel"],
#contacto-form textarea{
  width:100% !important;
  padding:12px 14px !important;
  border:1px solid #ccc !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--text) !important;
  font-size:15px !important;
  margin-bottom:18px !important;
  box-shadow:0 2px 5px rgba(0,0,0,.06) !important;
}
#contacto-form textarea{ min-height:120px !important; }

/* Tel con bandera (intl-tel-input) */
#contacto-form .iti{ width:100% !important; position:relative !important; }
#contacto-form .iti__flag-container{
  position:absolute !important; left:8px; top:0; bottom:0;
  display:flex !important; align-items:center !important; background:transparent !important; z-index:2;
}
#contacto-form .iti__selected-flag{ padding:0 !important; background:transparent !important; }
#contacto-form .iti__dial-code{ margin-left:6px; color:var(--text) !important; }
#contacto-form .iti__tel-input{
  width:100% !important; background:#fff !important; border:0 !important; box-shadow:none !important;
  padding:12px 14px 12px 82px !important;
  color:var(--text) !important;
}

/* Placeholders y focus */
#contacto-form ::placeholder{ color:var(--muted) !important; opacity:1; }
#contacto-form input:not([type="submit"]):focus,
#contacto-form textarea:focus,
#contacto-form .iti__tel-input:focus{
  outline:none !important; border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(0,115,230,.15) !important;
}

/* Aceptación / checks */
#contacto-form .wpcf7-acceptance,
#contacto-form .wpcf7-list-item,
#contacto-form .wpcf7-list-item label{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:14px !important; margin:8px 0 18px !important;
}

/* Botón enviar */
#contacto-form input[type="submit"]{
  width:100% !important; padding:14px !important;
  background:var(--primary) !important; border:none !important; border-radius:10px !important;
  color:#fff !important; font-size:16px !important; font-weight:700 !important;
  cursor:pointer !important; transition:background .25s ease !important;
}
#contacto-form input[type="submit"]:hover{ background:#006bb3 !important; }

/* Estados de error/ok */
#contacto-form .wpcf7-not-valid{
  border-color:#e53935 !important;
  box-shadow:0 0 0 3px rgba(229,57,53,.12) !important;
}
#contacto-form .wpcf7-not-valid-tip{ color:#c62828 !important; font-size:12px !important; margin-top:6px !important; }
#contacto-form .wpcf7-response-output{ border-radius:8px !important; font-size:14px !important; padding:10px !important; margin:0 0 12px !important; }

/* Forzar éxito de CF7 con texto negro */
#contacto-form .wpcf7 form.sent .wpcf7-response-output,
#contacto-form .wpcf7-response-output.wpcf7-mail-sent-ok,
#contacto-form .wpcf7 .wpcf7-response-output{
  color:#000 !important; background:#e8f5e9 !important; border:1px solid #4caf50 !important;
}
#contacto-form .wpcf7 form.invalid .wpcf7-response-output,
#contacto-form .wpcf7 form.failed .wpcf7-response-output{
  background:#ffebee !important; border:1px solid #f44336 !important; color:#c62828 !important;
}

/* Responsive formulario */
@media (max-width:767px){
  #contacto-form{ margin:15px; padding:20px; max-width:95% !important; }
  #contacto-form .iti__tel-input{ padding-left:78px !important; }
}

/* Ocultar bandera/código viejo del plugin SOLO en #contacto-form */
#contacto-form .flag-container,
#contacto-form .flag-container *{
  display:none !important; visibility:hidden !important; opacity:0 !important;
  width:0 !important; height:0 !important; padding:0 !important; margin:0 !important;
  position:absolute !important; left:0 !important; top:0 !important; pointer-events:none !important; z-index:-1 !important;
}

/* Volver input de tel a padding normal (sin hueco de bandera) */
#contacto-form input[name="phonetext-559"]{
  width:100% !important;
  padding-left:14px !important;
  text-indent:0 !important;
}

/* Akismet: ocultar campos anti-spam */
.akismet-fields-container{ display:none !important; }



/* =========================================================
   UTILIDADES SUELTAS
   ========================================================= */

html.panel-opened .share-links {
  display: none !important;
}


/* =========================================================
   UTILIDADES ELEMENTOR / LAYOUT
   ========================================================= */

/* Sólo afecta al footer porque lo limitamos a la clase que pusiste */
.flex-wrap .elementor-container,
.flex-wrap .elementor-row { flex-wrap: wrap; }

/* Opcional: separa un poco las columnas cuando se apilan */
.flex-wrap .elementor-column { margin-bottom: 12px; }

/* ==== GRID 2x3 para MOBILE (sin Elementor Pro) ==== */
@media (max-width: 767px){
  .rdn-grid-services {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .rdn-grid-services > .elementor-container,
  .rdn-grid-services > .e-con-inner,
  .rdn-grid-services > .elementor-element {
    flex: 0 0 49%;
    max-width: 49%;
  }
}

/* Desktop: 3 por fila */
@media (min-width: 1024px){
  .rdn-grid-services > .elementor-container,
  .rdn-grid-services > .e-con-inner,
  .rdn-grid-services > .elementor-element {
    flex: 0 0 32%;
    max-width: 32%;
  }
}
/* Anula las mayúsculas forzadas del tema SOLO dentro del widget mobile */
#rdn-mobile h1.section-title,
#rdn-mobile h2.section-title,
#rdn-mobile .section-title{
  text-transform: none !important;
  letter-spacing: normal !important;     /* por si el tema abre el tracking */
  font-variant-caps: normal !important;  /* por si aplican small-caps */
}

/* Landing Mac (page-id-7493): ocultar barra mobile e impedir padding inferior extra */
@media (max-width:1024px){
  body.page-id-7493 .mobile-sticky-bar{ display:none !important; }
  body.page-id-7493{ padding-bottom:0 !important; }
}
body.page-id-7493 #dock{ z-index:10010 !important; }

@media (max-width:1024px){
  body.page-id-7493{ padding-bottom:0 !important; }
}

/*
 * ARREGLO DOCK (Versión CSS)
 * * IMPORTANTE: Para que esto funcione, el HTML de #dock
 * debe estar DENTRO del contenedor .elementor-element-46e9884
 * en el editor de Elementor.
*/

/* 1. Asegura que el "hero" sea el contenedor */
.elementor-element-46e9884 {
  position: relative !important;
  overflow: visible !important;
  min-height: 100vh;
}

/* 2. Ancla el dock al "hero" (reemplaza 'position: fixed') */
.elementor-element-46e9884 #dock {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;

  /* Adicional: Asegura que se muestre, 
     ya que el JS de arranque (boot) no lo hará */
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   RDN — Header Glass Plate (Operación Cóndor) — MOBILE TRIM
   Página: page-id-7493
   Objetivo: recortar 12px desde abajo del blur (placa) en mobile
   Contexto: .rdn-mac-plate es overlay absoluto (inset:0) creado por JS
   Efecto: no cambia la altura del header; SOLO acorta el overlay
   Estados: compatible con .header-visible y .sticky-header
   Versión: v1.0 · 2025-11-11 · “recorte inferior 12px”
   ========================================================= */
/* @media (max-width: 991px){
  body.page-id-7493 #header .rdn-mac-plate{
    bottom: 12px !important; /* antes: inset:0 → deja 12px libres abajo
  }
} */

/* 🔁 Revertir (si alguna vez hace falta):
@media (max-width: 991px){
  body.page-id-7493 #header .rdn-mac-plate{ bottom: 0 !important; }
}
*/

/* =========================================================
   RDN — Logo POP Apple (solo MOBILE)
   Sombra que sigue el alfa del PNG — sin caja glass
   ========================================================= */

/* 🔹 Base */
body.page-id-7493 .rdn-top__logo img {
  display: block;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.25))
    drop-shadow(0 6px 16px rgba(0,0,0,.18));
  transition: filter .25s ease;
}

/* 🔹 POP Apple — limpio, sin caja */
body.page-id-7493 .rdn-top__logo--pop img {
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.40))   /* contorno natural */
    drop-shadow(0 18px 36px rgba(0,0,0,.30)) /* halo largo */
    drop-shadow(0 -1px 2px rgba(255,255,255,.28)); /* highlight Apple */
}

/* 🔹 Sticky / hover (más presencia) */
body.page-id-7493 #header.sticky-header .rdn-top__logo img,
body.page-id-7493 .rdn-top__logo:hover img {
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.38))
    drop-shadow(0 20px 40px rgba(0,0,0,.28))
    drop-shadow(0 -1px 2px rgba(255,255,255,.30));
}

/* ❌ Sin blur en el contenedor: evita el recuadro */
body.page-id-7493 .rdn-top__logo {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ===== DESKTOP (≥992px) — anula todo ===== */
@media screen and (min-width: 992px) {
  body.page-id-7493 .rdn-top__logo img {
    filter: none !important;
  }
}

/* ============================================================
   CLASE APARTE: OCULTAR SECCIÓN EN MÓVIL
   "Kill Switch" para cualquier elemento
   ============================================================ */

/* ============================================================
   CLASE DE UTILIDAD: KILL SWITCH MÓVIL (Solo Page 7493)
   Oculta cualquier elemento con la clase "rdn-kill-mobile"
   exclusivamente en celulares y en esta página específica.
   ============================================================ */

@media (max-width: 991px) {
  
  .page-id-7493 .rdn-kill-mobile {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
}



/* ============================================
 * RDN – MacBook Dock vs Menú Mobile
 * Oculta el .dock en la página MacBook (page-id-7493)
 * cuando el body tiene overflow:hidden (menú abierto)
 * ============================================ */

/* MacBook: el dock se puede ocultar cuando el menú móvil está abierto */
@media (max-width: 991px) {
  body.page-id-7493 .dock {
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  body.page-id-7493 .dock.rdn-dock-hidden-by-menu {
    display: none !important;
    /* si querés, podrías dejar también:
       opacity: 0 !important;
       transform: translateY(8px) !important;
       pero con display:none ya alcanza */
  }
}





/* RDN NAV SYSTEM CSS START */
/* =========================================
   RDN Mobile Nav System - Sticky Bar + Drawer
   ========================================= */

/* Ocultar nav system en desktop */
@media (min-width: 1024px) {
  #rdn-mobile-nav-system {
    display: none !important;
  }
}

/* Wrapper fijo abajo */
.rdn-nav-wrapper {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rdn-nav-wrapper::before {
  content: "";
  position: absolute;
  inset: auto 0 8px 0;
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(
    circle at 50% 100%,
    rgba(15, 23, 42, 0.25),
    transparent 60%
  );
  pointer-events: none;
  z-index: -1;
}

.rdn-nav-wrapper.hidden {
  transform: translateY(150%);
}

/* Contenedor interno (ancho máx) */
.rdn-bar-container {
  position: relative; 
  width: 96%; 
  max-width: 420px; 
  pointer-events: auto;
  margin: 0 auto; /* Centrado en pantalla */
}

/* Barra de vidrio cóncava */
.rdn-glass-bar {
height: 72px;
  width: 100%;
  background: linear-gradient(
    145deg,
    rgba(248, 250, 252, 0.96),
    rgba(241, 245, 249, 0.92)
  ); /* un toque más de contraste */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.55); /* contorno suave */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 16px 40px -10px rgba(15, 23, 42, 0.35),  /* sombra un poco más marcada */
    0 0 0 1px rgba(15, 23, 42, 0.04);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 36px, black 36.5px);
  mask: radial-gradient(circle at 50% 0, transparent 36px, black 36.5px);
}

/* Botones de la barra */
.rdn-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748b;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 10px; /* bajar un poco por la curva */
}

.rdn-nav-btn svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8px;
  color: #0f172a; 
  opacity: 0.85;
  margin-bottom: 2px;
}

.rdn-nav-btn.active svg {
  stroke-width: 2.2px;
  opacity: 1;
  transform: translateY(-2px);
  filter: drop-shadow(0 2px 4px rgba(3, 169, 244, 0.3));
}

.rdn-spacer {
  flex: 1.5;
  pointer-events: none;
}

.rdn-fab-float {
  width: 64px; 
  height: 64px;
  
  /* Posición: Anclada al centro exacto */
  position: absolute;
  top: -30px;  
  left: 50%; 
  transform: translateX(-50%); /* Estado inicial para la animación */
  
  background: var(--wa); 
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 20; 
  
  /* GLOW VERDE (Sombra hacia todos lados) */
  /* x=0, y=0, blur=20px, spread=0 */
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
  
  /* Animación: 3 segundos, suave, infinita */
  animation: rdn-heartbeat 3s infinite ease-in-out;
}

/* ANIMACIÓN DE LATIDO (Respira y Brilla) */
@keyframes rdn-heartbeat {
  0% {
    /* Estado Normal */
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
  }
  50% {
    /* Inhalación: Crece un 8% y el brillo se hace más fuerte */
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.8);
  }
  100% {
    /* Exhalación: Vuelve a normal */
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
  }
}

.rdn-fab-float svg {
  width: 34px;
  height: 34px;
}

.rdn-fab-float:active {
  transform: translateX(-50%) scale(0.95);
}

/* Overlay + Drawer derecho */
.rdn-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.rdn-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.rdn-overlay-click {
  position: absolute;
  inset: 0;
}

.rdn-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  display: flex;
  flex-direction: column;
}

.rdn-drawer-overlay.open .rdn-drawer {
  transform: translateX(0);
}

/* Header del drawer */
.rdn-drawer-header {
  padding: 30px 20px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.rdn-avatar-icon {
  width: 44px;
  height: 44px;
  background: #e0f2fe;
  color: var(--brand);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.rdn-brand-title {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.2;
}

.rdn-brand-tag {
  font-size: 11px;
  color: var(--muted);
}

.rdn-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 28px;
  color: var(--muted);
  padding: 0 10px;
}

/* Contenido scrollable */
.rdn-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px;
}

/* Acordeones */
details.rdn-group {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

details.rdn-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
}

details.rdn-group summary::-webkit-details-marker {
  display: none;
}

.rdn-arrow {
  color: var(--muted);
  transition: transform 0.2s;
}

details[open] .rdn-arrow {
  transform: rotate(180deg);
}

/* Subnav (enlaces grandes, touch-friendly) */
.rdn-subnav {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 12px;
}

.rdn-subnav a {
  display: block;
  padding: 16px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 4px;
}

.rdn-subnav a:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--brand);
}

/* Enlaces simples */
.rdn-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 5px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.rdn-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* Títulos secciones */
.rdn-divider-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 1px;
  margin: 30px 0 10px;
  display: block;
}

/* Redes */
.rdn-social-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.rdn-social-card {
  flex: 1;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.1s;
}

.rdn-social-card:active {
  transform: scale(0.96);
}

/* CTA final */
.rdn-drawer-footer {
  padding: 20px;
  padding-bottom: 10px;
}

.rdn-cta-pill {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(237, 91, 85, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.rdn-cta-pill:active {
  transform: scale(0.98);
  box-shadow: 0 0 10px rgba(237, 91, 85, 0.6);
}

.rdn-legal {
  padding: 20px 0;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
}


body.page-id-14 .mobile-sticky-bar{
    display: none !important;
}
.mobile-sticky-bar {
  display: none !important;
}

/* =================================================================
   PARCHE "SKINNY CLAMP" (Compresión Máxima Elástica)
   Se activa en pantallas de menos de 850px.
   Objetivo: Eliminar scroll en Motorola Edge y similares.
   ================================================================= */

@media (max-height: 991px) {

  /* 1. CONTENEDOR: Márgenes mínimos */
  .rdn-drawer-content {
    /* Piso de 5px para aprovechar bordes */
    padding: clamp(5px, 1vh, 15px) 20px !important;
  }

  /* 2. HEADER: Lo pegamos al techo */
  .rdn-drawer-header {
    padding-top: clamp(10px, 2vh, 20px) !important;
    padding-bottom: clamp(10px, 1.5vh, 15px) !important;
  }
  .rdn-avatar-icon { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  .rdn-brand-title { font-size: 16px !important; }

  /* 3. ITEMS PRINCIPALES (El ajuste clave) */
  details.rdn-group summary,
  .rdn-link {
    /* Bajamos a 8px mínimo. 1.2vh escala lento. */
    padding-top: clamp(8px, 1.2vh, 12px) !important;
    padding-bottom: clamp(8px, 1.2vh, 12px) !important;
    
    /* Letra un pelín más chica (14px base) */
    font-size: clamp(14px, 1.8vh, 15px) !important;
    min-height: 0 !important;
  }

  /* Iconos alineados */
  .rdn-icon {
    font-size: clamp(16px, 2vh, 18px) !important;
    width: 20px !important;
  }

  /* 4. SUBMENÚS (Super compactos) */
  .rdn-subnav {
    margin-bottom: clamp(4px, 1vh, 8px) !important;
    padding: 2px !important;
  }
  .rdn-subnav a {
    /* Padding interno mínimo */
    padding: clamp(8px, 1vh, 10px) 10px !important;
    font-size: clamp(13px, 1.6vh, 14px) !important;
    margin-bottom: 1px !important;
  }

  /* 5. TÍTULOS DE SECCIÓN */
  .rdn-divider-title {
    margin-top: clamp(12px, 2vh, 20px) !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }

  /* 6. REDES SOCIALES */
  .rdn-social-grid {
    margin-bottom: clamp(8px, 1.5vh, 12px) !important;
    gap: 8px !important;
  }
  .rdn-social-card {
    /* Bajamos altura a 38px-44px */
    height: clamp(38px, 5vh, 44px) !important;
    border-radius: 10px !important;
  }
  .rdn-social-card svg { width: 18px !important; height: 18px !important; }

  /* 7. CTA FINAL & FOOTER (Lo pegamos al piso) */
  .rdn-cta-mid-wrapper { 
    margin: clamp(8px, 1.5vh, 15px) 0 !important; 
  }
  .rdn-cta-pill { 
    padding: clamp(10px, 1.5vh, 14px) !important; 
    font-size: clamp(14px, 2vh, 16px) !important; 
  }
  .rdn-drawer-footer { 
    padding: 5px 20px 15px !important; 
  }
}
/* RDN NAV SYSTEM CSS END */

/* =======================================================
 * RDN — Tips menú Porto (dock-dot + tip al hover)
 * Nivel 1: puntito tipo macOS dock → pill con texto
 * Submenús: pill lateral con flecha a la izquierda
 * Solo desktop
 * ======================================================= */
@media (min-width: 992px) {

  /* Paleta base (aplica a cualquier li que tenga tip) */
  #header .main-menu li {
    --rdn-tip-bg: #ED5B55;   /* rojo suave por defecto */
    --rdn-tip-color: #ffffff;
  }

  /* Variantes de color por clase en el <li> (CSS Classes en el menú) */
  #header .main-menu li.tip-green  { --rdn-tip-bg: #4CAF50; }
  #header .main-menu li.tip-blue   { --rdn-tip-bg: #03A9F4; }
  #header .main-menu li.tip-orange { --rdn-tip-bg: #FF9800; }
  #header .main-menu li.tip-violet { --rdn-tip-bg: #9C27B0; }
  #header .main-menu li.tip-red    { --rdn-tip-bg: #e53935; }  /* rojo CTA */
  #header .main-menu li.tip-gold   { --rdn-tip-bg: #FFC107; }  /* dorado / shop */
  #header .main-menu li.tip-wa     { --rdn-tip-bg: #25D366; }  /* verde WA opcional */

  /* -------------------------------------------------------
   * NIVEL 1 – puntito dock + tip al hover
   * -----------------------------------------------------*/
  #header .main-menu > li > a {
    position: relative;
    overflow: visible;
  }

  #header .main-menu > li > a .tip {
    /* reset Porto */
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

    position: absolute !important;
    left: 50% !important;
    bottom: -6px !important;              /* puntito debajo del ítem */
    transform: translateX(-50%);

    width: 8px;
    height: 8px;
    padding: 0 !important;
    border-radius: 999px;

    display: inline-flex !important;      /* 🔹 centramos contenido siempre */
    align-items: center;
    justify-content: center;

    background-color: var(--rdn-tip-bg) !important;
    color: var(--rdn-tip-color) !important;

    font-size: 0 !important;             /* texto oculto en estado “punto” */
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;

    opacity: 0.9;
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.25);
    z-index: 5;

    transition:
      top 0.18s ease-out,
      bottom 0.18s ease-out,
      width 0.18s ease-out,
      height 0.18s ease-out,
      padding 0.18s ease-out,
      border-radius 0.18s ease-out,
      font-size 0.18s ease-out,
      opacity 0.18s ease-out,
      box-shadow 0.18s ease-out,
      transform 0.18s ease-out;
  }

  /* apagamos cualquier pseudo antiguo de Porto */
  #header .main-menu > li > a .tip::before,
  #header .main-menu > li > a .tip::after {
    content: none !important;
  }

  /* Estado HOVER – el punto se convierte en tip arriba del ítem */
  #header .main-menu > li:hover > a .tip {
    top: -22px !important;               /* aparece arriba del ítem */
    bottom: auto !important;
    transform: translateX(-50%);

    width: auto;
    height: auto;
    min-width: 56px;                     /* 🔹 ancho mínimo cómodo para TIENDA / ENVÍO / TIPS */
    padding: 3px 10px !important;
    border-radius: 4px;

    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.24px !important;
    text-align: center !important;

    opacity: 1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
  }

  #header .main-menu > li:hover > a .tip::after {
    content: "" !important;              /* flechita apuntando al ítem */
    position: absolute;
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: var(--rdn-tip-bg) transparent transparent transparent;
  }

  /* -------------------------------------------------------
   * SUBMENÚS / POPUP – pill lateral con flecha IZQUIERDA
   * (se mantienen visibles, sin modo “punto”)
   * -----------------------------------------------------*/

  /* Aseguramos que los <li> no corten nada */
  #header .main-menu .popup li {
    position: relative;
    overflow: visible;
  }

  /* Reset TOTAL de cualquier tip heredado de Porto
     dentro de los popups (submenús) */
  #header .main-menu .popup .tip {
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Nuestro estilo de pill lateral para cualquier .tip de submenú */
  #header .main-menu .popup li .tip {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 0 0 0 6px !important;

    width: auto;
    height: auto;
    padding: 2px 8px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background-color: var(--rdn-tip-bg) !important;
    color: var(--rdn-tip-color) !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22px !important;
    white-space: nowrap !important;
    text-align: center !important;

    opacity: 0.95 !important;
    box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.2);

    transition:
      transform 0.18s ease-out,
      opacity 0.18s ease-out,
      box-shadow 0.18s ease-out;
  }
	#header .main-menu .popup li .tip::before {
		content: none !important;
		border-width: 0 !important;
	  }

  /* Nos aseguramos de que NO quede ninguna flecha abajo en submenús */
  #header .main-menu .popup li .tip::after {
    content: none !important;
  }

  /* hover suave en submenú */
  #header .main-menu .popup li:hover .tip {
    transform: translateY(-1px);
    opacity: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
  }

}
/* ============================
   HEADER OCULTO DENTRO DEL HERO
   ============================ */

/* Bottom bar: animación para mostrar/ocultar */
#rdn-sticky-nav {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Oculta la barra, la baja fuera de pantalla */
#rdn-sticky-nav.rdn-sticky-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}