/*
Theme Name: La Comarca
Theme URI: https://lacomarca.com.ar
Author: 02DG
Author URI: https://02dg.com.ar
Description: Theme a medida para La Comarca, Granja Agroecológica. Landing de una sola página, desarrollada por 02DG a partir del sistema de identidad visual y el diseño aprobado en Adobe XD.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Uso exclusivo del cliente
Text Domain: la-comarca
*/

/* =======================================================
   ÍNDICE
   1. Variables (design tokens)
   2. Reset & base
   3. Tipografía
   4. Utilidades / layout
   5. Header sticky + navegación (desktop + burger mobile)
   6. Hero
   7. Manifiesto del Suelo
   8. Video
   9. Arquitectura de la Vitalidad
   10. Cocina Real
   11. Confianza
   12. Conversión
   13. Footer / WhatsApp flotante
   14. Responsive (mobile < 860px, basado en artboard 390px)
   ======================================================= */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Paleta — extraída de la guía de diseño (design_guide.png) */
  --marfil: #F4F2EE;
  --gris-borde: #C9C6BE;
  --verde: #666A55;
  --verde-deep: #4F5342;
  --terracota: #9A4F1D;      /* terracota UI: botones, acentos, badges */
  --terracota-brand: #B86125; /* terracota de marca: arco del isotipo */
  --negro: #2C2D2B;
  --negro-soft: #46443F;
  --gris-texto: #8C897F;
  --gris-oscuro: #6B6960;
  --blanco: #FFFFFF;

  /* Tipografía */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;

  /* Espaciado de sección */
  --seccion-py: clamp(90px, 10vw, 200px);
  --contenedor-max: 1180px;

  /* Alto del header sticky — se usa para compensar el salto de los anclajes */
  --header-h: 72px;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth; /* navegación suave al hacer click en CTA — no decorativo */
}
body{
  margin:0;
  background: var(--marfil);
  color: var(--negro);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--terracota); color:var(--blanco); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--negro); color:var(--blanco);
  padding:12px 20px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

/* Compensa el header sticky al saltar por anclaje: evita que el título
   de la sección quede tapado por la barra. */
[id]{ scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- 4. UTILIDADES / LAYOUT ---------- */
.contenedor{
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
  display:block;
  margin-bottom: 18px;
}
.regla{
  width: 46px; height: 2px;
  background: var(--verde);
  border:none;
  margin: 24px 0 0;
}
.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--terracota);
  color: var(--blanco);
  border:none;
  padding: 17px 34px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background .2s ease, transform .2s ease;
}
.boton:hover, .boton:focus-visible{ background:#82430f; transform: translateY(-1px); }
.boton img{ width:14px; height:14px; }
.boton-lg{ padding:21px 42px; font-size:15px; }

img[loading="lazy"]{ background: none; } /* placeholder de color mientras carga, evita CLS */

/* ---------- 5. HEADER STICKY + NAVEGACIÓN ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--marfil);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
/* Al scrollear, una línea fina delimita la barra del contenido que pasa debajo.
   Es funcional (separación), no decorativa. */
.site-header.is-scrolled{ border-bottom-color: var(--gris-borde); }

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
}

.site-header__logo{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img{
  width: 168px;
  height: auto;
}

/* --- Navegación --- */
.nav{
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 56px);
  margin-left: auto;
}
.nav__link{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--negro);
  padding: 6px 0;
  position: relative;
  transition: color .2s ease;
}
.nav__link:hover,
.nav__link:focus-visible{ color: var(--terracota); }

/* Estado activo: marca en qué sección está el usuario (scrollspy) */
.nav__link.is-active{ color: var(--terracota); }
.nav__link.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--terracota);
}

/* --- Botón WhatsApp del header --- */
.boton-header{
  flex-shrink: 0;
  padding: 13px 24px;
  font-size: 12px;
}
.boton-header img{ width: 16px; height: 16px; }

/* --- Burger (solo mobile) --- */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--negro);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Bloquea el scroll del fondo mientras el menú mobile está abierto */
body.nav-abierto{ overflow: hidden; }

/* ---------- 6. HERO ---------- */
.hero{
  text-align:center;
  padding: 40px 24px var(--seccion-py);
}
.hero__marca{
  width: 280px;
  height: auto;
  margin: 0 auto 40px;
}
.hero__titulo{
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.08;
  max-width: 900px;
  margin: 0 auto 24px;
  letter-spacing: -0.01em;
}
.hero__titulo .acento{ color: var(--terracota); }
.hero__bajada{
  font-size: 18px;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--negro-soft);
}

/* ---------- 7. MANIFIESTO DEL SUELO ---------- */
.manifiesto{
  background: var(--blanco);
  padding: var(--seccion-py) 24px;
}
.manifiesto__grid{
  display:grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 80px;
}
.manifiesto__titulo{
  font-size: clamp(24px, 2.6vw, 42px);
  line-height:1.2;
  max-width: 300px;
}
.manifiesto__cuerpo{
  border-left: 1px solid var(--gris-borde);
  padding-left: 56px;
}
.manifiesto__cuerpo p{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height:1.6;
  color: var(--negro-soft);
  margin-bottom: 26px;
}
.stat-line{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  margin: 34px 0 40px;
}
.stat .n{
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--terracota);
  display:block;
  margin-bottom:6px;
}
.stat .l{
  font-size: 12.5px;
  color: var(--verde-deep);
  max-width: 150px;
  display:block;
  line-height:1.4;
}
.manifiesto__foto{
  width:100%;
  max-width: 648px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- 8. VIDEO ---------- */
.video-seccion{
  background: var(--blanco);
  padding: 0 24px var(--seccion-py);
  text-align:center;
}
.video-seccion .eyebrow{ text-align:center; }
.video-seccion__titulo{
  font-size: clamp(26px, 3vw, 42px);
  margin-bottom: 44px;
}
.video-frame{
  position:relative;
  max-width: var(--contenedor-max);
  margin: 0 auto;
  border-radius: 6px;
  overflow:hidden;
  cursor:pointer;
  display:block;
  border:none;
  padding:0;
  width:100%;
}
.video-frame img{ width:100%; }
.video-frame:focus-visible{ outline: 3px solid var(--terracota); outline-offset: 3px; }

/* ---------- 9. ARQUITECTURA DE LA VITALIDAD ---------- */
.vitalidad{
  background: var(--marfil);
  padding: var(--seccion-py) 24px;
}
.vitalidad__head{
  max-width: 440px;
  margin: 0 auto 60px;
  text-align:center;
}
.vitalidad__head .eyebrow{ text-align:center; }
.vitalidad__titulo{
  font-size: clamp(26px, 3.2vw, 38px);
  line-height:1.18;
}
.vitalidad__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.vitalidad__foto{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 26px;
}
.vitalidad__item h3{
  font-size: 22px;
  margin-bottom: 14px;
}
.vitalidad__item p{
  font-size: 16px;
  line-height:1.68;
  color: var(--negro-soft);
}

/* ---------- 10. COCINA REAL ---------- */
.cocina{
  background: var(--blanco);
  padding-bottom: var(--seccion-py);
}
.cocina__foto{
  width:100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  margin-bottom: 70px;
}
.cocina__head{ padding: 0 24px; max-width: var(--contenedor-max); margin: 0 auto 50px; }
.cocina__titulo{ font-size: clamp(26px, 3.2vw, 42px); }
.cocina__lista{ padding: 0 24px; max-width: var(--contenedor-max); margin:0 auto; }
.cocina__fila{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--gris-borde);
}
.cocina__lista .cocina__fila:last-child{ border-bottom: 1px solid var(--gris-borde); }
.cocina__fila h3{
  font-style: italic;
  font-weight:500;
  font-size: 20px;
  color: var(--verde-deep);
}
.cocina__fila p{
  font-size: 16px;
  line-height:1.7;
  color: var(--negro-soft);
}

/* ---------- 11. CONFIANZA ---------- */
.confianza{
  background: var(--marfil);
  padding: 80px 24px;
  text-align:center;
}
.confianza__sello{
  width: 176px;
  height:auto;
  margin: 0 auto 22px;
}
.confianza p{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  color: var(--verde-deep);
  max-width: 560px;
  margin: 0 auto;
  line-height:1.5;
}

/* ---------- 12. CONVERSIÓN ---------- */
.conversion{
  background: var(--negro);
  padding: 90px 24px 80px;
  text-align:center;
}
.conversion__badge{
  width: 240px;
  height:auto;
  margin: 0 auto 30px;
}
.conversion__titulo{
  color: var(--blanco);
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 22px;
}
.conversion__texto{
  color: var(--gris-borde);
  font-size: 16px;
  line-height:1.7;
  max-width: 520px;
  margin: 0 auto 36px;
}
.conversion__descriptor{
  margin-top: 18px;
  font-size: 12.5px;
  color: #78766c;
}
.conversion__foot{
  margin-top: 60px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #63615a;
}

/* ---------- 13. WHATSAPP FLOTANTE ---------- */
.whatsapp-flotante{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  background: var(--verde-deep);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  z-index: 999;
  transition: transform .2s ease;
}
.whatsapp-flotante:hover{ transform: scale(1.06); }
.whatsapp-flotante img{ width:24px; height:24px; }

/* ---------- 14. RESPONSIVE — artboard base mobile 390px ---------- */
@media (max-width: 860px){
  :root{
    --seccion-py: clamp(56px, 12vw, 100px);
    --header-h: 60px;
  }

  .manifiesto__grid{ grid-template-columns: 1fr; gap: 36px; }
  .manifiesto__cuerpo{ border-left:none; padding-left:0; border-top:1px solid var(--gris-borde); padding-top:32px; }
  .manifiesto__foto{ max-width:100%; }

  .vitalidad__grid{ grid-template-columns: 1fr; gap:44px; }

  .cocina__fila{ grid-template-columns: 1fr; gap:10px; }

  /* --- Header mobile: logo | [WhatsApp compacto] [burger] --- */
  .site-header__inner{ gap: 10px; }
  .site-header__logo img{ width: 130px; }

  .nav-toggle{ display: flex; }

  /* El botón de WhatsApp queda visible en la barra (fuera del burger):
     el CTA principal nunca se esconde detrás de un tap extra. */
  .boton-header{
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    margin-left: auto; /* agrupa WhatsApp + burger a la derecha */
  }
  .boton-header__texto{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Panel de navegación desplegable */
  .nav{
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--marfil);
    border-bottom: 1px solid var(--gris-borde);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px 24px 24px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.is-open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__link{
    font-size: 20px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(201,198,190,0.5);
  }
  .nav__link:last-child{ border-bottom: none; }
  .nav__link.is-active::after{ display: none; }

  .hero__marca{ width: 110px; margin-bottom: 28px; }

  .whatsapp-flotante{ width:52px; height:52px; right:16px; bottom:16px; }
}

/* Sin JS, el menú mobile queda siempre accesible (progressive enhancement) */
@media (max-width: 860px){
  .no-js .nav{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .no-js .nav-toggle{ display: none; }
}

@media (max-width: 480px){
  .hero__titulo{ font-size: clamp(30px, 8vw, 38px); }
}