/*
Theme Name: Trébole
Theme URI: https://www.biotrebole.com
Author: AZE Digital — Javi Bernad
Author URI: https://javibernad.com
Description: Tema a medida para Trébole (Antonio Ruiz), productor ecológico y biodinámico Demeter desde 1989. Home con slider, galería, bloques de marca y contacto; páginas Quiénes Somos, Contacto y legales. Editable desde el Personalizador. Paleta verde #50c24d y arena #d2b48c, tipografías Lora y Lato.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trebole
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --verde:        #50c24d;   /* verde marca (bloques, sellos, acentos) */
  --verde-oscuro: #3a9438;   /* hover / enlaces */
  --verde-tinta:  #2f6b2c;   /* verde tipográfico profundo */
  --arena:        #d2b48c;   /* bandas hero / amamos la tierra / footer */
  --arena-media:  #c2a274;   /* borde/hover sobre arena */
  --arena-texto:  #9c8153;   /* texto secundario legible sobre blanco */
  --tinta:        #2e2a24;   /* texto principal, negro cálido */
  --tinta-suave:  #56504733; /* divisores */
  --blanco:       #ffffff;
  --crema:        #faf7f2;   /* fondos alternos muy sutiles */

  --fuente-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --fuente-texto:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ancho-texto:  820px;
  --ancho-max:    1240px;
  --radio:        4px;
  --sombra:       0 8px 30px rgba(46,42,36,.10);
  --transicion:   .35s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. RESET SUAVE / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--fuente-texto);
  font-size:18px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--verde-oscuro); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--verde-tinta); }
h1,h2,h3,h4{ font-family:var(--fuente-titulo); font-weight:700; color:var(--tinta); line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:3px solid var(--verde-oscuro); outline-offset:3px; border-radius:2px; }

.contenedor{ width:min(100% - 48px, var(--ancho-max)); margin-inline:auto; }
.seccion{ padding:76px 0; }
.centrado{ text-align:center; }
.oculto{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--verde-oscuro); color:#fff; padding:12px 18px; z-index:1000; }
.skip-link:focus{ left:8px; top:8px; color:#fff; }

/* ============================================================
   3. HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #eee7db;
}
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 0;
}
.header-sellos{ display:flex; align-items:center; gap:16px; }
.header-sellos img{ height:46px; width:auto; }
.header-marca{ justify-self:center; text-align:center; }
.header-marca img{ height:70px; width:auto; margin-inline:auto; }
.header-marca .marca-texto{
  font-family:var(--fuente-titulo); font-size:2rem; color:var(--verde);
  font-style:italic; letter-spacing:.5px;
}
.header-idioma{ justify-self:end; }
.idioma-btn{
  font-family:var(--fuente-texto); font-weight:700; font-size:.9rem;
  color:var(--tinta); letter-spacing:.06em; background:none; border:0; cursor:pointer;
  padding:8px 6px; display:inline-flex; align-items:center; gap:6px;
}
.idioma-btn::before{ content:"▾"; color:var(--verde); font-size:.8em; }

/* navegación */
.nav-principal{ border-top:1px solid #f0eadf; }
.nav-principal ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:center; gap:38px; flex-wrap:wrap;
}
.nav-principal a{
  display:block; padding:14px 2px;
  font-family:var(--fuente-texto); font-weight:700; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta);
  position:relative;
}
.nav-principal a::after{
  content:""; position:absolute; left:0; right:0; bottom:8px; height:2px;
  background:var(--verde); transform:scaleX(0); transform-origin:center;
  transition:transform var(--transicion);
}
.nav-principal a:hover,.nav-principal .current-menu-item a{ color:var(--verde-oscuro); }
.nav-principal a:hover::after,.nav-principal .current-menu-item a::after{ transform:scaleX(1); }

.nav-toggle{ display:none; }

/* ============================================================
   4. SLIDER (HERO)
   ============================================================ */
.hero{ position:relative; }
.slider{
  position:relative; width:100%;
  height:clamp(420px, 74vh, 720px);
  overflow:hidden; background:#e9e3d6;
}
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s ease;
}
.slide.is-active{ opacity:1; visibility:visible; }
.slide img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.slider-flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:64px; border:0; cursor:pointer; z-index:5;
  background:transparent; color:#fff;
  display:grid; place-items:center;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
  transition:transform var(--transicion), opacity var(--transicion);
}
.slider-flecha svg{ width:52px; height:52px; }
.slider-flecha:hover{ transform:translateY(-50%) scale(1.08); }
.slider-flecha.prev{ left:12px; }
.slider-flecha.next{ right:12px; }

.slider-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:5;
  display:flex; justify-content:center; gap:10px;
}
.slider-dots button{
  width:11px; height:11px; border-radius:50%; border:2px solid #fff; cursor:pointer;
  background:transparent; padding:0; transition:background var(--transicion);
}
.slider-dots button[aria-current="true"]{ background:#fff; }

/* banda del claim, fija bajo el slider */
.hero-claim{
  background:var(--arena); color:#fff; text-align:center;
  padding:30px 24px;
}
.hero-claim .desde{
  font-family:var(--fuente-titulo); font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:.02em; color:#fff;
  margin:0 0 .15em;
}
.hero-claim .lema{
  font-family:var(--fuente-texto); font-weight:400;
  font-size:clamp(1.05rem,2.2vw,1.5rem); color:#fff; margin:0;
}

/* ============================================================
   5. INTRO + CITA
   ============================================================ */
.intro{ text-align:center; }
.intro .texto{ max-width:var(--ancho-texto); margin-inline:auto; }
.intro .texto p{ font-size:1.15rem; }
.intro strong{ color:var(--verde-tinta); }
.cita{
  max-width:900px; margin:34px auto 0;
  font-family:var(--fuente-titulo); font-style:italic; font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.15rem); line-height:1.3;
  color:var(--arena-texto);
}

/* ============================================================
   6. GALERÍA (mosaico masonry)
   ============================================================ */
.galeria{ padding-top:8px; }
.galeria-grid{ columns:3; column-gap:20px; }
.galeria-grid figure{ margin:0 0 20px; break-inside:avoid; }
.galeria-grid img{
  width:100%; border-radius:var(--radio);
  box-shadow:0 4px 16px rgba(46,42,36,.12);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.galeria-grid figure:hover img{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(46,42,36,.20); }

/* ============================================================
   7. BLOQUE ARENA — "AMAMOS LA TIERRA"
   ============================================================ */
.bloque-tierra{
  background:var(--arena); text-align:center; color:var(--tinta);
  padding:70px 24px;
}
.bloque-tierra h2{ font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:.04em; margin-bottom:.7em; }
.bloque-tierra .poema{
  font-family:var(--fuente-texto); font-size:1.2rem; line-height:2; margin:0;
  color:#413a2f;
}

/* ============================================================
   8. SELLOS
   ============================================================ */
.sellos{ text-align:center; }
.sellos h2{ color:var(--verde); font-size:clamp(1.6rem,3.4vw,2.1rem); letter-spacing:.05em; margin-bottom:1.4em; }
.sellos-logos{ display:flex; justify-content:center; align-items:center; gap:56px; flex-wrap:wrap; }
.sellos-logos img{ height:118px; width:auto; }

/* ============================================================
   9. CONTACTO (bloque verde)
   ============================================================ */
.bloque-contacto{
  background:var(--verde); color:#fff; text-align:center;
  padding:64px 24px;
}
.bloque-contacto h2{ color:#fff; font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:.03em; margin-bottom:.6em; }
.bloque-contacto .nombre{ font-weight:700; font-size:1.5rem; margin:0 0 .3em; }
.bloque-contacto .telefono{
  display:inline-flex; align-items:center; gap:12px;
  font-size:1.5rem; color:#fff; font-weight:400;
}
.bloque-contacto .telefono:hover{ color:#eafaea; }
.bloque-contacto .telefono svg{ width:30px; height:30px; fill:#fff; }
.bloque-contacto .iconos{ display:inline-flex; gap:10px; align-items:center; }

/* ============================================================
   10. FINANCIACIÓN UE
   ============================================================ */
.financiacion{ text-align:center; padding:56px 24px; background:#fff; }
.financiacion p{ font-weight:700; font-size:1.15rem; margin:0 0 26px; color:var(--tinta); }
.financiacion-logos{ display:flex; justify-content:center; align-items:center; gap:44px; flex-wrap:wrap; }
.financiacion-logos img{ height:64px; width:auto; }
.financiacion .aviso-admin{
  margin-top:18px; font-size:.85rem; font-weight:400; color:#b8860b;
  background:#fff8e6; border:1px dashed #e3c766; border-radius:var(--radio);
  padding:10px 16px; display:inline-block;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer{ background:var(--arena); color:var(--tinta); text-align:center; padding:34px 24px; }
.site-footer .footer-linea{ margin:0; line-height:2; }
.site-footer a{ color:var(--tinta); }
.site-footer a:hover{ color:#fff; }
.site-footer .marca-footer{ font-weight:700; }
.site-footer .sep{ opacity:.5; margin:0 8px; }

/* ============================================================
   12. PÁGINAS INTERNAS (Quiénes somos / Contacto / Legales)
   ============================================================ */
.page-hero{
  background:var(--arena); color:#fff; text-align:center; padding:64px 24px;
}
.page-hero h1{ color:#fff; font-size:clamp(2rem,4.5vw,3rem); margin:0; }
.page-body{ padding:64px 0; }
.page-body .contenido{ max-width:var(--ancho-texto); margin-inline:auto; }
.page-body h2{ color:var(--verde-tinta); font-size:1.6rem; margin-top:1.6em; }
.page-body h3{ font-size:1.25rem; margin-top:1.4em; }
.page-body ul,.page-body ol{ padding-left:1.3em; margin:0 0 1.2em; }
.page-body li{ margin-bottom:.4em; }
.page-body a{ text-decoration:underline; }
.page-body .placeholder{ background:#fff8e6; border:1px dashed #e3c766; padding:1px 6px; border-radius:3px; font-weight:700; color:#a9760a; }

/* tarjeta de contacto */
.contacto-datos{
  display:grid; gap:22px; max-width:560px; margin:36px auto 0; text-align:center;
}
.contacto-item{ padding:24px; border:1px solid #eee2cf; border-radius:8px; background:var(--crema); }
.contacto-item .etiqueta{ font-family:var(--fuente-titulo); color:var(--verde-tinta); font-size:1.1rem; margin-bottom:.2em; }
.contacto-item a{ font-size:1.35rem; font-weight:700; text-decoration:none; }
.btn-whatsapp{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px;
  background:var(--verde); color:#fff!important; padding:14px 26px; border-radius:50px;
  font-weight:700; text-decoration:none!important; transition:background var(--transicion),transform var(--transicion);
}
.btn-whatsapp:hover{ background:var(--verde-oscuro); transform:translateY(-2px); }
.btn-whatsapp svg{ width:22px; height:22px; fill:#fff; }

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .galeria-grid{ columns:2; }
  .sellos-logos img{ height:96px; }
}
@media (max-width:720px){
  body{ font-size:17px; }
  .seccion{ padding:54px 0; }
  .header-inner{ grid-template-columns:auto 1fr auto; gap:10px; }
  .header-sellos img{ height:34px; }
  .header-marca img{ height:50px; }
  .header-marca{ justify-self:start; }

  /* menú colapsable */
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; margin:8px auto; cursor:pointer;
    background:none; border:1px solid #e6ddcd; border-radius:6px; padding:8px 14px;
    font-family:var(--fuente-texto); font-weight:700; letter-spacing:.1em; font-size:.75rem;
    text-transform:uppercase; color:var(--tinta);
  }
  .nav-principal ul{
    flex-direction:column; gap:0; max-height:0; overflow:hidden;
    transition:max-height var(--transicion);
  }
  .nav-principal.abierto ul{ max-height:400px; }
  .nav-principal a{ padding:14px 0; border-bottom:1px solid #f2ecdf; }
  .nav-principal a::after{ display:none; }

  .slider-flecha{ width:48px; height:48px; }
  .slider-flecha svg{ width:38px; height:38px; }
}
@media (max-width:520px){
  .galeria-grid{ columns:1; }
  .sellos-logos{ gap:32px; }
}

/* ============================================================
   14. MOTION / ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .slide{ transition:none; }
}