/* MBS Semillas Forrajeras · demo de homes · base compartida
   Tipografías: Source Sans (institucional, manual de marca) + Urbanist (títulos) */

@font-face{font-family:"Urbanist";font-weight:200;font-display:swap;src:url("../fonts/urbanist-latin-200-normal.woff2") format("woff2")}
@font-face{font-family:"Urbanist";font-weight:300;font-display:swap;src:url("../fonts/urbanist-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Urbanist";font-weight:400;font-display:swap;src:url("../fonts/urbanist-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Urbanist";font-weight:600;font-display:swap;src:url("../fonts/urbanist-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Urbanist";font-weight:700;font-display:swap;src:url("../fonts/urbanist-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:300;font-display:swap;src:url("../fonts/source-sans-3-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2")}

/* Paleta del manual de marca */
:root{
  --verde:#4c844f;
  --verde-osc:#04592b;
  --negro:#000;
  --arena:#c0a987;
  --gris:#9e978a;
  --oliva:#86896c;
  --blanco:#fff;
  --display:"Urbanist",system-ui,sans-serif;
  --texto:"Source Sans 3",system-ui,sans-serif;
  --gutter:clamp(20px,4.5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--texto);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--arena);outline-offset:4px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Transición suave al cambiar de propuesta (navegadores que la soportan) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* ---------- Selector de propuestas (solo para la demo) ---------- */
.switch{
  position:fixed;z-index:200;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:2px;
  padding:6px;border-radius:999px;
  background:rgba(14,14,14,.86);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  font-family:var(--texto);font-size:14px;white-space:nowrap;
  view-transition-name:switch;
}
.switch-label{padding:0 10px 0 12px;color:rgba(255,255,255,.72)}
.switch-label b{color:#fff;font-weight:600}
.switch a{text-decoration:none;border-radius:999px;transition:background .2s}
.switch-dot{width:34px;height:34px;display:grid;place-items:center;color:rgba(255,255,255,.8)}
.switch-dot:hover{background:rgba(255,255,255,.14);color:#fff}
.switch-dot[aria-current="page"]{background:#fff;color:#000;font-weight:700}
.switch-next{margin-left:6px;padding:8px 16px;background:var(--verde);color:#fff;font-weight:600}
.switch-next:hover{background:#5b9a5f}
@media (max-width:520px){
  .switch{bottom:12px;font-size:13px}
  .switch-label{display:none}
  .switch-dot{width:32px;height:32px}
}
@media print{.switch{display:none}}

/* ---------- Menú en celular (compartido) ---------- */
.menu-btn{display:none;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:8px 2px}
.menu-btn i{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-panel{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gutter);background:var(--verde-osc);color:#fff;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.menu-panel a{font-family:var(--display);font-weight:300;font-size:40px;text-decoration:none;padding:6px 0}
.menu-panel .menu-close{position:absolute;top:22px;right:var(--gutter);font-weight:600;font-size:15px}
.menu-open .menu-panel{opacity:1;visibility:visible}
@media (max-width:900px){.menu-btn{display:inline-flex}}

/* ---------- Revelado al hacer scroll (uso puntual) ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}