/*
 * Cabecera + mega menú + pie propios (rediseño 2026).
 * Se cargan en TODO el sitio, sustituyendo a las plantillas de Elementor.
 * Prefijo .pwn- (posicionamiento web nav) para no chocar con nada del tema.
 *
 * Nota sobre los !important: el tema Ryse impone a todo el sitio
 *   radiantthemes-reset.css  ->  h1..h6 { color:#1e1666 !important }
 *   <style> en línea         ->  h1,h2,h3,h4,h5,p,div { font-family:Roboto !important }
 * Mientras Ryse siga cargando (todas las páginas menos la portada), hay que
 * neutralizarlo dentro de nuestro chrome o la cabecera sale con la tipografía vieja.
 */

.pwn-cabecera,
.pwn-cajon,
.pwn-pie,
.pwn-barra{
  --navy:#0e1730; --navy-2:#16223f; --navy-soft:#1d2c4d;
  --gold:#f4c04e; --gold-2:#a06f12; --gold-soft:#fbedc8;
  --card:#ffffff; --paper:#f6f4ee;
  --ink:#131b2b; --ink-soft:#464f60; --ink-faint:#646d7d;
  --line:#e6e2d7;
  --wht:#f3f6ff; --wht-soft:#b9c3d8;
  --sombra:0 2px 6px rgba(14,23,48,.05),0 16px 40px rgba(14,23,48,.10);
  --sombra-lg:0 30px 70px rgba(14,23,48,.22);
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.pwn-cabecera,.pwn-cabecera *,
.pwn-cajon,.pwn-cajon *,
.pwn-pie,.pwn-pie *{box-sizing:border-box}

.pwn-cabecera,.pwn-cabecera p,.pwn-cabecera div,.pwn-cabecera span,.pwn-cabecera a,
.pwn-cajon,.pwn-cajon p,.pwn-cajon div,.pwn-cajon span,.pwn-cajon a,
.pwn-pie,.pwn-pie p,.pwn-pie div,.pwn-pie span,.pwn-pie a,.pwn-pie li,
.pwn-barra,.pwn-barra p,.pwn-barra div,.pwn-barra span,.pwn-barra a,.pwn-barra strong,
.pwn-barra button{
  font-family:var(--sans) !important}

.pwn-cabecera b,.pwn-cabecera button,.pwn-cabecera .pwn-cta,
.pwn-cajon button,.pwn-cajon .pwn-cajon-cta,
.pwn-pie .pwn-pie-titulo,.pwn-pie .pwn-pie-cta,
.pwn-panel .pwn-cta-titulo,.pwn-panel .pwn-col-titulo,.pwn-panel .pwn-cta-boton{
  font-family:var(--head) !important}

.pwn-pie .pwn-pie-titulo{color:#fff !important}

/* enlace de salto para teclado y lectores */
.pwn-saltar{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gold);color:var(--navy);
  padding:12px 20px;border-radius:0 0 10px 0;font-family:var(--head);font-weight:700}
.pwn-saltar:focus{left:0}

.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;padding:0;margin:-1px;border:0}

/* ==========================================================================
   BARRA SUPERIOR DE AVISO
   Sustituye a la del plugin MyStickyMenu, que medía 74 px, era `fixed` y se
   comía la primera pantalla. Esta ocupa 38 px y va en el flujo normal: se
   desplaza con la página y deja a la cabecera pegarse arriba sin apaños.
   ========================================================================== */
/* Red de seguridad: si el remove_action sobre MyStickyMenu dejara de funcionar
   (una actualización del plugin que renombre sus funciones), su barra no se
   vería igualmente mientras mande la nuestra. */
.pweb-barra-propia .mysticky-welcomebar-fixed{display:none !important}

.pwn-barra{
  position:relative;z-index:901;
  background:linear-gradient(180deg,#070d1c,#0c1428);
  color:var(--wht-soft);
  font-size:13.5px;line-height:1.3}

/* filo dorado inferior; el degradado se desplaza muy despacio, es el único
   movimiento de la barra */
.pwn-barra::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,192,78,.65),transparent);
  background-size:220% 100%;
  animation:pwn-filo 9s linear infinite}
@keyframes pwn-filo{from{background-position:120% 0}to{background-position:-120% 0}}

/* El reset de box-sizing de más abajo sólo cubre .pwn-cabecera/.pwn-cajon/.pwn-pie,
   y sin él la altura mínima se sumaba al relleno: 38 + 18 = 56 px. */
.pwn-barra,.pwn-barra *{box-sizing:border-box}
.pwn-barra-inner{
  max-width:1240px;margin:0 auto;padding:8px 24px;
  display:flex;align-items:center;gap:20px;min-height:38px}

/* --- mensaje + llamada --- */
/* El tema Ryse le mete a TODO <p> un `padding-bottom:15px` y su propio
   font-size; sin neutralizarlo la barra medía 64 px en vez de 38. */
.pwn-barra p{margin:0 !important;padding:0 !important}
.pwn-barra-txt{
  flex:1;min-width:0;font-size:13.5px !important;line-height:1.3;
  display:flex;align-items:center;gap:11px}
.pwn-barra-ic{
  position:relative;flex:none;display:grid;place-items:center;color:var(--gold)}
.pwn-barra-ic .pwn-svg{width:15px;height:15px}
.pwn-barra-ic::before{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,192,78,.30),transparent 70%)}
.pwn-barra-msg{
  color:#e7ecf8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pwn-barra-cta{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  color:var(--gold) !important;font-weight:700;text-decoration:none;
  padding-bottom:1px;position:relative}
.pwn-barra-cta .pwn-svg{width:14px;height:14px;transition:transform .2s ease}
/* subrayado que crece de izquierda a derecha */
.pwn-barra-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.pwn-barra-cta:hover::after,
.pwn-barra-cta:focus-visible::after{transform:scaleX(1)}
.pwn-barra-cta:hover .pwn-svg{transform:translateX(3px)}

/* separador antes de la prueba social */
.pwn-barra-prueba{
  flex:none;display:flex;align-items:center;gap:9px;
  font-size:12.5px !important;line-height:1.3;color:#8c97ae;
  padding-left:20px !important;border-left:1px solid rgba(255,255,255,.10)}
.pwn-barra-prueba strong{color:#e7ecf8;font-weight:700}
.pwn-barra-estrellas{display:inline-flex;gap:2px;color:var(--gold)}
.pwn-barra-estrellas .pwn-svg{width:11px;height:11px}

/* --- cerrar --- */
.pwn-barra-cerrar{
  flex:none;background:none;border:0;cursor:pointer;padding:6px;margin-right:-6px;
  color:var(--wht-soft);opacity:.45;line-height:0;border-radius:6px;
  transition:opacity .15s ease,color .15s ease}
.pwn-barra-cerrar .pwn-svg{width:14px;height:14px}
.pwn-barra-cerrar:hover{opacity:1;color:var(--gold)}

/* --- responsive --- */
@media(max-width:1000px){
  .pwn-barra-prueba{display:none}
}
@media(max-width:620px){
  /* En móvil sólo queda la llamada: el mensaje entero no cabe en una línea y
     partirlo en dos devolvería la barra gorda que estamos quitando. */
  .pwn-barra-msg{display:none}
  .pwn-barra-inner{padding:8px 20px;gap:12px}
  .pwn-barra-txt{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .pwn-barra::after{animation:none}
  .pwn-barra-cta::after,.pwn-barra-cta .pwn-svg{transition:none}
}

/* ==========================================================================
   LOGOTIPO
   El texto va en <text> dentro del SVG para poder corregirlo sin rehacer el
   dibujo, así que la tipografía se controla desde aquí.
   ========================================================================== */
/* `overflow:hidden` como cinturón: pase lo que pase con las fuentes, el
   logotipo nunca se sale de su caja ni pisa al menú. */
.pwn-marca{display:block;height:44px;width:auto;overflow:hidden}
.pwn-marca-pie{height:52px}
/* `currentColor`, no #fff: el logotipo tiene que poder ir también sobre fondo
   claro. Fijar el blanco aquí es el clásico color que sólo funciona en un tema. */
.pwn-marca text{font-family:var(--head) !important;fill:currentColor}
.pwn-marca .pwn-marca-l1{font-size:16px;font-weight:600;letter-spacing:-.01em;opacity:.88}
.pwn-marca .pwn-marca-l2{font-size:19px;font-weight:800;letter-spacing:-.02em}
/* el descriptor necesita la misma especificidad que la regla de arriba o el
   fill blanco le gana y se pierde el dorado */
.pwn-marca .pwn-marca-desc{
  font-family:var(--mono) !important;font-size:7.6px;font-weight:600;
  letter-spacing:.15em;fill:var(--gold);opacity:1}
.pwn-cabecera .pwn-marca,
.pwn-pie .pwn-marca{color:#fff}

/* el cohete despega un poco al pasar por encima */
.pwn-logo .pwn-marca path,
.pwn-logo .pwn-marca circle{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.pwn-logo:hover .pwn-marca path,
.pwn-logo:hover .pwn-marca circle{transform:translateY(-1.5px)}

.pwn-pie-logo{height:52px;margin-bottom:16px}

@media(max-width:980px){
  .pwn-marca{height:38px}
}
@media(max-width:430px){
  /* A esta anchura la marca completa deja al menú sin sitio. Con `slice` en el
     SVG, estrechar la caja RECORTA por la derecha y queda sólo el cohete; con
     `object-fit` no funcionaba —eso es para <img>— y lo que hacía era encoger
     todo el conjunto hasta dejar el texto ilegible. */
  .pwn-marca-completo{width:44px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .pwn-logo .pwn-marca path,
  .pwn-logo .pwn-marca circle{transition:none}
}

/* ==========================================================================
   CABECERA
   ========================================================================== */
.pwn-cabecera{
  position:sticky;top:0;z-index:900;
  background:rgba(14,23,48,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09);
  color:var(--wht)}
.pwn-cabecera-inner{
  max-width:1240px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:26px;min-height:76px}

.pwn-logo{display:flex;align-items:center;flex:none}
.pwn-logo img{display:block;height:46px;width:auto;max-width:none}
.pwn-logo svg{display:block}

.pwn-nav{flex:1;min-width:0}
.pwn-lista{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;justify-content:center}
.pwn-item{position:relative;display:flex;align-items:center}

.pwn-enlace,
.pwn-toggle{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--wht-soft);font-size:15.5px;font-weight:600;
  padding:26px 10px;background:none;border:0;cursor:pointer;line-height:1;
  text-decoration:none;transition:color .15s ease}
.pwn-item:hover > .pwn-enlace,
.pwn-item:hover > .pwn-toggle,
.pwn-enlace:hover,.pwn-toggle:hover,
.pwn-toggle[aria-expanded="true"]{color:var(--gold)}
.pwn-tiene-mega > .pwn-enlace,
.pwn-tiene-drop > .pwn-enlace{padding-right:2px}
.pwn-toggle{padding-left:2px}
.pwn-toggle-solo{padding-left:10px}
.pwn-actual > .pwn-enlace,
.pwn-actual > .pwn-toggle{color:#fff}
.pwn-actual > .pwn-enlace::after{
  content:"";position:absolute;left:10px;right:10px;bottom:18px;height:2px;background:var(--gold)}

/* La flecha era un cuadrado de 8x8 girado 45 grados con un translate DENTRO del
   giro: su caja pasaba a medir 11,3 px y el dibujo quedaba 2,8 px por encima del
   texto. Se veía sobre todo en «Servicios» y «Blog». Ahora es un chevron SVG en
   una caja fija de 14x14 centrada, y al abrir gira 180 grados sobre su centro. */
.pwn-flecha{
  width:14px;height:14px;flex:none;display:grid;place-items:center;
  transition:transform .2s ease}
.pwn-flecha .pwn-svg{width:14px;height:14px}
.pwn-toggle[aria-expanded="true"] .pwn-flecha,
.pwn-acordeon[aria-expanded="true"] .pwn-flecha{transform:rotate(180deg)}

.pwn-acciones{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.pwn-tel{
  display:inline-flex;align-items:center;gap:7px;color:#fff;font-weight:700;font-size:15px;
  white-space:nowrap;text-decoration:none}
.pwn-tel:hover{color:var(--gold)}
.pwn-cta{
  display:inline-flex;align-items:center;background:var(--gold);color:var(--navy);
  font-family:var(--head) !important;font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:999px;white-space:nowrap;text-decoration:none;
  box-shadow:0 8px 20px rgba(244,192,78,.32);transition:transform .15s ease,box-shadow .15s ease}
.pwn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(244,192,78,.42);color:var(--navy)}

.pwn-hamburguesa{display:none;background:none;border:0;cursor:pointer;padding:10px}
.pwn-barras{display:block;width:26px}
.pwn-barras i{display:block;height:2px;background:var(--wht);border-radius:2px;margin:5px 0;
  transition:transform .2s ease,opacity .2s ease}

/* ==========================================================================
   PANEL MEGA
   ========================================================================== */
.pwn-panel{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(1090px,calc(100vw - 48px));
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sombra-lg);
  padding:26px;z-index:950}
.pwn-panel[hidden]{display:none}
.pwn-panel-inner{display:grid;grid-template-columns:1fr 290px;gap:26px}

.pwn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:start}
.pwn-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-content:start}

.pwn-tarjeta{
  display:flex;gap:13px;align-items:flex-start;padding:12px 13px;border-radius:12px;
  text-decoration:none;color:inherit;transition:background-color .14s ease}
.pwn-tarjeta:hover{background:var(--paper)}
.pwn-ic{
  width:38px;height:38px;flex:none;border-radius:10px;background:var(--gold-soft);
  display:grid;place-items:center;font-size:18px;line-height:1}
.pwn-tx{display:block;min-width:0}
.pwn-tx b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.3}
.pwn-tx small{display:block;margin-top:3px;font-size:13px;color:var(--ink-faint);line-height:1.4}

.pwn-col-titulo{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);text-decoration:none;padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--line)}
.pwn-col-titulo:hover{color:var(--ink)}
.pwn-col-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pwn-col-lista a{
  display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;line-height:1.35}
.pwn-col-lista a:hover{color:var(--gold-2)}

.pwn-panel-cta{
  background:linear-gradient(165deg,var(--navy),var(--navy-2));color:var(--wht);
  border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:flex-start}
.pwn-cta-eyebrow{
  margin:0;font-family:var(--mono) !important;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.pwn-cta-titulo{margin:8px 0 0;font-size:21px;font-weight:700;color:#fff;line-height:1.15}
.pwn-cta-texto{margin:10px 0 0;font-size:13.5px;color:var(--wht-soft);line-height:1.5}
.pwn-cta-boton{
  margin-top:16px;display:inline-flex;background:var(--gold);color:var(--navy);
  font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;text-decoration:none}
.pwn-cta-boton:hover{color:var(--navy);filter:brightness(1.06)}
.pwn-cta-tel{margin-top:10px;font-size:13.5px;color:var(--wht-soft);text-decoration:none}
.pwn-cta-tel:hover{color:var(--gold)}

/* desplegable simple */
.pwn-drop{
  position:absolute;top:100%;left:0;min-width:250px;list-style:none;margin:0;padding:8px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sombra-lg);z-index:950}
.pwn-drop[hidden]{display:none}
.pwn-drop a{
  display:block;padding:10px 13px;border-radius:9px;font-size:14.5px;color:var(--ink-soft);
  text-decoration:none}
.pwn-drop a:hover{background:var(--paper);color:var(--ink)}

/* ==========================================================================
   CAJÓN MÓVIL
   ========================================================================== */
.pwn-velo{
  position:fixed;inset:0;background:rgba(8,13,28,.55);z-index:1000;
  opacity:0;transition:opacity .2s ease}
.pwn-velo[hidden]{display:none}
.pwn-velo.pwn-visible{opacity:1}

.pwn-cajon{
  position:fixed;top:0;right:0;bottom:0;width:min(370px,88vw);z-index:1001;
  background:var(--navy);color:var(--wht);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease;overflow-y:auto}
.pwn-cajon[hidden]{display:none}
.pwn-cajon.pwn-visible{transform:none}

.pwn-cajon-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
.pwn-cajon-titulo{font-family:var(--head) !important;font-weight:700;font-size:16px;color:#fff}
.pwn-cerrar{background:none;border:0;color:var(--wht);font-size:20px;cursor:pointer;padding:6px 10px}
.pwn-cerrar:hover{color:var(--gold)}

.pwn-cajon-nav{flex:1;padding:10px 12px}
.pwn-cajon-nav ul{list-style:none;margin:0;padding:0}
.pwn-cajon-enlace,
.pwn-acordeon{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 12px;color:var(--wht);font-size:16px;font-weight:600;
  background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.07)}
.pwn-cajon-enlace:hover,.pwn-acordeon:hover,
.pwn-acordeon[aria-expanded="true"]{color:var(--gold)}
.pwn-sub{padding:4px 0 12px 12px !important}
.pwn-sub[hidden]{display:none}
.pwn-sub a{
  display:block;padding:10px 12px;color:var(--wht-soft);font-size:14.5px;text-decoration:none}
.pwn-sub a:hover{color:var(--gold)}
.pwn-sub-nieto a{padding-left:26px;font-size:13.5px;opacity:.85}

.pwn-cajon-pie{padding:18px 22px 26px;border-top:1px solid rgba(255,255,255,.1)}
.pwn-cajon-cta{
  display:block;text-align:center;background:var(--gold);color:var(--navy);
  font-weight:700;padding:14px;border-radius:999px;text-decoration:none}
.pwn-cajon-tel{display:block;text-align:center;margin-top:12px;color:var(--wht-soft);text-decoration:none}

/* ==========================================================================
   PIE
   ========================================================================== */
.pwn-pie{background:#0a1223;color:var(--wht-soft);margin-top:0}
.pwn-pie-inner{max-width:1240px;margin:0 auto;padding:0 24px}
.pwn-pie > .pwn-pie-inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;padding-top:58px;padding-bottom:34px}
.pwn-pie-logo{display:block;height:64px;width:auto;margin-bottom:16px}
.pwn-pie-texto{margin:0;font-size:14.5px;line-height:1.65}
.pwn-pie-nap{margin:16px 0 0;font-size:14.5px;line-height:1.7}
.pwn-pie-nap strong{color:#fff}

.pwn-pie-titulo{
  font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;font-weight:700}
.pwn-pie-col ul{list-style:none;margin:0;padding:0}
.pwn-pie-col li{margin-bottom:4px}
.pwn-pie-col a{display:block;padding:5px 0;color:var(--wht-soft);font-size:15px;text-decoration:none}
.pwn-pie-col a:hover{color:var(--gold)}
.pwn-pie-contacto{margin-bottom:18px !important}

.pwn-redes{display:flex !important;flex-wrap:wrap;gap:9px;margin:0 0 20px !important;padding:0}
.pwn-redes li{margin:0 !important}
.pwn-redes a{
  width:36px;height:36px;padding:0 !important;display:grid !important;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.08);color:var(--wht);font-size:14px;
  transition:background-color .15s ease,color .15s ease}
.pwn-redes a:hover{background:var(--gold);color:var(--navy)}

.pwn-pie-cta{
  display:inline-flex !important;background:var(--gold);color:var(--navy) !important;
  font-weight:700;padding:12px 22px !important;border-radius:999px;text-decoration:none}
.pwn-pie-cta:hover{filter:brightness(1.06)}

.pwn-pie-barra{border-top:1px solid rgba(255,255,255,.08)}
.pwn-pie-barra .pwn-pie-inner{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px}
.pwn-pie-barra p{margin:0;font-size:13.5px}
.pwn-pie-barra a{color:var(--gold);text-decoration:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Margen de seguridad. Con el logotipo nuevo el menú entra por los pelos: la
   lista pedía 625 px y el hueco disponible eran 615, y bastaba con que alguien
   añadiera una pestaña para que se montara encima del logotipo. Apretando sólo
   el relleno —sin tocar el tamaño de letra— se ganan unos 36 px. */
@media(max-width:1440px){
  .pwn-enlace,.pwn-toggle{padding-left:7px;padding-right:7px}
  .pwn-lista{gap:2px}
}
@media(max-width:1200px){
  .pwn-enlace,.pwn-toggle{font-size:14.5px}
  .pwn-cabecera-inner{gap:16px}
}
@media(max-width:1080px){
  .pwn-tel{display:none}
}
@media(max-width:980px){
  .pwn-nav{display:none}
  .pwn-hamburguesa{display:block}
  .pwn-cabecera-inner{min-height:66px}
  .pwn-logo img{height:40px}
  .pwn-acciones{margin-left:auto}
}
@media(max-width:620px){
  .pwn-cta{display:none}
  .pwn-pie > .pwn-pie-inner{grid-template-columns:1fr;gap:34px;padding-top:44px}
  .pwn-pie-barra .pwn-pie-inner{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .pwn-cajon,.pwn-velo,.pwn-cta,.pwn-flecha,.pwn-barras i{transition:none !important}
}

/* ==========================================================================
   AJUSTES TRAS LA REVISIÓN VISUAL
   ========================================================================== */

/* Los ítems del menú se partían en dos líneas («Quiénes / Somos») y se pisaban. */
.pwn-enlace,
.pwn-toggle,
.pwn-toggle span,
.pwn-tel,
.pwn-cta{white-space:nowrap}
.pwn-lista{flex-wrap:nowrap}

/* La barra de aviso de MyStickyMenu es fixed en top:0 con z-index altísimo. Nuestra
   cabecera es sticky: al hacer scroll se metía por debajo. El JS mide esa barra y
   escribe --pwn-offset; si el plugin no está, vale 0 y no cambia nada. */
.pwn-cabecera{top:var(--pwn-offset,0px)}

/* ==========================================================================
   ICONOS SVG
   Sustituyen a los emojis. 24×24, currentColor, alineados a la línea de texto.
   ========================================================================== */
.pwn-svg{display:block;width:1em;height:1em;flex:none}
.pwn-tel .pwn-svg,
.pwn-cta-tel .pwn-svg,
.pwn-cajon-tel .pwn-svg{width:17px;height:17px}
.pwn-tel,.pwn-cta-tel,.pwn-cajon-tel{display:inline-flex;align-items:center;gap:8px}
.pwn-cajon-tel,.pwn-cta-tel{justify-content:center}
.pwn-cerrar .pwn-svg{width:20px;height:20px}
.pwn-redes .pwn-svg{width:17px;height:17px}

/* ==========================================================================
   CORRECCIÓN: EL PANEL MEGA SE SALÍA DE LA PANTALLA
   El panel se centraba sobre su propio <li> (`left:50%` dentro de `.pwn-item`,
   que es position:relative). «Servicios» está a la izquierda del menú, así que
   un panel de 980 px centrado ahí empezaba en x = −152 y se cortaba.
   Ahora el panel se ancla al contenedor de la cabecera y se centra en ÉL, que
   es lo que hace cualquier mega menú: da igual sobre qué pestaña se abra.
   Los desplegables simples siguen colgando de su ítem, que es lo correcto
   para una lista estrecha.
   ========================================================================== */
.pwn-cabecera-inner{position:relative}
.pwn-tiene-mega{position:static}

/* El subrayado del ítem activo se anclaba al <li>; al dejar los mega en
   position:static necesita su propio contexto. */
.pwn-enlace,.pwn-toggle{position:relative}
.pwn-actual > .pwn-enlace::after{left:10px;right:10px;bottom:18px}

/* Y un cinturón de seguridad: pase lo que pase, el panel nunca sobresale. */
.pwn-panel{
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - var(--pwn-offset,0px) - 96px);
  overflow-y:auto;
  margin-top:-1px}

/* Los desplegables simples de la derecha se alinean por su borde derecho para
   no salirse en pantallas justas. */
.pwn-lista > .pwn-item:nth-last-child(-n+2) > .pwn-drop{left:auto;right:0}

/* ==========================================================================
   ACABADO PREMIUM DEL PANEL
   ========================================================================== */
.pwn-panel{
  animation:pwn-panel-entra .18s ease-out both;
  background:linear-gradient(180deg,#fff,#fcfbf7);
  border-color:rgba(14,23,48,.08);
  box-shadow:0 1px 2px rgba(14,23,48,.06),0 34px 70px -18px rgba(14,23,48,.34)}
@keyframes pwn-panel-entra{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

/* filo dorado superior, como el de las tarjetas de la home */
.pwn-panel::before{
  content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.pwn-tarjeta{position:relative;border:1px solid transparent;align-items:center}
.pwn-tarjeta:hover{
  background:linear-gradient(120deg,rgba(244,192,78,.13),rgba(244,192,78,.04));
  border-color:rgba(244,192,78,.35)}
.pwn-ic{
  background:linear-gradient(150deg,#fff5dc,#f6e3b4);
  border:1px solid rgba(160,111,18,.16);
  color:var(--gold-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.pwn-ic .pwn-svg{width:20px;height:20px}
.pwn-tarjeta:hover .pwn-ic{
  background:linear-gradient(150deg,var(--gold),#e5a92f);color:var(--navy)}
.pwn-tx{flex:1}
.pwn-fl{
  flex:none;color:var(--gold-2);opacity:0;transform:translateX(-6px);
  transition:opacity .16s ease,transform .16s ease}
.pwn-fl .pwn-svg{width:17px;height:17px}
.pwn-tarjeta:hover .pwn-fl{opacity:1;transform:none}

.pwn-panel-cta{position:relative;overflow:hidden}
.pwn-panel-cta::after{
  content:"";position:absolute;width:190px;height:190px;right:-70px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,192,78,.30),transparent 68%)}
.pwn-panel-cta > *{position:relative;z-index:1}

/* ==========================================================================
   BOTÓN PRINCIPAL CON BORDE ANIMADO
   Un anillo de luz recorre el contorno: es un cónico que gira debajo del botón
   y al que se le tapa el centro con `::after`. Solo se anima `transform`, así
   que va en la GPU y no provoca repintado.
   ========================================================================== */
.pwn-cta{position:relative;isolation:isolate;overflow:hidden;z-index:0}
.pwn-cta::before{
  content:"";position:absolute;z-index:-2;left:50%;top:50%;width:280%;height:280%;
  transform-origin:0 0;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.35) 74%,#fff 80%,rgba(255,255,255,.35) 86%,transparent 96%);
  animation:pwn-anillo 5s linear infinite}
.pwn-cta::after{
  content:"";position:absolute;z-index:-1;inset:2px;border-radius:999px;
  background:linear-gradient(140deg,var(--gold),#eab63c)}
@keyframes pwn-anillo{
  from{transform:translate(-50%,-50%) rotate(0turn)}
  to{transform:translate(-50%,-50%) rotate(1turn)}}

.pwn-cajon-cta,.pwn-pie-cta{position:relative;isolation:isolate;overflow:hidden;z-index:0}
.pwn-cajon-cta::after,.pwn-pie-cta::after{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:999px;
  background:linear-gradient(140deg,var(--gold),#eab63c)}
.pwn-cajon-cta::before,.pwn-pie-cta::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);
  transform:translateX(-120%)}
.pwn-cajon-cta:hover::before,.pwn-pie-cta:hover::before{
  animation:pwn-brillo .75s ease-out}
@keyframes pwn-brillo{to{transform:translateX(120%)}}

@media(prefers-reduced-motion:reduce){
  .pwn-cta::before{animation:none;background:none}
  .pwn-panel{animation:none}
  .pwn-cajon-cta:hover::before,.pwn-pie-cta:hover::before{animation:none}
}

/* Solo en pantallas MUY bajas (portátiles pequeños en horizontal) el panel se
   queda sin sitio: se apila y se esconde la tarjeta de CTA. A 600 px de alto la
   regla saltaba de más y el CTA desaparecía en pantallas normales. */
@media(max-height:480px){
  .pwn-panel{padding:18px}
  .pwn-panel-inner{grid-template-columns:1fr}
  .pwn-panel-cta{display:none}
}

/* ==========================================================================
   FORMULARIO FLOTANTE (Sticky Floating Forms Pro)
   Su pestaña venía en rojo #ff4c29, que no aparece en ningún otro sitio del
   rediseño. Se lleva al dorado de la marca.

   Dos cosas a tener en cuenta:
   · Los `!important` no son pereza: el color sale de las opciones del plugin y
     lo imprime en una hoja generada que carga después de la nuestra.
   · Los colores van literales y no con var(--gold), porque las variables están
     declaradas en .pwn-cabecera/.pwn-cajon/.pwn-pie/.pwn-barra y esta pestaña
     cuelga directamente del <body>, fuera de todas ellas.
   Si algún día se cambia el color desde el panel del plugin, esto lo pisará:
   hay que tocarlo aquí.
   ========================================================================== */
.cww-ssf-toggle{
  background:linear-gradient(140deg,#f4c04e,#e0a637) !important;
  color:#0e1730 !important;
  border-radius:999px !important;
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:700 !important;
  box-shadow:0 10px 24px -8px rgba(244,192,78,.7) !important;
  transition:transform .15s ease,box-shadow .15s ease}
.cww-ssf-toggle:hover,
.cww-ssf-toggle:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -8px rgba(244,192,78,.85) !important;
  color:#0e1730 !important}
.cww-ssf-toggle i{color:#0e1730 !important}

/* La pestaña venía anclada abajo a la IZQUIERDA, justo encima del CTA del hero.
   Con el rojo sólo quedaba apretado; en dorado son dos pastillas del mismo color
   pisándose, y parece un error. Se lleva a la esquina de abajo a la derecha,
   apilada sobre el botón de WhatsApp (que está en right:20 bottom:20 y mide
   unos 60 px), de modo que las dos acciones flotantes quedan juntas y ninguna
   tapa el contenido. */
.toggle-wrapp{
  left:auto !important;right:20px !important;
  bottom:96px !important;top:auto !important;
  z-index:8999}

@media(max-width:620px){
  .toggle-wrapp{right:16px !important;bottom:86px !important}
}

/* y el panel, con las esquinas y la sombra del resto del sitio */
.cww-sff-wrapp{
  border-radius:18px !important;
  box-shadow:0 30px 70px -20px rgba(14,23,48,.45) !important}

@media(prefers-reduced-motion:reduce){
  .cww-ssf-toggle{transition:none}
  .cww-ssf-toggle:hover{transform:none}
}

/* --------------------------------------------------------------------------
   EL PANEL DEL FORMULARIO FLOTANTE
   Al abrirlo se anclaba abajo a la IZQUIERDA —lejos ya del botón, que está a la
   derecha— y salía como una caja blanca de esquinas rectas, con los campos por
   defecto de Contact Form 7, sin aire y con el «Enviar» en el rojo viejo.

   Aquí se recoloca junto a su botón y se le da el acabado del resto del sitio.
   Los `!important` son necesarios: el plugin imprime su hoja, y parte de estos
   valores, después de la nuestra.
   -------------------------------------------------------------------------- */

/* el contenedor fijo: pegado a su botón, arriba de él */
.cww-sff-inner{
  left:auto !important;right:20px !important;
  top:auto !important;bottom:150px !important;
  width:min(400px,calc(100vw - 40px)) !important;
  max-height:calc(100vh - 190px) !important;
  z-index:8998}

/* la tarjeta */
.cww-sff-wrapp{
  position:relative;
  /* `box-sizing` NO es opcional aquí: el plugin lo deja en content-box y el
     relleno de 26 px por lado se sumaba al ancho, así que la tarjeta salía 52 px
     más ancha que su contenedor y el aspa de cerrar quedaba fuera, cortada. */
  box-sizing:border-box !important;
  width:100% !important;max-width:100% !important;
  max-height:calc(100vh - 190px);
  display:flex;flex-direction:column;
  background:#fff !important;
  border:1px solid rgba(14,23,48,.10) !important;
  border-radius:20px !important;
  box-shadow:0 34px 70px -20px rgba(14,23,48,.55) !important;
  padding:22px 24px 24px !important;
  overflow:hidden}

/* el aviso para lectores de pantalla de Contact Form 7 dejaba un hueco en blanco
   arriba del todo; sigue en el DOM, sólo deja de ocupar */
.cww-sff-wrapp .screen-reader-response{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* filo dorado, el mismo recurso que llevan las tarjetas de la página */
.cww-sff-wrapp::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#f4c04e,rgba(244,192,78,0) 75%)}

/* que scrolle el formulario, no la tarjeta: así el aspa se queda siempre a la vista */
.cww-sff-wrapp > .wpcf7{overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px}

/* aspa de cerrar */
.cww-sff-wrapp .icofont-close-line-circled{
  position:absolute !important;top:12px !important;right:12px !important;
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;background:#f6f4ee;color:#464f60 !important;
  font-size:16px !important;cursor:pointer;
  transition:background-color .15s ease,color .15s ease}
.cww-sff-wrapp .icofont-close-line-circled:hover{background:#f4c04e;color:#0e1730 !important}

/* campos */
.cww-sff-wrapp .wpcf7-form-control{
  width:100% !important;box-sizing:border-box;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:15px !important;color:#131b2b !important;
  background:#fbfaf7 !important;
  border:1px solid #e6e2d7 !important;border-radius:12px !important;
  padding:13px 15px !important;
  box-shadow:none !important;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.cww-sff-wrapp .wpcf7-form-control::placeholder{color:#8a93a3;opacity:1}
.cww-sff-wrapp .wpcf7-form-control:focus{
  outline:none !important;background:#fff !important;
  border-color:#f4c04e !important;
  box-shadow:0 0 0 3px rgba(244,192,78,.30) !important}
.cww-sff-wrapp textarea.wpcf7-form-control{min-height:110px;resize:vertical}
.cww-sff-wrapp .wpcf7-form p{margin:0 0 14px !important;padding:0 !important}

/* enviar */
.cww-sff-wrapp .wpcf7-submit,
.cww-sff-wrapp input[type="submit"]{
  width:100% !important;
  background:linear-gradient(140deg,#f4c04e,#e0a637) !important;
  color:#0e1730 !important;
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:700 !important;font-size:15.5px !important;
  border:0 !important;border-radius:999px !important;
  padding:15px 24px !important;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(244,192,78,.75) !important;
  transition:transform .15s ease,box-shadow .15s ease}
.cww-sff-wrapp .wpcf7-submit:hover,
.cww-sff-wrapp input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -8px rgba(244,192,78,.85) !important}

/* avisos de Contact Form 7, en el idioma visual del sitio */
.cww-sff-wrapp .wpcf7-not-valid-tip{
  color:#b3261e !important;font-size:13px !important;margin-top:6px !important}
.cww-sff-wrapp .wpcf7-form-control.wpcf7-not-valid{border-color:#b3261e !important}
.cww-sff-wrapp .wpcf7-response-output{
  margin:14px 0 0 !important;padding:12px 14px !important;
  border-radius:12px !important;border-width:1px !important;font-size:14px !important}

/* En móvil, hoja inferior a todo lo ancho: un panel de 400 px flotando en una
   pantalla de 390 no tiene sentido. */
@media(max-width:620px){
  .cww-sff-inner{
    right:0 !important;left:0 !important;bottom:0 !important;
    width:100% !important;max-height:86vh !important}
  .cww-sff-wrapp{
    max-height:86vh;border-radius:20px 20px 0 0 !important;
    padding:26px 20px calc(20px + env(safe-area-inset-bottom)) !important}
}