/* =======================================================
   critical.css — Mascotas Ayacucho (header + hero mínimo)
   Solo estilos necesarios para el primer pantallazo (ATF)
   Coherente con variables.css y base.css
   ======================================================= */

/* ---- Fallbacks mínimos de variables (sin auto-referencias) ---- */
:root{
  /* Paleta principal (usa tokens si ya existen) */
  --brand:           var(--ma-red-500, #FF0000);
  --brand-600:       color-mix(in srgb, var(--brand) 78%, #000);
  --accent:          var(--ma-amber-500, #FFB600);
  --accent-contrast: var(--ma-black, #111);
  --support:         var(--ma-teal-500, #0AC5CA);
  --support-600:     color-mix(in srgb, var(--support) 68%, #000);

  /* Superficies / layout */
  --white: #fff;
  --black: #0a0a0a;
  --container: var(--container, 1200px);
  --gutter:    var(--gutter, 1rem);
  --shadow:    var(--shadow, 0 8px 24px rgba(0,0,0,.08));

  /* Alto mínimo del header (para anclas y CLS) */
  --header-min-h: 62px;
}

/* ================= Header (sticky, alto estable) ================ */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--support); color:#fff;
  box-shadow: var(--shadow);
  min-height: var(--header-min-h);
}
@media (min-width:768px){
  .site-header{ min-height: 72px; }
}

.site-header a{ color:#fff; text-decoration:none; }
@media (hover:hover){
  .site-header a:hover{ text-decoration:underline; }
}

.header-container{
  display:flex; align-items:center; gap:.75rem;
  width:100%; max-width:var(--container);
  padding:.5rem 1rem; margin-inline:auto;
}

/* Logo (dimensiones estables para evitar saltos) */
.site-branding{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.site-branding img{
  display:block; height:40px; width:auto; object-fit:contain;
}
@media (min-width:768px){ .site-branding img{ height:48px; } }

/* Nav principal (mínimo necesario) */
.main-navigation{ flex:1 1 auto; }
.menu-horizontal{
  display:flex; align-items:center; gap:.5rem;
  margin:0; padding:0; list-style:none;
}
.menu-horizontal > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .8rem;
  border-radius:.55rem; line-height:1.2; color:#fff;
}

/* Acciones: buscador + carrito (liviano) */
.header-actions{ display:flex; align-items:center; gap:.5rem; }

.header-search form{
  display:flex; align-items:center; gap:.4rem;
  background:#fff; border:2px solid rgba(0,0,0,.18);
  border-radius:.85rem; padding:.25rem .5rem;
}
.header-search input[type="search"]{
  min-width:11rem; background:transparent; border:0;
  color:var(--black); padding:.45rem .5rem; outline:none;
}
.header-search button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; background: var(--support); color:#fff;
  border-radius:.65rem; padding:.45rem .6rem; cursor:pointer;
}
@media (hover:hover){
  .header-search button[type="submit"]:hover{ background: var(--support-600); }
}

/* Carrito */
.cart-link{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; }
.cart-icon{ width:24px; height:24px; }
.cart-count{
  min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  display:grid; place-items:center; font-weight:700; font-size:.75rem;
  background:#fff; color: var(--support); border-radius:999px;
}

/* Responsive: envolver en móvil para evitar overflow */
@media (max-width:768px){
  .header-container{ flex-wrap:wrap; row-gap:.5rem; }
  .menu-horizontal{ flex-wrap:wrap; }
}

/* ======================= Hero (ATF) ======================= */
.hero-banner{
  position:relative; isolation:isolate; background:#fff; z-index:0;
}

/* Altura fluida pero predecible para evitar CLS */
.hero-banner .hero-slider{
  width:100%;
  height: clamp(220px, 45vw, 520px);
  position:relative; overflow:hidden;
}

/* Slide con bg o <img> */
.hero-banner .swiper-slide{
  position:relative; background-size:cover; background-position:center;
}
.hero-banner .slide-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Overlay para contraste de texto */
.hero-banner .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.44), rgba(0,0,0,.10) 55%, rgba(0,0,0,0));
  z-index:1; pointer-events:none;
}

/* Contenido inferior: título + subtítulo + CTA */
.hero-banner .hero-content{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; flex-direction:column; gap:.45rem;
  padding: clamp(12px, 4vw, 40px);
  color:#fff; text-align:left; align-items:flex-start;
  text-shadow: 0 1px 6px rgba(0,0,0,.28);
}
.hero-banner .hero-title{
  font-size: clamp(22px, 4vw, 44px);
  line-height:1.1; margin:0; font-weight:800;
}
.hero-banner .hero-subtitle{
  font-size: clamp(14px, 2.2vw, 18px);
  line-height:1.3; margin:.15em 0 .6em;
}

/* Botón CTA mínimo (sin sombras pesadas) */
.hero-banner .hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.7em 1.1em; border-radius: 999px;
  font-weight:700; text-decoration:none; cursor:pointer;
  color:#fff; background: var(--support);
}
@media (hover:hover){
  .hero-banner .hero-btn:hover{ background: var(--support-600); }
}

@media (max-width:640px){
  .hero-banner .hero-content{ padding: clamp(12px, 6vw, 24px); gap:.35rem; }
  .hero-banner .hero-title{ font-size: clamp(20px, 6vw, 30px); }
  .hero-banner .hero-subtitle{ font-size: clamp(13px, 3.5vw, 16px); }
  .hero-banner .hero-btn{ padding:.55em 1em; font-size:.9rem; }
}

/* ===== Preferencias del usuario ===== */
@media (prefers-reduced-motion: reduce){
  .hero-banner .hero-slider,
  .site-header{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ===== Anclas: evita que el header tape los targets ===== */
:target{ scroll-margin-top: var(--header-min-h); }