/* IBARA Studio — tema de marca (book "IBARA revision 1").
   El engine inyecta sus estilos en @layer sw, así que todo lo de aquí (sin capa)
   gana sin hacks de especificidad.
   Lenguaje del book: negro-olivo profundo, ivory fino, captions espaciadas con
   guion corto, líneas de construcción, bloques olivo / tierra / ivory. */

:root {
  /* las 4 tintas del book — todo lo demás se DERIVA de ellas por mezcla */
  --ivory: #F7F5EF;
  --black: #000000;
  --olive: #4A4A2A;
  --earth: #59230F;          /* tierra profunda: acento, nunca dominante */

  --night: color-mix(in srgb, var(--olive) 24%, var(--black));        /* negro-olivo del book */
  --night-2: color-mix(in srgb, var(--olive) 34%, var(--black));
  --ink: var(--black);
  --ink-soft: color-mix(in srgb, var(--black) 62%, var(--ivory));
  --film: var(--night);                                               /* fondo detrás del video */
  --olive-light: color-mix(in srgb, var(--olive) 40%, var(--ivory));  /* olivo legible sobre oscuro */
  --paper-3: color-mix(in srgb, var(--olive) 14%, var(--ivory));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-ivory: color-mix(in srgb, var(--ivory) 16%, transparent);
  --grid: color-mix(in srgb, var(--ivory) 5%, transparent);
  --font: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}

html { scroll-behavior: smooth; }
html, body { background: var(--film); }
body { margin: 0; font-family: var(--font); font-weight: 400; color: var(--ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

/* guion corto del book ("——") */
.dash { display: block; width: 28px; height: 1px; background: currentColor; opacity: .7; margin: 16px 0; }

/* ---------- engine theme (hero sobre el video) ---------- */
.sw-root {
  --sw-bg: var(--film);
  --sw-ink: var(--ivory);
  --sw-ink-soft: color-mix(in srgb, var(--ivory) 70%, transparent);
  --sw-accent: var(--olive-light);
  --sw-font-display: var(--font);
  --sw-font-body: var(--font);
}
.sw-particles, .sw-topbar { display: none; }
.sw-scrollbar { height: 2px; background: color-mix(in srgb, var(--ivory) 12%, transparent); }
.sw-scrollbar span { background: var(--ivory); }

/* scrim: sombra negro-olivo abajo-izquierda (no negro puro, tono del book) */
.sw-copylayer::before {
  width: 100%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--night) 70%, transparent) 0%, color-mix(in srgb, var(--night) 32%, transparent) 34%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--night) 50%, transparent) 0%, transparent 38%);
}
.sw-copy { width: min(40vw, 480px); }
.sw-copy__num { font-family: var(--font); font-weight: 300; letter-spacing: .3em; font-size: .68rem; color: var(--sw-ink-soft); }
.sw-copy__eyebrow { font-weight: 400; font-size: .7rem; letter-spacing: .5em; color: var(--ivory); opacity: .9; margin-top: 22px; }
.sw-copy__eyebrow::after { content: ""; display: block; width: 28px; height: 1px; background: currentColor; opacity: .7; margin-top: 16px; }
.sw-copy__title { font-weight: 200; font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: 1.08; letter-spacing: -.005em; margin-top: 12px;
  text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.sw-copy__body { font-weight: 300; line-height: 1.7; color: color-mix(in srgb, var(--ivory) 88%, transparent); text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.sw-copy__tags { gap: 0; margin-top: 28px; }
.sw-copy__tags li { background: none; border: 0; border-left: 1px solid color-mix(in srgb, var(--ivory) 40%, transparent);
  border-radius: 0; padding: 2px 16px; color: var(--ivory); font-weight: 300; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.sw-copy__tags li:first-child { border-left: 0; padding-left: 0; }
.sw-btn { border-radius: 0; font-weight: 400; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; padding: 16px 26px; }
.sw-btn--primary { background: var(--ivory); color: var(--black); }
.sw-btn--ghost { color: var(--ivory); border: 1px solid color-mix(in srgb, var(--ivory) 45%, transparent); }

/* el texto de cada escena se ancla ABAJO y crece hacia arriba: nunca se corta
   por abajo aunque la pantalla sea baja (el engine lo arrancaba en la mitad) */
.sw-copy:not(.sw-copy--hero, .sw-copy--screen) { top: auto; bottom: clamp(36px, 9vh, 96px); }
.sw-copy__title { font-size: clamp(1.9rem, min(4.2vw, 7.2vh), 3.7rem); }
.sw-copy[data-id="cierre"] { width: min(52vw, 640px); }
.sw-copy[data-id="cierre"] .sw-copy__cta { flex-wrap: nowrap; }
.sw-btn { white-space: nowrap; }
@media (max-width: 860px) { .sw-copy[data-id="cierre"] { width: auto; } .sw-copy[data-id="cierre"] .sw-copy__cta { flex-wrap: wrap; } }
@media (max-height: 760px) and (min-width: 861px) {
  .sw-copy__eyebrow { margin-top: 12px; } .sw-copy__eyebrow::after { margin-top: 10px; }
  .sw-copy__body { margin-top: 12px; line-height: 1.55; }
  .sw-copy__cta { margin-top: 20px; }
}

/* hero: el logo IBARA ya está en la neblina del video (centro) → lockup debajo */
.sw-copy--hero { left: 0; right: 0; margin: 0 auto; top: max(65vh, calc(34vh + 17.5vw)); width: min(92vw, 820px); text-align: center; }
.sw-copy--hero .sw-copy__num { display: none; }
.sw-copy--hero .sw-copy__eyebrow { margin: 0; font-size: clamp(.7rem, .9vw, .86rem); letter-spacing: 1em; padding-left: 1em; font-weight: 300; }
.sw-copy--hero .sw-copy__eyebrow::after { display: none; }
.sw-copy--hero .sw-copy__title { font-size: clamp(.78rem, 1vw, .95rem); font-weight: 400; letter-spacing: .55em; padding-left: .55em;
  text-transform: uppercase; margin-top: 30px; line-height: 1.8; }
.sw-copy--hero .sw-copy__body { margin: 14px auto 0; font-size: .95rem; }
.sw-copy--hero .sw-copy__tags { justify-content: center; margin-top: 22px; }
.sw-copy--hero .sw-copy__tags li:first-child { padding-left: 16px; }
.sw-copy--hero .sw-copy__tags li { font-size: .66rem; }
body[data-scene="hero"] .sw-copylayer::before { opacity: .35; }

/* cine: panel negro-olivo encima de la pantalla para tapar "OUR PLANET" (≈25.0–28.6s) */
.sw-copy--screen {
  left: 11vw; top: 21vh; transform: none; width: min(38vw, 560px);
  padding: clamp(22px, 2.6vw, 40px);
  background: color-mix(in srgb, var(--night) 66%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(.7); backdrop-filter: blur(22px) saturate(.7);
  border: 1px solid var(--line-ivory);
}
.sw-copy--screen .sw-copy__title { font-size: clamp(1.7rem, 2.8vw, 2.6rem); }

/* rail de secciones */
.sw-route::before { background: var(--ivory); opacity: .22; width: 1px; }
.sw-route__dot i { background: color-mix(in srgb, var(--ivory) 45%, transparent); }
.sw-route__dot.is-active i { background: var(--ivory); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ivory) 16%, transparent); }
.sw-route__label { background: color-mix(in srgb, var(--night) 70%, transparent); color: var(--ivory); border: 0; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; font-size: .64rem; border-radius: 0; }
.sw-hint { color: color-mix(in srgb, var(--ivory) 80%, transparent); letter-spacing: .4em; font-size: .62rem; }
.sw-hint i { border-color: color-mix(in srgb, var(--ivory) 45%, transparent); }
.sw-hint i::after { background: var(--ivory); }

/* al salir del hero, apagar las capas fijas del engine */
body.world-done :is(.sw-sky, .sw-stage, .sw-copylayer, .sw-route, .sw-hint, .sw-scrollbar) { visibility: hidden; }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 28px) var(--gutter); padding-top: max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-top));
  transition: background .4s, padding .4s; }
.header::before { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--night) 55%, transparent), transparent); transition: opacity .4s; }
body.on-site .header::before { opacity: 0; }
.header__logo { position: relative; display: block; width: clamp(92px, 9vw, 124px); transition: opacity .6s; }
.header__logo img { width: 100%; height: auto; }
.logo-black { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }   /* versión olivo */
.logo-ivory { transition: opacity .4s; }
body[data-scene="hero"]:not(.on-site) .header__logo { opacity: 0; pointer-events: none; } /* el logo ya está en la neblina */
.header__nav { display: flex; gap: clamp(18px, 2.6vw, 40px); }
.header__nav a { color: var(--ivory); text-decoration: none; font-size: .68rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; opacity: .85; transition: opacity .2s, color .4s; }
.header__nav a:hover { opacity: 1; }
body.on-site .header { background: color-mix(in srgb, var(--ivory) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
body.on-site .logo-black { opacity: 1; }
body.on-site .logo-ivory { opacity: 0; }
body.on-site .header__nav a { color: var(--olive); }
body.on-site .header__nav a:hover { color: var(--earth); }

/* ---------- secciones ---------- */
#site { position: relative; z-index: 80; background: var(--ivory); }
.sec { padding: clamp(88px, 13vw, 180px) var(--gutter); scroll-margin-top: 40px; }
.sec > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); color: var(--olive); }
.eyebrow { display: block; font-size: .68rem; letter-spacing: .5em; text-transform: uppercase; }
.sec h2 { font-weight: 200; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.1; margin: 0; max-width: 18ch; letter-spacing: -.005em; color: var(--olive); }
.lead { font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; max-width: 52ch; color: var(--ink-soft); margin: 0 0 clamp(40px, 5vw, 64px); }
.num { font-size: .68rem; letter-spacing: .3em; font-weight: 300; color: var(--earth); }

/* caption del book */
.cap__t { display: block; font-size: .74rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; line-height: 1.7; }
.cap .dash { margin: 12px 0; }
.cap__d { margin: 0; font-weight: 300; font-size: .92rem; line-height: 1.6; opacity: .82; max-width: 34ch; }

/* secciones oscuras: negro-olivo + retícula de construcción */
.sec--night { background-color: var(--night); color: var(--ivory);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px; background-position: center top; }
.sec--night .sec-head, .sec--olive .sec-head { color: var(--olive-light); }
.sec--night h2, .sec--olive h2 { color: var(--ivory); }
.sec--night .lead { color: color-mix(in srgb, var(--ivory) 72%, transparent); }
.sec--olive { background: var(--olive); color: var(--ivory); }
.sec--olive .lead { color: color-mix(in srgb, var(--ivory) 80%, transparent); }
.sec--olive .contacto dt { color: color-mix(in srgb, var(--olive) 30%, var(--ivory)); }

/* proyectos (ivory) */
.grid-proyectos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 2.6vw, 40px); }
.proyecto { color: var(--ink); text-decoration: none; display: block; }
.proyecto__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); margin-bottom: 22px; }
.proyecto__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
a.proyecto:hover .proyecto__media img { transform: scale(1.04); }
.proyecto__num { position: absolute; top: 16px; left: 18px; font-size: .66rem; letter-spacing: .3em; color: var(--ivory); mix-blend-mode: difference; }
.ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--paper-3);
  background-image: linear-gradient(color-mix(in srgb, var(--olive) 12%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--olive) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px; }
.ph span { font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--olive); border: 1px solid color-mix(in srgb, var(--olive) 35%, transparent); padding: 8px 14px; background: var(--ivory); }
.proyecto .cap__t { color: var(--olive); }

/* estudio (negro-olivo): diagrama + lockup */
.diagrama { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: clamp(12px, 2vw, 32px);
  padding: clamp(24px, 4vw, 56px) 0; border-top: 1px solid var(--line-ivory); border-bottom: 1px solid var(--line-ivory); }
/* fotos B/N detrás de cada paso del diagrama: a ≤ su tamaño real (nítidas), con
   fundido ovalado para que se pierdan en el fondo y manden el dibujo y el texto */
.diagrama__item--foto { position: relative; isolation: isolate; padding: 28px 0; }
.diagrama__item--foto::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -6%; bottom: -6%; left: 50%; width: min(118%, 440px); transform: translateX(-50%);
  background: var(--foto) var(--pos, center) / cover no-repeat;
  opacity: .6; filter: grayscale(1) brightness(var(--brillo, 1));
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 22%, rgba(0,0,0,.45) 62%, transparent 92%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 22%, rgba(0,0,0,.45) 62%, transparent 92%); }
.diagrama__item--foto .cap__t, .diagrama__item--foto .cap__d { text-shadow: 0 1px 12px var(--night), 0 0 3px var(--night); }
.diagrama__item--foto:first-of-type svg .stroke { stroke-width: 1.8; }   /* líneas finas sobre textura cargada */
.diagrama__item--foto svg .guide { stroke-opacity: .5; }
.diagrama__item { margin: 0; text-align: center; }
.diagrama__item svg { width: min(100%, 250px); height: auto; margin: 0 auto 18px; display: block; overflow: visible; }
.diagrama__item .cap { display: flex; flex-direction: column; align-items: center; }
.diagrama__item .cap__d { max-width: 26ch; }
.diagrama__op { font-weight: 200; font-size: 3rem; line-height: 1; color: var(--ivory); opacity: .85; padding-top: 118px; }
svg .guide { fill: none; stroke: var(--ivory); stroke-opacity: .32; stroke-width: .7; }
svg .guide .dash { stroke-dasharray: 9 5; }
svg .faint { stroke-opacity: .38; }
svg .stroke { fill: none; stroke: var(--ivory); stroke-width: 1.5; stroke-linecap: round; }
svg .solid { fill: var(--ivory); stroke: var(--ivory); stroke-width: 1; stroke-linejoin: miter; }
/* brillo de tiza del book */
.diagrama__item svg { filter: drop-shadow(0 0 1.6px color-mix(in srgb, var(--ivory) 45%, transparent)); }
svg .fill { fill: var(--ivory); }

.lockup { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px); padding: clamp(64px, 9vw, 120px) 0; }
.lockup__logo { width: min(52vw, 560px); height: auto; }
.lockup__words { list-style: none; margin: 0; padding: 4px 0 4px clamp(20px, 3vw, 40px); border-left: 1px solid color-mix(in srgb, var(--ivory) 55%, transparent);
  font-weight: 300; font-size: clamp(.95rem, 1.5vw, 1.25rem); line-height: 1.7; }
.lockup__words .dash { margin: 14px 0 0; }

.estudio { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.estudio__texto p { font-weight: 300; font-size: 1.08rem; line-height: 1.85; margin: 0 0 1.2em; max-width: 52ch; color: color-mix(in srgb, var(--ivory) 86%, transparent); }
.dato { display: flex; align-items: baseline; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--line-ivory); }
.dato strong { font-weight: 100; font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: 1; color: var(--ivory); }
.dato span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--olive-light); max-width: 24ch; line-height: 1.7; }
.concepto { list-style: none; margin: 0; padding: 0; }
.concepto li { display: grid; grid-template-columns: 5rem 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line-ivory); }
.letra { font-weight: 200; font-size: 1.7rem; letter-spacing: .2em; color: var(--olive-light); line-height: 1; }

/* valores: tres tarjetas olivo a todo el ancho, esquinas curvas (el bambú nunca
   es cuadrado). El detalle se ve siempre; al pasar el mouse la tarjeta sube y el nodo late. */
.valores-band { background: var(--ivory); padding: clamp(12px, 1.4vw, 20px); }
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.valor { position: relative; background: var(--olive); color: var(--ivory); border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(30px, 3.2vw, 48px) clamp(26px, 3vw, 48px) clamp(34px, 3.6vw, 52px); box-sizing: border-box; cursor: default; outline: none;
  display: flex; flex-direction: column;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), background .6s; }
.valor__nodo { width: 34px; height: 34px; display: block; margin-bottom: clamp(24px, 2.6vw, 40px); overflow: visible; }
.valor__nodo circle { fill: none; stroke: var(--olive-light); stroke-width: 1.2; transition: transform .6s cubic-bezier(.2,.7,.2,1), stroke .6s; transform-origin: 20px 20px; }
.valor__nodo .fill { fill: var(--ivory); stroke: none; }
.valor .cap__d { opacity: .85; }
.valor__detalle { margin: 22px 0 0; padding-top: 18px; font-weight: 300; font-size: .92rem; line-height: 1.65; max-width: 44ch;
  border-top: 1px solid color-mix(in srgb, var(--ivory) 22%, transparent); color: color-mix(in srgb, var(--ivory) 92%, transparent); }
/* hover evidente en escritorio: la tarjeta sube, se oscurece y el nodo late */
.valor:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--olive) 88%, var(--black)); }
.valor:hover .valor__nodo circle:first-child { transform: scale(1.18); stroke: var(--ivory); }
.valor:hover .valor__nodo .fill { transform: scale(1.3); }

/* servicios (ivory, texto olivo) */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; color: var(--olive); }
.servicios li { padding: 32px clamp(0px, 2vw, 32px) 32px 0; border-top: 1px solid var(--olive); }
.servicios li + li { padding-left: clamp(0px, 2vw, 32px); }
.servicios .num { display: block; margin-bottom: 26px; }
.servicios .cap__d { color: var(--ink-soft); opacity: 1; }
.servicios .cap__d { max-width: 36ch; }

/* contacto (olivo) */
.contacto dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin: 0 0 48px; }
.contacto dt { font-size: .64rem; letter-spacing: .4em; text-transform: uppercase; color: var(--olive-light); margin-bottom: 10px; }
.contacto dd { margin: 0; font-weight: 300; font-size: 1.05rem; }
.contacto a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ivory) 30%, transparent); }
.btn { display: inline-block; border: 0 !important; background: var(--ivory); color: var(--black) !important; padding: 18px 30px; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; transition: background .3s, color .3s; }
.btn:hover { background: var(--earth); color: var(--ivory) !important; }

/* footer (ivory, logo olivo, "Raíces locales | Visión global") */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; color: var(--olive);
  padding: 56px var(--gutter) calc(56px + env(safe-area-inset-bottom)); }
.footer__logo { width: 150px; height: auto; }
.footer__frase { border-left: 1px solid color-mix(in srgb, var(--olive) 60%, transparent); padding-left: 18px; }
.footer__frase span { display: block; font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; line-height: 2; }
.footer small { font-size: .7rem; letter-spacing: .14em; color: var(--ink-soft); }

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .header__nav { display: none; }
  .sw-hint, .sw-route { display: none; }   /* chocan con el texto en pantallas angostas */
  .sw-copylayer::before { background: linear-gradient(0deg, color-mix(in srgb, var(--night) 82%, transparent) 0%, color-mix(in srgb, var(--night) 48%, transparent) 36%, transparent 64%); height: 100%; }
  .sw-copy { width: auto; }
  /* el hero vertical muestra el logo entero al centro → lockup justo debajo */
  .sw-copy--hero { top: 59.5dvh; bottom: auto; width: auto; }
  .sw-copy--hero .sw-copy__eyebrow { letter-spacing: .7em; }
  .sw-copy--hero .sw-copy__title { letter-spacing: .32em; font-size: clamp(.78rem, 1.8vw, 1rem); }
  .sw-copy--hero .sw-copy__tags li { padding: 2px 10px; letter-spacing: .08em; font-size: .62rem; }
  .sw-copy__title { font-size: clamp(1.8rem, 7.4vw, 2.5rem); }
  .diagrama { grid-template-columns: 1fr; gap: 8px; }
  .diagrama__op { padding: 0; text-align: center; }
  span.diagrama__op:last-of-type { transform: rotate(90deg); }   /* → pasa a ↓ en columna */
  .diagrama__item svg { width: 150px; }
  .diagrama__item--foto::before { width: min(100vw, 420px); }
  .lockup { flex-direction: column; gap: 28px; }
  .lockup__logo { width: min(80vw, 420px); }
  .lockup__words { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ivory) 55%, transparent); padding: 20px 0 0; text-align: center; }
  .lockup__words .dash { margin: 14px auto 0; }
  .estudio { grid-template-columns: 1fr; }
  .valores { grid-template-columns: 1fr; }
  .servicios li, .servicios li + li { padding-left: 0; padding-right: 0; }
  .footer { flex-direction: column; align-items: flex-start; }
}
/* vertical (celular o tablet parado): el video es el crop 9:16 y el título de la
   pantalla de cine cae arriba-izquierda → panel a lo ancho, arriba */
@media (orientation: portrait) {
  .sw-copy--screen { top: calc(18vh + env(safe-area-inset-top)); bottom: auto; left: clamp(12px, 4vw, 48px); right: clamp(12px, 4vw, 48px);
    width: auto; max-width: none; }
}
/* tablet horizontal / laptops chicas: un poco más de ancho para el texto */
@media (min-width: 861px) and (max-width: 1180px) {
  .sw-copy:not(.sw-copy--hero, .sw-copy--screen) { width: min(52vw, 480px); }
  .header__nav { gap: 20px; }
}

/* celular acostado (pantalla baja y ancha): texto compacto a la izquierda */
@media (orientation: landscape) and (max-height: 540px) {
  .header { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .header__logo { width: 84px; }
  .sw-scene__video, .sw-scene__still { object-position: center 45%; }
  .sw-copylayer::before { height: 100%; top: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--night) 78%, transparent) 0%, color-mix(in srgb, var(--night) 38%, transparent) 42%, transparent 66%); }
  .sw-copy { top: auto; right: auto; left: max(16px, env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(46vw, 400px); }
  .sw-copy__num, .sw-copy__tags { display: none; }
  .sw-copy__eyebrow { margin-top: 0; font-size: .6rem; letter-spacing: .4em; }
  .sw-copy__eyebrow::after { margin-top: 8px; }
  .sw-copy__title { font-size: clamp(1.1rem, 3.6vh + .6rem, 1.6rem); margin-top: 8px; }
  .sw-copy__body { font-size: .8rem; line-height: 1.5; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sw-copy__cta { margin-top: 14px; gap: 8px; }
  .sw-btn { padding: 11px 16px; font-size: .62rem; letter-spacing: .18em; }
  .sw-copy--hero { left: 0; right: 0; bottom: auto; top: 73vh; width: 100%; }
  .sw-copy--hero .sw-copy__body, .sw-copy--hero .sw-copy__tags { display: none; }
  .sw-copy--hero .sw-copy__eyebrow { font-size: .6rem; letter-spacing: .8em; }
  .sw-copy--hero .sw-copy__title { font-size: .66rem; letter-spacing: .4em; margin-top: 10px; }
  body[data-scene="hero"] .sw-copylayer::before { opacity: 0; }
  .sw-copy--screen { top: 18vh; bottom: auto; left: 8vw; width: min(40vw, 360px); padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* menos aire entre las tarjetas de valores y Servicios */
#servicios { padding-top: clamp(56px, 7vw, 100px); }

/* ---------- diagrama: animación de dibujo (se activa con .js-anim + .is-drawn) ----------
   Secuencia en escritorio: 1) las cañas de la A se trazan de abajo arriba  2) "+"
   3) el anillo del nodo se cierra girando y el punto cae al centro  4) "→"
   5) la A sólida se traza y su punto aparece. Cada foto se revela con su paso. */
.diagrama__item { --t: 0s; }
@media (min-width: 861px) {
  .diagrama__item:nth-of-type(2) { --t: 1.05s; }
  .diagrama__item:nth-of-type(3) { --t: 2.1s; }
  span.diagrama__op:first-of-type { --t: .8s; }
  span.diagrama__op:last-of-type { --t: 1.85s; }
}
.js-anim .diagrama__item svg .stroke > *, .js-anim .diagrama__item svg .solid {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) var(--t); }
.js-anim .diagrama__item svg .stroke > *:nth-child(n+3) { transition-delay: calc(var(--t) + .12s); }
.js-anim .diagrama__item svg .stroke > ellipse, .js-anim .diagrama__item svg .stroke > circle:last-child { transition-duration: .6s; transition-delay: calc(var(--t) + .7s); }
.js-anim .diagrama__item svg .solid { fill-opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) var(--t), fill-opacity .7s ease calc(var(--t) + .8s); }
.js-anim .is-drawn svg .solid { fill-opacity: 1; }
.js-anim .diagrama__item svg .guide { opacity: 0; transition: opacity 1s ease var(--t); }
.js-anim .diagrama__item svg .fill { transform: scale(0); transform-box: fill-box; transform-origin: center;
  transition: transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--t) + .85s); }
.js-anim .diagrama__item:nth-of-type(2) svg .stroke { transform: rotate(-120deg); transform-box: fill-box; transform-origin: center;
  transition: transform 1.3s cubic-bezier(.65,0,.35,1) var(--t); }
.js-anim .diagrama__item figcaption { opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease calc(var(--t) + .6s), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--t) + .6s); }
.js-anim span.diagrama__op { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease var(--t), transform .7s cubic-bezier(.2,.7,.2,1) var(--t); }
.js-anim .diagrama__item--foto::before { opacity: 0; transform: translateX(-50%) scale(1.08);
  transition: opacity 1.6s ease var(--t), transform 2.4s cubic-bezier(.2,.7,.2,1) var(--t), filter .6s ease; }

.js-anim .is-drawn svg .stroke > *, .js-anim .is-drawn svg .solid { stroke-dashoffset: 0; }
.js-anim .is-drawn svg .guide { opacity: 1; }
.js-anim .is-drawn svg .fill { transform: scale(1); }
.js-anim .diagrama__item:nth-of-type(2).is-drawn svg .stroke { transform: none; }
.js-anim .is-drawn figcaption { opacity: 1; transform: none; }
.js-anim span.diagrama__op.is-drawn { opacity: 1; transform: none; }
@media (max-width: 860px) { .js-anim span.diagrama__op:last-of-type.is-drawn { transform: rotate(90deg); } }
.js-anim .diagrama__item--foto.is-drawn::before { opacity: .6; transform: translateX(-50%) scale(1); }

/* hover sutil (solo con mouse, una vez dibujado): la foto se ilumina y las guías se marcan */
.is-done, .is-done *, .is-done::before { transition-delay: 0s !important; }
.no-anim, .no-anim *, .no-anim::before { transition: none !important; }
@media (hover: hover) {
  .diagrama__item--foto.is-done:hover::before { opacity: .78; transform: translateX(-50%) scale(1.04);
    filter: grayscale(1) brightness(calc(var(--brillo, 1) * 1.2)); transition-duration: .8s; }
  .diagrama__item.is-done:hover svg .guide { stroke-opacity: .6; }
  .diagrama__item.is-done svg .guide { transition: stroke-opacity .6s ease; }
}

/* ---------- intro: 2 s solo el logo entre los árboles, luego todo en cascada ---------- */
/* la escena vive en su propia capa estable (sin animar su tamaño ni opacidad) */
.sw-stage { transform: translate3d(0,0,0); will-change: transform; backface-visibility: hidden; }
.sw-copy--hero > *, .header__nav, .sw-route, .sw-hint, .sw-scrollbar {
  transition: opacity 1.1s ease var(--in, 0s), transform 1.2s cubic-bezier(.2,.7,.2,1) var(--in, 0s); }
.sw-copy--hero .sw-copy__eyebrow { --in: 0s; }
.sw-copy--hero .sw-copy__title { --in: .3s; }
.sw-copy--hero .sw-copy__body { --in: .6s; }
.sw-copy--hero .sw-copy__tags { --in: .9s; }
.header__nav, .sw-route, .sw-scrollbar { --in: 1.3s; }
.sw-hint { --in: 1.6s; }
body.intro .sw-copy--hero > *, body.intro .header__nav, body.intro .sw-route, body.intro .sw-hint, body.intro .sw-scrollbar {
  opacity: 0 !important; transform: translateY(10px); }
body.intro .sw-copylayer::before { opacity: 0 !important; }
body.intro-skip * { transition-delay: 0s !important; transition-duration: .3s !important; }

/* ---------- sin parpadeo: la portada NUNCA se oculta; el video se pinta encima.
   (el engine la ocultaba al "seeked" y, si el video tardaba un cuadro, quedaba un hueco) */
.sw-scene.has-clip .sw-scene__still { opacity: 1; }
.sw-scene__video { will-change: transform; transform: translateZ(0); }

/* video de apertura: encima de todo en la primera escena; al terminar se oculta de
   golpe (su último cuadro es idéntico a la imagen de bosque que queda debajo) */
.sw-intro-vid { z-index: 4; transform: none !important; background: transparent; }
body.intro-vid-fin .sw-intro-vid { visibility: hidden; }

/* sin "salto de color": la sombra detrás de los textos entra gradual */
.sw-copylayer::before { transition: opacity 1.6s ease; }

/* "Desliza para recorrer" en la esquina inferior derecha (junto a los puntos): nunca
   se cruza con el bloque de texto centrado del hero */
@media (min-width: 861px) {
  .sw-hint { left: auto; right: clamp(18px, 2.4vw, 34px); bottom: 24px; transform: none; align-items: flex-end; }
}
/* pantallas bajas: el bloque del hero se acorta para no salirse por abajo */
@media (min-width: 861px) and (max-height: 780px) {
  .sw-copy--hero .sw-copy__body, .sw-copy--hero .sw-copy__tags { display: none; }
  .sw-copy--hero .sw-copy__title { margin-top: 18px; }
}

/* los 15 años: tarjeta en tierra profunda (#59230F) — el único acento de color de la
   sección, con el mismo lenguaje de tarjetas curvas que Valores */
.dato--card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: end; column-gap: 22px;
  background: var(--earth); color: var(--ivory); border: 0; border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(26px, 2.8vw, 40px) clamp(26px, 3vw, 44px) clamp(28px, 3vw, 42px); margin-bottom: 8px; }
.dato--card .valor__nodo { grid-column: 1 / -1; margin-bottom: clamp(18px, 2vw, 28px); }
.dato--card .valor__nodo circle { stroke: color-mix(in srgb, var(--ivory) 45%, transparent); }
.dato--card strong { color: var(--ivory); }
.dato--card span { color: color-mix(in srgb, var(--ivory) 82%, transparent); padding-bottom: 8px; }

/* ---------- tierra = color de la acción (hover), además de la tarjeta de los 15 años ---------- */
.sw-btn { transition: transform .25s, background .35s, color .35s, border-color .35s; }
.sw-btn--primary:hover { background: var(--earth); color: var(--ivory); }
.sw-btn--ghost:hover { background: var(--earth); border-color: var(--earth); color: var(--ivory); }
/* menú: sobre el video, el enlace se asienta en una pastilla tierra (texto tierra sobre
   la imagen no se leería); en la parte clara del sitio el texto se tiñe de tierra */
.header__nav a { padding: 7px 12px; margin: -7px -12px; border-radius: 999px; transition: opacity .2s, color .35s, background .35s; }
body:not(.on-site) .header__nav a:hover { background: var(--earth); opacity: 1; }

/* ---------- pases entre secciones con curva (el bambú nunca es cuadrado) ----------
   Cada sección redondea sus esquinas superiores y sube --curva sobre la anterior:
   en los costados se ve la sección de atrás (y el video, al terminar el recorrido). */
:root { --curva: clamp(28px, 4.2vw, 64px); }
#site { background: transparent; }
#site > .sec, #site > .valores-band, #site > .footer {
  position: relative; margin-top: calc(-1 * var(--curva));
  border-radius: var(--curva) var(--curva) 0 0; }
#site > .sec:not(.sec--night):not(.sec--olive), #site > .footer { background-color: var(--ivory); }
#site > .valores-band { padding-top: calc(var(--curva) * .45); }
/* valores y servicios son ambos ivory: sin solape (no recorta las tarjetas) */
#site > #servicios { margin-top: 0; border-radius: 0; }

/* I · BAR · ARA en "pastillas" ivory, como las muestras de color del book:
   mismo ancho para las tres (alinea la lista), letras negras finas */
.concepto li { grid-template-columns: 6.2rem 1fr; align-items: start; }
.letra { display: inline-flex; align-items: center; justify-content: center; width: 6.2rem; height: 3.1rem;
  background: var(--ivory); color: var(--black); border-radius: 1rem;
  font-weight: 300; font-size: 1.15rem; letter-spacing: .28em; padding-left: .28em; box-sizing: border-box; line-height: 1; }
@media (max-width: 860px) {
  .concepto li { grid-template-columns: 5rem 1fr; gap: 16px; }
  .letra { width: 5rem; height: 2.6rem; font-size: 1rem; border-radius: .85rem; }
}

/* ======================================================================
   LEGIBILIDAD DEL RECORRIDO — todos los capítulos (salvo el hero) usan el
   mismo panel oscuro translúcido con blur que "A medida". Fondo efectivo
   sobre la zona MÁS clara (blanco): 72 % negro-olivo + 28 % blanco ≈ #545450
   → párrafo ivory ~6:1, títulos ~7:1 (WCAG AA: 4.5:1 / 3:1).
   ====================================================================== */
.sw-copy:not(.sw-copy--hero) {
  top: auto; bottom: clamp(32px, 7vh, 80px); left: clamp(18px, 5vw, 64px); width: min(44vw, 560px);
  padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-sizing: border-box; isolation: isolate; }
/* solo letras sobre el render + una sombra difusa cálida detrás del texto, sin bordes
   (no se lee como tarjeta). Vive dentro del bloque de texto, así aparece y desaparece
   con él: entre capítulos el render queda limpio. */
.sw-copy:not(.sw-copy--hero):not(.sw-copy--screen)::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -38%; right: -55%; top: -45%; bottom: -60%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--night) 80%, transparent) 0%, color-mix(in srgb, var(--night) 64%, transparent) 45%, color-mix(in srgb, var(--night) 24%, transparent) 76%, transparent 100%); }
.sw-copy:not(.sw-copy--hero) .sw-copy__body { font-weight: 400; }
.sw-copy:not(.sw-copy--hero) .sw-copy__title { font-size: clamp(1.7rem, min(3vw, 5.4vh), 2.7rem); text-shadow: none; }
.sw-copy:not(.sw-copy--hero) .sw-copy__body { color: color-mix(in srgb, var(--ivory) 92%, transparent); text-shadow: none; margin-top: 14px; }
.sw-copy:not(.sw-copy--hero) .sw-copy__eyebrow { margin-top: 14px; }
.sw-copy__num { color: color-mix(in srgb, var(--ivory) 82%, transparent); }
/* "A medida": el panel sigue arriba, encima de la pantalla (tapa "OUR PLANET") */
.sw-copy.sw-copy--screen { top: 21vh; bottom: auto; left: 11vw; width: min(40vw, 560px);
  /* este panel tapa la pantalla del cine ("OUR PLANET"): se mantiene más cubierto */
  background: color-mix(in srgb, var(--night) 48%, transparent); -webkit-backdrop-filter: blur(26px) saturate(.8); backdrop-filter: blur(26px) saturate(.8);
  padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.8vw, 42px); border: 1px solid color-mix(in srgb, var(--ivory) 10%, transparent); border-radius: clamp(20px, 2vw, 28px); }
.sw-copy[data-id="cierre"] { width: min(54vw, 660px); }
/* con panel, la sombra general se aligera (el panel ya asegura el contraste) */
.sw-copylayer::before { opacity: .55; }
body[data-scene="hero"] .sw-copylayer::before { opacity: .35; }
@media (max-width: 860px) {
  .sw-copy:not(.sw-copy--hero) { left: 18px; right: 18px; width: auto; max-width: none; padding: 0;
    bottom: calc(56px + env(safe-area-inset-bottom)); }
  .sw-copy:not(.sw-copy--hero):not(.sw-copy--screen)::before { left: -30%; right: -30%; top: -35%; bottom: -45%; }
  .sw-copy:not(.sw-copy--hero) .sw-copy__title { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
  .sw-copy:not(.sw-copy--hero) .sw-copy__body { font-size: .95rem; line-height: 1.55; }
  .sw-copy.sw-copy--screen { top: calc(16vh + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; width: auto; padding: 20px 20px 22px; border-radius: 22px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .sw-copy:not(.sw-copy--hero) { left: max(16px, env(safe-area-inset-left)); right: auto; width: min(52vw, 440px);
    bottom: 14px; padding: 0; }
  .sw-copy.sw-copy--screen { padding: 14px 18px; border-radius: 18px; }
  .sw-copy.sw-copy--screen { top: 16vh; bottom: auto; }
}

/* ---------- header: acciones (CTA "Conversemos" + botón de menú) ---------- */
.header__nav { margin-left: auto; }
.header__actions { display: flex; align-items: center; gap: 14px; margin-left: clamp(34px, 3.6vw, 56px); }
.header__cta { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; color: var(--ivory);
  padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--ivory) 55%, transparent); border-radius: 999px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .5s, visibility .5s, transform .5s, background .35s, color .35s, border-color .35s; }
body.show-cta .header__cta { opacity: 1; visibility: visible; transform: none; }
.header__cta:hover, .header__cta:focus-visible { background: var(--earth); border-color: var(--earth); color: var(--ivory); }
body.on-site .header__cta { color: var(--olive); border-color: color-mix(in srgb, var(--olive) 55%, transparent); }
body.on-site .header__cta:hover { color: var(--ivory); }
body.intro .header__actions { opacity: 0; pointer-events: none; }
.header__actions { transition: opacity 1.1s ease 1.3s; }

/* ---------- menú mobile ---------- */
.menu-btn { display: none; width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; color: var(--ivory); }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .35s, top .35s; }
.menu-btn span:first-child { top: 16px; } .menu-btn span:last-child { top: 25px; }
body.on-site .menu-btn { color: var(--olive); }
body.menu-open .menu-btn { color: var(--ivory); }
body.menu-open .menu-btn span:first-child { top: 20.5px; transform: rotate(45deg); }
body.menu-open .menu-btn span:last-child { top: 20.5px; transform: rotate(-45deg); }
.menu[hidden] { display: none !important; }
.menu { position: fixed; inset: 0; z-index: 99; background: color-mix(in srgb, var(--night) 97%, transparent);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s ease; }
body.menu-open .menu { opacity: 1; }
.menu__nav { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 34px); }
.menu__nav a { color: var(--ivory); text-decoration: none; font-weight: 200; font-size: clamp(1.9rem, 8vw, 2.6rem); letter-spacing: .02em; padding: 6px 18px; border-radius: 999px; transition: background .3s; }
.menu__nav a:hover, .menu__nav a:focus-visible { background: var(--earth); outline: none; }
body.menu-open .header { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .logo-black { opacity: 0 !important; } body.menu-open .logo-ivory { opacity: 1 !important; }
body.menu-open .header__logo { opacity: 1 !important; pointer-events: auto !important; }
body.menu-open .header__cta { color: var(--ivory); border-color: color-mix(in srgb, var(--ivory) 55%, transparent); }
body.menu-open { overflow: hidden; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .header__actions { margin-left: auto; gap: 8px; }
  .header__cta { padding: 8px 12px; font-size: .6rem; letter-spacing: .22em; }
}

/* ---------- curvas suaves en botones, header y tarjetas de proyecto ---------- */
.sw-btn, .btn { border-radius: 12px; }
.ph span { border-radius: 8px; }
.sw-route__label { border-radius: 8px; }
/* header: al pasar a la parte clara del sitio, curva en las esquinas de abajo
   (se nota sobre las secciones negra y olivo) */
.header { transition: background .4s, padding .4s, border-radius .4s; }
body.on-site .header { border-radius: 0 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px); border-bottom: 0;
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0,0,0,.35); }
/* proyectos: cada tarjeta (render o placeholder) con esquinas curvas */
.proyecto__media { border-radius: clamp(18px, 1.8vw, 26px); isolation: isolate; }

/* ---------- botón de idioma (muestra el idioma al que se cambia) ---------- */
.lang-btn { font: inherit; font-size: .66rem; font-weight: 500; letter-spacing: .22em; padding: 9px 0 9px .22em; width: 44px;
  color: var(--ivory); background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ivory) 40%, transparent); border-radius: 999px;
  transition: background .35s, color .35s, border-color .35s; }
.lang-btn:hover, .lang-btn:focus-visible { background: var(--earth); border-color: var(--earth); color: var(--ivory); outline: none; }
body.on-site .lang-btn { color: var(--olive); border-color: color-mix(in srgb, var(--olive) 45%, transparent); }
body.on-site .lang-btn:hover { color: var(--ivory); }
body.menu-open .lang-btn { color: var(--ivory); border-color: color-mix(in srgb, var(--ivory) 40%, transparent); }
@media (max-width: 860px) { .lang-btn { width: 40px; padding: 8px 0 8px .2em; font-size: .6rem; order: 2; } .header__cta { order: 1; } .menu-btn { order: 3; } }

/* ---------- perfil del arquitecto (sección Estudio) ----------
   escritorio: texto a la izquierda, foto a la derecha a toda la altura;
   celular: nombre → foto → bio → tarjeta → concepto */
.perfil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(40px, 6vw, 110px); row-gap: 0;
  grid-template-areas: "head foto" "bio foto" "dato foto" "conc foto"; align-items: start; }
.perfil__head { grid-area: head; color: var(--olive-light); }
.perfil__nombre { margin: 6px 0 0; color: var(--ivory); font-weight: 200; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.04; }
.perfil__nombre span { display: block; }
.perfil__bio { grid-area: bio; margin: clamp(22px, 2.4vw, 32px) 0 clamp(26px, 2.8vw, 36px); max-width: 48ch;
  font-weight: 300; font-size: 1.02rem; line-height: 1.7; color: color-mix(in srgb, var(--ivory) 86%, transparent); }
.perfil__dato { grid-area: dato; }
.perfil__concepto { grid-area: conc; margin-top: 12px; }
.perfil__concepto li:last-child { border-bottom: 0; }
.perfil__foto { grid-area: foto; margin: 0; align-self: start; aspect-ratio: 0.92; border-radius: clamp(22px, 2.2vw, 32px); overflow: hidden;
  background: var(--night-2); }
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.92); display: block; }
/* tarjeta de los 15 años, compacta como en la referencia */
.perfil__dato { max-width: 520px; padding-top: clamp(22px, 2.2vw, 30px); padding-bottom: clamp(22px, 2.2vw, 30px); }
.perfil__dato .valor__nodo { margin-bottom: clamp(10px, 1.2vw, 16px); }
.perfil__dato strong { font-size: clamp(3.2rem, 5vw, 4.4rem); }
.perfil__dato span { max-width: 32ch; }
.perfil__bio, .perfil__concepto { max-width: 520px; }
@media (max-width: 860px) {
  .perfil { grid-template-columns: 1fr; grid-template-areas: "head" "foto" "bio" "dato" "conc"; }
  .perfil__foto { aspect-ratio: 0.92; margin-top: 28px; }
  .perfil__bio { margin-top: 26px; }
}

/* ---------- celular: secuencia de imágenes (canvas) ---------- */
.sw-scene__seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; z-index: 2; display: block; }
/* fit 'width': se ve una porción ANCHA del render (sin el zoom del recorte vertical),
   centrada, con el mismo render difuminado de fondo arriba y abajo */
.sw-scene--fit .sw-scene__seq, .sw-scene--fit .sw-scene__still {
  top: 43%; bottom: auto; left: 0; width: 100%; height: auto; aspect-ratio: 540 / 760; object-fit: cover;
  transform: translateY(-50%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.sw-scene__seqbg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; z-index: 1; display: block;
  filter: blur(16px) brightness(.5) saturate(.85); }

/* ---------- proyectos con galería ---------- */
button.proyecto { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; width: 100%; cursor: pointer; display: block; }
button.proyecto:focus-visible { outline: 2px solid var(--earth); outline-offset: 6px; border-radius: clamp(18px, 1.8vw, 26px); }
.grid-proyectos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.proyecto__media { aspect-ratio: 16 / 10.5; }
.proyecto__media img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
button.proyecto:hover .proyecto__media img { transform: scale(1.04); }
.proyecto__ver { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ivory); padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--night) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .35s; }
button.proyecto:hover .proyecto__ver { background: var(--earth); }
.proyecto__num { z-index: 2; }

/* ---------- equipo (debajo del perfil de Uriel) ---------- */
.equipo { margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-ivory); }
.equipo__grid { list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 36px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); max-width: 820px; }
.persona__foto { margin: 0 0 18px; aspect-ratio: 4 / 5; border-radius: clamp(18px, 1.8vw, 26px); overflow: hidden; background: var(--night-2); }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.92); display: block; }
.persona .cap__t { color: var(--ivory); }
.persona .cap__d { color: var(--olive-light); opacity: 1; }

/* ---------- galería a pantalla completa ---------- */
.lightbox[hidden] { display: none !important; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 2vw, 28px);
  padding: clamp(56px, 7vh, 80px) clamp(10px, 3vw, 40px) clamp(20px, 4vh, 40px);
  background: color-mix(in srgb, var(--night) 96%, transparent); opacity: 0; transition: opacity .3s ease; }
body.lb-open .lightbox { opacity: 1; }
body.lb-open { overflow: hidden; }
.lb-fig { margin: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lb-img { max-width: 100%; max-height: calc(100% - 52px); object-fit: contain; border-radius: clamp(14px, 1.6vw, 22px); display: block; }
.lightbox.is-plano .lb-img { background: var(--ivory); padding: clamp(8px, 1vw, 16px); box-sizing: border-box; }
.lb-cap { color: color-mix(in srgb, var(--ivory) 82%, transparent); font-size: .86rem; font-weight: 300; text-align: center; }
.lb-cap span { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--ivory); margin-bottom: 6px; }
.lb-cap i { display: block; font-style: normal; font-size: .64rem; letter-spacing: .26em; margin-top: 6px; color: var(--olive-light); }
.lb-prev, .lb-next { width: 48px; height: 48px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ivory) 35%, transparent);
  background: transparent; color: var(--ivory); font-size: 1.2rem; cursor: pointer; transition: background .3s, border-color .3s; }
.lb-prev:hover, .lb-next:hover, .lb-prev:focus-visible, .lb-next:focus-visible { background: var(--earth); border-color: var(--earth); outline: none; }
.lb-close { position: absolute; top: clamp(12px, 2vh, 22px); right: clamp(12px, 2.4vw, 32px); width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; border-radius: 999px; }
.lb-close span { position: absolute; left: 12px; right: 12px; top: 22px; height: 1.5px; background: var(--ivory); transform: rotate(45deg); }
.lb-close span + span { transform: rotate(-45deg); }
.lb-close:hover, .lb-close:focus-visible { background: var(--earth); outline: none; }
@media (max-width: 860px) {
  .lightbox { grid-template-columns: 1fr; padding: 64px 10px 24px; }
  .lb-prev, .lb-next { position: absolute; bottom: 22px; width: 44px; height: 44px; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
  .lb-img { max-height: calc(100% - 110px); }
}

/* equipo como mini-perfiles (mismo lenguaje que Uriel, sin tarjeta de dato) */
.equipo__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); max-width: 1100px; gap: clamp(28px, 4vw, 64px); }
.persona__foto { margin-bottom: 26px; }
.persona__rol { color: var(--olive-light); }
.persona .dash { color: var(--olive-light); margin: 14px 0; }
.persona__nombre { margin: 0; color: var(--ivory); font-weight: 200; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.06; }
.persona__nombre span { display: block; }
.persona__bio { margin: 18px 0 0; max-width: 46ch; font-weight: 300; font-size: .98rem; line-height: 1.7; color: color-mix(in srgb, var(--ivory) 84%, transparent); }
.equipo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
@media (max-width: 700px) { .equipo__grid { grid-template-columns: 1fr; } }

/* equipo a todo el ancho: cada persona = foto a la izquierda + texto a la derecha */
.equipo__grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
.persona { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(20px, 2.4vw, 36px);
  grid-template-areas: "foto rol" "foto dash" "foto nombre" "foto bio"; grid-template-rows: auto auto auto 1fr; align-items: start; }
.persona__foto { grid-area: foto; margin: 0; }
.persona__rol { grid-area: rol; padding-top: 4px; }
.persona .dash { grid-area: dash; }
.persona__nombre { grid-area: nombre; font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
.persona__bio { grid-area: bio; font-size: .95rem; }
@media (max-width: 1100px) {
  .equipo__grid { grid-template-columns: 1fr; max-width: 760px; }
}
@media (max-width: 560px) {
  .persona { grid-template-columns: 1fr; grid-template-areas: "foto" "rol" "dash" "nombre" "bio"; grid-template-rows: none; }
  .persona__foto { margin-bottom: 22px; }
}

/* encabezado de sección editorial: título a la izquierda, bajada a la derecha,
   alineados por abajo y dentro del mismo ancho que el resto del contenido */
.sec-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end;
  column-gap: clamp(32px, 6vw, 120px); margin-bottom: clamp(40px, 5vw, 72px); }
.sec-top .sec-head { margin-bottom: 0; }
.sec-top .lead { margin: 0; padding-bottom: .45em; padding-left: clamp(18px, 1.6vw, 26px);
  border-left: 1px solid color-mix(in srgb, var(--olive) 35%, transparent); font-size: clamp(1rem, 1.2vw, 1.12rem); }
@media (max-width: 860px) {
  .sec-top { grid-template-columns: 1fr; row-gap: 22px; }
  .sec-top .lead { padding-left: 16px; }
}

/* ---------- FAQ (acordeón) ---------- */
#site > #faq { margin-top: 0; border-radius: 0; padding-top: clamp(40px, 5vw, 80px); }   /* sigue a Servicios, ambos ivory */
.faq { border-top: 1px solid color-mix(in srgb, var(--olive) 35%, transparent); max-width: 1000px; }
.faq__item { border-bottom: 1px solid color-mix(in srgb, var(--olive) 22%, transparent); }
.faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 2vw, 26px) 4px; color: var(--olive); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { font-size: .66rem; letter-spacing: .3em; color: var(--earth); font-weight: 400; }
.faq__q { font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.4; color: var(--ink); transition: color .3s; }
.faq__item summary:hover .faq__q, .faq__item[open] .faq__q { color: var(--olive); }
.faq__item summary:focus-visible { outline: 2px solid var(--earth); outline-offset: 2px; border-radius: 10px; }
.faq__icon { position: relative; width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent); transition: background .3s, border-color .3s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--olive); transform: translate(-50%, -50%); transition: transform .35s, background .3s; }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--earth); border-color: var(--earth); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--ivory); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 4px clamp(20px, 2.2vw, 28px) calc(clamp(14px, 2vw, 28px) + 2.4em); }
.faq__a p { margin: 0; max-width: 68ch; font-weight: 300; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.faq__item[open] .faq__a { animation: faq-in .45s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .faq__a { padding-left: 4px; } .faq__icon { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .faq__item[open] .faq__a { animation: none; } }
/* FAQ en dos columnas: título a la izquierda (fijo al recorrer), preguntas a la derecha */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); column-gap: clamp(40px, 6vw, 110px); align-items: start; }
.faq-head { position: sticky; top: 120px; margin-bottom: 0; }
.faq { max-width: none; margin: 0; }
@media (max-width: 960px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-head { position: static; margin-bottom: clamp(28px, 5vw, 44px); }
}

/* [IBARA] redes como íconos de trazo fino, sin color de marca: heredan el color del sitio */
.contacto dd.contacto__redes { display: flex; gap: 22px; align-items: center; padding-top: 2px; }
.contacto .contacto__redes a { border-bottom: 0; display: inline-flex; width: 30px; height: 30px; opacity: .85; transition: opacity .3s ease, transform .3s ease; }
.contacto .contacto__redes a:hover, .contacto .contacto__redes a:focus-visible { opacity: 1; transform: translateY(-2px); }
.contacto .contacto__redes svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.contacto .contacto__redes svg .fill { fill: currentColor; stroke: none; }

/* [IBARA] íconos alineados con la primera línea de texto de las otras columnas */
.contacto dd.contacto__redes { gap: 20px; padding-top: 0; min-height: 1.7em; }
.contacto .contacto__redes a, .contacto .contacto__tel .contacto__wa { width: 26px; height: 26px; }
.contacto dd.contacto__tel { display: flex; align-items: center; gap: 14px; min-height: 1.7em; }
.contacto .contacto__tel .contacto__wa { border-bottom: 0; display: inline-flex; opacity: .85; transition: opacity .3s ease, transform .3s ease; }
.contacto .contacto__tel .contacto__wa:hover, .contacto .contacto__tel .contacto__wa:focus-visible { opacity: 1; transform: translateY(-2px); }
.contacto .contacto__tel .contacto__wa svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.contacto dd.contacto__redes, .contacto dd.contacto__tel { margin-top: -3px; }
/* [IBARA] íconos de redes centrados bajo el título "REDES" (el título compensa su letter-spacing final) */
.contacto .contacto__redes-col { justify-self: start; display: flex; flex-direction: column; align-items: center; }
.contacto .contacto__redes-col dt { margin-right: -.4em; }
.contacto .contacto__redes-col dd.contacto__redes { justify-content: center; }

/* servicios con foto: tarjetas como las de Proyectos (esquinas curvas + zoom suave al pasar el mouse) */
.servicios { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.servicios li, .servicios li + li { padding: 0; border-top: 0; }
.servicio__foto { margin: 0 0 24px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: clamp(18px, 1.8vw, 26px); background: var(--paper-3); }
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.servicios li:hover .servicio__foto img { transform: scale(1.04); }
.servicios .num { margin-bottom: 14px; }