/* =========================================================
   Abonos y Cereales Vallecillo — Sistema de diseño
   HTML5 estático · sin dependencias externas
   ========================================================= */

:root{
  /* Paleta agrícola */
  --verde:        #2e6b3e;
  --verde-osc:    #234f2e;
  --verde-claro:  #4a8a5a;
  --trigo:        #d7a13b;
  --trigo-claro:  #ecca7d;
  --tierra:       #6b4f3a;
  --crema:        #faf8f3;
  --crema-2:      #f3eee3;
  --linea:        #e4ddce;
  --tinta:        #262521;
  --tinta-suave:  #5c584f;
  --blanco:       #ffffff;

  --sombra-sm: 0 1px 3px rgba(38,37,33,.06), 0 1px 2px rgba(38,37,33,.08);
  --sombra:    0 4px 14px rgba(38,37,33,.08);
  --sombra-lg: 0 18px 40px -12px rgba(35,79,46,.28);

  --radio: 12px;
  --radio-sm: 8px;
  --ancho: 1180px;
  --serif: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --paso: cubic-bezier(.4,.15,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--tinta);
  background:var(--crema);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--verde); text-decoration:none; transition:color .2s var(--paso); }
a:hover{ color:var(--verde-osc); }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--verde-osc); line-height:1.18; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,4.4vw,3.1rem); }
h2{ font-size:clamp(1.55rem,3vw,2.2rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1rem; }
ul{ padding-left:1.15rem; margin:0 0 1rem; }
li{ margin-bottom:.4rem; }
strong{ color:var(--verde-osc); }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }
.seccion{ padding:clamp(3rem,6vw,5.5rem) 0; }
.seccion--crema{ background:var(--crema-2); }
.seccion--verde{ background:var(--verde-osc); color:#eef4ee; }
.seccion--verde h2,.seccion--verde h3{ color:#fff; }
.centrado{ text-align:center; }
.medida{ max-width:66ch; }
.medida.centrado{ margin-inline:auto; }

.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--trigo); margin-bottom:.7rem;
}
.seccion--verde .eyebrow{ color:var(--trigo-claro); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .2s var(--paso), box-shadow .2s var(--paso), background .2s var(--paso);
  line-height:1;
}
.btn--primario{ background:var(--trigo); color:#3a2a06; box-shadow:var(--sombra); }
.btn--primario:hover{ background:var(--trigo-claro); color:#3a2a06; transform:translateY(-2px); box-shadow:var(--sombra-lg); }
.btn--verde{ background:var(--verde); color:#fff; }
.btn--verde:hover{ background:var(--verde-osc); color:#fff; transform:translateY(-2px); }
.btn--linea{ background:transparent; border-color:currentColor; color:var(--verde-osc); }
.btn--linea:hover{ background:var(--verde-osc); color:#fff; }
/* Botón de línea sobre fondos oscuros (hero, CTA final, sección verde): texto/borde en blanco */
.seccion--verde .btn--linea,
.hero .btn--linea,
.cta-final .btn--linea{ color:#fff; border-color:rgba(255,255,255,.7); }
.seccion--verde .btn--linea:hover,
.hero .btn--linea:hover,
.cta-final .btn--linea:hover{ background:#fff; color:var(--verde-osc); border-color:#fff; }

/* ---------- Topbar ---------- */
.topbar{ background:var(--verde-osc); color:#dce8dc; font-size:.85rem; }
.topbar .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px; flex-wrap:wrap; }
.topbar a{ color:#dce8dc; }
.topbar a:hover{ color:#fff; }
.topbar__datos{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.topbar__datos span,.topbar__datos a{ display:inline-flex; align-items:center; gap:.4rem; }
.idiomas{ display:flex; gap:.35rem; align-items:center; }
.idiomas a{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .5rem; border-radius:6px; font-weight:600; font-size:.8rem;
  border:1px solid transparent;
}
.idiomas a.activo{ background:var(--trigo); color:#3a2a06; }
.idiomas a:not(.activo){ border-color:rgba(255,255,255,.25); }
.lang-icon{ width:20px; height:13px; border-radius:2px; display:block; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); }

/* Selector de idioma dentro del menú móvil (oculto en escritorio) */
.nav__idiomas{ display:none; }

/* ---------- Cabecera / nav ---------- */
.cabecera{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--linea); }
.cabecera .contenedor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; }
.logo img{ height:46px; width:auto; }
.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{
  font-family:var(--sans); font-weight:600; color:var(--tinta); font-size:.95rem;
  padding:.55rem .7rem; border-radius:8px; white-space:nowrap;
}
.nav a:hover{ color:var(--verde); background:var(--crema-2); }
.nav a.activo{ color:var(--verde); }
.nav a.activo::after{ content:""; display:block; height:2px; background:var(--trigo); border-radius:2px; margin-top:3px; }
.nav__cta{ margin-left:.5rem; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.menu-btn span{ display:block; width:26px; height:2px; background:var(--verde-osc); margin:5px 0; transition:.25s var(--paso); }

/* ---------- Hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(30,58,36,.92) 0%, rgba(35,79,46,.78) 45%, rgba(35,79,46,.35) 100%); }
.hero__inner{ padding:clamp(3.5rem,9vw,7rem) 0; max-width:640px; }
.hero h1{ color:#fff; }
.hero p{ font-size:1.15rem; color:#eaf2ea; margin-top:1rem; }
.hero__ctas{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem; }

/* ---------- Tiras de confianza ---------- */
.tira{ background:var(--verde); color:#fff; }
.tira .contenedor{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:1.4rem; text-align:center; }
.tira b{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--trigo-claro); }
.tira small{ font-size:.85rem; color:#dcecdc; }

/* ---------- Rejillas ---------- */
.rejilla{ display:grid; gap:1.5rem; }
.rejilla--3{ grid-template-columns:repeat(3,1fr); }
.rejilla--2{ grid-template-columns:repeat(2,1fr); }

/* Tarjetas de servicio */
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra-sm);
  transition:transform .25s var(--paso), box-shadow .25s var(--paso);
  display:flex; flex-direction:column;
}
.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.tarjeta__img{ aspect-ratio:16/9; overflow:hidden; }
.tarjeta__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--paso); }
.tarjeta:hover .tarjeta__img img{ transform:scale(1.05); }
.tarjeta__cuerpo{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.tarjeta__cuerpo h3{ margin-bottom:.4rem; }
.tarjeta__cuerpo p{ color:var(--tinta-suave); font-size:.96rem; flex:1; }
.tarjeta__mas{ font-weight:600; margin-top:.6rem; display:inline-flex; align-items:center; gap:.35rem; }

/* Bloques de característica / confianza */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 2rem; }
.feature{ display:flex; gap:.9rem; }
.feature__ico{ flex:0 0 auto; width:44px; height:44px; border-radius:10px; background:var(--crema-2); display:grid; place-items:center; color:var(--verde); }
.seccion--verde .feature__ico{ background:rgba(255,255,255,.1); color:var(--trigo-claro); }
.feature h3{ font-size:1.05rem; margin-bottom:.2rem; }
.feature p{ font-size:.92rem; color:var(--tinta-suave); margin:0; }
.seccion--verde .feature p{ color:#cddccd; }

/* ---------- Dos columnas texto+imagen ---------- */
.duo{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.duo__img img{ border-radius:var(--radio); box-shadow:var(--sombra); width:100%; height:auto; }
.lista-check{ list-style:none; padding:0; }
.lista-check li{ position:relative; padding-left:1.8rem; margin-bottom:.55rem; }
.lista-check li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--verde); font-weight:700; background:var(--crema-2); width:1.3rem; height:1.3rem; border-radius:50%; display:grid; place-items:center; font-size:.8rem; }
.seccion--verde .lista-check li::before{ background:rgba(255,255,255,.12); color:var(--trigo-claro); }

/* ---------- Breadcrumbs ---------- */
.migas{ background:var(--crema-2); border-bottom:1px solid var(--linea); font-size:.85rem; }
.migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:.7rem 0; margin:0; }
.migas li{ margin:0; color:var(--tinta-suave); }
.migas li+li::before{ content:"›"; margin-right:.4rem; color:var(--linea); }
.migas a{ color:var(--tinta-suave); }
.migas a:hover{ color:var(--verde); }

/* ---------- Página interior: encabezado ---------- */
.page-head{ background:var(--verde-osc); color:#fff; padding:clamp(2.2rem,5vw,3.4rem) 0; }
.page-head h1{ color:#fff; }
.page-head p{ color:#d6e4d6; max-width:60ch; margin:.6rem 0 0; }

/* ---------- CTA final ---------- */
.cta-final{ background:linear-gradient(120deg,var(--verde) 0%, var(--verde-osc) 100%); color:#fff; border-radius:var(--radio); padding:clamp(2rem,5vw,3.2rem); text-align:center; }
.cta-final h2{ color:#fff; }
.cta-final p{ color:#e7f1e7; max-width:60ch; margin-inline:auto; }
.cta-final .hero__ctas{ justify-content:center; }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; }
.datos-contacto li{ list-style:none; display:flex; gap:.7rem; margin-bottom:1rem; align-items:flex-start; }
.datos-contacto{ padding:0; }
.datos-contacto .ico{ color:var(--verde); flex:0 0 auto; margin-top:.15rem; }
.mapa{ aspect-ratio:4/3; background:var(--crema-2); border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea); position:relative; }
.mapa iframe{ width:100%; height:100%; border:0; }
.mapa__placeholder{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; cursor:pointer; padding:1rem; }

/* ---------- Footer ---------- */
.footer{ background:#1f2a20; color:#c2cfc2; font-size:.92rem; padding-top:3rem; }
.footer a{ color:#c2cfc2; }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2rem; padding-bottom:2.5rem; }
.footer h4{ color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.footer ul{ list-style:none; padding:0; }
.footer li{ margin-bottom:.5rem; }
.footer__logo{ height:42px; margin-bottom:1rem; background:#fff; padding:.4rem .6rem; border-radius:8px; display:inline-block; }
.footer__logo img{ height:100%; }
.footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#93a293; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .rejilla--3,.features,.tira .contenedor{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .duo,.contacto-grid{ grid-template-columns:1fr; }
  .duo__img{ order:-1; }
}
@media (max-width:1024px){
  .nav{
    position:fixed; inset:74px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
    padding:1rem 22px 1.6rem; gap:.1rem; border-bottom:1px solid var(--linea); box-shadow:var(--sombra-lg);
    transform:translateY(-140%); transition:transform .3s var(--paso); max-height:calc(100vh - 74px); overflow:auto;
  }
  .nav.abierto{ transform:translateY(0); }
  .nav a{ padding:.8rem .4rem; font-size:1.05rem; border-bottom:1px solid var(--crema-2); }
  .nav a.activo::after{ display:none; }
  .nav__cta{ margin:.6rem 0 0; text-align:center; }
  .menu-btn{ display:block; }
  .menu-btn.activo span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-btn.activo span:nth-child(2){ opacity:0; }
  .menu-btn.activo span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .topbar__datos{ display:none; }
  .nav__idiomas{ display:flex; gap:.6rem; margin-top:.8rem; padding:.9rem .4rem 0; border-top:1px solid var(--crema-2); }
  .nav__idiomas a{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--tinta); font-size:1.05rem; border:0; padding:.2rem 0; }
  .nav__idiomas a.activo{ color:var(--verde); }
  .nav__idiomas a::after{ display:none; }
  .nav__idiomas .lang-icon{ width:26px; height:17px; }
}
@media (max-width:520px){
  .rejilla--3,.rejilla--2,.features,.tira .contenedor,.footer__grid{ grid-template-columns:1fr; }
  body{ font-size:16px; }
}

/* Subenlaces legales del pie */
.footer__sub{ padding-left:.9rem; }
.footer__sub a{ font-size:.9rem; opacity:.85; }

/* ---------- Páginas legales ---------- */
.legal h2{ margin-top:2.4rem; padding-top:.4rem; border-top:1px solid var(--linea); }
.legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal p{ margin-bottom:.9rem; }
.legal ul{ margin:0 0 1rem 1.1rem; }
.legal ul li{ margin-bottom:.35rem; }
.nota-legal{ color:var(--tinta-suave); font-size:.9rem; margin-top:1.8rem; padding:1rem 1.1rem; background:var(--crema-2); border-radius:var(--radio-sm); }

/* ---------- Preguntas frecuentes (FAQ) ---------- */
.faq{ max-width:840px; margin-inline:auto; }
.faq details{ border:1px solid var(--linea); border-radius:var(--radio-sm); background:#fff; margin-bottom:.7rem; box-shadow:var(--sombra-sm); }
.faq summary{ cursor:pointer; padding:1.05rem 1.2rem; font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--verde-osc); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--trigo); line-height:1; flex:0 0 auto; transition:transform .2s var(--paso); }
.faq details[open] summary{ color:var(--verde); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 1.2rem 1.15rem; color:var(--tinta-suave); margin:0; }
.prosa p{ margin-bottom:1rem; }
.prosa p:last-child{ margin-bottom:0; }

/* Accesibilidad */
:focus-visible{ outline:3px solid var(--trigo); outline-offset:2px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } html{ scroll-behavior:auto; } }