/* ==========================================================================
   ALYCO - estilos base (clon de https://alyco.milindaweb.com)
   Valores medidos en produccion: ver frontend/_analisis/diseno.md.
   Cada pagina tiene su CSS en css/paginas/<pagina>.css.
   Breakpoints: cabecera de escritorio >= 1025px; layout <= 1024 (tablet)
   y <= 767 (movil), como Elementor.
   ========================================================================== */

/* ---------- Fuentes (Montserrat 400/600/700 en local) ---------------------
   Produccion solo carga 400, 600 y 700 (normal). Los pesos 100-300 y 500
   del CSS de Elementor acaban renderizados como 400, y las cursivas son
   sinteticas: se replica declarando solo esas tres caras. El woff2 es la
   fuente variable de Google Fonts; cada cara fija su peso. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Variables ----------------------------------------------------- */
:root {
  /* Colores (kit Elementor 10452 + WoodMart) */
  --navy: #0C1441;            /* secondary: footer, cabecera fija, secciones oscuras, H2 */
  --blue: #39AAFF;            /* primary: botones CTA, prefooter */
  --text: #151515;            /* texto por defecto */
  --text-muted: #373737;      /* texto de las 3 columnas de la home */
  --white: #FFFFFF;
  --link-hover-footer: #A5DFEB;
  --btn-hover-red: #B72520;   /* hover de botones de formulario (ENTRAR) */
  --accent: #7E0606;          /* definido en el kit, sin uso visible */
  --img-frame: #E4C6AD9E;     /* marco de 10px de fotos (home, contacto) */
  --slide-bg: #545454;        /* fondo del hero mientras carga la foto */
  --footer-text: rgba(255, 255, 255, .8);
  --footer-link: rgba(255, 255, 255, .9);
  --footer-rule: rgba(255, 255, 255, .15);
  --input-border: rgba(0, 0, 0, .1);
  --overlay-side: rgba(0, 0, 0, .7);
  --borde-gris: rgba(0, 0, 0, .105);

  /* Tipografia */
  --font: "Montserrat", Arial, Helvetica, sans-serif;
  --font-sistema: Arial, Helvetica, sans-serif; /* "JOSEFINA" y Bebas Neue fallan en prod */
  --fs-body: 15px;
  --fs-texto: 16px;   --lh-texto: 25px;    /* kit "text" */
  --fs-h2: 40px;                            /* kit "primary" (H2 de seccion) */

  /* Layout */
  --contenedor: 1222px;      /* main.container de WoodMart (util 1192) */
  --contenedor-boxed: 1140px;/* secciones "boxed" de Elementor */
  --gutter: 15px;
  --widgets-spacing: 20px;
  --seccion-pad: 150px;      /* padding vertical tipico de seccion */

  /* Cabecera */
  --cabecera-h: 100px;       /* escritorio; 60px movil (ver media queries) */
  --cabecera-fija-h: 100px;
  --transicion: .3s;
  --ease-wd: cubic-bezier(.19, 1, .22, 1);
}
.cabecera-solida { --cabecera-fija-h: 70px; }
@media (max-width: 1024px) {
  :root { --cabecera-h: 60px; --cabecera-fija-h: 60px; --seccion-pad: 70px; }
  .cabecera-solida { --cabecera-h: 65px; --cabecera-fija-h: 65px; }
}
@media (max-width: 767px) {
  :root { --seccion-pad: 30px; }
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 var(--fs-body)/1 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; font-weight: 700; line-height: 1.4; color: var(--navy); }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--transicion); }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
hr { border: 0; margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dotted currentColor; outline-offset: 2px; }

/* ---------- Utilidades ---------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--gutter); }
.contenedor-boxed { width: 100%; max-width: var(--contenedor-boxed); margin-inline: auto; }
@media (max-width: 1024px) { .contenedor-boxed { max-width: 1024px; } }
@media (max-width: 767px) { .contenedor-boxed { max-width: 767px; } }
.a-sangre { width: 100%; }                      /* secciones de ancho completo */
.seccion { padding-block: var(--seccion-pad); }
.seccion--navy { background: var(--navy); color: var(--white); }
.seccion--navy :is(h1, h2, h3, h4) { color: var(--white); }
.texto { font-size: var(--fs-texto); line-height: var(--lh-texto); }
.texto-centro { text-align: center; }
.mayusculas { text-transform: uppercase; }
.blanco { color: var(--white); }
.marco-beige { border: 10px solid var(--img-frame); }
.cubrir { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icono { width: 1em; height: 1em; flex: none; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 10px 20px; background: var(--white); color: var(--navy); font-weight: 600; }
.saltar:focus { left: 10px; top: 10px; }

/* Titulo de seccion (H2 del kit): 40px / 700 / mayusculas / lh 1, navy */
.titulo-seccion { margin: 0 0 var(--widgets-spacing); font-size: var(--fs-h2); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--navy); }
.titulo-seccion--blanco, .seccion--navy .titulo-seccion { color: var(--white); }

/* ---------- Botones ------------------------------------------------------- */
.boton {
  display: inline-block; border: 0; border-radius: 0; text-align: center; text-decoration: none;
  font-family: var(--font); cursor: pointer;
  transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion);
}
/* Azul #39AAFF sin cambio en hover (como en produccion) */
.boton--azul { background: var(--blue); color: var(--white); }
.boton--azul:hover { color: var(--white); }
/* VER PRODUCTOS (home): 30px/700, padding 20 20 10 */
.boton--xl { font-size: 30px; font-weight: 700; line-height: 1; padding: 20px 20px 10px; text-transform: uppercase; }
/* ESCRIBENOS (prefooter): 16px/700 lh 25, padding 10 20, radio 3px */
.boton--md { font-size: 16px; font-weight: 700; line-height: 25px; padding: 10px 20px; border-radius: 3px; }
.boton--redondeado { border-radius: 3px; }
/* SABER MAS (hero): borde 2px blanco al 50 %, 13px/600 mayusculas */
.boton--borde {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 5px 20px;
  border: 2px solid rgba(255, 255, 255, .5); background: transparent; color: var(--white);
  font-size: 13px; font-weight: 600; line-height: 18px; text-transform: uppercase;
}
.boton--borde:hover { border-color: var(--white); color: var(--white); }
/* ENTRAR (formulario): navy, hover rojo del kit */
.boton--navy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 5px 20px;
  background: var(--navy); color: var(--white); font-family: var(--font-sistema);
  font-size: 13px; font-weight: 400; line-height: 15.6px; text-transform: uppercase;
}
.boton--navy:hover { background: var(--btn-hover-red); }

/* ---------- Formularios (kit + WoodMart) ---------------------------------- */
.campo {
  width: 100%; height: 42px; padding: 0 15px; border: 2px solid var(--input-border); border-radius: 0;
  background: transparent; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 15px;
  transition: border-color .5s ease; -webkit-appearance: none; appearance: none;
}
textarea.campo { height: auto; min-height: 150px; padding: 10px 15px; line-height: 1.4; resize: vertical; }
.campo:focus { outline: none; border-color: rgba(0, 0, 0, .15); }
.etiqueta { display: block; margin-bottom: 10px; color: var(--navy); font-size: 15px; font-weight: 600; line-height: 15px; }

/* ==========================================================================
   CABECERA
   Transparente y superpuesta (absoluta) sobre el hero / banner; fondo navy
   en /productos/ (body.cabecera-solida) y al hacer scroll (.is-fija).
   ========================================================================== */
.cabecera {
  position: absolute; top: 0; left: 0; right: 0; z-index: 390;
  height: var(--cabecera-h); background: transparent; color: var(--white);
}
.cabecera-solida .cabecera { background: var(--navy); }
.cabecera.is-fija { position: fixed; height: var(--cabecera-fija-h); background: var(--navy); }
.cabecera__fila {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: min(100%, max(1222px, 95%)); height: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
.cabecera__logo { justify-self: start; display: flex; align-items: center; height: 100%; }
.cabecera__logo img { padding-block: 5px; width: auto; max-height: 100%; }
.cabecera__logo-escritorio { height: var(--cabecera-h); }
.cabecera.is-fija .cabecera__logo-escritorio { height: var(--cabecera-fija-h); }
.cabecera__logo-movil { display: none; }

/* Menu principal: 19px, mayusculas, separacion 40px, subrayado navy de 2px */
.cabecera__nav { padding-inline: 10px; }
.menu-principal { display: flex; gap: 40px; }
.menu-principal a {
  display: flex; align-items: center; min-height: 42px; padding: 5px 0;
  color: var(--white); font-size: 19px; font-weight: 400; line-height: 1.4; text-transform: uppercase;
}
.menu-principal a span { position: relative; padding: 1px 0; line-height: 1.2; }
.menu-principal a span::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--navy);
  transition: width .4s var(--ease-wd);
}
.menu-principal a:hover span::after, .menu-principal a.activo span::after { width: 100%; }

.cabecera__acciones { justify-self: end; display: flex; align-items: center; }
.cabecera__buscar {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -10px;
  color: var(--white); font-size: 20px;
}
.cabecera__icono-cerrar { display: none; }
.busqueda-abierta .cabecera__icono-buscar { display: none; }
.busqueda-abierta .cabecera__icono-cerrar { display: block; }
.cabecera__menu-movil {
  display: none; align-items: center; gap: 7px; height: 40px; padding: 0 10px; margin-right: -10px;
  color: var(--white); font-size: 19px; line-height: 19px; text-transform: uppercase;
}
.cabecera__menu-movil .icono { font-size: 20px; }

@media (max-width: 1024px) {
  .cabecera__fila { grid-template-columns: 1fr auto; }
  .cabecera__nav, .cabecera__buscar, .cabecera__logo-escritorio { display: none; }
  .cabecera__menu-movil { display: inline-flex; }
  /* .cabecera__logo prefijado: tiene que ganar a `.cabecera__logo img` */
  .cabecera__logo .cabecera__logo-movil { display: block; width: 179px; height: auto; max-height: none; }
  .cabecera__logo .cabecera__logo-movil--esfera { width: auto; height: var(--cabecera-h); }
}

/* Busqueda a pantalla completa (debajo de la cabecera) */
.busqueda {
  position: fixed; inset: var(--cabecera-h) 0 0 0; z-index: 380; overflow-y: auto;
  background: var(--white); color: var(--text);
}
.cabecera.is-fija ~ .busqueda { top: var(--cabecera-fija-h); }
.busqueda__cerrar { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; color: #333; font-size: 38px; }
.busqueda__form { padding: 0 100px; border-bottom: 1px solid var(--borde-gris); }
.busqueda__input {
  width: 100%; height: 110px; border: 0; background: transparent; text-align: center;
  color: #333; font-size: 48px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none;
}
.busqueda__input::-webkit-search-cancel-button { display: none; }
.busqueda__resultados { max-width: var(--contenedor); margin: 0 auto; padding: 20px var(--gutter) 0; display: grid; gap: 10px; }
.busqueda__resultados a { display: block; padding: 10px 0; border-bottom: 1px solid var(--borde-gris); color: var(--navy); font-size: 16px; font-weight: 600; text-transform: uppercase; }
.busqueda__resultados a:hover { color: var(--blue); }
.busqueda__info { margin: 0; padding: 0 var(--gutter); text-align: center; font-size: 12.96px; line-height: 15px; }
@media (max-width: 767px) {
  .busqueda__form { padding: 0 60px 0 15px; }
  .busqueda__input { font-size: 24px; height: 80px; text-align: left; }
  .busqueda__cerrar { width: 60px; height: 80px; top: 0; right: 0; font-size: 24px; }
}

/* Panel lateral movil (izquierda, 300px) */
.menu-movil {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 500; display: flex; flex-direction: column;
  width: min(300px, 80vw); overflow-y: auto; background: var(--white); color: var(--text);
  transform: translateX(-100%); transition: transform .5s var(--ease-wd);
}
.menu-movil.abierto { transform: none; }
.menu-movil__cabeza { display: flex; justify-content: flex-end; padding: 20px 15px; border-bottom: 1px solid var(--borde-gris); }
.menu-movil__cerrar { display: inline-flex; align-items: center; gap: 5px; height: 25px; color: #333; font-size: 12px; font-weight: 600; line-height: 12px; }
.menu-movil__cerrar .icono { font-size: 13px; }
.menu-movil__buscar { position: relative; display: flex; height: 70px; box-shadow: 0 -1px 9px rgba(0, 0, 0, .17); }
.menu-movil__buscar input {
  flex: 1; min-width: 0; height: 70px; padding: 0 70px 0 20px; border: 0; background: transparent;
  color: #767676; font-size: 14px; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none;
}
.menu-movil__buscar input::placeholder { color: transparent; } /* asi en produccion */
.menu-movil__buscar button { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 70px; background: var(--navy); color: var(--white); font-size: 20px; }
.menu-movil__pestanas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde-gris); }
.menu-movil__pestanas button {
  position: relative; height: 54px; padding: 18px 15px; background: rgba(0, 0, 0, .04);
  color: rgba(51, 51, 51, .5); font-size: 13px; font-weight: 600; line-height: 18.2px; text-transform: uppercase;
}
.menu-movil__pestanas button[aria-selected="true"] { background: rgba(0, 0, 0, .09); color: #333; }
.menu-movil__pestanas button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transition: transform .3s; }
.menu-movil__pestanas button[aria-selected="true"]::after { transform: none; }
.menu-movil__lista a {
  display: flex; align-items: center; min-height: 50px; padding: 5px 20px; border-bottom: 1px solid var(--borde-gris);
  color: #333; font-size: 13px; font-weight: 600; line-height: 18.2px; text-transform: uppercase;
}
.menu-movil__lista a.activo, .menu-movil__lista a:hover { color: var(--navy); }
.velo { position: fixed; inset: 0; z-index: 499; background: var(--overlay-side); opacity: 0; transition: opacity .5s var(--ease-wd); }
.velo.visible { opacity: 1; }
body.sin-scroll { overflow: hidden; }

/* ==========================================================================
   BANNER DE TITULO (paginas internas)
   519px en escritorio (300 arriba incl. cabecera, 100 abajo), 158/163 movil.
   ========================================================================== */
.banner-titulo {
  position: relative; overflow: hidden; text-align: center; color: var(--footer-text);
  padding: calc(var(--cabecera-h) + 200px) 0 100px;
}
.banner-titulo__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner-titulo .contenedor { position: relative; }
.banner-titulo { isolation: isolate; }
.banner-titulo__h1 { margin: 0 0 10px; color: var(--white); font-size: 78px; font-weight: 700; line-height: 1.2; }
.migas { font-size: 15px; line-height: 15px; }
.migas a { color: rgba(255, 255, 255, .7); }
.migas a:hover { color: var(--white); }
.migas__sep { margin-inline: 8px; color: var(--footer-text); }
.migas__actual { color: var(--white); font-weight: 600; }
@media (max-width: 1024px) {
  .banner-titulo { padding: calc(var(--cabecera-h) + 15px) 0 15px; }
  .banner-titulo__h1 { font-size: 36px; }
}

/* ==========================================================================
   PREFOOTER (solo catalogo y 404)
   ========================================================================== */
.prefooter {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  min-height: 400px; padding: 60px 10px; background: var(--blue); color: var(--white); text-align: center;
}
.prefooter::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: url("../img/paginas/destacada-home-2.jpg") center / cover no-repeat;
}
.prefooter__titulo { margin: 0 0 20px; color: var(--white); font-size: 30px; font-weight: 700; line-height: 1; }
.prefooter__texto { margin: 0 0 20px; font-size: 19px; font-style: italic; line-height: 1.5; }
@media (max-width: 767px) { .prefooter { min-height: 438px; } }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: var(--navy); color: var(--footer-text); }
.pie__grid {
  display: grid; grid-template-columns: 253fr 518fr 253fr; column-gap: 80px; align-items: center;
}
.pie__col--logo { padding-block: 30px; text-align: center; }
.pie__col--logo img { margin: 0 auto 20px; }
.pie__linea { padding-block: 15px; }
.pie__linea::before { content: ""; display: block; height: 1px; background: var(--white); }
.pie__col--productos { padding-block: 50px; }
.pie__col--contacto { padding-block: 30px; }
.pie__titulo { margin: 0 0 20px; color: var(--white); font-size: 18px; font-weight: 700; line-height: 18px; }
.pie__categorias { display: flex; flex-wrap: wrap; }
.pie__categorias a {
  display: block; padding: 5px 10px; color: var(--white); font-size: 12px; font-weight: 400; line-height: 14px;
}
.pie__categorias a:hover { color: var(--link-hover-footer); }
/* Categoria actual (como el menu de Elementor en produccion): texto marron en
   escritorio; en tablet/movil, fondo marron y texto blanco. */
.pie__categorias a.activo { color: #66564B; }
@media (max-width: 1024px) { .pie__categorias a.activo { color: var(--white); background: #69594E; } }
.pie__contacto li + li { margin-top: 5px; padding-top: 5px; }
.pie__contacto a { display: flex; align-items: center; color: var(--footer-link); font-size: 16px; line-height: 25px; }
.pie__contacto span { padding-left: 5px; color: var(--white); }
.pie__icono { width: 35px; height: 35px; margin-right: 8.75px; color: var(--white); } /* caja de 43.75px como Elementor */
.pie__copy { padding: 20px 0; border-top: 1px solid var(--footer-rule); font-size: 12px; line-height: 15px; }
.pie__copy-fila { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pie__copy small { font-size: 12px; }
.pie__copy a { color: var(--footer-link); }
.pie__copy a:hover { color: var(--white); }
.pie__icono-copy { display: inline-block; vertical-align: -1px; width: 12px; height: 12px; }
@media (max-width: 1024px) {
  .pie__grid { grid-template-columns: 1fr; text-align: center; }
  .pie__col { padding: 10px; }
  .pie__col--logo { padding: 30px; }
  .pie__col--productos { padding: 50px 0 0; }
  .pie__titulo { text-align: center; }
  .pie__categorias { flex-direction: column; align-items: center; }
  .pie__categorias a { padding: 10px 20px; line-height: 12px; }
  .pie__col--contacto { margin-top: 50px; padding: 0 50px 50px; }
  .pie__contacto { display: inline-block; text-align: left; }
  .pie__copy-fila { flex-direction: column; text-align: center; }
}
/* Produccion: el titulo del pie sube a 25px solo en tablet (768-1024). */
@media (min-width: 768px) and (max-width: 1024px) { .pie__titulo { font-size: 25px; } }

/* Boton volver arriba */
.subir {
  position: fixed; right: 20px; bottom: 20px; z-index: 350; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 5px rgba(0, 0, 0, .17);
  color: #333; font-size: 20px; opacity: 0; pointer-events: none; transform: translateX(100%);
  transition: opacity .25s, transform .25s, color .25s;
}
.subir.visible { opacity: 1; pointer-events: auto; transform: none; }
.subir:hover { color: #999; }
.busqueda-abierta .subir { display: none; }
@media (max-width: 1024px) { .subir { right: 12px; bottom: 12px; width: 40px; height: 40px; font-size: 17px; } }

/* ==========================================================================
   FORMULARIO DE CONTRASENA DEL CATALOGO (post-password-form de WordPress)
   ========================================================================== */
.acceso { padding-top: 60px; padding-bottom: 20px; }
.acceso__texto { margin: 0 0 20px; font-size: 15px; line-height: 15px; }
.acceso__error { margin: 0 0 20px; padding: 10px 15px; border-left: 3px solid #E01020; background: #FDF0F1; color: #8A0F1A; font-size: 15px; line-height: 1.4; }
.acceso__fila { margin: 0; }
.acceso__label { display: inline-block; width: 327px; max-width: 100%; margin-bottom: 10px; vertical-align: bottom; }
.acceso__label .campo { display: block; }
.acceso__boton { margin-bottom: 10px; vertical-align: bottom; }

/* ==========================================================================
   404 (aspecto de la 404 de WoodMart)
   ========================================================================== */
.error404 { padding-top: calc(var(--cabecera-h) + 60px); padding-bottom: 150px; text-align: center; }
.error404__caja { position: relative; isolation: isolate; max-width: 1000px; margin: 0 auto; }
.error404__caja::before {
  content: "404"; position: absolute; left: 50%; top: -50px; z-index: -1; transform: translateX(-50%);
  color: #f1f1f1; font-size: 250px; font-weight: 700; line-height: 1;
}
.error404__antetitulo { margin: 40px 0 70px; font-size: 60px; line-height: 1; text-transform: uppercase; }
.error404__titulo { margin: 0 0 20px; font-size: 60px; line-height: 1.2; }
.error404__texto { margin: 0 0 15px; font-size: 15px; line-height: 1.4; }
.error404__buscar { display: flex; max-width: 400px; margin: 0 auto; }
.error404__buscar .campo { flex: 1; }
.error404__buscar button { display: flex; align-items: center; justify-content: center; width: 46px; height: 42px; background: var(--navy); color: var(--white); font-size: 16px; }
@media (max-width: 767px) {
  .error404__caja::before { font-size: 130px; top: -20px; }
  .error404__antetitulo { margin: 20px 0 40px; font-size: 32px; }
  .error404__titulo { font-size: 30px; }
}