/* =====================================================================
   UNEPINOS - hoja base: colores, fondo, cabecera, menu inferior y pie
   ---------------------------------------------------------------------
   Los colores y medidas son los de la web en WordPress (tema WoodMart +
   "CSS adicional" + los plugins propios). Donde WordPress necesitaba
   !important para ganarle al tema, aqui no hace falta: no hay tema que
   pisar, y cada regla vive una sola vez.
   ===================================================================== */

:root{
  /* EL CAMPO SELECCIONADO - la regla para TODOS los campos de la web y
     del panel (la del modal de ganadores): linea fina de 1px violeta + un
     halo suave de 3px. Nunca el contorno negro del navegador ni una linea
     mas gruesa. Un campo nuevo, en su :focus:
         outline:0; border-width:1px;
         border-color:var(--foco-borde); box-shadow:var(--foco-halo);
     (si su borde normal es mas grueso, el border-width:1px lo afina solo
     al escribir). Un campo SIN borde dentro de una capsula (buscador de la
     tienda): el foco va en la capsula, con --foco-anillo. */
  --foco-borde:#8b3fff;
  --foco-halo:0 0 0 3px rgba(139,63,255,.18);
  --foco-anillo:0 0 0 1px var(--foco-borde),0 0 0 4px rgba(139,63,255,.18);   /* linea + halo, con sombra (sin borde) */
  --morado-noche:#290f44;      /* fondo de la web, arriba y abajo */
  --morado-pie:#2d0b47;        /* pie de pagina */
  --morado-medio:#8028dc;      /* el brillo del degradado de fondo */
  --morado-vivo:#b84fff;       /* boton Participar */
  --violeta:#7c3aed;           /* item activo del menu */
  --lila:#a78bfa;              /* enlaces del pie */
  --azul-activo:#4f7cff;       /* bolita del menu y menu inferior */
  --celeste-cta:#1ec0ff;       /* boton central del menu inferior */
  --contador-fondo:#5f2388;    /* tarjeta de la cuenta regresiva */

  /* El boton "degradado turquesa" de toda la web: Participar, Ver todos,
     Ir a Facebook... Uno solo, en variables, para que no haya diez copias
     del mismo degradado como habia en los bloques de WordPress. */
  --boton-degradado:linear-gradient(228.83deg,#13e5d5 -51.56%,#84f2c7 8.91%,#defdbb 72.65%);
  --boton-degradado-hover:linear-gradient(228.83deg,#defdbb -51.56%,#84f2c7 8.91%,#13e5d5 72.65%);
  --boton-texto:#8b3fff;

  /* LAS LETRAS DE WORDPRESS (tema WoodMart): el texto en Lato y los
     titulos (h1 a h6) en Poppins seminegrita. El tema cargaba SOLO Lato
     400/700 y Poppins 400/500/600: un "font-weight:900" en un boton o un
     contador se veia en 700, no mas grueso. Se cargan los mismos (ver
     layout.php) para que se vean igual. */
  --fuente:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fuente-titulos:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fuente-titulo:"Anton",Impact,"Arial Black",sans-serif;

  /* La paleta de la tienda y de Mi cuenta (tarjetas blancas sobre el
     morado). Aqui y no en tienda.css: la usan tambien el cajon del
     carrito, que vive fuera de la tienda, y cuenta.css. */
  --t-violeta:#6d28d9;
  --t-violeta-2:#8b5cf6;
  --t-texto:#1f1633;
  --t-suave:#6b6480;
  --t-borde:#ece8f4;
  --t-radio:18px;
  --t-verde:#16a34a;
  --t-rojo:#e11d48;
  --t-naranja:#d97706;

  /* La forma de la foto de los premios (ancho / alto) en Premios, la
     portada, Ganadores y el premio destacado: un solo valor para todos.
     10/9: el arte se disena de 1000 x 900 (uno de 1000 x 1000 pierde 50 px
     arriba y 50 abajo). */
  --premio-foto:10/9;

  --ancho:1222px;
  --cab-alto:92px;
  --menu-movil-alto:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* SIN SCROLL HORIZONTAL EN PC. El carrusel de fotos (y cualquier bloque
   importado que vaya "a todo lo ancho") mide 100vw. En Windows, 100vw
   INCLUYE la barra de desplazamiento vertical: la banda queda unos 15 px
   mas ancha que lo visible y aparece una barra horizontal abajo. En el
   celular y en Mac no pasa porque la barra flota sobre la pagina.
   "clip" recorta ese sobrante sin crear otra zona con scroll (no rompe
   nada pegajoso); "hidden" va primero para los navegadores viejos que no
   conocen "clip". */
html{overflow-x:hidden;overflow-x:clip}

/* CON UNA VENTANA ABIERTA, LA PAGINA DE ATRAS NO SE MUEVE (toda la web).
   Una sola regla para todas las ventanas, en lugar de que cada una ponga
   y quite su clase en <body>: con :has() el bloqueo dura exactamente lo
   que la ventana este abierta, aunque haya dos a la vez (el ganador
   rapido encima de "Ver ganador") o una se cierre por otro camino.
   Una ventana nueva se agrega a la lista (o usa html.sin-scroll).
   "scrollbar-gutter" deja reservado el lugar de la barra: al quitarla
   (en Windows ocupa ~15 px) la pagina no salta hacia la derecha. */
html{scrollbar-gutter:stable}
html:has(dialog:modal),
html:has(.p-modal:not([hidden])),
html:has(.mes-picker:not([hidden])),
html:has(.gr-modal:not([hidden])),
html:has(.g-wm[aria-hidden="false"]),
html:has(.unep-pm-modal.is-open),
html:has(.t-cajon:not([hidden])),
html:has(#t-filtros.abierto),
html:has(.ck-espera:not([hidden])),
html.sin-scroll{overflow:hidden}
body{
  margin:0;
  font-family:var(--fuente);
  font-size:15px;
  line-height:1.6;
  color:#333;
  /* EL FONDO DE TODA LA WEB. Es el "COLOR DE FONDO CON GRADIENTE FIJO" del
     CSS adicional de WordPress: morado noche arriba, brilla hacia el 70% y
     vuelve a oscurecer al final. Va en el body y no en un contenedor para
     que el hero, la cabecera y el pie lo dejen ver sin capas intermedias. */
  background:linear-gradient(to bottom,var(--morado-noche) 0%,var(--morado-noche) 40%,var(--morado-medio) 70%,var(--morado-noche) 100%) no-repeat;
  background-color:var(--morado-noche);
  min-height:100vh;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{line-height:1.2}
h1,h2,h3,h4,h5,h6{font-family:var(--fuente-titulos);font-weight:600}

/* LOS BOTONES DE WORDPRESS: el tema WoodMart le daba a todo <button> la
   letra de la pagina (no la Arial del navegador), MAYUSCULAS, seminegrita
   y 42 px de alto minimo. Los plugins solo cambiaban colores y medidas,
   asi que sus botones ("Todos", "Ver mas", "Marzo 2026", "Buscar"...) se
   veian asi. :where() no pesa nada: cualquier regla con clase lo cambia. */
:where(button,[type=submit],[type=button],[type=reset]){font-family:inherit;text-transform:uppercase;font-weight:600;line-height:1.2}
:where(.p-mbtn,.p-mlabel,.p-more,.mes-anio-prev,.mes-anio-next,.g-prev,.g-next,.g-month-pill,.g-vertodos,
       .yto-copy-btn,.yto-consulta .btn,.ryg-btn-manana,#ryg-btn-entrar,.frlr-submit){min-height:42px}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 15px}

/* El contenido de las paginas empieza debajo de la cabecera, con el
   mismo aire que dejaba WordPress (70px en PC, 40px en movil). La
   portada no: su hero se mete debajo de la cabecera transparente. */
/* El pie siempre abajo: en una pagina corta (un mes sin ganadores) el pie
   quedaba a media pantalla con el degradado asomando por debajo. */
body{display:flex;flex-direction:column}
.sitio-principal{padding-top:calc(var(--cab-alto) + 70px);min-height:60vh;flex:1 0 auto}
body.es-portada .sitio-principal{padding-top:0}

/* ---------------------------------------------------------------------
   BOTON DEGRADADO (el de toda la web)
   --------------------------------------------------------------------- */
.boton-degradado{
  display:inline-block;padding:10px 34px;border-radius:999px;
  background:var(--boton-degradado);color:var(--boton-texto);
  font-family:var(--fuente);font-size:15px;font-weight:600;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .2s ease,background .35s ease;white-space:nowrap;border:0;cursor:pointer;
}
.boton-degradado:hover{transform:translateY(-1px);background:var(--boton-degradado-hover)}
.boton-degradado,.boton-degradado:hover,.boton-degradado:focus,.boton-degradado:active{color:var(--boton-texto);text-decoration:none}

/* ---------------------------------------------------------------------
   CABECERA
   ---------------------------------------------------------------------
   Transparente sobre el fondo morado, fija arriba. Al bajar se esconde y
   al subir vuelve con un fondo morado translucido: es lo que hacia el
   "Ocultar header al bajar" + el sticky de WoodMart. En movil no se
   queda fija (el CSS adicional lo desactivaba): alli manda el menu
   inferior. */
.sitio-cabecera{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--cab-alto);
  transition:transform .3s ease;
}
/* El fondo al subir va en una capa aparte, detras del logo y el menu:
   baja 36 px mas que la cabecera y se desvanece hacia abajo (mascara en
   degradado), asi no queda un corte recto sobre la foto o el contenido.
   La mascara tambien difumina el desenfoque, no solo el color. */
.sitio-cabecera::before{
  content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 36px);z-index:-1;pointer-events:none;
  background:rgba(30,5,60,.95);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 64px),rgba(0,0,0,.6) calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 64px),rgba(0,0,0,.6) calc(100% - 32px),transparent 100%);
  opacity:0;transition:opacity .3s ease;
}
.sitio-cabecera.con-fondo::before{opacity:1}
.sitio-cabecera.escondida{transform:translateY(-150%)}
/* Tres columnas: logo | menu | cuenta y carrito. Las de los lados miden
   lo mismo (1fr), asi el menu queda en el CENTRO de la pantalla, como en
   WordPress ("equal-sides"), aunque los lados no midan igual. */
.cab-fila{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.cab-logo{justify-self:start}
/* El logo al alto de la cabecera (90 px), como lo mostraba WoodMart. */
.cab-logo img{display:block;max-height:90px;width:auto}
.cab-logo-texto{font-family:var(--fuente-titulo);font-size:30px;color:#fff;text-decoration:none;letter-spacing:1px}

/* El menu en una pastilla blanca */
.cab-menu ul{
  list-style:none;margin:0;
  background:#fff;border-radius:40px;padding:6px 16px;border:1px solid rgba(0,0,0,.12);
  display:inline-flex;align-items:center;gap:4px;
}
/* La letra del menu de WordPress: Lato en negrita, 14 px, mayusculas, TODOS
   los items con el mismo grosor (el tema solo cargaba Lato 400 y 700, asi
   que el "800" de Registrar tickets y el "600" del activo se veian igual). */
/* Cada item mide 40 px de alto con el texto al MEDIO, como los enlaces del
   menu de WoodMart: asi la capsula gris del hover queda centrada sobre el
   texto. (El "padding-bottom:16px" del CSS adicional para la bolita perdia
   contra el "padding:6px 14px !important" de los items, que era mas
   especifico: en WordPress el relleno era el mismo arriba y abajo.) */
.cab-menu a{
  position:relative;display:inline-flex;align-items:center;
  height:40px;padding:6px 14px;border-radius:30px;
  font-family:var(--fuente);font-size:14px;font-weight:700;color:#333;text-decoration:none;text-transform:uppercase;
  line-height:1;transition:color .2s ease,background-color .2s ease;
}
/* Al pasar el mouse: capsula gris y el texto en el azul principal del tema */
.cab-menu a:hover{background:rgba(0,0,0,.06);color:var(--azul-activo)}
.cab-menu a[aria-current="page"]{color:var(--violeta)}
/* La bolita azul bajo el item activo, pegada al borde de abajo del item */
.cab-menu a::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--azul-activo);opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.cab-menu a[aria-current="page"]::after{opacity:1}

/* "Registrar tickets": el borde que recorre el contorno. Es el SVG
   animado del CSS adicional, tal cual. */
/* Mismo relleno que los demas: en WordPress su "padding:8px 14px" perdia
   contra el de los items del menu (que llevaba !important), asi que el
   texto queda a la misma altura que el resto. */
.cab-menu a.menu-destacado{border-radius:999px;transform:translateY(-1px)}
/* En WordPress su color era fijo (#333 con !important): no se pinta de azul al pasar el mouse */
.cab-menu a.menu-destacado:hover{color:#333}
.cab-menu a.menu-destacado::after{display:none}
.cab-menu a.menu-destacado::before{
  content:"";position:absolute;inset:-6px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Crect x='3' y='3' width='194' height='54' rx='28' ry='28' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-dasharray='40 300'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='-340' dur='2s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E");
}
.cab-menu a.menu-destacado[aria-current="page"]{color:var(--azul-activo)}
.cab-menu a.menu-destacado[aria-current="page"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'%3E%3Crect x='3' y='3' width='194' height='54' rx='28' ry='28' fill='none' stroke='%234F7CFF' stroke-width='2' stroke-linecap='round' stroke-dasharray='40 300'%3E%3Canimate attributeName='stroke-dashoffset' from='0' to='-340' dur='2s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E");
}

/* Mi cuenta y carrito: dos capsulas blancas y redondas a la derecha. El
   saludo y el numero los pone sitio.js (la pagina es igual para todos). */
.cab-derecha{justify-self:end;display:flex;align-items:center;gap:10px}
.cab-capsula.cab-menu2-caja{display:none}   /* el segundo menu es solo del celular */
.cab-menu2{border:0;background:none;cursor:pointer;text-transform:none}
.cab-menu2:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}
.cab-capsula{
  background:#fff;border-radius:40px;padding:6px;border:1px solid rgba(0,0,0,.12);
  display:inline-flex;align-items:center;
}
.cab-ico{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;min-width:30px;padding:0 7px;justify-content:center;
  color:#333;border-radius:999px;text-decoration:none;font:700 13px/1 var(--fuente);text-transform:uppercase;transition:background .2s,color .2s;white-space:nowrap}
.cab-ico:hover{background:rgba(124,58,237,.1);color:var(--violeta)}
.cab-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cab-ico-texto{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.cab-cuenta.con-sesion{color:var(--violeta)}
.cab-contador{position:absolute;top:-11px;right:-11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c084fc;color:#fff;
  font:700 11px/18px var(--fuente);text-align:center;box-shadow:0 0 0 2px #fff}
.cab-contador[hidden]{display:none}
.cab-contador.salta{animation:cab-salta .5s ease}
@keyframes cab-salta{30%{transform:scale(1.35)}60%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.cab-contador.salta{animation:none}}
.cab-ico{padding:0}

/* La cuenta, como en Bagnnert: "Iniciar sesión" con su desplegable, o su
   circulo + "Bienvenido / Yoel Alexander". Compacta (solo el circulo)
   cuando no cabe junto al menu sin moverlo del centro, y en el celular. */
.cab-cuenta-caja{position:relative;padding:6px;text-transform:none;letter-spacing:0}
.cab-usuario{display:flex;align-items:center;gap:8px;text-transform:none;padding:0 10px 0 0;height:30px;border:0;background:none;cursor:pointer;
  color:#333;font:inherit;border-radius:999px;text-align:left}
.cab-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#333;transition:background .2s,color .2s}
.cab-avatar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cab-usuario-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.cab-usuario-txt small{font:400 10px/1.1 var(--fuente);color:#8a8497}
.cab-usuario-txt small[hidden]{display:none}
.cab-usuario-txt b{font:700 13px/1.15 var(--fuente);color:#333;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cab-flecha{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cab-usuario[aria-expanded="true"] .cab-flecha{transform:rotate(180deg)}
.cab-usuario:hover .cab-avatar{background:rgba(124,58,237,.1);color:var(--violeta)}
.cab-usuario:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}
/* Con sesion: el circulo morado con la persona en blanco y su nombre en morado */
.cab-cuenta-caja.con-sesion .cab-avatar{background:var(--violeta);color:#fff}
.cab-cuenta-caja.con-sesion .cab-usuario-txt b{color:var(--violeta)}
/* Compacta: solo el circulo (el nombre queda para los lectores de pantalla) */
.cab-cuenta-caja.compacta .cab-usuario{padding:0}
.cab-cuenta-caja.compacta .cab-usuario-txt,.cab-cuenta-caja.compacta .cab-flecha{display:none}

.cab-desplegable{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;padding:6px;background:#fff;border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(30,10,60,.35),0 0 0 1px rgba(30,10,60,.06);z-index:5;animation:cab-desp .15s ease-out}
.cab-desplegable[hidden],.cab-desplegable [hidden]{display:none}
@keyframes cab-desp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cab-opcion{display:flex;align-items:center;gap:10px;text-transform:none;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;cursor:pointer;
  color:#333;font:500 14px/1.2 var(--fuente);text-decoration:none;text-align:left;white-space:nowrap}
.cab-opcion svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.cab-opcion:hover,.cab-opcion:focus-visible{background:#f5f1fd;color:var(--violeta);outline:none}
.cab-opcion:hover svg{opacity:1}
.cab-opcion-principal{color:var(--violeta);font-weight:700}
.cab-opcion-principal svg{opacity:1}
.cab-opcion-salir{color:#dc2626}
.cab-opcion-salir:hover,.cab-opcion-salir:focus-visible{background:#fef2f2;color:#dc2626}
.cab-separador{height:1px;background:#eee;margin:4px 6px}
@media (prefers-reduced-motion:reduce){.cab-desplegable{animation:none}.cab-flecha{transition:none}}

@media (max-width:1024px){
  :root{--cab-alto:70px}
  .sitio-cabecera{position:absolute}
  .sitio-cabecera.escondida{transform:none}
  .cab-menu{display:none}
  /* Logo a la izquierda; a la derecha cuenta, carrito y el segundo menu */
  .cab-fila{display:flex;justify-content:space-between;align-items:center}
  .cab-derecha{gap:8px}
  .cab-capsula.cab-menu2-caja{display:inline-flex}
  .cab-capsula,.cab-cuenta-caja{padding:4px}
  .cab-ico,.cab-avatar{width:34px;height:34px}
  .cab-usuario{height:34px}
  .cab-ico svg,.cab-avatar svg{width:20px;height:20px}
  .cab-cuenta-caja .cab-usuario{padding:0}
  .cab-cuenta-caja .cab-usuario-txt,.cab-cuenta-caja .cab-flecha{display:none}
  .cab-logo{justify-self:auto}
  .cab-logo img{max-height:60px}
  .sitio-principal{padding-top:calc(var(--cab-alto) + 40px)}
}

/* ---------------------------------------------------------------------
   MENU LATERAL DEL CELULAR (boton de las tres rayas; Ajustes > Menu lateral)
   ---------------------------------------------------------------------
   Un <dialog>: el navegador lleva el foco adentro, cierra con Escape y
   deja la pagina de atras sin tocar. Entra desde la derecha. */
.menu-lateral{position:fixed;inset:0 0 0 auto;margin:0;width:min(86vw,330px);max-width:none;height:100%;max-height:none;
  padding:0;border:0;border-radius:22px 0 0 22px;background:#fff;color:#221733;box-shadow:-18px 0 40px -12px rgba(20,5,45,.45);
  display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.menu-lateral:not([open]){display:none}
.menu-lateral.abierto{transform:none}
.menu-lateral::backdrop{background:rgba(20,5,45,0);transition:background .28s ease}
.menu-lateral.abierto::backdrop{background:rgba(20,5,45,.55)}
.ml-cab{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 12px 22px;border-bottom:1px solid #f0ecf6}
.ml-titulo{font:400 26px/1 var(--fuente-titulo);letter-spacing:.5px;color:#2d0b47}
.ml-cerrar{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#f5f1fd;color:#2d0b47;cursor:pointer;text-transform:none}
.ml-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ml-cerrar:hover{background:#ece3fc;color:var(--violeta)}
.ml-cerrar:focus-visible,.ml-item:focus-visible{outline:0;box-shadow:var(--foco-anillo)}
.ml-lista{list-style:none;margin:0;padding:10px 12px 24px;overflow-y:auto;flex:1 1 auto;overscroll-behavior:contain}
.ml-item{display:flex;align-items:center;gap:14px;min-height:50px;padding:10px 12px;border-radius:14px;color:#221733;text-decoration:none;
  font:600 15px/1.25 var(--fuente);transition:background .15s,color .15s}
.ml-item svg{flex:none;width:22px;height:22px;fill:none;stroke:#7a6f8f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.ml-item:hover,.ml-item:active{background:#f5f1fd;color:var(--violeta)}
.ml-item:hover svg,.ml-item:active svg{stroke:var(--violeta)}
.ml-item[aria-current="page"]{background:#f3ebff;color:var(--violeta)}
.ml-item[aria-current="page"] svg{stroke:var(--violeta)}
@media (prefers-reduced-motion:reduce){.menu-lateral,.menu-lateral::backdrop{transition:none}}

/* ---------------------------------------------------------------------
   MENU INFERIOR EN EL CELULAR
   ---------------------------------------------------------------------
   Copiado del functions.php de WordPress, sin los !important que hacian
   falta para esconder la barra propia de WoodMart. */
.menu-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;
  display:none;justify-content:space-around;gap:4px;
  background:linear-gradient(to right,#fff,#f2f2f2);border-top:1px solid rgba(0,0,0,.12);
  padding:0 5px env(safe-area-inset-bottom);
  border-top-left-radius:12px;border-top-right-radius:12px;
  box-shadow:0 -4px 16px rgba(0,0,0,.18);
  height:var(--menu-movil-alto);
}
.menu-movil .mm-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:11px;color:#222;text-decoration:none;text-align:center;line-height:1.05;
  -webkit-tap-highlight-color:transparent;
}
.menu-movil svg{width:22px;height:22px;stroke:#6a6a6a;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.menu-movil .mm-item[aria-current="page"],.menu-movil .mm-item.toque{color:var(--azul-activo)}
.menu-movil .mm-item[aria-current="page"] svg,.menu-movil .mm-item.toque svg{stroke:var(--azul-activo)}

/* El boton central, redondo, con el aro giratorio */
.menu-movil .mm-cta{
  flex:0 0 auto;width:clamp(72px,18vw,92px);aspect-ratio:1/1;position:relative;
  transform:translateY(-10px);z-index:2;background:#111;border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.28);padding:8px;gap:2px;min-width:0;align-self:flex-start;margin-top:0;
}
.menu-movil .mm-cta svg{width:26px;height:26px;stroke:#fff}
.menu-movil .mm-cta span{font-weight:700;color:#fff;font-size:10px;line-height:1.05}
.menu-movil .mm-cta::before{
  content:"";position:absolute;inset:-5px;border-radius:999px;
  background:conic-gradient(from 0deg,#00e5ff,#00ff85,#7c4dff,#00e5ff);
  animation:mmGiro 2.2s linear infinite;pointer-events:none;
}
.menu-movil .mm-cta::after{content:"";position:absolute;inset:.5px;border-radius:999px;background:#111;pointer-events:none}
.menu-movil .mm-cta > *{position:relative;z-index:2}
.menu-movil .mm-cta[aria-current="page"] span,.menu-movil .mm-cta.toque span{color:var(--celeste-cta)}
.menu-movil .mm-cta[aria-current="page"] svg,.menu-movil .mm-cta.toque svg{stroke:var(--celeste-cta)}
@keyframes mmGiro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.menu-movil .mm-cta::before{animation:none}}

@media (max-width:1024px){
  .menu-movil{display:flex}
  body{padding-bottom:var(--menu-movil-alto)}
}

/* ---------------------------------------------------------------------
   PIE DE PAGINA
   --------------------------------------------------------------------- */
.sitio-pie{background:var(--morado-pie);color:#fff;padding:50px 0 24px;margin-top:40px}
.pie-columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start}
.pie-copia{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:13px;color:rgba(255,255,255,.75)}
@media (max-width:900px){.pie-columnas{grid-template-columns:1fr;gap:26px}}
/* Las tres columnas (includes/pie.php). El diseño va aqui; los textos se
   editan en Ajustes > Pie de pagina. */
.pie-col{font-family:"Poppins",var(--fuente),sans-serif;color:#fff;min-width:0}
.pie-titulo{margin:0 0 8px;font-family:'Anton',var(--fuente),sans-serif;font-size:18px;font-weight:400;color:#fff}
/* 1. Contacto: cada linea con su icono de linea */
.pie-contacto{font-size:14.5px;line-height:1.4}
.pie-contacto p{margin:6px 0}
.pie-contacto a{color:#a78bfa;text-decoration:underline;text-underline-offset:2px}
.pie-contacto a:hover{color:#fff}
.pie-ic{display:inline-flex;width:22px;height:22px;margin-right:11px;vertical-align:middle;transform:translateY(-1px);color:#fff}
.pie-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pie-sangria{display:block;margin-left:30px}
p.pie-sangria{margin-left:33px}
.pie-libro{margin-top:12px !important}
.pie-libro > a{display:inline-block;margin-bottom:4px;color:#fff !important;text-decoration:none !important;font-weight:700}
.pie-libro > .pie-sangria{margin-left:0}
/* 2. Informacion legal */
.pie-legal{font-size:15px}
.pie-legal .pie-titulo{margin-bottom:12px}
.pie-legal ul{margin:0;padding-left:20px;list-style:disc outside}
.pie-legal li{margin-bottom:6px}
.pie-legal li::marker{color:#fff}
.pie-legal a{color:#fff;text-decoration:none}
.pie-legal li a:hover{color:#a78bfa;text-decoration:underline}
.pie-libro-icono{display:inline-block;margin-top:14px;line-height:0;border-radius:10px;transition:transform .15s,opacity .15s}
.pie-libro-icono:hover{transform:translateY(-1px);opacity:.92}
.pie-libro-icono img{display:block;width:160px;max-width:100%;height:auto}
/* 3. Marca: logo, redes y la frase */
.pie-marca{text-align:center;font-size:14px}
.pie-logo{display:block;width:130px;max-width:100%;height:auto;margin:0 auto 15px}
.pie-redes{display:flex;justify-content:center;align-items:center;gap:22px;margin:14px 0}
.pie-redes a{display:inline-flex;color:#fff;line-height:0;transition:color .2s,transform .2s}
.pie-redes svg{width:24px;height:24px;fill:currentColor}
.pie-redes a:hover,.pie-redes a:focus-visible{color:#c4b5fd;transform:translateY(-2px);outline:0}
.pie-frase{margin:8px 0 0;font-size:13px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.pie-redes a,.pie-libro-icono{transition:none}.pie-redes a:hover,.pie-libro-icono:hover{transform:none}}

/* ---------------------------------------------------------------------
   PAGINAS SIMPLES (404, proximamente)
   --------------------------------------------------------------------- */
.aviso-pagina{
  max-width:640px;margin:20px auto 80px;background:#fff;border-radius:18px;padding:40px 30px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.aviso-pagina h1{font-family:var(--fuente-titulo);font-weight:400;font-size:40px;color:#2d0b47;margin:0 0 10px;letter-spacing:.5px}
.aviso-pagina p{color:#4b5563;margin:0 0 22px}
.aviso-pagina .emoji{font-size:48px;line-height:1;margin-bottom:10px}

/* El atajo [boton]: un boton degradado centrado */
.boton-centro{display:flex;justify-content:center;margin:10px 0 30px}
/* Los botones de atajos y secciones: como los de los bloques de WordPress (Poppins) */
.boton-centro .boton-degradado{font-family:"Poppins",var(--fuente),sans-serif}
.boton-degradado.boton-grande{padding:14px 34px}
@media (max-width:680px){.boton-centro .boton-degradado{padding:10px 20px;font-size:13px}}

/* Titulo de seccion en blanco sobre el fondo morado ("Proximos sorteos") */
/* Anton, como el "Proximos sorteos" del plugin HOME de WordPress */
/* Alto de linea 1.4 como los titulos del tema WoodMart; en el celular 1.2. */
.titulo-seccion{font-family:var(--fuente-titulo);font-weight:400;color:#fff;font-size:clamp(14px,6vw,28px);line-height:1.4;margin:0}
@media (max-width:600px){.titulo-seccion{font-size:clamp(18px,6vw,22px);line-height:1.2}}
@media (max-width:360px){.titulo-seccion{font-size:clamp(16px,6vw,19px)}}

/* Accesibilidad: saltar al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:100000;background:#fff;color:#111;padding:10px 14px;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* Cualquier campo sin estilo propio: el mismo foco (los que tienen el suyo
   lo repiten: ver --foco-borde arriba). :where() = sin peso, asi no le
   gana a nada que un formulario defina. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image]),select,textarea):focus{
  outline:0;border-width:1px;border-color:var(--foco-borde);box-shadow:var(--foco-halo)}