/* ============================================================
   CAVA KOSHER — HOME
   Hoja de estilos separada del HTML.
   Cómo usarla:
   1. Subí este archivo a tu tema/child theme, o pegá su contenido
      dentro de Apariencia > Personalizar > CSS adicional en WordPress.
   2. Este CSS depende de que el HTML tenga la clase .cava-home
      envolviendo todo (ver cava-kosher-home.html).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap');

/* ---------- Design tokens de marca ---------- */
.cava-home{
  --azul-noche:   #101C35;
  --azul-noche-2: #16264a;
  --bordo:        #5B1725;
  --bordo-2:      #71202f;
  --dorado:       #C69A45;
  --dorado-suave: #dcb877;
  --marfil:       #F5F0E6;
  --marfil-2:     #efe7d6;
  --carbon:       #171717;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  background: var(--marfil);
  color: var(--carbon);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.cava-home *{ box-sizing: border-box; }
.cava-home img{ max-width: 100%; display:block; }
.cava-home a{ text-decoration: none; color: inherit; }

.cava-home .wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.cava-home .eyebrow{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--dorado);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.cava-home h1, .cava-home h2, .cava-home h3{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

.cava-home .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cava-home .btn-gold{
  background: var(--dorado);
  color: var(--azul-noche);
}
.cava-home .btn-gold:hover{ background: var(--dorado-suave); }
.cava-home .btn-ghost-light{
  border-color: rgba(245,240,230,0.45);
  color: var(--marfil);
  background: transparent;
}
.cava-home .btn-ghost-light:hover{
  border-color: var(--marfil);
  background: rgba(245,240,230,0.08);
}
.cava-home .btn-ghost-dark{
  border-color: rgba(16,28,53,0.3);
  color: var(--azul-noche);
  background: transparent;
}
.cava-home .btn-ghost-dark:hover{
  border-color: var(--azul-noche);
  background: rgba(16,28,53,0.05);
}

.cava-home a:focus-visible{
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */
.cava-hero{
  background:
    radial-gradient(ellipse at 75% 20%, rgba(198,154,69,0.16), transparent 55%),
    linear-gradient(160deg, var(--azul-noche) 0%, var(--azul-noche-2) 100%);
  padding: 88px 0 96px;
}
.cava-hero .wrap{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.cava-hero h1{
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  color: var(--marfil);
  line-height: 1.15;
  margin-bottom: 22px;
}
.cava-hero p.bajada{
  color: rgba(245,240,230,0.78);
  font-size: 1.12rem;
  max-width: 46ch;
  margin-bottom: 34px;
}
.cava-hero .cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cava-hero .hero-visual{
  position: relative;
  aspect-ratio: 4/5;
  border: 1px dashed rgba(198,154,69,0.5);
  background: rgba(198,154,69,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px;
}
.cava-hero .hero-visual .placeholder-label{
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(245,240,230,0.55);
  max-width: 20ch;
}
/* REEMPLAZAR: borrar el div .placeholder-label del HTML y poner
   <img src="URL-DE-TU-FOTO" alt="Vinos Cava Kosher"> dentro de .hero-visual */

@media (max-width: 900px){
  .cava-hero .wrap{ grid-template-columns: 1fr; }
  .cava-hero .hero-visual{ order: -1; aspect-ratio: 16/10; }
}

/* ---------- Categorías ---------- */
.cava-categorias{
  padding: 96px 0;
}
.cava-categorias .section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.cava-categorias .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cava-categorias .card{
  display: block;
  border: 1px solid rgba(16,28,53,0.14);
  padding: 40px 30px;
  text-align:center;
  background: #fff;
  transition: border-color .25s ease, transform .25s ease;
}
.cava-categorias .card:hover{
  border-color: var(--dorado);
  transform: translateY(-4px);
}
.cava-categorias .card .icon{
  width: 46px;
  height: 46px;
  margin: 0 auto 20px;
  color: var(--dorado);
}
.cava-categorias .card h3{
  font-size: 1.5rem;
  color: var(--azul-noche);
  margin-bottom: 10px;
}
.cava-categorias .card p{
  font-size: 0.96rem;
  color: #4a4a48;
  margin: 0;
}
.cava-categorias .section-cta{
  text-align:center;
  margin-top: 48px;
}

@media (max-width: 860px){
  .cava-categorias .grid{ grid-template-columns: 1fr; }
}

/* ---------- Texto introductorio SEO ---------- */
.cava-intro-seo{
  padding: 72px 0 88px;
  background: var(--marfil);
}
.cava-intro-seo .intro-wrap{
  max-width: 74ch;
}
.cava-intro-seo h2{
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  color: var(--azul-noche);
  margin-bottom: 22px;
}
.cava-intro-seo p{
  color: #3f3f3d;
  font-size: 1.03rem;
  margin: 0 0 16px;
}
.cava-intro-seo p:last-child{ margin-bottom: 0; }

/* Bajada corta reutilizada debajo de varios H2 (productos, marcas, tipos) */
.section-head .section-sub{
  color: #5a5a56;
  font-size: 1.02rem;
  margin: 14px auto 0;
  max-width: 56ch;
}

/* ---------- Productos destacados (WooCommerce) ---------- */
.cava-productos{
  padding: 96px 0;
  background: var(--marfil-2);
}
.cava-productos .section-head{
  text-align:center;
  max-width: 560px;
  margin: 0 auto 52px;
}
/* Grilla del shortcode [featured_products] / [products]: pisa el layout
   propio de WooCommerce/Astra para que quede 4 columnas x 2 filas, sin
   carrusel, alineado al resto de la home. */
.cava-productos .products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card de producto */
.cava-productos .products li.product{
  background: #fff;
  border: 1px solid rgba(16,28,53,0.10);
  padding: 0 0 26px;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.cava-productos .products li.product:hover{
  border-color: var(--dorado);
  transform: translateY(-4px);
}

/* Imagen: recorte consistente aunque las fotos tengan proporciones distintas */
.cava-productos .products li.product img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(16,28,53,0.08);
}

/* Categoría del producto (eyebrow), si tu theme la muestra en el loop.
   Astra suele usarla con esta clase; si no coincide, decime qué clase
   ves al inspeccionar el texto (ej. "Latas y bebidas") y la ajusto. */
.cava-productos .products li.product .ast-woo-shop-product-category,
.cava-productos .products li.product [class*="product-categ" i]{
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--dorado);
  margin: 0 0 6px;
  padding: 0 16px;
}

/* Título del producto */
.cava-productos .products li.product .woocommerce-loop-product__title{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--azul-noche);
  padding: 0 16px;
  margin: 0 0 20px;
  line-height: 1.25;
}

/* Botón "Leer más" / ver producto — estilo de marca en vez del azul
   por defecto de WooCommerce. El selector duplicado con .cava-productos
   antepuesto es a propósito: iguala o supera la especificidad de la
   regla que oculta el botón de compra en el resto del sitio, así este
   sí se muestra acá aunque comparta clase con ese botón. */
.cava-productos .woocommerce ul.products li.product .add_to_cart_button,
.cava-productos .woocommerce ul.products li.product .button.product_type_simple,
.cava-productos .products li.product a.button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px) !important;
  margin: 0 16px !important;
  padding: 12px 20px !important;
  border: 1px solid var(--azul-noche) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--azul-noche) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease;
}
.cava-productos .products li.product a.button:hover{
  background: var(--azul-noche) !important;
  color: var(--marfil) !important;
}

/* Ocultar el botón de WhatsApp SOLO en esta grilla de destacados de la
   home; en la ficha de producto (single product) sigue viéndose normal. */
.cava-productos .products li.product .cava-whatsapp-button{
  display: none !important;
}

@media (max-width: 980px){
  .cava-productos .products{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
  .cava-productos .products{ gap: 16px !important; }
}

/* ---------- Marcas de vinos kosher ---------- */
.cava-marcas{
  padding: 92px 0;
  background: var(--marfil);
}
.cava-marcas .section-head{
  text-align:center;
  max-width: 620px;
  margin: 0 auto 44px;
}
.cava-marcas .marcas-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  margin: 0 0 44px;
  list-style: none;
}
.cava-marcas .marcas-grid a{
  display:block;
  text-align:center;
  padding: 26px 16px;
  border: 1px solid rgba(16,28,53,0.14);
  background: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--azul-noche);
  transition: border-color .25s ease, color .25s ease;
}
.cava-marcas .marcas-grid a:hover{
  border-color: var(--dorado);
  color: var(--bordo);
}
.cava-marcas .section-cta{
  text-align:center;
}
@media (max-width: 860px){
  .cava-marcas .marcas-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tipos de vino ---------- */
.cava-tipos-vino{
  padding: 92px 0;
  background: var(--marfil-2);
}
.cava-tipos-vino .section-head{
  text-align:center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.cava-tipos-vino .tipos-lista{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.cava-tipos-vino .tipos-lista li{ margin:0; }
.cava-tipos-vino .tipos-lista a{
  display:inline-block;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--bordo);
  border-bottom: 1px solid var(--dorado);
  padding-bottom: 3px;
  transition: color .2s ease;
}
.cava-tipos-vino .tipos-lista a:hover{ color: var(--dorado); }
.cava-tipos-vino .tipos-lista a.tipos-lista__ver-todos{
  color: var(--azul-noche);
  border-bottom-color: var(--azul-noche);
}

/* ---------- Regalos empresariales ---------- */
.cava-empresas{
  background: linear-gradient(155deg, var(--bordo) 0%, var(--bordo-2) 100%);
  padding: 96px 0;
}
.cava-empresas .wrap{
  display:grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items:center;
}
.cava-empresas h2{
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--marfil);
  line-height:1.2;
  margin-bottom: 20px;
}
.cava-empresas p{
  color: rgba(245,240,230,0.82);
  font-size: 1.05rem;
  max-width: 48ch;
  margin-bottom: 30px;
}
.cava-empresas .visual{
  aspect-ratio: 5/4;
  border: 1px dashed rgba(198,154,69,0.5);
  background: rgba(198,154,69,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 24px;
}
.cava-empresas .visual .placeholder-label{
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(245,240,230,0.6);
  max-width: 20ch;
}
/* REEMPLAZAR: borrar el div .placeholder-label del HTML y poner
   <img src="URL-CAJA-PREMIUM" alt="Caja de regalo Cava Kosher"> dentro de .visual */

@media (max-width: 900px){
  .cava-empresas .wrap{ grid-template-columns: 1fr; }
  .cava-empresas .visual{ order:-1; aspect-ratio: 16/9; }
}

/* ---------- Diferenciales ---------- */
.cava-diferenciales{
  padding: 92px 0;
}
.cava-diferenciales .grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.cava-diferenciales .item{
  text-align:center;
}
.cava-diferenciales .icon{
  width: 38px;
  height: 38px;
  margin: 0 auto 18px;
  color: var(--dorado);
}
.cava-diferenciales h3{
  font-size: 1.2rem;
  color: var(--azul-noche);
  margin-bottom: 8px;
}
.cava-diferenciales p{
  font-size: 0.92rem;
  color: #4a4a48;
  margin:0;
}
@media (max-width: 860px){
  .cava-diferenciales .grid{ grid-template-columns: 1fr 1fr; row-gap: 44px; }
}
@media (max-width: 520px){
  .cava-diferenciales .grid{ grid-template-columns: 1fr; }
}

/* ---------- Preguntas frecuentes (GEO/AEO) ---------- */
.cava-faq{
  padding: 92px 0;
  background: var(--marfil-2);
}
.cava-faq .section-head{
  text-align:center;
  max-width: 560px;
  margin: 0 auto 44px;
}
.cava-faq .faq-list{
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid rgba(16,28,53,0.14);
}
.cava-faq .faq-item{
  border-bottom: 1px solid rgba(16,28,53,0.14);
  padding: 22px 0;
}
.cava-faq .faq-item summary{
  cursor: pointer;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
}
.cava-faq .faq-item summary::-webkit-details-marker{ display:none; }
.cava-faq .faq-item summary h3{
  font-size: 1.18rem;
  color: var(--azul-noche);
  font-weight: 500;
}
.cava-faq .faq-item summary::after{
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--dorado);
  transition: transform .2s ease;
}
.cava-faq .faq-item[open] summary::after{ transform: rotate(45deg); }
.cava-faq .faq-item p{
  color: #4a4a48;
  font-size: 0.98rem;
  margin: 16px 0 0;
  max-width: 68ch;
}

/* ---------- CTA WhatsApp final ---------- */
.cava-cta-final{
  background: var(--azul-noche);
  padding: 96px 0;
  text-align:center;
}
.cava-cta-final h2{
  color: var(--marfil);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  max-width: 20ch;
  margin: 0 auto 18px;
}
.cava-cta-final p{
  color: rgba(245,240,230,0.75);
  max-width: 48ch;
  margin: 0 auto 34px;
  font-size: 1.05rem;
}