/*
Theme Name: Pretextos (Storefront Child)
Theme URI: https://pretextos.laposta.ar
Description: Child theme de Storefront para Pretextos — paleta real del logo (verde/negro/blanco), tipografía accesible, y home a medida. WooCommerce (carrito, checkout, ficha de producto) sigue siendo el nativo de Storefront.
Author: Pretextos
Template: storefront
Version: 1.1.0
Text Domain: pretextos-child
*/

/* ============================================
   1. VARIABLES DE MARCA
   Colores extraídos directamente del logo real (verde #00D200, negro, blanco).
   Cambiá un valor acá y se actualiza en todo el sitio.
   ============================================ */
:root{
  --px-fondo:        #FFFFFF; /* blanco puro, como el logo */
  --px-texto:        #000000;
  --px-texto-suave:  #333333;
  --px-texto-tenue:  #666666;
  --px-borde:        #000000; /* borde negro grueso, estilo etiqueta del logo */

  --px-verde:        #00D200; /* verde exacto del logo */
  --px-verde-suave:  #E9FBE9; /* tinte muy claro del mismo verde, para fondos sutiles */

  --px-negro:        #000000;
  --px-blanco:       #FFFFFF;

  --px-radio-s: 5px;
  --px-radio-m: 7px;
  --px-radio-l: 12px;

  --px-borde-grosor: 2px;

  --px-font-titulo: "Archivo", sans-serif;   /* geométrica y gruesa, como las letras del logo */
  --px-font-texto:  "Atkinson Hyperlegible", system-ui, sans-serif; /* diseñada para máxima legibilidad */
}

/* ============================================
   2. BASE
   ============================================ */
body{
  background: var(--px-fondo);
  color: var(--px-texto);
  font-family: var(--px-font-texto);
}
h1,h2,h3,h4{
  font-family: var(--px-font-titulo);
  font-weight: 800;
  color: var(--px-texto);
}
a{ color: var(--px-texto); text-decoration-thickness: 2px; }

/* Storefront trae su propio header/footer para el catálogo y el checkout:
   no los tocamos acá para no romper el carrito ni la ficha de producto. */

/* ============================================
   3. HOME A MEDIDA (usada solo por page-templates/template-pretextos-home.php)
   ============================================ */
.px-home{ max-width:600px; margin:0 auto; }

.px-topbar{
  position:sticky; top:0; z-index:20;
  background:var(--px-fondo);
  border-bottom:var(--px-borde-grosor) solid var(--px-negro);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.px-topbar__brand{ display:flex; align-items:center; gap:8px; }
.px-topbar__brand img{ height:30px; width:auto; display:block; }
.px-topbar__brand span{ font-family:var(--px-font-titulo); font-size:17px; font-weight:800; }
.px-topbar__actions{ display:flex; align-items:center; gap:10px; }
.px-icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:var(--px-borde-grosor) solid var(--px-negro);
}
.px-icon-btn--whatsapp{ background:var(--px-verde); border:var(--px-borde-grosor) solid var(--px-negro); }

.px-hero{ padding:32px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.px-badge{
  align-self:flex-start; background:var(--px-verde); color:var(--px-negro);
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:var(--px-borde-grosor) solid var(--px-negro);
}
.px-hero h1{ font-size:28px; line-height:1.2; }
.px-hero p{ font-size:15px; line-height:1.6; color:var(--px-texto-suave); }
.px-btn-primary{
  text-align:center; background:var(--px-verde); color:var(--px-negro);
  border:var(--px-borde-grosor) solid var(--px-negro);
  padding:13px; border-radius:var(--px-radio-m); font-size:15px; font-weight:800; display:block;
}
.px-btn-secondary{
  text-align:center; font-size:14px; font-weight:800; color:var(--px-negro); padding:6px; display:block;
  text-decoration:underline;
}
.px-hero-img{
  margin:0 20px 28px; aspect-ratio:16/10; border-radius:var(--px-radio-l);
  background:linear-gradient(135deg,var(--px-verde),var(--px-negro));
  background-size:cover; background-position:center;
  border:var(--px-borde-grosor) solid var(--px-negro);
}

.px-pilares{ padding:0 20px 28px; display:flex; flex-direction:column; gap:12px; }
.px-pilar{
  display:flex; align-items:center; gap:14px; background:#fff;
  border:var(--px-borde-grosor) solid var(--px-negro); border-radius:var(--px-radio-l); padding:16px;
}
.px-pilar__icono{
  width:44px; height:44px; border-radius:var(--px-radio-m); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:var(--px-borde-grosor) solid var(--px-negro);
}
/* Ritmo alternado con los 3 colores de marca, como el logo (bloque negro / bloque verde / bloque blanco) */
.px-pilar__icono--mostaza{ background:var(--px-negro); } /* Talleres — ícono blanco sobre negro */
.px-pilar__icono--violeta{ background:var(--px-verde); } /* Librería — ícono negro sobre verde */
.px-pilar__icono--verde{ background:var(--px-blanco); }  /* Eventos — ícono negro sobre blanco */
.px-pilar__titulo{ font-size:16px; font-weight:800; font-family:var(--px-font-titulo); }
.px-pilar__desc{ font-size:13px; color:var(--px-texto-tenue); }

.px-evento{ margin:0 20px 28px; background:var(--px-negro); border-radius:var(--px-radio-l); padding:22px; display:flex; flex-direction:column; gap:10px; border:var(--px-borde-grosor) solid var(--px-negro); }
.px-evento__eyebrow{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--px-verde); }
.px-evento h3{ font-size:19px; color:var(--px-blanco); line-height:1.3; }
.px-evento p{ font-size:13px; color:#DDDDDD; line-height:1.55; }
.px-evento a{ align-self:flex-start; background:var(--px-verde); color:var(--px-negro); border:var(--px-borde-grosor) solid var(--px-verde); padding:10px 16px; border-radius:var(--px-radio-s); font-size:13px; font-weight:800; margin-top:4px; }

.px-filosofia{ padding:0 20px 28px; }
.px-filosofia h2{ font-size:20px; margin-bottom:12px; }
.px-filosofia p{ font-size:14px; line-height:1.6; color:var(--px-texto-suave); margin-bottom:16px; }
.px-filosofia ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.px-filosofia li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; }
.px-filosofia li::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--px-verde); border:1.5px solid var(--px-negro); margin-top:5px; flex-shrink:0; }

.px-galeria h2{ padding:0 20px 12px; font-size:20px; }
.px-galeria__scroll{ display:flex; gap:10px; overflow-x:auto; padding:0 20px 4px; scroll-snap-type:x mandatory; }
.px-galeria__scroll img{ min-width:150px; width:150px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--px-radio-m); border:var(--px-borde-grosor) solid var(--px-negro); scroll-snap-align:start; }

.px-tienda-teaser{ margin:0 20px 28px; background:var(--px-verde-suave); border-radius:var(--px-radio-l); padding:20px; display:flex; align-items:center; gap:16px; border:var(--px-borde-grosor) solid var(--px-negro); }
.px-tienda-teaser__icono{ width:64px; height:64px; border-radius:var(--px-radio-m); background:var(--px-verde); border:var(--px-borde-grosor) solid var(--px-negro); flex-shrink:0; }
.px-tienda-teaser__titulo{ font-size:15px; font-weight:800; font-family:var(--px-font-titulo); }
.px-tienda-teaser__desc{ font-size:12.5px; color:var(--px-texto-tenue); line-height:1.4; }
.px-tienda-teaser a{ background:var(--px-negro); color:var(--px-blanco); padding:9px 14px; border-radius:var(--px-radio-s); font-size:13px; font-weight:800; white-space:nowrap; }

.px-footer{ background:var(--px-negro); padding:32px 20px 100px; display:flex; flex-direction:column; gap:16px; }
.px-footer__brand{ font-family:var(--px-font-titulo); font-size:17px; font-weight:800; color:var(--px-blanco); margin-bottom:6px; }
.px-footer p{ font-size:13px; color:#CCCCCC; line-height:1.5; margin:0; }
.px-footer__links{ display:flex; flex-direction:column; gap:8px; }
.px-footer__links a{ font-size:14px; color:var(--px-blanco); display:flex; align-items:center; gap:8px; text-decoration:none; }
.px-footer__copy{ font-size:11px; color:#999999; margin-top:8px; }

.px-whatsapp-float{
  position:fixed; bottom:20px; right:20px; z-index:30;
  width:56px; height:56px; border-radius:50%; background:var(--px-verde);
  border:var(--px-borde-grosor) solid var(--px-negro);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
}

/* Foco visible para navegación por teclado — accesibilidad */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--px-negro);
  outline-offset:2px;
}

@media (min-width:600px){
  .px-pilares{ flex-direction:row; }
}

/* ============================================
   4. HEADER SITEWIDE (topbar arriba del header de Storefront)
   ============================================ */
.px-topbar-site{
  background:var(--px-fondo);
  border-bottom:var(--px-borde-grosor) solid var(--px-negro);
}
.px-topbar-site__inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
}
.px-topbar-site__brand img{ height:26px; width:auto; display:block; }
.px-topbar-site__actions{ display:flex; align-items:center; gap:8px; }

/* ============================================
   5. FOOTER SITEWIDE — clases reales de Storefront (footer.php / storefront-template-functions.php)
   ============================================ */
.site-footer{ background:var(--px-negro); color:#FFFFFF; }
.site-footer .footer-widgets{ padding:32px 0; }
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4{
  color:#FFFFFF; font-family:var(--px-font-titulo);
}
.site-footer a{ color:#FFFFFF; }
.site-footer p, .site-footer li{ color:#CCCCCC; }
.site-footer .site-info{ color:#999999; font-size:12px; padding:16px 0; }

/* ============================================
   6. Acceso discreto: ocultar el formulario de login de WooCommerce
   en cualquier página que no sea Mi Cuenta (donde sí tiene que estar).
   El acceso pasa a estar en el ícono del header.
   ============================================ */
body:not(.woocommerce-account) .woocommerce-form-login,
body:not(.woocommerce-account) .woocommerce form.login{
  display:none !important;
}

/* ============================================
   7. Variantes de color de los 3 pilares (usadas por el patrón de bloques)
   ============================================ */
.px-pilar{ border:var(--px-borde-grosor) solid var(--px-negro); border-radius:var(--px-radio-l); padding:20px; }
.px-pilar--negro{ background:var(--px-negro); color:#FFFFFF; }
.px-pilar--negro h3{ color:#FFFFFF; }
.px-pilar--verde{ background:var(--px-verde); }
.px-pilar--blanco{ background:#FFFFFF; }

.px-btn-pilar .wp-block-button__link{
  background:transparent; color:inherit; text-decoration:underline; padding:0; font-weight:800;
}
.px-pilar--negro .px-btn-pilar .wp-block-button__link{ color:#FFFFFF; }

.px-btn-evento .wp-block-button__link{
  background:var(--px-verde); color:var(--px-negro); border:var(--px-borde-grosor) solid var(--px-verde);
  font-weight:800; border-radius:var(--px-radio-s);
}

.px-btn-primary .wp-block-button__link,
.px-btn-secondary.is-style-outline .wp-block-button__link{
  font-family:var(--px-font-texto);
}
.px-btn-primary .wp-block-button__link{
  background:var(--px-verde); color:var(--px-negro); border:var(--px-borde-grosor) solid var(--px-negro);
  font-weight:800; border-radius:var(--px-radio-m);
}
.px-btn-secondary.is-style-outline .wp-block-button__link{
  border:none; text-decoration:underline; color:var(--px-negro); font-weight:800; padding-left:0; padding-right:0;
}

.px-evento{ background:var(--px-negro); border-radius:var(--px-radio-l); padding:24px; }
.px-evento h3, .px-evento p{ color:#FFFFFF; }
.px-evento__eyebrow{ color:var(--px-verde); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.04em; }

.px-tienda-teaser{ background:var(--px-verde-suave); border:var(--px-borde-grosor) solid var(--px-negro); border-radius:var(--px-radio-l); padding:24px; text-align:center; }

.px-galeria.wp-block-gallery figure img{ border:var(--px-borde-grosor) solid var(--px-negro); border-radius:var(--px-radio-m); }