/* CVE Widgets – UI: cabecera fija inteligente, menú móvil y botón volver arriba.
   Colores ajustables con variables CSS: --cve-ui-dark, --cve-ui-accent, --cve-ui-light, --cve-header-glass */

/* ===== Cabecera fija inteligente ===== */
html{scroll-padding-top:var(--cve-scroll-offset,90px); scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.elementor-location-header{
  position:sticky; top:var(--wp-admin--admin-bar--height,0px); z-index:999;
  transition:top .5s cubic-bezier(.2,.8,.2,1);
}
/* Fondo cristal en un pseudo-elemento (no rompe los elementos position:fixed del interior) */
.elementor-location-header::before{
  content:""; display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  background:hsl(38deg 10% 16% / 75%);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0; transition:opacity .4s ease;
}
/* Barra de progreso de lectura */
.elementor-location-header::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:0; width:100%; height:2px; z-index:3; pointer-events:none;
  background:var(--cve-ui-accent,var(--rd-arena,#bba383));
  transform-origin:left center; transform:scaleX(var(--cve-progress,0));
  opacity:0; transition:opacity .4s ease;
}
.elementor-location-header > *{position:relative; z-index:1; transition:background-color .4s ease}
.elementor-location-header nav{transition:padding .4s ease}
.elementor-location-header nav img{transition:max-width .4s ease}

body.cve-scrolled .elementor-location-header::before,
body.cve-scrolled .elementor-location-header::after{opacity:1}
body.cve-scrolled .elementor-location-header > .elementor-element{background-color:transparent}
body.cve-scrolled .elementor-location-header nav{padding-top:8px; padding-bottom:8px}
body.cve-scrolled .elementor-location-header nav img{max-width:72px}
/* Se esconde al bajar y reaparece al subir */
body.cve-hide .elementor-location-header{top:calc(-1 * var(--cve-header-h,110px) - 4px)}

@media (max-width:767px){
  html{scroll-padding-top:var(--cve-scroll-offset-mobile,80px)}
  body.cve-scrolled .elementor-location-header nav img{max-width:35px}
}

/* ===== Menú móvil (botón #cve-menu-toggle + panel #cve-menu) ===== */
html.cve-menu-open{overflow:hidden}
#cve-menu{transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .35s}
#cve-menu:not(.is-open){opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px)}
#cve-menu.is-open > *{animation:cve-menu-in .5s cubic-bezier(.2,.8,.2,1) both}
#cve-menu.is-open > :nth-child(2){animation-delay:.04s}
#cve-menu.is-open > :nth-child(3){animation-delay:.08s}
#cve-menu.is-open > :nth-child(4){animation-delay:.12s}
#cve-menu.is-open > :nth-child(5){animation-delay:.16s}
#cve-menu.is-open > :nth-child(6){animation-delay:.2s}
#cve-menu.is-open > :nth-child(7){animation-delay:.24s}
@keyframes cve-menu-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
#cve-menu-toggle{cursor:pointer}
#cve-menu-toggle > *{transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease}
#cve-menu-toggle.is-open > :nth-child(1){transform:translateY(8px) rotate(45deg)}
#cve-menu-toggle.is-open > :nth-child(2){opacity:0}
#cve-menu-toggle.is-open > :nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#cve-menu-toggle:focus-visible, #cve-menu a:focus-visible{outline:2px solid var(--cve-ui-accent,var(--rd-arena,#bba383)); outline-offset:3px}

/* ===== Botón volver arriba con anillo de progreso ===== */
.cve-totop{
  position:fixed; right:24px; bottom:24px; z-index:998;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cve-ui-dark,var(--rd-oscuro,#1f2d21)); color:var(--cve-ui-accent,var(--rd-arena,#bba383)); text-decoration:none;
  box-shadow:0 10px 30px rgba(31,45,33,.35);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.85);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.9,.25,1.3), visibility .35s, background-color .3s, color .3s;
}
.cve-totop.is-visible{opacity:1; visibility:visible; transform:none}
.cve-totop:hover, .cve-totop:focus-visible{background:var(--cve-ui-accent,var(--rd-arena,#bba383)); color:var(--cve-ui-dark,var(--rd-oscuro,#1f2d21))}
.cve-totop:focus-visible{outline:2px solid var(--cve-ui-light,var(--rd-crema,#f6efe3)); outline-offset:3px}
.cve-totop svg{position:absolute; inset:0; width:100%; height:100%}
.cve-totop .cve-totop-ring{transform:rotate(-90deg)}
.cve-totop .cve-totop-ring circle{fill:none; stroke-width:2.5}
.cve-totop .cve-totop-track{stroke:rgba(246,239,227,.15)}
.cve-totop .cve-totop-bar{stroke:currentColor; stroke-linecap:round; stroke-dasharray:163.36; stroke-dashoffset:calc(163.36 * (1 - var(--cve-progress,0))); transition:stroke-dashoffset .1s linear}
.cve-totop .cve-totop-arrow{position:relative; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease}
.cve-totop:hover .cve-totop-arrow{transform:translateY(-3px)}
html.cve-menu-open .cve-totop{opacity:0; visibility:hidden}
@media (max-width:767px){.cve-totop{right:16px; bottom:16px; width:50px; height:50px}}

@media (prefers-reduced-motion:reduce){
  .elementor-location-header, .elementor-location-header *, .elementor-location-header::before,
  #cve-menu, #cve-menu *, #cve-menu-toggle > *, .cve-totop, .cve-totop *{transition:none !important; animation:none !important}
}