/* Tipografías base */
:root{
  /* Marca Sudoeste: CMYK 0, 85, 83, 0 */
  --sudoeste: #FF262B;          /* rojo vino principal */
  --sudoeste-dark: #720709;      /* rojo vino oscuro (derivado) */

  /* Logo Imagen: CMYK 21, 35, 49, 7 */
  --logo-img: #BB9A79;          /* beige/dorado cálido */

  /* Logo fondo: CMYK 0, 4, 7, 0 */
  --logo-bg: #FFF5ED;           /* crema muy claro */

  /* Varietal/origen/año/etiqueta: CMYK 100, 0, 0, 0 */
  --label-text-print: #00FFFF;  /* cian (fiel a CMYK, para print preview) */
  --label-text-web: #111111;    /* recomendación web (negro neutro) */

  /* Tipografías */
  --font-display: "Playfair Display", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tamaños hero */
  --hero-h1-size: clamp(42px, 7.2vw, 96px);
  --hero-sub-size: clamp(16px, 2.2vw, 22px);

  /* WhatsApp button contrast */
  --wa-bg: #128C7E; /* darker green for AA contrast */
  --wa-fg: #ffffff; /* white text */
}

/* Base */
body{ font-family: var(--font-sans); background: #fff; color:#1a1a1a; }

/* Botones con la paleta */
.btn.btn-primary{
  background: var(--logo-img);
  border-color: var(--logo-img);
  color: #111 !important;
}
.btn.btn-primary:hover{ filter: brightness(0.95); }

/* Utilidades de color coherentes con marca */
.text-brand{ color: var(--sudoeste); }
.bg-brand{ background: var(--sudoeste); color:#fff; }
.badge-gold{ background: var(--logo-img); color:#111; }
.card-cream{ background: var(--logo-bg); }
.label-text{ color: var(--label-text-web); } /* usá esta para varietal/origen/año en web */


/* ===== Hero Sudoeste ===== */
.hero-sudoeste{
  position: relative;
  min-height: 64vh;
  display: grid;
  place-items: center;
  padding: 5rem 1rem 1.5rem;

  color:#fff;
  isolation: isolate;
  /* El logo se renderiza como <img>, no como background */
  background: none;
}

.hero-sudoeste .hero-overlay{
  position: absolute; inset: 0;
  /* Degradado en la paleta (vino → oscuro vino) con leve viñeta */
  /*
    background:
    radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.35) 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sudoeste) 55%, transparent), color-mix(in srgb, var(--sudoeste-dark) 90%, #000));
  z-index: -1;
*/
}

.hero-sudoeste .hero-inner{
  text-align: center; max-width: 1000px; margin-inline: auto; width: 100%;
}

.hero-sudoeste .hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: var(--hero-h1-size);
  line-height: 0.95;
  margin: 0.1em 0 0.25em;
  text-shadow: 0 8px 34px rgba(0,0,0,.45);
  /* Subrayado fino en el dorado de logo */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--logo-img) 70%, transparent);
  text-decoration-thickness: .06em;
  text-underline-offset: .12em;
}

.hero-sudoeste .hero-subtitle{
  font-size: var(--hero-sub-size);
  opacity: 0.97;
  margin-bottom: 2rem;
}

.hero-sudoeste .hero-cta .btn-lg{
  padding: 0.95rem 1.7rem;
  font-size: 1.06rem;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* Opcional: borde fino de secciones usando el dorado/beige */
.section-divider{
  border-top: 1px solid color-mix(in srgb, var(--logo-img) 60%, #fff);
}



.section-title, .section-heading, h2.section-title{
  font-family: var(--font-display);
  color: var(--sudoeste);
  letter-spacing: 0.01em;
}

.product-card{ background: var(--logo-bg); border:1px solid color-mix(in srgb, var(--logo-img) 40%, #fff); }
.product-card .price{ color: var(--sudoeste); font-weight: 700; }

a{ color: var(--sudoeste); }
a:hover{ color: color-mix(in srgb, var(--sudoeste) 85%, #000); }

/* Features: 1 por fila en mobile, máx 2 por fila en pantallas amplias */
.features{ grid-template-columns: 1fr; }
@media (min-width: 720px){
  .features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reducir el espacio justo debajo del hero en pantallas amplias */
.hero-sudoeste + .features{ margin-top: .75rem; }

@media (max-width: 720px){
  /* Más aire interno en features sin romper 2 columnas */
  .features .feature{ padding: 1.15rem; }
}

@media (max-width: 420px){
  .features .feature{ padding: 1.25rem; }
}
/* Texto solo-lectores (accesibilidad/SEO) */
.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;
}

/* Ajustes del título del hero cuando usamos wordmark */
.hero-sudoeste .hero-title{
  /* quitamos estilos tipográficos del título en texto */
  font-size: 0;        /* oculta el impacto del texto visible */
  margin: 0 0 0.4em;
}

.hero-sudoeste .hero-wordmark{
  display:inline-block;
  width: clamp(240px, 55vw, 920px);
  height:auto;
  /* Si tu SVG usa fill="currentColor", puedes colorearlo así: */
  /* filter: drop-shadow(0 8px 34px rgba(0,0,0,.45)); */
}

/* Si el SVG es monocromo y querés teñirlo desde CSS:
   (Funciona si el SVG tiene fill="currentColor") */
.hero-sudoeste .hero-title{
  color: var(--sudoeste);               /* color de marca */
}
/* Para versión blanca sobre foto oscura, usa: */
/* .hero-sudoeste .hero-title{ color:#fff; } */
/* Carrito: acciones en fila y centradas */
#cart-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
#cart-actions .btn{
  display: inline-flex;
  width: auto;
  margin-bottom: 0;
  text-align: center;
}

/* ===== Header menu centered ===== */
.site-header nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.site-header nav a{ margin-right: 0; position: relative; padding-bottom: .15rem; }
/* Header menu hover/ focus underline */
.site-header nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: currentColor;
  opacity: .65;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after{ transform: scaleX(1); }

/* theme toggle button removed */

/* ===== Generic button accessible focus ===== */
.btn:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.45);
}
.btn.primary:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--logo-img) 55%, #000);
}
.btn.secondary:focus-visible{
  outline: 3px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, #25D366 40%, #000);
}

/* ===== WhatsApp button contrast & states ===== */
.btn.whatsapp{
  background: var(--wa-bg) !important;
  color: var(--wa-fg) !important;
  border-color: var(--wa-bg) !important;
}
.btn.whatsapp:hover{
  background: color-mix(in srgb, var(--wa-bg) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--wa-bg) 88%, #000) !important;
}
.btn.whatsapp:active{
  background: color-mix(in srgb, var(--wa-bg) 75%, #000) !important;
  border-color: color-mix(in srgb, var(--wa-bg) 75%, #000) !important;
}
.btn.whatsapp:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-bg) 50%, #000);
}

/* ===== Nosotros page image sizing ===== */
.page .nosotros-img{
  width: 50%;
  max-width: 640px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: .75rem;
}
@media (max-width: 720px){
  /* Compactar hero en mobile: acercar logo al header y reducir altura */
  .hero-sudoeste{
    /* Hacer el hero cuadrado usando el ancho de pantalla */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    padding: 0;
  }

  /* Primera sección después del hero: casi sin separación */
  .hero-sudoeste + .features{ margin-top: .5rem; }

  /* Logo cuadrado con borde y respiro interno */
  .hero-sudoeste .hero-logo{
    display: block;
    width: 92%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 4% auto;
  }

  /* El contenedor ocupa todo el cuadrado y centra el logo */
  .hero-sudoeste .hero-inner{
    max-width: none;
    margin: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }

  /* Header más compacto en mobile */
  .site-header .wrap{ padding: .75rem 1rem; }
  .site-header nav{ gap: .75rem; }

  /* Reducir separación de secciones siguientes al hero */
  .features{ margin: 1.25rem 0 2rem; }
  .home-products{ margin: 1.25rem 0 2.5rem; }
  .testimonials{ margin: 1.5rem 0 2.5rem; }

  .page .nosotros-img{ width: 100%; }
}

@media (max-width: 420px){
  .hero-sudoeste{
    /* Mantener el hero cuadrado en teléfonos pequeños */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    padding: 0;
  }
  .hero-sudoeste .hero-logo{ width: 92%; margin: 4% auto; }
}

/* Desktop/tablet: centrar y escalar el logo con borde */
.hero-sudoeste .hero-logo{
  display: block;
  width: clamp(360px, 60vw, 900px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto;
  opacity: 0;
  animation: heroFadeIn 1s ease-out forwards;
}
@keyframes heroFadeIn{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .hero-sudoeste .hero-logo{ animation: none !important; opacity: 1 !important; }
}