/* ==========================================================================
   La Diligencia Catering — rediseño (tema claro)
   Identidad de marca extraida del logotipo oficial (Logo-LDC-3736091.png):
     indigo  #392cad  66,6% de la tinta del logo  -> color primario (titulares)
     turquesa #00d4c5 22,5% de la tinta del logo  -> color de acento (grafico)
   El turquesa vivo no tiene contraste suficiente como texto sobre blanco
   (1,87:1): para texto se usa --accent-ink, un turquesa profundo derivado.
   Tipografia real del sitio original: Montserrat (400/600/700)
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root{
  color-scheme:light;

  /* -- identidad de marca (medidas sobre el logotipo) -- */
  --brand:#392cad;
  --brand-lt:#6f66d6;

  --accent:#00d4c5;          /* turquesa vivo: marcos, botones, animacion */
  --accent-ink:#00766e;      /* turquesa profundo: texto/acento AA sobre claro */
  --accent-bright:#4fe9dd;   /* turquesa claro: hovers graficos */

  /* -- texto oscuro fijo sobre acento vivo (botones) -- */
  --on-accent:#0a0c1e;

  /* -- fondos claros -- */
  --bg:#ffffff;
  --bg-2:#f7f7fc;
  --bg-3:#f0f0f9;
  --bg-4:#e9e9f7;

  /* -- texto sobre fondos claros -- */
  --text:#12103a;
  --text-2:#2a2757;
  --text-dim:#4d4a72;
  --text-faint:#66638e;

  /* -- texto sobre fotografias y velos oscuros -- */
  --on-media:#ffffff;
  --on-media-dim:rgba(255,255,255,.82);
  --media-scrim:rgba(18,16,58,.9);

  /* -- superficies claras (logotipo, mural de clientes) -- */
  --paper:#f4f2ee;
  --paper-2:#e6e3f0;

  --line:rgba(18,16,58,.14);
  --line-strong:rgba(18,16,58,.52);
  --line-2:rgba(18,16,58,.07);

  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(1.25rem,4vw,3.5rem);
  --maxw:1240px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --nav-h:74px;
}

/* --------------------------------------------------------- 2. Base / reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:clamp(1rem,.96rem + .18vw,1.09rem);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,figure,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:var(--on-accent);padding:.75rem 1.25rem;font-weight:600;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* -------------------------------------------------------- 3. Tipografía UI */
.eyebrow{
  margin:0 0 1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);font-family:var(--f-sans);
}
.eyebrow--accent{color:var(--accent-ink)}

.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2rem,1.25rem + 3.3vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.028em;
  color:var(--brand);
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.02rem,.97rem + .4vw,1.2rem);
  color:var(--text-dim);
  max-width:62ch;
  line-height:1.72;
}
.lede strong{color:var(--text);font-weight:500}

.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:74ch}
.sec-head--center{text-align:center;margin-inline:auto;max-width:64ch}
.sec-head--center .lede{margin-inline:auto}
.sec-head .h2{margin-bottom:1.15rem}

/* --------------------------------------------------------------- 4. Botones */
.btn{
  --bw:1px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95rem 1.9rem;border:var(--bw) solid transparent;border-radius:100px;
  font-size:.92rem;font-weight:500;letter-spacing:.03em;
  cursor:pointer;background:none;
  transition:transform .35s var(--ease),background-color .3s,border-color .3s,color .3s,box-shadow .35s;
}
.btn:active{transform:scale(.98)}
.btn--accent{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600;
  box-shadow:0 6px 18px -6px rgba(0,212,197,.38);
}
.btn--accent:hover{
  background:var(--accent-bright);border-color:var(--accent-bright);
  transform:translateY(-2px);
  box-shadow:0 14px 34px -8px rgba(0,212,197,.55);
}
.btn--ghost{
  border-color:var(--line-strong);color:var(--text);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  border-color:var(--brand);color:var(--brand);
  background:rgba(57,44,173,.05);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(57,44,173,.18);
}
.btn--full{width:100%}

/* --------------------------------------------------------- 5. Reveal scroll
   Todo el sistema de animacion se activa solo con la clase html.js (que el
   propio head anade de forma sincrona), de modo que sin JavaScript el
   contenido permanece visible. */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .reveal--left{transform:translateX(-36px)}
html.js .reveal--right{transform:translateX(36px)}
html.js .reveal.is-in.reveal--left,
html.js .reveal.is-in.reveal--right{transform:none}
html.js .reveal--mask{
  opacity:0;transform:translateY(18px);
  clip-path:inset(0 0 15% 0);
  transition:opacity .8s var(--ease),transform .8s var(--ease),clip-path .95s var(--ease);
}
html.js .reveal--mask.is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html.js .reveal,
  html.js .reveal--mask{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ================================================================ 6. Nav */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  background:transparent;
  transition:background-color .45s var(--ease),border-color .45s,backdrop-filter .45s,box-shadow .45s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line-2);
  box-shadow:0 4px 20px -8px rgba(18,16,58,.06);
}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:.8rem var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  min-height:var(--nav-h);
}
.nav__brand{display:flex;align-items:center;flex-shrink:0}
.nav__badge{
  display:inline-flex;align-items:center;
  background:var(--paper);padding:.45rem .8rem;border-radius:10px;
  border:1px solid rgba(18,16,58,.1);
  box-shadow:0 2px 8px -3px rgba(18,16,58,.08);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.nav__badge:hover{
  transform:translateY(-2px);
  border-color:rgba(0,212,197,.4);
  box-shadow:0 10px 24px -8px rgba(18,16,58,.16);
}
.nav__badge img{width:118px;height:auto;display:block}

.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);margin-left:auto}
.nav__links a{
  position:relative;font-size:.88rem;font-weight:500;letter-spacing:.02em;
  color:var(--text-dim);padding:.4rem 0;
  transition:color .25s ease;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--accent-ink),var(--accent));
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  color:#ffffff!important;
  background:linear-gradient(135deg,var(--brand) 0%,#2d2194 100%)!important;
  padding:.55rem 1.25rem!important;border-radius:100px;font-weight:600!important;
  box-shadow:0 6px 16px -6px rgba(57,44,173,.35)!important;
  transition:all .35s var(--ease)!important;
}
.nav__cta::after{display:none}
.nav__cta:hover{
  background:var(--accent)!important;color:var(--on-accent)!important;
  box-shadow:0 10px 24px -6px rgba(0,212,197,.5)!important;
  transform:translateY(-2px)!important;
}

.nav__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.86rem;letter-spacing:.05em;color:var(--accent-ink);font-weight:600;
  white-space:nowrap;padding:.4rem .85rem;border-radius:100px;
  background:rgba(0,118,110,.06);border:1px solid rgba(0,118,110,.14);
  transition:all .3s ease;
}
.nav__tel::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 2px rgba(0,212,197,.3);
  animation:telPulse 2.4s infinite ease-in-out;
}
@keyframes telPulse{
  0%,100%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(0,212,197,.5)}
  50%{transform:scale(1.2);opacity:.8;box-shadow:0 0 0 4px rgba(0,212,197,0)}
}
.nav__tel:hover{
  background:rgba(0,118,110,.12);
  border-color:var(--accent-ink);
  color:var(--accent-ink);
  transform:translateY(-1px);
}

.nav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;margin-left:auto;
  background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
}
.nav__toggle span{display:block;width:18px;height:1.5px;background:var(--brand);margin-inline:auto;transition:transform .35s var(--ease),opacity .25s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ================================================================ 7. Hero
   Titular y textos sobre fondo de marca solido: nunca se superponen a una
   fotografia, de modo que la legibilidad esta garantizada por construccion.
   La imagen ocupa su propio panel a la derecha, sin texto encima. */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  min-height:min(100svh,920px);min-height:min(100vh,920px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav-h);
  background:
    radial-gradient(ellipse 70% 55% at 88% 28%, rgba(0,212,197,.08) 0%, rgba(57,44,173,.035) 45%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 12% 18%, rgba(57,44,173,.03) 0%, transparent 60%),
    var(--bg);
}
.hero__grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2.5rem,7vh,5rem) var(--pad) clamp(1.75rem,4vh,3rem);
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(1.75rem,4vw,4.25rem);
  align-items:center;
}
.hero__body{min-width:0}
.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.05rem,1.1rem + 4.9vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--brand);
  margin:0 0 clamp(1.1rem,2.6vw,1.7rem);
  text-wrap:balance;
}
.hero__title em{
  font-style:italic;color:var(--accent-ink);font-weight:700;
  position:relative;
  display:inline-block;
}
.hero__title em::after{
  content:"";position:absolute;left:0;bottom:3px;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent);
  border-radius:2px;opacity:.65;
}
.hero__lede{
  max-width:54ch;
  font-size:clamp(1rem,.96rem + .45vw,1.18rem);
  line-height:1.7;color:var(--text-dim);
  margin-bottom:clamp(1.5rem,3.5vw,2.25rem);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem}

.hero__figure{position:relative;margin:0;min-width:0}
.hero__figure img{
  width:100%;height:clamp(300px,54vh,540px);
  object-fit:cover;object-position:center 42%;
  border-radius:var(--r);
  border:1px solid rgba(18,16,58,.1);
  box-shadow:0 24px 60px -20px rgba(18,16,58,.16), 0 4px 14px -3px rgba(18,16,58,.06);
  transition:transform .9s var(--ease),box-shadow .9s var(--ease);
}
.hero__figure:hover img{
  transform:scale(1.015);
  box-shadow:0 30px 70px -20px rgba(18,16,58,.22), 0 6px 18px -4px rgba(0,212,197,.15);
}
.hero__cap{
  margin-top:.8rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;
}
.hero__cap::before{
  content:"";display:inline-block;width:26px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:.6rem;
}

.hero__rail{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);margin:clamp(1.5rem,3.5vh,2.5rem) auto 0;
  padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(18,16,58,.08);
  border-radius:calc(var(--r) + 2px);
  overflow:hidden;
  border:1px solid rgba(18,16,58,.08);
  box-shadow:0 12px 32px -14px rgba(18,16,58,.08);
}
.rail__item{
  display:flex;flex-direction:column;gap:.25rem;
  padding:1.4rem clamp(.8rem,1.8vw,1.6rem) 1.25rem;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(247,247,252,.92) 100%);
  backdrop-filter:blur(12px);
  transition:background .35s,transform .35s var(--ease);
}
.rail__item:hover{
  background:linear-gradient(180deg,#ffffff 0%,var(--bg-3) 100%);
}
.rail__n{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.75rem,1rem + 2.4vw,3.1rem);line-height:1;
  color:var(--accent-ink);letter-spacing:-.03em;
  font-feature-settings:"tnum";
}
.rail__n--txt{font-size:clamp(1.5rem,.9rem + 2vw,2.7rem)}
.rail__l{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;
}

@media (max-width:900px){
  .hero{min-height:auto;justify-content:flex-start}
  .hero__grid{
    grid-template-columns:1fr;
    gap:clamp(1.25rem,3vw,1.75rem);
    padding-top:clamp(1.75rem,5vh,3rem);
    padding-bottom:0;
  }
  .hero__lede{margin-bottom:clamp(1.25rem,3vw,1.75rem)}
  .hero__figure img{height:clamp(200px,32vh,290px)}
  .hero__cap{margin-top:.6rem}
  .hero__rail{
    grid-template-columns:repeat(2,1fr);
    margin:clamp(1.25rem,3vw,1.75rem) auto 0;
    padding-bottom:clamp(1.5rem,3.5vh,2.25rem);
  }
  .rail__item{padding:1.1rem clamp(.6rem,1.8vw,1.2rem) 1.1rem}
}

/* ========================================================= 8. Autoridad */
.authority{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.authority__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.authority__head .h2{margin-bottom:1.4rem;max-width:16ch}

.factgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(18,16,58,.08);border:1px solid rgba(18,16,58,.08);border-radius:var(--r);overflow:hidden;
  box-shadow:0 12px 30px -14px rgba(18,16,58,.07);
}
.fact{
  position:relative;
  background:var(--bg-2);
  padding:clamp(1.5rem,2.8vw,2.3rem);
  display:flex;flex-direction:column;gap:.35rem;
  transition:background-color .35s,transform .35s var(--ease),box-shadow .35s;
}
.fact::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.fact:hover{
  background:#ffffff;
  z-index:2;
  box-shadow:0 14px 30px -12px rgba(18,16,58,.1);
}
.fact:hover::after{transform:scaleX(1)}
.fact__n{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.4rem,1.4rem + 3vw,4rem);line-height:.95;
  color:var(--text);letter-spacing:-.035em;
  font-feature-settings:"tnum";
}
.fact__n--sm{
  font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);line-height:1.2;
  color:var(--accent-ink);font-style:italic;
}
.fact__u{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;
}
.fact__d{font-size:.9rem;color:var(--text-faint);line-height:1.55;margin-top:.35rem}

/* ========================================================== 9. Clientes */
.clients{
  padding:clamp(3.5rem,7vw,6rem) 0;
  background:
    radial-gradient(circle at 50% 0,rgba(57,44,173,.03) 0%,transparent 65%),
    var(--bg-2);
  border-block:1px solid var(--line-2);
}
.clients__wall{
  margin:0 0 2.4rem;background:var(--paper);border-radius:var(--r);
  padding:clamp(1rem,3vw,2.2rem);overflow:hidden;
  border:1px solid rgba(18,16,58,.08);
  box-shadow:0 16px 36px -14px rgba(18,16,58,.08);
}
.clients__wall img{width:100%;border-radius:6px}
.clients__sectors{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
}
.clients__sectors li{
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);border:1px solid rgba(18,16,58,.12);
  background:rgba(255,255,255,.75);backdrop-filter:blur(6px);
  padding:.55rem 1.15rem;border-radius:100px;
  transition:border-color .3s,color .3s,background-color .3s,transform .3s,box-shadow .3s;
}
.clients__sectors li:hover{
  border-color:var(--accent);color:var(--accent-ink);
  background:#ffffff;transform:translateY(-2px);
  box-shadow:0 6px 16px -4px rgba(0,212,197,.3);
}

/* ============================================================= 10. Obra */
.obra{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}

.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filter{
  background:none;border:1px solid var(--line-strong);border-radius:100px;
  padding:.6rem 1.35rem;font-size:.84rem;letter-spacing:.06em;
  color:var(--text-dim);cursor:pointer;
  transition:all .3s var(--ease);
}
.filter:hover{border-color:var(--text);color:var(--text)}
.filter.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

.obragrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  gap:1px;background:rgba(18,16,58,.08);
  border:1px solid rgba(18,16,58,.08);border-radius:var(--r);overflow:hidden;
  box-shadow:0 14px 34px -14px rgba(18,16,58,.07);
}
.work{
  position:relative;background:var(--bg-2);
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,2.6vw,2.1rem) clamp(2rem,3.6vw,3rem);
  min-height:190px;display:flex;flex-direction:column;
  transition:background-color .35s,transform .35s var(--ease),box-shadow .35s;
}
.work::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.work:hover{
  background:#ffffff;
  z-index:2;
  box-shadow:0 16px 36px -12px rgba(18,16,58,.1);
}
.work:hover::after{transform:scaleX(1)}
.work.is-hidden{display:none}
.work__idx{
  font-family:var(--f-display);font-size:.82rem;color:var(--accent-ink);
  letter-spacing:.1em;margin-bottom:auto;opacity:.75;
}
.work__cat{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);margin-top:1.6rem;
}
.work__t{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.35rem,1.05rem + 1vw,1.85rem);line-height:1.14;
  letter-spacing:-.02em;margin-top:.4rem;text-wrap:balance;
}
.work__meta{
  font-size:.8rem;color:var(--accent-ink);letter-spacing:.06em;margin-top:.5rem;
}

.obra__media{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.75rem,1.6vw,1.25rem);margin-top:clamp(2.5rem,5vw,4rem);
}
.obra__media figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-3)}
.obra__media img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .9s var(--ease),filter .6s;
  filter:grayscale(.22) contrast(1.04);
}
.obra__media figure:hover img{transform:scale(1.055);filter:none}
.obra__media figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.6rem 1.15rem 1rem;
  font-size:.78rem;letter-spacing:.05em;color:var(--on-media-dim);
  background:linear-gradient(to top,var(--media-scrim),rgba(18,16,58,0));
}
.obramedia__a{grid-column:span 2;grid-row:span 2}
.obramedia__a img{aspect-ratio:1/1}
.obramedia__b img,.obramedia__c img{aspect-ratio:16/10}

/* ========================================================== 11. Eventos */
.eventos{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.eventgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,2vw,1.5rem)}
.event{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--bg-3);min-height:clamp(320px,42vh,430px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.event img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease),filter .6s;
  filter:grayscale(.3) brightness(.72);
}
.event:hover img{transform:scale(1.07);filter:grayscale(0) brightness(.78)}
.event::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(18,16,58,.95) 4%,rgba(18,16,58,.45) 52%,rgba(18,16,58,.15) 100%);
}
.event__b{position:relative;z-index:2;padding:clamp(1.4rem,2.6vw,2rem)}
.event--lead{min-height:clamp(360px,54vh,540px)}
.event__tag{
  display:inline-block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:.7rem;
  border:1px solid rgba(0,212,197,.4);padding:.3rem .7rem;border-radius:100px;
}
.event__b h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem);line-height:1.1;
  color:var(--on-media);
  letter-spacing:-.025em;margin-bottom:.55rem;
}
.event__b p{font-size:.92rem;color:var(--on-media-dim);line-height:1.6;margin:0}

/* ==================================================== 12. Soluciones */
.servicios{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.svc__num{
  display:block;font-family:var(--f-display);font-size:.8rem;
  color:var(--accent-ink);letter-spacing:.14em;margin-bottom:.9rem;
}

/* etiqueta de pilar */
.pillar__k{
  display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-family:var(--f-display);font-size:.7rem;font-weight:700;
  color:var(--on-accent);background:var(--accent);
  padding:.4rem .9rem;border-radius:100px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.05rem;
  box-shadow:0 4px 14px -3px rgba(0,212,197,.4);
}
.pillar__k::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--on-accent);flex-shrink:0;
  animation:pillarPulse 2.2s infinite ease-in-out;
}
@keyframes pillarPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.25)}
}

/* tarjetas de necesidad -> solucion */
.solgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.85rem,2vw,1.5rem);margin-top:clamp(.85rem,2vw,1.5rem);
}
.sol{
  position:relative;border:1px solid rgba(18,16,58,.08);border-radius:var(--r);
  overflow:hidden;background:var(--bg-2);
  display:flex;flex-direction:column;
  box-shadow:0 8px 24px -10px rgba(18,16,58,.06);
  transition:border-color .35s,transform .45s var(--ease),box-shadow .45s;
}
.sol:hover{
  border-color:rgba(0,212,197,.5);transform:translateY(-4px);
  box-shadow:0 18px 40px -14px rgba(18,16,58,.12);
}
.sol--photo{border-color:rgba(0,212,197,.3)}
.sol--photo .sol__b{background:rgba(0,212,197,.05)}
.sol img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:grayscale(.2);transition:filter .6s,transform .8s var(--ease);
}
.sol:hover img{filter:none;transform:scale(1.04)}
.sol__b{padding:clamp(1.4rem,2.6vw,2.1rem);display:flex;flex-direction:column;flex:1}
.sol__b h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);line-height:1.16;
  letter-spacing:-.02em;margin-bottom:.85rem;text-wrap:balance;
}
.sol__need{
  font-size:.86rem;color:var(--text-dim);line-height:1.6;
  border-left:3px solid var(--accent);
  border-image:linear-gradient(to bottom,var(--accent),var(--accent-ink)) 1 100%;
  padding-left:.85rem;margin:0 0 .95rem;
}
.sol__need span{
  display:block;color:var(--accent-ink);font-weight:700;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.3rem;
}
.sol__b p{font-size:.93rem;color:var(--text-dim);line-height:1.66;margin:0}
.sol__b p:last-child{margin-bottom:0}

/* =============================================== 13. Comida casera */
.gastro{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.gastro__banner{
  margin:0 0 clamp(1.75rem,4vw,2.75rem);
  border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--bg-3);
}
.gastro__banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,16,58,.5),rgba(18,16,58,0) 58%);
}
.gastro__banner img{
  display:block;width:100%;aspect-ratio:16/6;object-fit:cover;object-position:center 45%;
  transition:transform 1.2s var(--ease);
}
.gastro__banner:hover img{transform:scale(1.03)}
.pillars{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line-2);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.pillars li{
  background:var(--bg-2);padding:clamp(1.4rem,3vw,2.1rem) clamp(1rem,2vw,1.5rem);
  font-size:.94rem;color:var(--text-dim);line-height:1.65;
}
.pillars strong{display:block;color:var(--accent-ink);font-weight:700;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}

/* ========================================================= 14. Historia */
.historia{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.historia__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.historia__media{position:relative}
.historia__media img:first-child{
  width:100%;border-radius:var(--r);
  border:1px solid var(--line-2);
}
.historia__float{
  position:absolute;right:-6%;bottom:-9%;
  width:56%;border-radius:12px;
  border:5px solid var(--bg);
  box-shadow:0 24px 54px -22px rgba(18,16,58,.18);
}
.historia__body .h2{margin-bottom:1.3rem}
.historia__body p{color:var(--text-dim);line-height:1.75}
.historia__body strong{color:var(--text);font-weight:500}
.checklist{
  margin:1.8rem 0 2.2rem;padding-left:0;
  display:grid;gap:.7rem;
}
.checklist li{
  position:relative;padding-left:1.7rem;
  font-size:.95rem;color:var(--text-dim);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border:1.5px solid var(--accent);border-radius:2px;
  transform:rotate(45deg);
}

/* ======================================================== 15. Contacto */
.contacto{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-top:1px solid var(--line-2)}
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contacto__head .h2{margin-bottom:1.2rem}
.details{
  display:grid;gap:1.4rem;margin:2.4rem 0 0;
  padding-top:2.2rem;border-top:1px solid var(--line-2);
}
.details dt{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;margin-bottom:.45rem;
}
.details dd{margin:0;font-size:1.02rem;line-height:1.7;color:var(--text-dim)}
.details a{transition:color .3s;border-bottom:1px solid transparent}
.details a:hover{color:var(--text);border-bottom-color:var(--accent-ink)}

.form{
  background:var(--bg);border:1px solid rgba(18,16,58,.08);
  border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.6rem);
  box-shadow:0 18px 42px -16px rgba(18,16,58,.08);
}
.field{margin-bottom:1.15rem}
.field label{
  display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:.55rem;font-weight:500;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-3);border:1px solid var(--line-strong);
  border-radius:10px;padding:.85rem 1rem;font-size:.95rem;
  color:var(--text);transition:border-color .3s,background-color .3s,box-shadow .3s;
  font-family:var(--f-sans);font-weight:400;
}
.field textarea{resize:vertical;min-height:118px}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23007a70' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent-ink);background:var(--bg-4);
  box-shadow:0 0 0 3px rgba(0,118,110,.14);
}
.field input.is-err,.field textarea.is-err{border-color:#b3261e}
.form__msg{margin:1rem 0 0;font-size:.9rem;min-height:1.3em;text-align:center}
.form__msg.is-ok{color:var(--accent-ink)}
.form__msg.is-bad{color:#b3261e}

/* =========================================================== 16. Footer */
.foot{background:var(--bg);border-top:1px solid var(--line-2);padding-top:clamp(3rem,6vw,5rem)}
.foot__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot__badge{
  display:inline-flex;background:var(--paper);
  padding:.5rem .85rem;border-radius:9px;margin-bottom:1.15rem;
}
.foot__badge img{width:150px;height:auto}
.foot__brand p{font-size:.9rem;color:var(--text-faint);line-height:1.7}
.foot__col{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.foot__col h4{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:600;margin-bottom:.4rem;
}
.foot__col a{
  font-size:.9rem;color:var(--text-faint);transition:color .3s;
}
.foot__col a:hover{color:var(--text)}
.foot__social{display:flex;gap:1rem;margin-top:.7rem}
.foot__social a{
  border:1px solid var(--line);padding:.4rem .9rem;border-radius:100px;
  font-size:.8rem;transition:border-color .3s,color .3s;
}
.foot__social a:hover{border-color:var(--accent);color:var(--accent-ink)}
.foot__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding-block:1.6rem;border-top:1px solid var(--line-2);
  font-size:.8rem;color:var(--text-faint);
}
.foot__bar p{margin:0}

/* ------------------------------------------------------ (el bloque de
   responsive 17 se traslada al final del fichero, tras los componentes 18 y
   la capa de animacion 19, para que ninguna regla base los anule). ------ */

/* =====================================================================
   18. Paginas interiores — componentes
   ===================================================================== */

/* --- 18.1 hero de pagina interior (no ocupa toda la pantalla) --- */
.hero--page{min-height:auto}
.hero--page .hero__grid{padding-block:clamp(3rem,9vh,5.5rem) clamp(2.5rem,6vh,4rem)}
.hero--page .hero__figure img{height:clamp(280px,48vh,470px)}

/* --- 18.2 hero estrecho (paginas legales / 404) --- */
.hero--slim{display:block;min-height:auto}
.hero--slim .wrap{padding-block:clamp(6rem,15vh,9rem) clamp(1.75rem,4vh,3rem)}
.hero--slim .hero__title{font-size:clamp(2.2rem,1.3rem + 3.6vw,3.6rem)}
.hero--slim .hero__lede{max-width:60ch}

/* --- 18.3 banda CTA de cierre --- */
.ctaband{
  position:relative;overflow:hidden;
  padding:clamp(4rem,9vw,7rem) 0;
  background:linear-gradient(135deg,#3528a4 0%,#231976 100%);
  border-top:1px solid rgba(255,255,255,.16);
  /* sobre-escritura local de tokens: el contenido de la banda es claro */
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.9);
  --text-faint:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.34);
  --line-strong:rgba(255,255,255,.6);
  --line-2:rgba(255,255,255,.16);
}
.ctaband .h2{color:var(--text);letter-spacing:-.03em}
.ctaband .btn--accent{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 8px 24px -4px rgba(0,212,197,.45);
}
.ctaband .btn--accent:hover{
  background:var(--accent-bright);
  box-shadow:0 14px 34px -4px rgba(0,212,197,.6);
}
.ctaband .btn--ghost{
  border-color:rgba(255,255,255,.4);
  color:#ffffff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.ctaband .btn--ghost:hover{
  border-color:#ffffff;
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -6px rgba(0,0,0,.25);
}
.ctaband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 18%, rgba(0,212,197,.28) 0%, transparent 48%),
    radial-gradient(circle at 8% 85%, rgba(111,102,214,.24) 0%, transparent 45%);
}
.ctaband__in{
  position:relative;display:grid;grid-template-columns:1.5fr auto;
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.ctaband__t{margin-bottom:.9rem}
.ctaband__acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:flex-end}

/* --- 18.4 necesidad / solucion (dos columnas) --- */
.duo{padding:clamp(3.5rem,8vw,6rem) 0;background:var(--bg)}
.duo__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;
}
.duo__col{background:var(--bg-2);padding:clamp(1.75rem,4vw,3rem)}
.duo__col:last-child{background:var(--bg-3)}
.duo__col .h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);margin-bottom:1rem}

/* --- 18.5 proceso (pasos numerados) --- */
.proc{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,1.9rem)}
.step{position:relative;padding-top:1.4rem;border-top:2px solid var(--line-2)}
.step__n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:.8rem;letter-spacing:.16em;color:var(--accent-ink);margin-bottom:.8rem;
}
.step__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.2;
  letter-spacing:-.02em;margin-bottom:.7rem;
}
.step p{font-size:.92rem;color:var(--text-dim);line-height:1.66}

/* --- 18.6 capacidades (rejilla de tarjetas) --- */
.caps-sec{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,2vw,1.5rem)}
.cap{
  position:relative;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-2);padding:clamp(1.5rem,2.8vw,2.2rem);
  transition:border-color .4s,transform .5s var(--ease);
}
.cap::before{
  content:"";position:absolute;left:clamp(1.5rem,2.8vw,2.2rem);top:0;
  width:26px;height:2px;background:var(--accent);
}
.cap:hover{border-color:rgba(0,212,197,.42);transform:translateY(-4px)}
.cap__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.1rem,1rem + .4vw,1.32rem);line-height:1.2;
  letter-spacing:-.02em;margin-bottom:.75rem;
}
.cap p{font-size:.92rem;color:var(--text-dim);line-height:1.66}

/* --- 18.7 tipos de evento --- */
.types{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,2vw,1.5rem)}
.type{
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);
  padding:clamp(1.5rem,3vw,2.3rem);
  transition:border-color .4s,transform .5s var(--ease);
}
.type:hover{border-color:rgba(0,212,197,.42);transform:translateY(-4px)}
.type__k{
  align-self:flex-start;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink);border:1px solid rgba(0,212,197,.4);
  padding:.3rem .7rem;border-radius:100px;margin-bottom:1.1rem;
}
.type__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);line-height:1.16;
  letter-spacing:-.02em;margin-bottom:.8rem;text-wrap:balance;
}
.type p{font-size:.93rem;color:var(--text-dim);line-height:1.66}

/* --- 18.8 listado de obra (banda) --- */
.worksband{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.worklist{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;
}
.worklist li{
  display:flex;flex-direction:column;gap:.4rem;
  background:var(--bg-2);padding:clamp(1.1rem,2.4vw,1.6rem);
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1rem,.95rem + .3vw,1.2rem);letter-spacing:-.01em;
  transition:background-color .4s;
}
.worklist li:hover{background:var(--bg-3)}
.worklist__c{
  font-family:var(--f-sans);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);font-weight:600;
}

/* --- 18.9 preguntas frecuentes --- */
.faqsec{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  position:relative;cursor:pointer;list-style:none;
  padding:1.35rem 3rem 1.35rem 0;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.05rem,.98rem + .5vw,1.35rem);letter-spacing:-.01em;
  transition:color .3s;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--accent-ink)}
.faq__q::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:10px;height:10px;
  border-right:1.5px solid var(--accent-ink);border-bottom:1.5px solid var(--accent-ink);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .35s var(--ease);
}
.faq__item[open] .faq__q::after{transform:translateY(-30%) rotate(-135deg)}
.faq__a{padding:0 3rem 1.5rem 0}
.faq__a p{color:var(--text-dim);font-size:.96rem;line-height:1.72;max-width:72ch}
.faq__item[open] .faq__a{animation:faqIn .45s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- 18.10 gastro: claves de cocina --- */
.keys{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg)}
.keygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
.key{position:relative;padding-top:1.5rem;border-top:2px solid var(--line-2)}
.key__n{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);line-height:1;
  color:var(--accent-ink);letter-spacing:-.03em;margin-bottom:.7rem;
}
.key__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.18;
  letter-spacing:-.02em;margin-bottom:.7rem;
}
.key p{font-size:.94rem;color:var(--text-dim);line-height:1.68}

/* --- 18.11 bloques pilar (Inicio) --- */
.pilares{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.pilar{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  margin-bottom:clamp(3rem,7vw,6rem);
}
.pilar:last-of-type{margin-bottom:0}
.pilar__media{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(18,16,58,.1);background:var(--bg-3);
  box-shadow:0 20px 48px -18px rgba(18,16,58,.12);
  transition:box-shadow .6s var(--ease);
}
.pilar__media:hover{
  box-shadow:0 26px 60px -18px rgba(18,16,58,.18);
}
.pilar__media img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  filter:grayscale(.12);transition:filter .7s,transform 1s var(--ease);
}
.pilar__media:hover img{filter:none;transform:scale(1.035)}
.pilar--flip .pilar__media{order:2}
.pilar__t{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);line-height:1.08;
  letter-spacing:-.026em;margin-bottom:1.1rem;text-wrap:balance;
}
.pilar__need{
  color:var(--text-dim);font-size:1.02rem;line-height:1.7;
  border-left:3px solid var(--accent);
  border-image:linear-gradient(to bottom,var(--accent),var(--accent-ink)) 1 100%;
  padding-left:1.1rem;margin:0 0 1.15rem;
}
.pilar__need span{
  display:block;color:var(--accent-ink);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem;
}
.pilar__b>p{color:var(--text-dim);line-height:1.75}
.pilar__f{margin:1.4rem 0 1.8rem;display:grid;gap:.65rem}
.pilar__f li{position:relative;padding-left:1.7rem;font-size:.95rem;color:var(--text-dim)}
.pilar__f li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border:1.5px solid var(--accent);border-radius:2px;
  transform:rotate(45deg);
}

/* --- 18.12 media (imagen + texto, con variante invertida) --- */
.media{padding:clamp(4.5rem,10vw,8.5rem) 0;background:var(--bg-2);border-block:1px solid var(--line-2)}
.media__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.media .media__figure{order:1}
.media .media__b{order:2}
.media--rev .media__b{order:1}
.media--rev .media__figure{order:2}
.media__figure{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-3);
}
.media__figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.media__b .h2{margin-bottom:1.1rem}

/* --- 18.13 avance de obra --- */
.obragrid--teaser{grid-template-columns:repeat(3,1fr)}
.obra__more{margin-top:clamp(2rem,4vw,3rem)}

/* --- 18.14 pie de formulario --- */
.form__note{
  margin:1rem 0 0;font-size:.78rem;line-height:1.55;
  color:var(--text-faint);text-align:center;
}

/* --- 18.15 texto legal --- */
.legal{padding:clamp(3rem,6vw,5rem) 0 clamp(4.5rem,10vw,8rem);background:var(--bg)}
.legal__wrap{max-width:74ch}
.legal h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);letter-spacing:-.02em;
  margin:2.4rem 0 .9rem;
}
.legal h3{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--accent-ink);
  margin:1.8rem 0 .6rem;
}
.legal p{color:var(--text-dim);line-height:1.75}
.legal ul{margin:0 0 1.1em;display:grid;gap:.5rem}
.legal li{position:relative;padding-left:1.5rem;color:var(--text-dim);font-size:.96rem;line-height:1.65}
.legal li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border:1.5px solid var(--accent);border-radius:2px;
  transform:rotate(45deg);
}
.legal a{color:var(--accent-ink);border-bottom:1px solid rgba(0,118,110,.55);transition:border-color .3s,color .3s}
.legal a:hover{border-bottom-color:var(--accent-ink);color:var(--accent-ink)}

/* --- 18.16 404 --- */
.notfound{
  min-height:78vh;min-height:78svh;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 3rem) var(--pad) 4rem;background:var(--bg);text-align:center;
}
.notfound__in{max-width:64ch}
.notfound__code{
  margin:0 0 1.2rem;font-family:var(--f-display);font-weight:700;
  font-size:clamp(4.5rem,15vw,10rem);line-height:.85;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(57,44,173,.5);
}
.notfound .hero__title{margin-bottom:1.1rem}
.notfound .hero__lede{margin-inline:auto;margin-bottom:2rem}
.notfound__acts{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.notfound__links{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
}
.notfound__links a{
  font-size:.82rem;letter-spacing:.06em;color:var(--text-dim);
  border:1px solid var(--line);padding:.55rem 1.15rem;border-radius:100px;
  transition:border-color .3s,color .3s;
}
.notfound__links a:hover{border-color:var(--accent);color:var(--accent-ink)}

/* =====================================================================
   19. Capa de animacion
   ===================================================================== */

/* --- 19.1 enlace activo del menu --- */
.nav__links a[aria-current="page"]{color:var(--text)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* --- 19.2 entrada escalonada de hijos [data-stagger] --- */
html.js [data-stagger]>*{
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.js [data-stagger].is-in>*{opacity:1;transform:none}

/* --- 19.3 division por palabras [data-split] --- */
html.js [data-split] .w{display:inline-block}
html.js [data-split] .w__i{
  display:inline-block;font-style:inherit;
  opacity:0;transform:translateY(.55em);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.js [data-split].is-in .w__i{opacity:1;transform:none}

/* --- 19.4 barra de progreso de lectura --- */
.progress{
  position:fixed;left:0;top:0;z-index:120;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-ink),var(--accent));
  transition:transform .12s linear;
}

/* --- 19.5 boton volver arriba --- */
.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:110;
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  background:var(--bg-3);border:1px solid var(--line-strong);color:var(--text);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s,color .3s;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.totop svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  html.js [data-stagger]>*{opacity:1;transform:none;transition:none}
  html.js [data-split] .w__i{opacity:1;transform:none;transition:none}
  .progress{display:none}
}

/* --- 19.6 View Transitions entre paginas (MPA) --- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--ease) both}
::view-transition-new(root){animation:vtIn .34s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* =====================================================================
   20. Responsive (al final del fichero: todas las reglas base de los
   componentes 18 y 19 ya estan escritas, asi que estos media queries
   quedan despues de ellas y anulan correctamente sus columnas).
   ===================================================================== */

@media (max-width:1240px){
  /* dar aire al menu de 8 items antes de que colapse a hamburguesa */
  .nav__inner{gap:1rem}
  .nav__links{gap:.9rem}
  .nav__links a{font-size:.84rem}
}

@media (max-width:1080px){
  /* el menu colapsa aqui: a partir del 8.o item ya no cabe */
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    padding:.75rem var(--pad) max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
    border-bottom:1px solid var(--line-2);
    clip-path:inset(0 0 100% 0);
    opacity:0;pointer-events:none;
    transition:clip-path .5s var(--ease),opacity .35s;
    max-height:calc(100dvh - var(--nav-h));
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__links a{
    padding:1rem 0;font-size:1.05rem;color:var(--text);
    border-bottom:1px solid var(--line-2);
  }
  .nav__links a::after{display:none}
  .nav__links a[aria-current="page"]{color:var(--accent-ink)}
  .nav__cta{margin-top:.9rem;text-align:center;justify-content:center;
    display:flex;border-bottom:none!important}
  .nav__tel{display:none}
  .nav__toggle{display:flex}

  .solgrid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .typegrid{grid-template-columns:repeat(2,1fr)}
  .keygrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2rem}
  .worklist{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}

  .pilar,.duo__grid,.media__grid{grid-template-columns:1fr}
  .pilar{gap:1.75rem;margin-bottom:clamp(3rem,7vw,4.5rem)}
  .pilar--flip .pilar__media{order:0}
  .ctaband__in{grid-template-columns:1fr}
  .ctaband__acts{justify-content:flex-start}
  /* tarjetas impares que quedan solas en la ultima fila ocupan la fila entera */
  .sol:last-child:nth-child(odd){grid-column:span 2}
  .worklist li:last-child:nth-child(odd){grid-column:span 2}
}

@media (max-width:940px){
  .authority__grid{grid-template-columns:1fr}
  .contacto__grid{grid-template-columns:1fr}
  .eventgrid{grid-template-columns:1fr 1fr}
  .event--lead{grid-column:span 2}
  .obragrid--teaser{grid-template-columns:repeat(2,1fr)}
  .obra__media{grid-template-columns:1fr 1fr}
  .obramedia__a{grid-column:span 2;grid-row:auto}
  .obramedia__a img{aspect-ratio:16/9}
}

@media (max-width:900px){
  /* pagina interior: el hero colapsa como el de inicio y compacta la foto */
  .hero--page .hero__grid{
    grid-template-columns:1fr;
    gap:clamp(1.25rem,3vw,1.75rem);
    padding-block:clamp(1.75rem,5vh,3rem) clamp(1.5rem,4vh,2.5rem);
  }
  .hero--page .hero__figure img{height:clamp(200px,32vh,290px)}
  .hero--slim .wrap{padding-block:clamp(4rem,10vh,6.5rem) clamp(1.5rem,3.5vh,2.25rem)}
}

@media (max-width:760px){
  .gastro__banner img{aspect-ratio:16/9}
  .factgrid{grid-template-columns:1fr}
  .eventgrid{grid-template-columns:1fr}
  .event--lead{grid-column:auto}
  .solgrid{grid-template-columns:1fr}
  .sol:last-child:nth-child(odd){grid-column:auto}
  .pillars{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .typegrid{grid-template-columns:1fr}
  .keygrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.5rem}
  .worklist{grid-template-columns:1fr}
  .worklist li:last-child:nth-child(odd){grid-column:auto}
  .obra__media{grid-template-columns:1fr}
  .obramedia__a{grid-column:span 1}
  .historia__grid{grid-template-columns:1fr;gap:3.5rem}
  .historia__float{right:0;bottom:-6%;max-width:50%}
  .foot__grid{grid-template-columns:1fr}
}

/* navegadores moviles: evitar el zoom automatico de iOS al enfocar un campo y mejorar controles */
@media (max-width:600px){
  .field input,.field select,.field textarea{font-size:1rem}
  .foot__bar{flex-direction:column;text-align:center;gap:.6rem;padding-block:1.25rem}
  .form .btn{width:100%}
}

@media (max-width:520px){
  .hero__grid{
    padding-top:1.25rem;
    padding-bottom:0;
    gap:1.15rem;
  }
  .hero__title{
    font-size:clamp(1.9rem,1.3rem + 3.8vw,2.4rem);
    margin-bottom:1rem;
  }
  .hero__lede{
    font-size:.96rem;
    margin-bottom:1.25rem;
  }
  .hero__acts{flex-direction:column;align-items:stretch;gap:.75rem}
  .hero__acts .btn{width:100%}
  .hero__figure img{height:clamp(180px,26vh,230px)}
  .hero__cap{font-size:.68rem;margin-top:.45rem}
  .hero__rail{
    margin-top:1rem;
    padding-bottom:1.25rem;
  }
  .rail__item{padding:.85rem .75rem}
  .rail__n{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem)}
  .rail__l{font-size:.66rem;letter-spacing:.12em}

  .hero--page .hero__grid{padding-block:1.25rem 1.5rem;gap:1.15rem}
  .hero--page .hero__figure img{height:clamp(180px,26vh,230px)}

  .ctaband__acts{flex-direction:column;align-items:stretch}
  .ctaband__acts .btn{width:100%}
  .obragrid{grid-template-columns:1fr}
  .notfound__acts{flex-direction:column;align-items:stretch}
  .notfound__acts .btn{width:100%}
  .duo__col{padding:clamp(1.4rem,5vw,2rem)}
  .faq__a{padding-right:0}
  .clients__sectors li{font-size:.72rem;padding:.45rem .85rem}
  .event__b h3{font-size:clamp(1.35rem,1.15rem + 1vw,1.7rem)}
  .gastro__banner img{aspect-ratio:16/10}
  .fact{padding:1.25rem 1.1rem}
  .sol__b{padding:1.25rem 1.1rem}
}