/*
Theme Name: Agárralo Child
Theme URI: https://agarralo.co
Description: Child theme del sitio público de Agárralo. Implementa la guía de estilo v2.0 (modelo de web de ofertas) sobre GeneratePress. No modifica el tema padre.
Author: Agencia Agárralo
Template: generatepress
Version: 1.10.0
*/

/* ===================== FUENTES (auto-alojadas) ===================== *
 * Baloo 2 e Inter servidas desde el propio tema — sin Google Fonts.
 * Subconjunto "latin" (fuentes variables). Ver functions.php bloque 1.
 */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('assets/fonts/baloo2-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-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;
}

:root {
  --fuego:      #FF5A1F;
  --fuego-osc:  #E8430C;
  --tinta:      #131622;
  --papel:      #F6F7F9;
  --blanco:     #FFFFFF;
  --ahorro:     #0BA05B;
  --chispa:     #FFD337;
  --gris:       #6B7080;
  --linea:      #E7E9EE;

  --fuente-display: 'Baloo 2', system-ui, 'Helvetica Neue', sans-serif;
  --fuente-cuerpo:  'Inter', system-ui, 'Helvetica Neue', sans-serif;
}

/* ===================== BASE ===================== */
body {
  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 3px solid var(--fuego);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-display);
  color: var(--tinta);
}

/* ===================== HEADER ===================== */
.site-header {
  background: var(--tinta) !important;
  border-bottom: 3px solid var(--fuego);
  position: sticky;   /* guía v2.0 §"Header sólido" / §4.4 */
  top: 0;
  z-index: 100;
}

/* La barra de admin de WordPress (solo usuarios con sesión) empuja el sticky */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.site-header,
.site-header a,
.site-header .main-title a,
.site-header .main-nav a,
.site-header .menu-item a {
  color: #fff !important;
}

/* Logotipo de marca: "agárralo" + "!" en fuego. El Título del sitio en
   Ajustes sigue siendo "Agárralo" (para <title>, og:site_name, nombre
   accesible del enlace — el DOM no se toca). Fuente del tratamiento:
   identidad/propuesta-v1.html (mini-logo de la barra). Antes vivía en
   Personalizar → CSS adicional; traído al tema el 2026-08-29. */
.site-header .main-title a {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(18px, 5vw, 22px);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.site-header .main-title a::after {
  content: "!";
  color: var(--fuego);
}

.site-header .main-nav a:hover,
.site-header .menu-item a:hover {
  color: var(--fuego) !important;
}

.site-header .menu-toggle {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.site-header .menu-toggle .mobile-menu {
  color: #fff !important;
}

.site-header .menu-toggle svg {
  fill: #fff !important;
}

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--tinta) !important;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 36px;
  padding-bottom: 28px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.site-footer a:hover {
  color: #fff !important;
  text-decoration: underline;
}

.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: #fff !important;
  font-family: var(--fuente-display);
  font-weight: 700;
}

/* Barra de copyright — una sola línea (guía v2.0 §4.5, punto 5).
   El área de widgets "footer-bar" (block-9) se vacía al desplegar;
   el crédito lo pone functions.php (filtro generate_copyright). */
.site-footer .footer-bar,
.site-footer .copyright-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55) !important; /* 6.1:1 sobre --tinta (era 0.45 = 4.5:1, al límite AA). Auditoría 2026-08-29. */
  font-size: 12.5px;
  padding-top: 16px;
}

.site-footer .footer-bar a,
.site-footer .copyright-bar a {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Marca de Black Rabbit (dos orejas) junto al crédito — "tipo emoji" */
.copyright-bar .br-mark {
  width: 0.85em;
  height: 0.85em;
  display: inline-block;
  vertical-align: -0.12em;
  margin: 0 0.28em 0 0.12em;
}

.site-footer .footer-widget-1 p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.70);
}

.site-footer .footer-widget-1 h2 {
  font-size: 22px;
}

/* Texto y enlaces de los widgets del pie a 13px (guía v2.0 §4.5; la
   auditoría 2026-08-29 los encontró a 17px). En vivo los enlaces legales
   viven en un párrafo (#block-11) y en un menú (#nav_menu-5); ambos casos
   quedan cubiertos. El .widget-title ("Más") conserva su tamaño. */
.site-footer .footer-widgets .widget p,
.site-footer .footer-widgets .widget li,
.site-footer .footer-widgets .widget a {
  font-size: 13px;
  line-height: 1.7;
}

/* Logotipo + lema en el footer — guía v2.0 §4.5.
   Lo imprime functions.php (agarralo_footer_marca) en el hook
   'generate_footer' @1, como primer bloque de .site-footer. Reutiliza
   .footer-widgets-container.grid-container para alinearse con los widgets. */
.site-footer__marca .footer-widgets-container {
  padding-top: 6px;
  padding-bottom: 16px;
}

.site-footer__logo {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}

.site-footer__logo .bang {
  color: var(--fuego);
}

.site-footer__lema {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: 0;
}

/* ===================== CONTENIDO — TABLAS EN MÓVIL ===================== */
/* Las páginas legales (/privacidad/, /tratamiento-de-datos/) llevan tablas
   de 3-4 columnas que a 375px se salían del viewport y provocaban scroll
   horizontal de toda la página (auditoría 2026-08-29, M-6: 534px y 473px
   de ancho de contenido). Con display:block + overflow-x la tabla se
   desplaza dentro de su propio ancho y las celdas guardan un mínimo
   legible; la página deja de desbordarse. Solo aplica en móvil/tablet. */
@media (max-width: 768px) {
  .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .entry-content table th,
  .entry-content table td {
    min-width: 7.5em;
  }
}

/* ===================== BOTONES / CTA (WooCommerce) ===================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.product_type_external,
a.single_add_to_cart_button {
  background: var(--fuego) !important;
  color: #fff !important;
  font-family: var(--fuente-display);
  font-weight: 700;
  border-radius: 8px !important;
  border: none !important;
  min-height: 44px;
  padding: 11px 18px !important;
  text-transform: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
a.single_add_to_cart_button:hover {
  background: var(--fuego-osc) !important;
  color: #fff !important;
}

/* ===================== PRECIOS (WooCommerce) ===================== */
.woocommerce .price {
  font-family: var(--fuente-display);
}

.woocommerce .price ins {
  text-decoration: none;
  color: var(--ahorro);
  font-weight: 800;
}

.woocommerce .price del {
  color: var(--gris);
  font-weight: 400;
  opacity: 1;
}

/* ===================== CATÁLOGO / TARJETAS (WooCommerce loop) ===================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  background: var(--papel);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta);
}

.woocommerce ul.products li.product img {
  border-radius: 8px;
}

/* ===================== FICHA DE PRODUCTO ===================== */
.woocommerce div.product .product_title {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 18px;
  color: var(--tinta);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 28px;
}

/* ===================== FORMULARIO DE SUSCRIPCIÓN (footer) ===================== */
.footer-widget-1 form button,
.footer-widget-1 form input[type="submit"] {
  background: var(--fuego);
  color: #fff;
  border-radius: 8px;
  border: none;
  font-family: var(--fuente-display);
  font-weight: 700;
}


/* ===================== FIX: nav vacio hereda fondo blanco de GP ===================== */
.site-header .main-navigation {
	  background: transparent !important;
}


/* ===================== FIX: partes del footer con fondo blanco de GP ===================== */
/* .site-info (franja de copyright) trae fondo blanco por defecto en
   GeneratePress; sin el widget block-9 la clase .footer-bar-active
   desaparece y el fondo blanco queda visible -> texto blanco invisible.
   Verificado en staging 2026-08-29. */
.site-footer #footer-widgets,
.site-footer .site-footer__marca,
.site-footer .site-info,
.site-footer .footer-widgets-container,
.site-footer .inside-footer-widgets {
	  background: transparent !important;
}