/* =========================================================
   VALPA · Hoja de estilos del sitio
   Todas las páginas usan este archivo.
   ========================================================= */

/* ---------- Fuentes (Saira y Barlow, de Google Fonts, guardadas en assets/fonts) ----------
   Están dentro del sitio para que no cambien de tamaño por un instante al pasar de una página a otra. */
@font-face{font-family:"Saira";font-style:normal;font-weight:200 500;font-display:fallback;src:url(../assets/fonts/saira.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:fallback;src:url(../assets/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:fallback;src:url(../assets/fonts/barlow-500.woff2) format("woff2")}

/* =========================================================
   COLORES Y FUENTES — para cambiar colores o fuentes, edita aquí
   ========================================================= */
:root{
  --bg:#fafbf8;            /* Fondo blanco del contenido */
  --bg-2:#eef0eb;
  --surface:#ffffff;
  --field:#ffffff;
  --line:#dde1d8;
  --line-2:#c4cbbf;
  --green:#55693f;         /* Verde de líneas y detalles */
  --green-l:#7a8f5d;
  --green-dark:#2f3a29;    /* Verde oscuro de las bandas de título y el pie */
  --black:#111311;         /* Negro del encabezado */
  --accent:#c07a44;        /* Cobre de botones y líneas */
  --accent-l:#d99464;
  --text:#1c2319;
  --text-2:#454f40;
  --muted:#646e5e;
  --danger:#c4513f;
  --brushed:repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 58%,rgba(255,255,255,0) 80%);
  --metal-green:linear-gradient(180deg,#5b6e4b 0%,#4a5b3e 45%,#3c4a33 100%); /* Bandas de verde metálico */
  --hdr:84px;              /* Alto del encabezado */
  --font-d:"Saira","Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;  /* Títulos */
  --font-b:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;          /* Texto */
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* El sitio se ve igual aunque el equipo esté en modo oscuro */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#fafbf8; --text:#1c2319; } }
:root[data-theme="dark"]{ --bg:#fafbf8; --text:#1c2319; }

/* Zonas en verde metálico: textos y líneas claros */
.tone-green{
  --bg-2:#3f4c36;
  --surface:#4a5a40;
  --field:#2f3a29;
  --line:#66765b;
  --line-2:#7b8b70;
  --text:#f4f6f1;
  --text-2:#dfe5d9;
  --muted:#b9c3b1;
  --accent-l:#eab084;
  --brushed:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.05) 58%,rgba(255,255,255,0) 80%);
  color:var(--text-2);
}
/* Tarjeta blanca dentro de una zona verde */
.tone-light{
  --surface:#ffffff;
  --field:#ffffff;
  --line:#dde1d8;
  --line-2:#c4cbbf;
  --text:#1c2319;
  --text-2:#454f40;
  --muted:#646e5e;
  --accent-l:#c07a44;
  color:var(--text-2);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--brushed),var(--bg);color:var(--text-2);font-family:var(--font-b);font-weight:400;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:var(--accent-l)}
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px}
h1,h2,h3{font-family:var(--font-d);font-weight:500;color:var(--text);line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-b);font-weight:500;font-size:1rem;letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;padding:16px 30px;color:#17110c;background:var(--accent);transition:background .2s,color .2s,box-shadow .2s}
.btn:hover{background:var(--accent-l)}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{background:transparent;color:var(--accent-l);box-shadow:inset 0 0 0 1px var(--accent)}

/* ---------- Encabezado (fijo arriba, siempre verde oscuro) ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),var(--black);border-bottom:1px solid #2a2d29;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:50px;height:50px;flex:none}
.logo-word{font-family:var(--font-d);font-weight:500;font-size:2rem;letter-spacing:.22em;color:var(--text)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{font-weight:400;font-size:1.1rem;color:var(--text-2);text-decoration:none;padding:8px 16px;position:relative}
.nav a:hover{color:var(--text)}
.nav a{white-space:nowrap}
/* Pantallas medianas: menú un poco más compacto para que quepa en una línea */
@media (max-width:1020px) and (min-width:901px){ .nav a{padding:8px 10px} .nav .btn{margin-left:8px;padding:12px 16px} .nav a[aria-current="page"]::after{left:10px;right:10px} }
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--accent)}
.nav .btn{margin-left:14px;padding:13px 24px;font-size:1.08rem;color:#17110c}
.nav .btn:hover{color:#17110c}
.hdr-cta{display:none}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--text);width:46px;height:46px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px auto}
/* Menú en celular y tableta */
@media (max-width:900px){
  :root{--hdr:70px}
  .hdr .nav{background:var(--black)}
  .menu-btn{display:block;margin-left:0}
  .hdr-cta{display:inline-flex;margin-left:auto;padding:0 18px;height:46px;font-size:1rem;color:#17110c}
  .hdr-in{gap:12px}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 24px;display:none}
  .nav.open{display:flex}
  .hdr:has(.nav.open){background:var(--black)}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]::after{left:0;right:auto;width:28px;bottom:10px}
  .nav .btn{margin:18px 0 0;padding:16px}
}
@media (max-width:420px){
  .hdr .logo{gap:8px}
  .hdr .logo svg{width:40px;height:40px}
  .hdr .logo-word{font-size:1.55rem;letter-spacing:.16em}
  .hdr-cta{padding:0 14px}
}

/* ---------- Páginas: espacio para el encabezado fijo ---------- */
.page:not(#page-inicio){padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}

/* ---------- Portada con video (Inicio) ---------- */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:var(--brushed),var(--sheen),radial-gradient(70% 60% at 50% 40%,#56654d 0%,#3a4536 60%,#2a3227 100%);padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Capa oscura sobre el video */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(24,30,23,.62) 0%,rgba(24,30,23,.38) 45%,rgba(24,30,23,.6) 100%)}
.hero-copy{position:relative;z-index:1;padding:0 24px}
.hero h1{font-size:clamp(3rem,8.4vw,8rem);font-weight:500;letter-spacing:-.02em;line-height:.98}
.hero .sep{width:72px;height:1px;background:var(--accent);margin:34px auto 30px}
.hero .sub{font-family:var(--font-d);font-weight:400;font-size:clamp(1.15rem,2.2vw,1.75rem);letter-spacing:.14em;color:var(--text);margin:0}
.hero .tagline{font-weight:400;font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--text-2);margin:18px 0 0}
.hero-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.hero-acts .btn-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
@media (max-width:600px){ .hero-acts{flex-direction:column;align-items:stretch;max-width:320px;margin:30px auto 0} }
.hero-cue{position:absolute;z-index:1;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:1px;height:56px;background:linear-gradient(var(--accent),transparent)}

/* ---------- Secciones ---------- */
.sec{padding:140px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:72px}
.sec-head h2{font-size:clamp(2.8rem,5.6vw,5.2rem)}
.sec-head h2::before{content:"";display:block;width:56px;height:3px;background:var(--green);margin-bottom:28px}
.tone-green .sec-head h2::before{background:var(--accent)}
.sec-head p{font-size:1.25rem;font-weight:400;color:var(--text-2);max-width:46ch;margin:0}
@media (max-width:900px){ .sec{padding:96px 0} .sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:48px} }

/* ---------- Espacio para foto (muestra un recuadro si la foto no existe) ---------- */
.media{position:relative;overflow:hidden;margin:0;background:
  repeating-linear-gradient(135deg,rgba(60,74,51,.06) 0 1px,transparent 1px 12px),linear-gradient(160deg,#f3f5f0,#e6eae2);
  border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--muted);font-size:.92rem}
.media .ph svg{width:34px;height:34px;opacity:.7}
.media .ph code{font-family:var(--font-b);font-size:.8rem;color:var(--muted);opacity:.75}
.media.loaded{border-color:transparent}
.media.loaded .ph{display:none}

/* ---------- Servicios ---------- */
.services{display:grid;grid-template-columns:1fr 1fr;gap:72px 48px}
.svc .media{aspect-ratio:16/10;border-bottom:4px solid var(--green)}
.svc-wide{grid-column:1/-1;justify-self:center;width:calc(50% - 24px)}   /* tarjeta sin pareja: mismo tamaño que las demás, centrada */
@media (max-width:900px){ .svc-wide{width:auto;justify-self:stretch} }
.svc-body{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;padding-top:28px;border-top:1px solid transparent}
.svc h3{font-size:clamp(1.9rem,3vw,2.6rem);grid-column:1/-1}
.svc p{grid-column:1/-1;font-size:1.05rem;font-weight:400;color:var(--text-2);max-width:48ch;margin:12px 0 0}
@media (max-width:900px){ .services{grid-template-columns:1fr;gap:56px} }

/* ---------- Cotización ---------- */
.quote{background:var(--brushed),var(--sheen),var(--metal-green);border-top:1px solid var(--line)}
.steps{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid var(--line-2);padding-top:20px}
.steps li::before{content:counter(s);display:block;font-family:var(--font-d);font-weight:500;font-size:2.6rem;line-height:1;color:var(--accent);margin-bottom:14px}
.steps strong{display:block;font-family:var(--font-d);font-weight:500;font-size:1.25rem;color:var(--text)}
.steps span{color:var(--muted);font-size:1.05rem;font-weight:400}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;gap:28px 20px} }

/* Formulario */
.qform{background:var(--surface);box-shadow:0 24px 60px rgba(15,20,12,.28);border:1px solid var(--line);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.qform .full{grid-column:1/-1}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fgroup > label,.fgroup > .lbl{font-weight:500;font-size:.98rem;color:var(--text);letter-spacing:.01em}
.opt{color:var(--muted);font-weight:400}
.help{font-size:.95rem;color:var(--muted);margin:0;font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{width:100%;font:inherit;font-size:1rem;font-weight:400;color:var(--text);background:var(--field);border:1px solid var(--line-2);padding:14px 16px;border-radius:0;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:#9aa395}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:140px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Sugerencias de correo al escribir @ */
/* Teléfono: el +52 va fijo al inicio y el cliente escribe sus 10 dígitos */
.tel{position:relative}
.tel-pre{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.tel input{padding-left:56px}
.ac{position:relative}
.ac-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin:-1px 0 0;padding:6px 0;list-style:none;background:var(--field);border:1px solid var(--accent);border-top-color:var(--line);box-shadow:0 14px 30px rgba(15,20,12,.18);max-height:min(300px,50vh);overflow-y:auto}
.ac-list[hidden]{display:none}
.ac-list li{padding:11px 16px;font-size:1rem;color:var(--text-2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
.ac-list li b{font-weight:500;color:var(--text)}
.ac-list li:hover,.ac-list li[aria-selected="true"]{background:#f8efe7;box-shadow:inset 3px 0 0 var(--accent)}
.ac:has(.ac-list:not([hidden])) input{border-color:var(--accent)}
.ac-fix{margin:0;font-size:.95rem;color:var(--text-2)}
.ac-fix[hidden]{display:none}
.ac-fix button{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){ .ac-list li{padding:14px 16px} }
/* Botones de selección de servicio */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:10px 18px;border:1px solid var(--line-2);color:var(--text-2);font-size:.97rem;cursor:pointer;transition:.15s}
.chip input:checked + span{border-color:var(--accent);color:var(--text);background:rgba(200,131,78,.12)}
.chip input:focus-visible + span{outline:2px solid var(--accent-l);outline-offset:2px}
.check{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:1rem;font-weight:400;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
/* Zona para arrastrar archivos */
.drop{border:1px dashed var(--line-2);background:#f3f5f0;padding:44px 24px;text-align:center;cursor:pointer;transition:.2s}
.drop:hover,.drop.over{border-color:var(--accent);background:#f8efe7}
.drop svg{width:40px;height:40px;margin:0 auto 12px}
.drop strong{display:block;font-family:var(--font-d);font-weight:500;font-size:1.4rem;color:var(--text)}
.drop p{color:var(--text-2);font-weight:400;margin:8px auto 0;max-width:62ch;font-size:1.05rem}
.drop .types{font-size:.85rem;margin-top:14px;color:var(--muted)}
/* Lista de archivos subidos */
.files{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.files li{display:flex;align-items:center;gap:12px;background:var(--field);border:1px solid var(--line);padding:10px 14px;font-size:.95rem}
.files .ext{font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--field);background:var(--muted);padding:3px 8px;min-width:50px;text-align:center}
.files .ext.cad{background:var(--accent-l)}
.files .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.files .sz{color:var(--muted);font-size:.85rem}
.files button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.3rem;line-height:1;padding:2px 6px}
.files button:hover{color:var(--danger)}
.files li.warn{border-color:var(--danger)}
/* Campo trampa contra robots (oculto para las personas) */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Mensajes de error */
/* Campos opcionales: en celular se agrupan en "Más detalles"; en compu se ven siempre */
.more{min-width:0}
.more *{box-sizing:border-box}   /* dentro de details no se hereda */
.more-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 32px}
.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:500;font-size:.98rem;color:var(--text);padding:14px 16px;border:1px dashed var(--line-2)}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";font-size:1.3rem;line-height:1;color:var(--accent);width:14px}
.more[open] summary::before{content:"−"}
.more[open] summary{margin-bottom:28px}
@media (min-width:901px){ .more summary{display:none} }
@media (max-width:900px){ .more-in{grid-template-columns:minmax(0,1fr)} }
/* Aviso "copiado" al tocar teléfono o correo en compu */
.copiado{position:fixed;z-index:80;left:50%;bottom:32px;transform:translateX(-50%);background:var(--black);color:#f4f6f1;font-size:.98rem;padding:12px 20px;box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .2s}
.copiado.show{opacity:1}
.err{color:var(--danger);font-size:.88rem;margin:0}
.err:empty{display:none}
.invalid{border-color:var(--danger)!important}
.qfoot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
.qfoot p{margin:0;color:var(--muted);font-size:1rem;font-weight:400;flex:1;min-width:240px}
.qfoot p a{color:inherit}
.qfoot p a:hover{color:var(--accent)}
/* Tarjeta que aparece después de enviar */
.result{background:var(--surface);box-shadow:0 24px 60px rgba(15,20,12,.28);border:1px solid var(--line);padding:56px;display:none}
.result.show{display:block}
.result h3{font-size:2.4rem;margin-bottom:14px}
.result p{color:var(--text-2);font-weight:400;max-width:62ch}
.result .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
@media (max-width:900px){ .qform{grid-template-columns:1fr;padding:30px 22px} .result{padding:30px 22px} }

/* ---------- Banda de título de las páginas internas ---------- */
.page-hero{padding:110px 0 80px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),var(--green-dark)}
.page-hero h1{font-size:clamp(3rem,7vw,6.4rem);font-weight:500;max-width:16ch}
.page-hero h1::before{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-bottom:28px}
.page-hero p{font-size:1.2rem;font-weight:400;max-width:56ch;margin:28px 0 0}
@media (max-width:900px){ .page-hero{padding:72px 0 56px} }
/* Banda de título con la misma altura en todas las páginas, aunque el texto ocupe menos renglones
   (espacio para: línea cobre + título en 1 renglón + texto en 2 renglones) */
.page-hero .wrap{min-height:calc(31px + 1.05 * clamp(3rem,7vw,6.4rem) + 28px + 2 * 1.65 * 1.2rem)}
/* En celular el título puede ocupar 2 renglones: se deja ese espacio */
@media (max-width:600px){ .page-hero .wrap{min-height:calc(31px + 2 * 1.05 * clamp(3rem,7vw,6.4rem) + 28px + 2 * 1.65 * 1.2rem)} }
/* Banda con foto de fondo (Quiénes somos): misma altura que las demás bandas, oscurecida para leer el texto */
.page-hero.has-photo{background:linear-gradient(180deg,rgba(17,19,17,.25) 0%,rgba(17,19,17,.55) 55%,rgba(28,35,25,.92) 100%),url(../assets/img/historia/taller.jpg) center 55%/cover var(--green-dark)}
.page-hero.has-photo h1{text-shadow:0 2px 18px rgba(0,0,0,.4)}

/* ---------- Productos ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.prod .media{aspect-ratio:1/1}
/* Aviso "Próximamente" mientras no hay productos (ocupa el lugar de dos productos) */
.proximamente{grid-column:span 2;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;justify-content:center;min-height:320px;border:1px solid var(--line);background:var(--bg-2);padding:40px}
.proximamente p{margin:0;font-family:var(--font-d);font-weight:500;font-size:clamp(2.6rem,6vw,5.5rem);letter-spacing:-.01em;color:var(--accent);text-align:center}
.proximamente span{font-size:clamp(1rem,1.6vw,1.25rem);color:var(--text)}
.prod .tag{display:inline-block;font-size:.85rem;color:var(--accent-l);margin:24px 0 8px}
.prod h3{font-size:2rem}
.prod p{font-weight:400;margin:10px 0 0}
/* Tarjeta de venta por volumen */
.prod-cta{border:1px solid var(--line);padding:40px;display:flex;flex-direction:column;justify-content:center;background:var(--brushed),var(--sheen),var(--metal-green)}
.prod-cta h3{font-size:2rem;margin-bottom:14px}
.prod-cta p{font-weight:400}
.prod-cta .btn{margin-top:18px;align-self:flex-start}
@media (max-width:980px){ .prods{grid-template-columns:1fr 1fr} }
@media (max-width:980px) and (min-width:641px){ .proximamente{grid-column:1/-1} }
@media (max-width:640px){ .prods{grid-template-columns:minmax(0,1fr)} .proximamente{grid-column:auto;min-height:220px;padding:32px 20px} .proximamente p{font-size:2.2rem} }

/* ---------- Quiénes somos ---------- */
/* En computadora la foto mide lo mismo de alto que la línea de tiempo (se recorta el techo, no los pies) */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:stretch;margin-top:56px}
.story .media{margin:0}
.story .media img{object-position:50% 85%}
.story .timeline{margin:0}
.story-text p{font-size:1.2rem;font-weight:400;color:var(--text-2)}
.story-text p:first-child{font-size:1.4rem;color:var(--text);font-family:var(--font-d);font-weight:400;line-height:1.45}
/* Línea de tiempo */
.timeline{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.timeline .yr{font-family:var(--font-d);font-weight:500;font-size:1.5rem;color:var(--accent);line-height:1.2}
.timeline h3{font-size:1.35rem;font-weight:500;margin-bottom:4px}
.timeline p{margin:0;color:var(--text-2);font-weight:400;font-size:1.05rem}
/* Valores */
.values{list-style:none;margin:96px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.values li::before{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-bottom:24px}
.values h3{font-size:1.8rem;font-weight:500;margin-bottom:10px}
.values p{margin:0;color:var(--text-2);font-weight:400;font-size:1.1rem}
@media (max-width:900px){ .values{grid-template-columns:1fr;gap:36px;margin-top:72px} }
.note{margin-top:40px;padding:14px 18px;border:1px dashed var(--line-2);color:var(--muted);font-size:.9rem}
@media (max-width:900px){ .story{grid-template-columns:1fr;gap:48px;align-items:start} .story .media{aspect-ratio:3/4;width:100%} .timeline li{grid-template-columns:1fr;gap:6px} }

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.cinfo dl{margin:0}
.cinfo .item{padding:28px 0;border-top:1px solid var(--line)}
.cinfo .item:last-child{border-bottom:1px solid var(--line)}
.cinfo dt{font-size:.92rem;color:var(--muted);margin-bottom:6px}
.cinfo dd{margin:0;overflow-wrap:anywhere;font-family:var(--font-d);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--text);line-height:1.3}
.cinfo dd a{color:var(--text);text-decoration:none}
.cinfo .zona{margin:10px 0 0;font-family:inherit;line-height:inherit;color:var(--muted);font-weight:400;font-size:1rem}
.cinfo dd a:hover{color:var(--accent-l)}
/* Recuadro del mapa */
.map{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:30px;border:1px solid var(--line);background:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),var(--sheen),var(--metal-green);background-size:36px 36px,36px 36px,auto,auto}
.map svg{width:44px;height:44px}
.map p{margin:0;color:var(--text-2);font-weight:400;max-width:34ch}
/* Mapa incrustado: llena el recuadro; el botón va debajo */
.map-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.map-embed{width:100%;padding:0;position:relative;overflow:hidden}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:900px){ .contact{grid-template-columns:1fr;gap:40px} }

/* ---------- Pie de página ---------- */
.ftr{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),var(--green-dark);border-top:1px solid var(--line);padding:72px 0 36px}
.ftr-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.ftr p{color:var(--muted);font-size:1rem;font-weight:400;max-width:36ch;margin-top:18px}
.ftr h2{line-height:inherit;letter-spacing:normal;font-family:var(--font-b);font-weight:500;font-size:.95rem;color:var(--text);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:2px 0}
.ftr li a{display:inline-block;padding:6px 0;color:var(--muted);text-decoration:none;font-weight:400}  /* área de toque cómoda en celular */
.ftr li a:hover{color:var(--accent-l)}
.ftr .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;margin-top:12px;color:var(--muted);font-size:.9rem;font-weight:400}
@media (max-width:760px){ .ftr-in{grid-template-columns:1fr} .ftr .copy a{display:block;margin:6px 0 0} }
.ftr .copy{max-width:none}
.ftr .copy a{color:var(--muted);margin-left:14px;white-space:nowrap}
.ftr .copy a:hover{color:var(--accent-l)}

/* ---------- Botones flotantes de WhatsApp, Facebook e Instagram ---------- */
.wa-float{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:54px;height:54px;display:grid;place-items:center;background:var(--green);border:1px solid var(--green-l);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.wa-float svg{width:26px;height:26px}
/* Facebook: mismo botón, encima del de WhatsApp */
.fb-float{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
/* Instagram: encima del de Facebook */
.ig-float{bottom:calc(154px + env(safe-area-inset-bottom,0px))}

/* ---------- Transición suave al cambiar de página ----------
   El contenido se desvanece de una página a otra, y el encabezado y el botón
   de WhatsApp se quedan fijos. Funciona en Chrome, Edge y Safari con el sitio
   publicado; en otros navegadores la página cambia normal, sin transición. */
@view-transition{ navigation:auto; }
.hdr{ view-transition-name:encabezado; }
.wa-float{ view-transition-name:whatsapp; }
.fb-float{ view-transition-name:facebook; }
.ig-float{ view-transition-name:instagram; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.35s; animation-timing-function:ease; }

/* Sin animaciones para quien las tiene desactivadas en su equipo */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  @view-transition{ navigation:none; }
}

/* ---------- Aviso de privacidad ---------- */
.legal>*{max-width:760px}
.legal h2{font-size:clamp(1.6rem,3vw,2rem);margin:48px 0 14px}
.legal p,.legal li{font-size:1.1rem}
.legal ul{margin:0 0 1em;padding-left:1.3em}
.legal li{margin:4px 0}
.legal li::marker{color:var(--accent)}
.legal-fecha{color:var(--muted);font-size:1rem!important}
.legal-ok{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}