/* nv-pie.css — pie de La Novedad (T2): banda dorada (boletín + medios de pago), franja blanca (redes + copyright),
   WhatsApp flotante y volver arriba. Solo consume tokens de nv-base.css (§1.1). Las medidas salen de
   getBoundingClientRect en lanovedad.com/pages/contact el 2026-09-11 (1440×900 y 390×844 emulado) y de
   cabecera-pie.md §11–§12. */

.nv-pie{position:relative;clear:both;font-family:var(--nv-font);letter-spacing:0}
.nv-pie p{margin:0}

/* ── Banda dorada (footer-main): 47/70 escritorio, 47/40 tableta, 40/50 móvil ─────────────────────────────── */
.nv-pie__main{padding:47px 0 70px;text-align:center;color:var(--nv-footer-text);
  background:var(--nv-dark) var(--nv-textura-oro) 50% 50%/cover no-repeat}
.nv-pie__main-in{display:flex;flex-direction:column;align-items:center}
.nv-pie__frase{font-size:15px;line-height:25.5px;font-weight:400;margin:0 0 35px!important;color:inherit}

/* Formulario (Nitro newsletter diseño 3, grande): caja clara de 460×64 con 8 px de aire (15 a la izquierda),
   campo blanco 287×48 y botón 150×48. Todo con más especificidad que los campos subrayados de nv-base.css y que
   la regla [type=submit] de Blocksy (min-height, padding y radio propios). */
.nv-pie__form{position:relative;width:460px;max-width:100%;margin:0 0 30px;text-align:left}
.nv-pie__caja{display:flex;align-items:stretch;box-sizing:border-box;height:64px;padding:8px 8px 8px 15px;background:var(--nv-footer-text)}
.nv-pie .nv-pie__correo{flex:1 1 auto;min-width:0;width:auto;height:48px;min-height:0;margin:0;padding:0 10px 0 3px;border:0;border-radius:0;
  box-shadow:none;outline:0;background:#fff;background-image:none;color:var(--nv-ink);font:400 14px/48px var(--nv-font);text-overflow:ellipsis}
.nv-pie .nv-pie__correo:focus{background:#fff;background-image:none;box-shadow:inset 0 -2px 0 var(--nv-ink)}
.nv-pie .nv-pie__correo::placeholder{color:var(--nv-muted);opacity:1}
.nv-pie .nv-pie__boton{flex:0 0 150px;width:150px;height:48px;min-height:0;margin:0;padding:0 10px;border:0;border-radius:0;box-shadow:none;
  background:var(--nv-dark);color:var(--nv-footer-text);font:600 15px/18px var(--nv-font);text-transform:none;letter-spacing:0}
.nv-pie .nv-pie__boton:hover,.nv-pie .nv-pie__boton:focus-visible{background:var(--nv-dark);border:0;color:#fff}
.nv-pie .nv-pie__boton:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.nv-pie .nv-pie__boton:disabled{opacity:.6;cursor:progress}

.nv-pie__estado{font-size:14px;line-height:22px;font-weight:600;color:#fff}
.nv-pie__estado:not(:empty){margin-top:8px!important}
.nv-pie__spam{margin-top:8px!important;font-size:13px;line-height:22px;color:var(--nv-footer-text)}

/* Autorización (Ley 1581): casilla propia porque Blocksy solo pinta las suyas y las de Woo; sin marcar de fábrica. */
.nv-pie__autoriza{display:flex;align-items:flex-start;gap:8px;margin-top:6px!important;font-size:13px;line-height:19.5px;color:var(--nv-footer-text)}
.nv-pie__autoriza label{cursor:pointer}
.nv-pie__autoriza a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.nv-pie__autoriza a:hover{color:#fff}
.nv-pie .nv-pie__autoriza input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:0 0 15px;width:15px;height:15px;min-height:0;
  margin:2px 0 0;padding:0;border:1px solid var(--nv-footer-text);border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.nv-pie .nv-pie__autoriza input[type=checkbox]:checked{background:var(--nv-footer-text)}
.nv-pie .nv-pie__autoriza input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--nv-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.nv-pie .nv-pie__autoriza input[type=checkbox]:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Campo trampa: fuera de la vista y del árbol de accesibilidad (aria-hidden en el HTML). */
.nv-pie__trampa{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Medios de pago: 63×40, 10 px a la derecha y 5 abajo de cada logo, centrados (así caben 13 en una fila a 1440 y
   4 por fila a 390, como en Shopify). */
.nv-pie__pagos-titulo{font-size:16px;line-height:16px;font-weight:400;color:#fff;margin:0 0 15px!important}
.nv-pie .nv-pagos--pie{gap:0;justify-content:center}
.nv-pie .nv-pagos--pie li{margin:0 10px 5px 0}

/* ── Franja blanca (footer-bottom): en Shopify sube 30 px sobre la banda dorada (su top medido 1463 frente al final
   de la banda en 1493), por eso la banda de 378 px se ve de 348. Se replica igual. Alto 102 = 30 + 46 + 26. ── */
.nv-pie__bottom{position:relative;margin-top:-30px;background:#fff;color:var(--nv-ink)}
/* Columnas de Nitro: 3/12 · 5/12 (vacía) · 3/12 · resto, sobre una fila de ancho +30 px. Así el copyright termina en
   x ≈1317 a 1440 como en Shopify. Las redes con el padding de 15 del contenedor (Shopify las pega a x=0, defecto). */
.nv-pie__bottom-in{display:grid;align-items:center;padding:30px 0 26px;
  grid-template-columns:calc((100% + 30px) / 4 - 15px) calc((100% + 30px) * 5 / 12) calc((100% + 30px) / 4) 1fr}
.nv-pie__redes{grid-column:1;display:flex;gap:30px;margin:0;padding:0 0 0 15px;list-style:none}
.nv-pie__redes li{margin:0}
.nv-pie__red{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--nv-oro);color:#151515;
  text-decoration:none;transition:background-color var(--nv-ease),color var(--nv-ease)}
/* Antes pasaban a negro al pasar el cursor (era lo de Nitro). Desde el 2026-09-16 los botones
   dorados del sitio se encienden con la lámina de --nv-oro-luz: un fondo negro encima la tapaba
   justo en los únicos dorados del pie. Se quedan dorados y brilla la lámina. */
.nv-pie__red:hover,.nv-pie__red:focus-visible{background:var(--nv-oro);color:#151515}
.nv-pie__red .nv-i{width:16px;height:16px;stroke-width:2}
.nv-pie__red--facebook .nv-i{fill:currentColor;stroke:none}
/* El español es más largo que «All rights reserved.»: la columna del copyright toma también la vacía de su izquierda
   y el texto sigue alineado a la derecha, en una línea. Entre 1025 y 1049 px el punto final caía bajo el WhatsApp
   (right 30, 60 px): a 1025 el texto terminaba en x 937,1 y el botón empieza en 935. El área del copyright mide
   2/3 de (ancho + 30), así que 115px − 12,5 % deja el texto a 100 px del borde (10 libres junto al botón) hasta
   1169; desde 1170 manda el 15 de siempre y a 1440 sigue terminando en x 1317,5 como en Shopify. */
.nv-pie__copy{grid-column:2 / 4;padding:0 max(15px,calc(115px - 12.5%)) 0 15px;text-align:right;font-size:17px;line-height:29px;font-weight:500;color:var(--nv-ink)}
.nv-pie__marca{color:var(--nv-ink)}

@media (max-width:1024px){
  .nv-pie__main{padding:47px 0 40px}
  .nv-pie__form{width:360px}
  .nv-pie__bottom-in{grid-template-columns:1fr auto;padding:30px 15px 26px}
  .nv-pie__redes{padding-left:0}
  /* Volver arriba ocupa la esquina derecha (right 15, 50 px, justo encima de la barra inferior): al final del scroll
     tapaba «…reservados.» (50×24 medido a 768, 820 y 1024) y al subir el texto se mete bajo la barra antes de salir
     del botón, así que nunca se leía entero. 65 = 50 del botón + 15 de aire. */
  .nv-pie__copy{grid-column:2;padding:0 65px 0 0}
}
@media (max-width:767px){
  .nv-pie__main{padding:40px 0 50px}
  /* Móvil medido: formulario 313×50, relleno 4, campo 205×42 y botón 100×42. */
  .nv-pie__form{width:313px}
  .nv-pie__caja{height:50px;padding:4px}
  /* 16 px en el campo: por debajo, iOS amplía la página al enfocar y no la devuelve al salir (ver nv-base.css; el
     boletín estaba a 14, medido el 2026-09-13). La caja de 42 px y su interlínea no cambian. */
  .nv-pie .nv-pie__correo{height:42px;line-height:42px;font-size:16px}
  .nv-pie .nv-pie__boton{flex-basis:100px;width:100px;height:42px}
  .nv-pie__pagos-titulo{margin-bottom:10px!important}
  /* Apilado y centrado; entre redes y copyright quedan los 60 px de Shopify (su columna vacía también apila). */
  .nv-pie__bottom-in{grid-template-columns:1fr;justify-items:center;row-gap:60px;padding:30px 15px 20px}
  .nv-pie__redes{gap:15px}
  /* El texto vive entre las columnas de los dos flotantes: WhatsApp ocupa x 10…70 y volver arriba x W−65…W−15, y al
     hacer scroll cada línea pasa por la altura de uno u otro. Con los 15 del contenedor, 55 a la izquierda y 50 a la
     derecha no entra en ninguna, mida lo que mida la pantalla o la barra de compra de la ficha. Medido al final del
     scroll: a 360 la 2.ª línea (235,2 px) se metía 2,6 px bajo volver arriba; con 50 a cada lado, a 320 la 1.ª
     (184,2 px) rozaba el WhatsApp 2,1 px porque al partir en tres líneas sube a su altura. El centro queda 2,5 px a
     la derecha (no se nota); por debajo de ~371 px parte en tres líneas y de 375 en adelante sigue en dos. */
  .nv-pie__copy{grid-column:1;text-align:center;padding:0 50px 0 55px}
  /* D14: a 390 no cabe en una línea; el salto cae entero antes de «Todos los derechos reservados.». */
  .nv-pie__derechos{display:inline-block}
}

/* ── WhatsApp flotante (§2.10, decisión 2): negro 60×60, globo verde y teléfono blanco. Escritorio abajo a la derecha
   (30/30, medido 1350,810 a 1440×900); ≤1024 abajo a la izquierda, 10 px del borde y 150 del fondo, por encima de la
   barra inferior. Sombra en reposo medida con getComputedStyle (0 1px 2px .15). El anillo gris que sale en algunas
   capturas de Shopify es la animación de pulso del widget (no aparece en todas): no se replica. ── */
/* 2026-09-22, el dueño: «el botón de WhatsApp está muy arriba y no se ve elegante; que sea dorado, como los botones,
   con ese estilo y efecto». El círculo lleva el oro de los botones (--nv-oro, borde --nv-oro-borde) y el barrido de
   la familia A de nv-base.css; el globo va en TINTA —el mismo contraste que el texto de los botones dorados, 4,66:1 en
   el punto peor del degradado— y el teléfono en oro claro (--nv-i-2, la segunda tinta del símbolo). Posición fija, así
   que no necesita position:relative para el ::before del barrido: solo isolation (nv-base.css). */
.nv-flotante-wa{--nv-i-2:#efe0aa;position:fixed;right:30px;bottom:30px;z-index:var(--nv-z-float);display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:56px;height:56px;border:1px solid var(--nv-oro-borde);border-radius:50%;background:var(--nv-oro);color:#151515;
  text-decoration:none;box-shadow:0 8px 22px -8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.12);transition:opacity .2s,visibility .2s}
.nv-flotante-wa:hover{color:#151515}
.nv-flotante-wa .nv-i{width:30px;height:30px}
.nv-flotante-wa:focus-visible{outline:2px solid var(--nv-accent);outline-offset:12px}

/* ── Volver arriba (§2.10, D15): 50×50 blanco con anillo de lectura 2 px (pista #f5f5f5, avance #000); aparece a partir
   de 100 px con scale(0)→scale(1) en .5 s. Encima del WhatsApp y centrado con él: right 35 / bottom 105. ── */
.nv-subir{--nv-subir-pista:#f5f5f5;--nv-subir-avance:#000;position:fixed;right:35px;bottom:105px;z-index:var(--nv-z-float);
  display:flex;align-items:center;justify-content:center;width:50px;height:50px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--nv-ink);box-shadow:var(--nv-shadow-float);cursor:pointer;
  opacity:0;visibility:hidden;transform:scale(0);transition:transform .5s,opacity .5s,visibility 0s linear .5s}
.nv-subir.is-visible{opacity:1;visibility:visible;transform:scale(1);transition:transform .5s,opacity .5s,visibility 0s}
.nv-subir:hover,.nv-subir:focus-visible{background:#fff;border:0;color:var(--nv-accent)}
.nv-subir:focus-visible{outline:2px solid var(--nv-accent);outline-offset:2px}
.nv-subir .nv-i{position:relative;width:18px;height:18px;stroke-width:2}
.nv-subir__aro{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.nv-subir__aro circle{fill:none;stroke-width:2}
.nv-subir__pista{stroke:var(--nv-subir-pista)}
.nv-subir__progreso{stroke:var(--nv-subir-avance);stroke-dasharray:150.8;stroke-dashoffset:150.8}

/* Barra fija de compra de la ficha (T6): los flotantes suben lo que ella mide. */
body.nv-sticky-atc-on .nv-flotante-wa{bottom:calc(30px + var(--nv-sticky-atc-h))}
body.nv-sticky-atc-on .nv-subir{bottom:calc(105px + var(--nv-sticky-atc-h))}
@media (max-width:1024px){
  /* Antes 150 px del fondo: casi 100 px por ENCIMA de la barra inferior, en plena lectura, tapando texto (captura del
     dueño del 2026-09-22 en una ficha). Ahora a la misma altura que «volver arriba», justo sobre la barra, y del
     mismo porte: los dos flotantes quedan en las esquinas, simétricos. */
  .nv-flotante-wa{right:auto;left:15px;bottom:calc(var(--nv-toolbar-h) + 15px);width:52px;height:52px}
  .nv-flotante-wa .nv-i{width:28px;height:28px}
  .nv-subir{right:15px;bottom:calc(var(--nv-toolbar-h) + 15px)}
  body.nv-sticky-atc-on .nv-flotante-wa{bottom:calc(var(--nv-toolbar-h) + 15px + var(--nv-sticky-atc-h))}
  body.nv-sticky-atc-on .nv-subir{bottom:calc(var(--nv-toolbar-h) + 15px + var(--nv-sticky-atc-h))}
}
/* Con un cajón abierto (menú, búsqueda, mini carrito, filtros, zoom) los flotantes no tapan nada. */
body.nv-lock .nv-flotante-wa,body.nv-lock .nv-subir{opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .nv-subir,.nv-subir.is-visible,.nv-flotante-wa,.nv-pie__red{transition:none}
}
@media print{.nv-flotante-wa,.nv-subir,.nv-pie__form{display:none!important}}