/* Host Grotesk servida desde el sitio, no desde Google Fonts: ningún tercero recibe la IP del visitante (aviso de privacidad, 2026-10-27).
   Fuente variable 300 a 800, licencia SIL OFL 1.1 en fuentes/OFL.txt. */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fuentes/host-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fuentes/host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --negro: #0d0e10;
  --viveros-amarillo: #8f690a; /* amarillo oscuro de «Viver», del búho de la estampa (fundador, 2026-10-27) */
  --grafito: #17181c;       /* fondo de la portada */
  --blanco: #ffffff;
  --marino: #12284c;
  --marino-filete: #2a4068;
  --marino-claro: #5b7fc4;
  --azul-portada: #173f75;  /* fondo de las portadas, un azul profundo del mismo tono que el institucional (fundador, 2026-10-26) */
  --gris-oscuro: #26292e;   /* fondo de la portada, detrás de las fotos */
  --gris-medio: #33363c;    /* fondo de Negocios, un paso más claro que la portada */
  --filete-gris: rgba(255, 255, 255, .14);
  --punto-azul: #0786f1;    /* puntos del logo */
  --punto-verde: #48ed2f;
  --vino: #8e1f3d;          /* color de contraste: estados */
  /* Formas y tarjetas de producto: sobrios y apagados, más un solo acento (fundador, 2026-10-26).
     Sin naranja (fundador, 2026-10-26): chocaba con la paleta fría. La acción (botón de diagnóstico) va en azul medio. */
  --forma-vino: #6a2c3c;
  --forma-berenjena: #3a3048;
  --forma-laton: #7a6440;
  --forma-acero: #56688c;
  --forma-amarillo: #bd9825;
  --azul-institucional: #2562af; /* color institucional (fundador, 2026-10-26): puntos del logo, acción y forma azul */
  --forma-azul: var(--azul-institucional);
  --forma-morado: #8261af;
  --acento: var(--azul-institucional); /* azul de la acción */
  --cielo: #94a9c9;         /* cielo de la foto de Negocios (Torre Latinoamericana): hover de botones */
  --tinta: #0d0e10;
  --texto: #2c2d33;
  --apagado: #6b6c74;
  --apagado-oscuro: #a3a4ad;
  --filete: #dcdde2;
  --filete-oscuro: #2e2f35;
  --gutter: clamp(16px, 4vw, 48px);
  --maximo: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; }

.envoltura { max-width: var(--maximo); margin: 0 auto; padding: 0 var(--gutter); }
.saltar { position: absolute; left: -9999px; }
a.saltar:focus { left: 16px; top: 16px; z-index: 10; background: var(--blanco); padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--marino-claro); outline-offset: 3px; }

/* Botones: rectángulo, radio de 2 px */
.boton {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.boton--claro { background: var(--blanco); color: var(--negro); }
.boton--claro:hover { background: var(--cielo); color: var(--negro); }
.boton--acento { background: var(--acento); color: var(--blanco); }
.boton--acento:hover { background: var(--cielo); color: var(--negro); }
.boton--oscuro { background: var(--negro); color: var(--blanco); }
.boton--oscuro:hover { background: var(--cielo); color: var(--negro); }

/* Selector de idioma: ES y EN en gris; el activo se aclara a blanco. Sin borde ni fondo */
.idioma { display: flex; }
.idioma button {
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .04em;
  padding: 7px 8px; color: var(--apagado); background: transparent; border: 0; cursor: pointer;
  transition: color .15s ease-out, background-color .15s ease-out;
}
.idioma button:hover { color: var(--tinta); }
.idioma button[aria-pressed="true"] { color: var(--tinta); }

/* Barra */
.barra { background: var(--blanco); color: var(--tinta); position: sticky; top: 0; z-index: 5; transition: transform .25s ease-out; }
.barra--oculta { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.marca img { width: 40px; height: 40px; }
.nav { display: flex; align-items: center; gap: 32px; font-weight: 500; }
.nav a:not(.boton) { text-decoration: none; color: var(--tinta); transition: color .15s ease-out; }
.nav a:not(.boton):hover { color: var(--azul-institucional); }
.nav .boton { padding: 9px 16px; }
.nav__nos { display: inline-flex; align-items: baseline; }
/* El monograma ocupa el lugar de «os»: misma altura que las minúsculas del texto */
.nav__nos img { height: .82em; width: auto; margin-left: 1px; transform: translateY(.06em); }
.nav__nos img.nav__nos-aparte { margin-left: .28em; } /* «About OS»: palabra aparte, no terminación */

/* Portada: azul profundo con curvas de nivel blancas que se desplazan despacio */
.portada { position: relative; background: var(--azul-portada); color: var(--blanco); padding: 32px 0 clamp(32px, 5vh, 56px); overflow: hidden; isolation: isolate; }
.portada__patron {
  position: absolute; inset: 0; z-index: -1;
  background: url(img/curvas.svg) 0 0 / 480px 480px repeat;
  opacity: .14;
  /* antipatrón permitido: bucle infinito; el fundador pidió un fondo animado (2026-10-23). Lineal y lento, sin llamar la atención */
  animation: deriva 90s linear infinite;
}
@keyframes deriva { to { background-position: 480px -480px; } }
.portada__rejilla {
  display: grid;
  /* Texto e imagen juntos al centro. El círculo sube 44px bajo la barra (recorte de estilo)
     y se mide por el alto de la pantalla para que su crédito se vea sin bajar */
  --lente: min(620px, 46vw, calc(100svh - 72px - 32px - 76px + 44px));
  grid-template-columns: auto var(--lente);
  justify-content: center;
  grid-template-areas: "titulo lente";
  column-gap: clamp(24px, 3.5vw, 56px);
  row-gap: clamp(32px, 5vh, 56px);
  align-items: center;
}
.portada__titulo { grid-area: titulo; container-type: inline-size; width: clamp(300px, 38vw, 560px); }
/* «Impulsamos» termina en «os»: la terminación se escribe con el monograma, como en NosotrOS */
.portada__verbo { display: flex; align-items: baseline; }
.portada__logo { height: .74em; width: auto; margin: 0 .03em; overflow: visible; }
/* La «t» de «Boost» se separa del punto verde de la S, que sobresale del monograma */
.portada__cola { margin-left: .06em; }
.portada__verbo {
  display: block;
  font-size: clamp(2.25rem, 5.4vw, 5rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1;
}
/* La palabra se rellena con la misma imagen que está en el círculo */
.portada__palabra {
  display: block;
  font-size: 12cqi;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .9;
  padding: .04em 0 .1em;
}
/* La palabra toma el color principal de la imagen de la escena (portada.js); «Impulsam» y el monograma quedan en blanco */

.portada__lente { grid-area: lente; align-self: start; width: var(--lente); margin: calc(-32px - 44px) 0 0; }
.portada__circulo {
  aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--blanco);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.portada__circulo img { width: 100%; height: 100%; object-fit: cover; }
/* Crédito de cada imagen, bajo el círculo: autor, obra y licencia, con enlace a la fuente */
.portada__credito { margin-top: 14px; min-height: 2.6em; text-align: center; font-size: .8125rem; line-height: 1.35; color: var(--apagado-oscuro); }
.portada__credito a { text-decoration: none; }
.portada__credito a:hover { color: var(--blanco); text-decoration: underline; }



/* Secciones */
.seccion__cabeza { display: grid; gap: 20px; max-width: 640px; }
.seccion__cabeza h2 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; }
.seccion__entrada { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; }
.seccion__accion { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.seccion__accion p { max-width: 56ch; font-size: .95rem; }

/* Divisor entre portada y Negocios: dos barras anchas con los colores de la escena (portada.js los cambia) */
/* Colores de la escena: registrados como <color> para que el cambio se mezcle poco a poco en vez de saltar.
   La cadencia de escenas (1.1 s) y la mezcla (1.1 s): igual a la cadencia, el color llega justo cuando cambia la escena. */
@property --escena-a { syntax: '<color>'; inherits: true; initial-value: #e0674a; }
@property --escena-b { syntax: '<color>'; inherits: true; initial-value: #a77de0; }
:root { --escena-a: #e0674a; --escena-b: #a77de0; transition: --escena-a 1.1s ease-in-out, --escena-b 1.1s ease-in-out; } /* Data Solutions arranca en naranja y morado y luego sigue el ciclo de la portada con transición (fundador, 2026-10-26) */
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

/* Negocios: gris un paso más claro que la portada */
.negocios { position: relative; background: var(--gris-medio); color: #c9cacf; padding: clamp(48px, 6vw, 80px) 0; }
.negocios h2 { color: var(--blanco); }
.negocios .seccion__entrada { color: #e6e7ea; }
/* Cabeza: título y entrada a la izquierda, video a la derecha */
.negocios__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: center; }
.negocios__cabeza h2 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; /* antipatrón permitido (degradado): pedido del fundador 2026-10-26; toma los colores de la escena de la portada, como los cuadros */
  background: linear-gradient(90deg, var(--escena-a), color-mix(in oklab, var(--escena-a) 50%, var(--escena-b)) 48%, var(--escena-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.negocios__subtitulo { margin: 8px 0 0; font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--blanco); max-width: 34ch; }
/* Separador: los dos puntos del logo hechos bloque, con los colores de la escena de la portada; sin filete (antipatrón 38) */
.negocios__marca { display: flex; gap: 4px; margin: 32px 0 20px; }
.negocios__marca i { width: 12px; height: 12px; }
.negocios__marca i:first-child { background: var(--escena-a); }
.negocios__marca i:last-child { background: var(--escena-b); }
.negocios__cabeza .seccion__entrada { max-width: 50ch; margin: 0; font-size: 1.0625rem; line-height: 1.65; color: #c9cacf; }
.negocios__video { margin: 0; }
.taller__video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--gris-oscuro); }
.taller__pausa { margin-top: 10px; padding: 6px 0; font: inherit; font-size: .875rem; font-weight: 600; color: var(--apagado-oscuro); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
.taller__pausa:hover, .taller__pausa:focus-visible { color: var(--blanco); }
.negocios__video figcaption { margin-top: 10px; font-size: .8125rem; line-height: 1.4; color: var(--apagado-oscuro); }
/* PRUEBA (2026-10-26): cabeza de Data Solutions sobre franja blanca de lado a lado; los productos siguen en gris. Para volver, borrar este bloque.
   Los colores de escena están aclarados para el gris; sobre blanco se mezclan con tinta para que el título se lea. */
.negocios { overflow-x: clip; padding-top: 0; background: var(--blanco); color: var(--texto); }
.negocios__cabeza { padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px); background: var(--blanco); clip-path: inset(0 -100vmax); box-shadow: 0 0 0 100vmax var(--blanco); }
.negocios__cabeza h2 { background-image: linear-gradient(90deg, color-mix(in oklab, var(--escena-a) 72%, var(--tinta)), color-mix(in oklab, color-mix(in oklab, var(--escena-a) 50%, var(--escena-b)) 72%, var(--tinta)) 48%, color-mix(in oklab, var(--escena-b) 72%, var(--tinta))); }
.negocios__cabeza .negocios__subtitulo { color: var(--tinta); }
.negocios__cabeza .seccion__entrada { color: var(--texto); }
.negocios__cabeza .negocios__marca i:first-child { background: color-mix(in oklab, var(--escena-a) 72%, var(--tinta)); }
.negocios__cabeza .negocios__marca i:last-child { background: color-mix(in oklab, var(--escena-b) 72%, var(--tinta)); }
.negocios__cabeza .taller__pausa { color: var(--apagado); }
.negocios__cabeza .taller__pausa:hover, .negocios__cabeza .taller__pausa:focus-visible { color: var(--tinta); }
.negocios__cabeza .negocios__video figcaption { color: var(--apagado); }
.negocios__cabeza + .productos { margin-top: clamp(32px, 4vw, 56px); }

/* Productos: un bloque por producto, texto y esquema alternados de lado; sin filetes: la separación la hace el espacio */
.productos { margin-top: clamp(32px, 4vw, 56px); }
.productos__grupo { font-size: 1.0625rem; font-weight: 700; color: var(--blanco); }
.productos__grupo--web { margin-top: clamp(32px, 4vw, 48px); }
.productos__pregunta { margin-bottom: clamp(28px, 4vw, 48px); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; color: var(--tinta); }
/* Tarjetas de producto en zigzag: una a la izquierda, la siguiente a la derecha, encimadas en vertical (fundador, 2026-10-26).
   Cerradas muestran título, esquema y una línea; «Más información» despliega lo demás. Cada una toma un color de las formas.
   antipatrón permitido (radio de más de 2 px): pedido del fundador 2026-10-26, para que cada producto se lea como una herramienta aparte */
.producto {
  --solape: clamp(0px, 6vw, 84px); --aire: clamp(0px, 7.5vw, 108px); --u: clamp(64px, 7vw, 104px);
  position: relative; width: 54%; padding: clamp(18px, 1.8vw, 26px); margin-top: calc(var(--aire) - var(--solape));
  /* Horizontal (fundador, 2026-10-27): esquema a la izquierda, título, línea y botón a la derecha, para ver dos tarjetas a la vez */
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(18px, 2vw, 28px);
  background: var(--fondo); border-radius: 20px; color: var(--blanco);
  --caja: color-mix(in oklab, var(--fondo) 74%, black); --resalta: #bfe0ff;
}
.producto:first-of-type { margin-top: 0; }
.producto--der { margin-left: auto; }
/* Colores de tarjeta tomados de la paleta fría de la página (2026-10-26): azul de portada, marino, grafito, azul institucional y acero.
   Vecinas contiguas siempre distintas; el grafito se despega del gris de la sección. */
#estructura { --fondo: var(--azul-portada); }
#mapa { --fondo: var(--marino); }
#acervo { --fondo: var(--forma-berenjena); }
#tablero { --fondo: var(--azul-institucional); }
#plataforma { --fondo: var(--forma-vino); --resalta: #ffffff; } /* borde blanco: el azul claro desentonaba sobre el vino */
.producto h3 { grid-area: 1 / 2; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.producto__esquema { grid-area: 1 / 1 / 4 / 2; align-self: center; margin: 0; }
.producto__linea { grid-area: 2 / 2; margin-top: 12px; font-size: clamp(.9375rem, 1.1vw, 1.0625rem); line-height: 1.4; }
.producto .producto__interesa { grid-area: 3 / 2; align-self: end; }
.producto__detalle { grid-column: 1 / -1; }
.producto__mas { display: none; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px 10px 0;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--blanco); background: none; border: 0; cursor: pointer; }
.con-productos .producto__mas { display: inline-flex; }
.producto__mas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: rotate .25s ease-out; }
.producto__mas[aria-expanded="true"] svg { rotate: 45deg; }
.producto__mas span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.producto__mas:hover span, .producto__mas:focus-visible span { text-decoration-thickness: 2px; }
.producto__mas:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
/* «Me interesa»: a la derecha de la tarjeta; lleva a la página del producto (por hacer). Radio de 2 px, sin píldora */
.producto__interesa { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; margin: 22px 0 0 auto; padding: 12px 18px;
  font-size: .9375rem; font-weight: 700; color: var(--fondo); background: var(--blanco); border-radius: 2px; text-decoration: none; }
.producto__interesa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; transition: translate .2s ease-out; }
.producto__interesa:hover svg, .producto__interesa:focus-visible svg { translate: 4px 0; }
.producto__interesa:hover, .producto__interesa:focus-visible { background: var(--resalta); }
.producto__interesa:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }
.producto__detalle { margin-top: 12px; }
.producto__desc { color: var(--blanco); }
/* Datos del producto en filas, como los del Diagnóstico */
.producto__datos { margin-top: 20px; }
.producto__datos > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.producto__datos dt { font-size: .9375rem; font-weight: 700; }
.producto__datos dd { font-size: .9375rem; line-height: 1.45; }
/* Formas en el lado vacío de algunas tarjetas: ocupan la franja que no tapan las vecinas */
.producto .cinta { inset: var(--solape) auto var(--solape) calc(100% + 6%); width: 100%; }
.producto--der .cinta { left: auto; right: calc(100% + 6%); }
/* Atributos al lado de cada tarjeta: un guion del color de la tarjeta y una palabra que responda a «¿Qué estás buscando?» desde lo que ofrece el producto (Orden, Limpieza; fundador, 2026-10-27), máximo cuatro, bien separados (fundador, 2026-10-27).
   Ocupan la franja vacía que dejan las vecinas, igual que antes las formas. */
.producto .atributos { position: absolute; inset: 0 auto 0 calc(100% + 13%); width: 62%; list-style: none; padding: 8% 0;
  display: flex; flex-direction: column; justify-content: space-evenly; }
.producto--der .atributos { left: auto; right: calc(100% + 13%); }
/* Espejo del otro lado (fundador, 2026-10-27): con la tarjeta a la derecha las palabras se pegaban al borde lejano de su franja y quedaban más separadas.
   Se invierte la fila: el guion queda junto a la tarjeta, a la misma distancia (13 %) que del otro lado, y el texto se alinea hacia afuera. */
.producto--der .atributos li { flex-direction: row-reverse; justify-content: flex-start; }
.producto--der .atributos li::before { transform-origin: right center; }
.atributos li { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); font-size: clamp(1rem, 1.35vw, 1.3125rem); font-weight: 300; letter-spacing: -.005em; color: var(--tinta); white-space: nowrap; }
/* Entrada al bajar, una palabra tras otra (80 ms entre cada una): el guion se traza de izquierda a derecha y la palabra sube desde una línea. Todo con ease-out, sin rebote. Sin movimiento queda todo en su sitio. */
.atributos li { overflow: hidden; --r: 0ms; }
.atributos li:nth-child(2) { --r: 80ms; } .atributos li:nth-child(3) { --r: 160ms; } .atributos li:nth-child(4) { --r: 240ms; }
.atributos li.revela, .con-cintas .atributos li.revela:not(.visto) { clip-path: none; transition: none; }
.atributos li span { display: inline-block; transition: translate .6s cubic-bezier(.16, 1, .3, 1) calc(var(--r) + 180ms); }
.atributos li::before { transform-origin: left center; transition: scale .5s cubic-bezier(.16, 1, .3, 1) var(--r); }
.con-cintas .atributos li:not(.visto)::before { scale: 0 1; }
.con-cintas .atributos li:not(.visto) span { translate: 0 110%; }
.atributos li::before { content: ""; flex: none; width: clamp(18px, 2vw, 28px); height: 2px; background: var(--g, var(--fondo)); }
/* Cada guion con su color, tomados de las formas del sitio; cada tarjeta empieza en uno distinto para que las listas no se repitan */
#estructura .atributos li:nth-child(1), #mapa .atributos li:nth-child(2), #acervo .atributos li:nth-child(3), #tablero .atributos li:nth-child(4), #plataforma .atributos li:nth-child(5) { --g: var(--forma-azul); }
#estructura .atributos li:nth-child(2), #mapa .atributos li:nth-child(3), #acervo .atributos li:nth-child(4), #tablero .atributos li:nth-child(1), #plataforma .atributos li:nth-child(1) { --g: var(--forma-morado); }
#estructura .atributos li:nth-child(3), #mapa .atributos li:nth-child(4), #acervo .atributos li:nth-child(1), #tablero .atributos li:nth-child(2), #plataforma .atributos li:nth-child(2) { --g: var(--forma-amarillo); }
#estructura .atributos li:nth-child(4), #mapa .atributos li:nth-child(1), #acervo .atributos li:nth-child(2), #tablero .atributos li:nth-child(3), #plataforma .atributos li:nth-child(3) { --g: var(--forma-vino); }
#plataforma .atributos li:nth-child(4) { --g: var(--forma-acero); }
.producto > :not(.cinta):not(.atributos) { position: relative; z-index: 2; }
/* En los esquemas lo que recibe el cliente va en azul claro, que se lee sobre los cinco colores; el texto encima toma el color de la tarjeta */
.producto .e-azul, .producto .e-azul path, .producto .e-azul rect, .producto .e-azul circle { stroke: var(--resalta); }
.producto .e-azul-pleno, .producto .e-azul-pleno rect, .producto .e-azul-pleno circle { fill: var(--resalta); }
.producto .e-blanco, .producto .e-texto.e-blanco { fill: var(--fondo); } /* «Base única» sobre el azul claro: sin esto la regla de e-texto la dejaba blanca y no se leía */
.producto .e-texto, .producto .e-texto text { fill: rgba(255, 255, 255, .86); }
.producto .e-fuerte, .producto .e-fuerte text { fill: var(--blanco); }
.producto .e-filtros, .producto .e-filtros rect, .producto .e-filtros path, .producto .e-filtros circle { fill: none; stroke: var(--fondo); stroke-width: 1.25; } /* filtros sobre la barra azul claro del tablero */

/* Esquemas: qué entra y qué sale. Blanco para la estructura, azul para lo que recibe el cliente */
.producto__esquema svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.e-caja rect, rect.e-caja { fill: var(--caja, var(--gris-oscuro)); stroke: rgba(255, 255, 255, .4); stroke-width: 1.25; }
.e-ficha { fill: var(--fondo, var(--gris-medio)); stroke: var(--punto-azul); stroke-width: 1.5; }
.e-linea, .e-linea path, .e-linea rect, .e-linea circle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.e-punteada { stroke-dasharray: 5 6; }
.e-punta { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.e-tenue path { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.e-tenue-pleno rect { fill: rgba(255, 255, 255, .1); }
.e-azul, .e-azul path, .e-azul rect, .e-azul circle { fill: none; stroke: var(--punto-azul); stroke-width: 1.5; }
.e-gruesa { stroke-width: 2.5; stroke-linejoin: round; }
.e-azul-pleno, .e-azul-pleno rect, .e-azul-pleno circle { fill: var(--punto-azul); }
.e-blanco-pleno { fill: var(--blanco); }
.e-punto circle { fill: rgba(255, 255, 255, .7); }
.e-punto--tenue circle { fill: rgba(255, 255, 255, .3); }
.e-texto, .e-texto text { fill: #c9cacf; font-size: 16px; }
.e-fuerte, .e-fuerte text { fill: var(--blanco); font-weight: 600; }
.e-blanco { fill: var(--blanco); font-weight: 600; }
.e-chico, .e-chico text { font-size: 14px; }
.e-grande { font-size: 19px; }

/* Diagnóstico: bloque blanco pleno sobre el gris; el dato que lleva es el único precio público */
.diagnostico {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 24px clamp(24px, 4vw, 56px); align-items: start;
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background: var(--negro); color: #e6e7ea;
}
.diagnostico h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; color: var(--blanco); }
.diagnostico__cabeza p { margin-top: 10px; font-size: 1.0625rem; }
/* Sin raya entre filas (fundador, 2026-10-27, antipatrón 39): son dos filas y la raya era adorno; se separan con espacio */
.diagnostico__datos { list-style: none; display: grid; gap: 14px; }
.diagnostico__datos li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--blanco); }
.diagnostico__datos svg { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--punto-azul); stroke-width: 2; stroke-linecap: square; }

/* Preguntas: blanco, título a la izquierda y la lista a la derecha. Una tira de cuatro colores de la paleta las separa de la sección de arriba, sin filete (fundador, 2026-10-27) */
/* Sin filete de adorno entre secciones (antipatrón 39): separa el espacio */
.preguntas { padding: 0 0 clamp(72px, 9vw, 128px); }
.preguntas__tira { display: flex; height: 6px; max-width: 280px; margin: 0 0 clamp(32px, 4vw, 48px); }
.preguntas__tira i { flex: 1; } /* más abajo que arriba: la cinta del cierre sube sobre esta sección */
.preguntas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.preguntas h2 { font-size: clamp(1.75rem, 3.8vw, 3.1rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; color: var(--tinta); }
/* Cuatro formas bajo el título: llenan el espacio en blanco sin competir con la lista */
.preguntas__formas { --u: clamp(44px, 5.5vw, 76px); position: relative; height: calc(var(--u) * 1.6); margin-top: clamp(14px, 2vw, 24px); max-width: 260px; }
.preguntas__formas i { position: absolute; left: var(--x); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); background: var(--c); }
.preguntas__formas { --am: var(--forma-laton); --na: var(--forma-vino); --az: var(--marino); }
.preguntas details { border-top: 1px solid var(--filete); }
.preguntas details:last-child { border-bottom: 1px solid var(--filete); }
.preguntas summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin: 0 -14px; padding: 13px 14px; list-style: none; cursor: pointer;
  font-size: 1rem; font-weight: 600; color: var(--tinta);
  transition: background-color .15s ease-out;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:hover { background: rgba(18, 40, 76, .06); }
.preguntas__signo { flex: none; transition: transform .15s ease-out; }
.preguntas details[open] .preguntas__signo { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 16px; max-width: 62ch; font-size: .9375rem; }
.preguntas details a { color: var(--marino); text-underline-offset: 3px; }

/* Cierre: azul institucional pleno, el color de la acción; el pie va en marino para cerrar la página (fundador, 2026-10-27) */
.cierre { background: var(--azul-institucional); color: var(--blanco); padding: clamp(48px, 6vw, 72px) 0; }
.cierre__fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; }
.cierre h2 { max-width: 16ch; font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.02; }
.cierre__accion { display: grid; gap: 14px; justify-items: start; max-width: 34ch; }
.cierre__accion p { color: #c3cce0; }

/* Nuestro trabajo (antes Cultura): fondo blanco */
.cultura { --relleno: clamp(48px, 6vw, 80px); --cultura-cielo: var(--vino); --cultura-marino: var(--azul-institucional); position: relative; overflow: clip; padding: calc(var(--relleno) * .6) 0 var(--relleno); color: var(--texto); }
.cultura h2 { color: var(--tinta); }
/* La palabra toma los dos colores del árbol (arbol.svg: vino #8e1f3d y azul institucional #2562af); fija, sin imagen */
.cultura__palabra {
  color: transparent;
  background: linear-gradient(100deg, var(--cultura-cielo) 0%, var(--cultura-cielo) 42%, var(--cultura-marino) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.cultura__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cultura__tronco { width: 100%; max-width: 560px; }
.cultura__tronco > img { width: 100%; }
.cultura__izq { display: grid; gap: clamp(32px, 4vw, 56px); align-content: start; }

.seccion__accion--derecha { justify-content: flex-end; }
.seccion__accion--centro { justify-content: center; margin-top: 0; }

/* Fichas de proyecto: rectángulo con filete fino y la foto real del proyecto */
.fichas { margin-top: 48px; display: grid; gap: 20px; }
.ficha {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 1px solid var(--filete); background: var(--blanco);
  transition: border-color .15s ease-out;
}
/* La ficha entera es el enlace: el filete se marca solo al pasar el cursor (o al tabular). Sin enlace, no reacciona */
.ficha--enlace:hover, .ficha--enlace:focus-within { border-color: var(--tinta); }
.ficha__enlace { position: absolute; inset: 0; z-index: 1; }

/* Colaboremos: el mismo degradado de «culturales» como fondo del botón */
.boton--cultura { background: var(--azul-institucional); color: var(--blanco); }
.boton--cultura:hover { background: var(--azul-institucional); color: var(--blanco); filter: brightness(1.12); }
.ficha__foto { width: 100%; height: 100%; min-height: 200px; aspect-ratio: 16 / 10; object-fit: cover; object-position: left center; border-right: 1px solid var(--filete); }
/* Imágenes cuyo motivo está al centro (el búho de ViverOS, las fondas en el mapa): se recortan parejo por los lados */
.ficha__foto--centro { object-position: center; }
.ficha__foto--vacia { background: var(--gris-oscuro) url(img/curvas.svg) 0 0 / 480px 480px; background-blend-mode: soft-light; }
.ficha__cuerpo .boton { align-self: flex-start; }
.ficha__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.ficha__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ficha__nombre { display: inline-flex; align-items: baseline; font-size: 1.5rem; font-weight: 700; color: var(--tinta); letter-spacing: -.015em; line-height: 1.1; }
/* La terminación «OS» de los productos propios se escribe con el monograma */
.ficha__nombre--viveros { color: var(--viveros-amarillo); }
.ficha__nombre img { height: .74em; width: auto; margin-left: 2px; }
.ficha__nombre .ficha__cero { margin-left: 1px; }
/* Logo oficial de NodOS (símbolo con el nombre debajo) en lugar del rótulo; va a la derecha, sobre el texto */
.ficha__nombre--logo img { height: auto; width: clamp(120px, 14vw, 200px); margin-left: 0; }
/* El logo queda centrado sobre el texto de la ficha */
.trabajo .ficha--centrada .ficha__cuerpo { align-items: center; gap: clamp(24px, 2.4vw, 34px); padding-block: clamp(24px, 3vw, 40px); }
.ficha--centrada .ficha__cabeza { justify-content: center; }
.ficha p { font-size: .975rem; }

/* Trabajo a lo ancho de la página (fundador, 2026-10-27): sin tope de ancho, fichas más grandes y fotos más altas */
.envoltura--ancha { max-width: none; }
.trabajo .fichas { gap: clamp(20px, 2.5vw, 36px); }
.trabajo .ficha { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.trabajo .ficha__foto { aspect-ratio: auto; min-height: clamp(260px, 30vw, 440px); }
.trabajo .ficha__cuerpo { justify-content: center; gap: 16px; padding: clamp(24px, 4vw, 56px); }
.trabajo .ficha__nombre { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.trabajo .ficha p { font-size: clamp(1rem, 1.3vw, 1.25rem); max-width: 36ch; }

/* Nosotros (rehecho 2026-10-27, fundador): portada con lo que hace el estudio, y misión y visión en dos bloques de color pleno con formas animadas.
   Todo de borde a borde, sin franjas blancas; las formas son las de las cintas (cintas.js las anima al aparecer). */
.nos-portada { --u: clamp(90px, 11vw, 150px); position: relative; overflow: clip; background: var(--azul-portada); color: var(--blanco); }
.nos-portada .cinta { --am: var(--blanco); --na: #bcd4ff; --vi: var(--marino-claro); --ci: var(--cielo); --az: var(--marino); left: 52%; }
.nos-portada__fila { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; min-height: clamp(440px, 52vw, 600px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.nos-portada__texto { max-width: 38rem; }
.nos-portada__titulo { display: flex; align-items: baseline; font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nos-portada__titulo img { height: .72em; width: auto; margin-left: .02em; }
html[lang="en"] .nos-portada__titulo img { margin-left: .22em; } /* «About OS»: palabra aparte */
.nos-portada__texto > p { margin-top: clamp(20px, 2.5vw, 32px); max-width: 34ch; font-size: clamp(1.125rem, 1.7vw, 1.4rem); font-weight: 400; line-height: 1.5; color: #dbe7fb; }

.nos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nos-bloque { --u: clamp(72px, 10vw, 150px); position: relative; overflow: clip; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 4vw, 56px); padding: clamp(40px, 5vw, 72px) var(--gutter) 0; color: var(--blanco); }
.nos-bloque--mision { background: var(--forma-berenjena); --am: var(--forma-amarillo); --na: #bcd4ff; --vi: var(--forma-morado); --ci: var(--cielo); --az: var(--azul-institucional); }
.nos-bloque--vision { background: var(--forma-vino); --am: var(--forma-amarillo); --na: #ffd9e0; --vi: var(--forma-berenjena); --ci: var(--cielo); --az: var(--marino); }
.nos-bloque h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.nos-bloque p { margin-top: clamp(14px, 1.6vw, 22px); max-width: 30ch; font-size: clamp(1.125rem, 1.7vw, 1.4rem); font-weight: 400; line-height: 1.5; color: #e9ecf3; }
.nos-bloque__formas { position: relative; flex: 1; min-height: calc(var(--u) * 2.5); margin: 0 calc(-1 * var(--gutter)); }
.nos-bloque .cinta { overflow: clip; }

/* Fundador (2026-10-27): declaración del estudio arriba; debajo, fila con retrato en blanco y negro sobre azul institucional, cargo, semblanza mínima y enlaces. Sin rótulo, tarjeta, filete ni punto medio (antipatrones). */
.fundador { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px); background: var(--blanco); color: var(--tinta); }
.fundador__fila { max-width: 72rem; }
.fundador__titulo { margin-top: -.12em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.fundador__declaracion { margin: 18px 0 0; max-width: 58ch; font-size: clamp(1.125rem, 1.7vw, 1.4rem); font-weight: 400; line-height: 1.6; }
.fundador__fila { display: grid; grid-template-columns: clamp(200px, 22vw, 300px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.fundador__foto { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--azul-institucional); }
.fundador__persona { text-align: center; }
.fundador__detalle summary { list-style: none; cursor: pointer; padding: 16px 0 8px; }
.fundador__detalle summary::-webkit-details-marker { display: none; }
.fundador__mas { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .9375rem; color: color-mix(in oklab, var(--tinta) 62%, var(--blanco)); }
.fundador__mas::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--azul-institucional); border-bottom: 2px solid var(--azul-institucional); transform: rotate(45deg); transition: transform .15s ease-out; }
.fundador__detalle[open] .fundador__mas::after { transform: rotate(-135deg); margin-top: 3px; }
.fundador__detalle summary:focus-visible { outline: 2px solid var(--azul-institucional); outline-offset: 4px; }
.fundador__detalle summary:hover .fundador__nombre { color: var(--azul-institucional); }
.fundador__bio { margin-top: 12px; text-align: left; }
.fundador__bio .fundador__semblanza { font-size: 1rem; }
.fundador__nombre { margin-top: 0; font-size: 1.5rem; font-weight: 700; }
.fundador__cargo { margin-top: 2px; font-size: 1.125rem; font-weight: 400; color: var(--azul-institucional); }
.fundador__semblanza { margin-top: 0; margin-bottom: 14px; max-width: 56ch; font-size: 1.125rem; font-weight: 400; line-height: 1.55; color: var(--tinta); }
.fundador__contacto { margin-top: 14px; justify-content: center; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: .9375rem; }
.fundador__detalle[open] + .fundador__contacto { justify-content: flex-end; } /* centrado con la bio cerrada, a la derecha al abrirla */
.fundador .boton { padding: 12px 28px; font-size: 1.0625rem; }
@media (max-width: 760px) { .fundador__fila { grid-template-columns: 130px minmax(0, 1fr); } }
.nos-bloque .cinta i { top: auto; bottom: calc(var(--y) * var(--u)); } /* las formas se apoyan en el borde inferior: no queda hueco bajo el texto */

/* Notas: lista en filas (sin tarjetas) y entrada a una columna de lectura */
.notas { padding: clamp(56px, 8vw, 112px) 0; }
.notas h1, .notas h2 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; color: var(--tinta); }
.notas .seccion__entrada { margin-top: 20px; max-width: 52ch; }
.notas--inicio { padding-top: clamp(32px, 4vw, 56px); }
.notas__lista { margin-top: 40px; }
.notas__lista li { border-top: 1px solid var(--filete); }
.notas__lista li:last-child { border-bottom: 1px solid var(--filete); }
.notas__fila {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 6px clamp(24px, 4vw, 64px);
  margin: 0 -14px; padding: 22px 14px; text-decoration: none; transition: background-color .15s ease-out;
}
.notas__fila:hover { background: rgba(18, 40, 76, .06); }
.notas__fila time { grid-row: span 2; font-weight: 600; color: var(--apagado); }
.notas__titulo { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--tinta); }
.notas__resumen { max-width: 70ch; }
.notas__vacia { padding: 22px 0; color: var(--apagado); }
.notas__todas { margin-top: 24px; }
.notas__todas a { font-weight: 600; color: var(--marino); text-underline-offset: 3px; }

.nota { padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.nota__columna { max-width: calc(720px + 2 * var(--gutter)); }
.nota__borrador { margin-bottom: 32px; padding: 12px 16px; background: var(--vino); color: var(--blanco); font-weight: 600; }
.nota__fecha { font-weight: 600; color: var(--apagado); }
.nota h1 { margin-top: 12px; font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; color: var(--tinta); }
.nota__resumen { margin-top: 20px; font-size: clamp(1.125rem, 1.6vw, 1.3rem); }
.nota__cuerpo { margin-top: 40px; display: grid; gap: 20px; font-size: 1.0625rem; line-height: 1.65; }
.nota__cuerpo h2 { margin-top: 20px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; color: var(--tinta); }
.nota__cuerpo ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.nota__cuerpo a { color: var(--marino); text-underline-offset: 3px; }
/* Los dibujos del estudio son blancos: van sobre el gris de la sección de productos */
.nota__cuerpo figure { margin: 16px 0; }
.nota__cuerpo figure img { width: 100%; max-height: 360px; object-fit: contain; padding: 24px; background: var(--gris-medio); }
.nota__cuerpo figcaption { margin-top: 10px; font-size: .9375rem; color: var(--apagado); }
.nota__firma { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filete); display: flex; align-items: center; gap: 16px; }
.nota__firma img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.nota__accion { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.nota__accion a:not(.boton) { font-weight: 600; color: var(--marino); text-underline-offset: 3px; }

/* Pie: azul institucional con los colores del logo (blanco y azul claro); sin gris ni negro */
.pie { font-size: .9375rem; --pie-texto: #dbe7fb; --pie-claro: #bcd4ff; background: var(--marino); color: var(--pie-texto); padding: clamp(32px, 4vw, 48px) 0 24px; }
.pie__cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); align-items: start; }
/* Marca grande a la izquierda con su descriptor y la llamada; a la derecha Productos, Proyectos y Estudio (fundador, 2026-10-27) */
.pie__marca { display: grid; gap: 14px; justify-items: start; text-align: left; }
.pie__marca .boton { margin-top: 6px; }
.pie__descriptor { line-height: 1.5; color: var(--pie-texto); }
.pie__fila { display: flex; align-items: center; gap: 14px; }
.pie__logo { width: 72px; height: 72px; }
.pie__nombre { font-size: 1.75rem; font-weight: 600; color: var(--blanco); }
.pie__titulo { margin-bottom: 10px; font-size: 1rem; font-weight: 600; color: var(--blanco); }
.pie__col ul { display: grid; gap: 5px; }
.pie a:not(.boton) { text-decoration: none; color: var(--pie-texto); transition: color .15s ease-out; }
.pie a:not(.boton):hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }
.pie a:focus-visible, .pie summary:focus-visible { outline-color: var(--blanco); }
.pie__base { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 40px; }
.pie__legal { font-size: .8125rem; color: var(--pie-texto); }
/* Fuentes: desplegable discreto, gris y pequeño; el chevron es un trazo dibujado que gira al abrir */
.pie__fuentes { font-size: .8125rem; color: var(--pie-texto); }
.pie__fuentes summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.pie__fuentes summary::-webkit-details-marker { display: none; }
.pie__fuentes summary:hover, .pie__fuentes summary:focus-visible { color: var(--blanco); }
.pie__fuentes svg { transition: transform .2s ease-out; }
.pie__fuentes[open] svg { transform: rotate(180deg); }
.pie__fuentes ul { display: grid; gap: 6px; max-width: 72ch; margin: 12px 0 0; padding: 0; list-style: none; line-height: 1.45; }
.pie__fuentes a { color: inherit; text-decoration: none; }
.pie__fuentes a:hover { color: var(--blanco); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .pie__fuentes svg { transition: none; } }

/* Tableta y teléfono */
@media (max-width: 960px) { .pie__cuerpo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pie__cuerpo { grid-template-columns: minmax(0, 1fr); } .producto { display: block; } .producto__esquema { margin: 18px 0; } }
@media (max-width: 860px) {
  .nav { gap: 18px; }
  .nav a[href$="#productos"], .nav a[href$="#trabajo"], .nav a[href$="notas/"] { display: none; }
  .portada__rejilla { grid-template-columns: 1fr; grid-template-areas: "titulo" "lente"; }
  .portada__titulo { width: 100%; }
  .portada__lente { justify-self: center; width: min(92%, 460px); margin-top: 0; }
  .prueba { left: 8px; right: 8px; bottom: 8px; transform: none; justify-content: space-between; }
  .negocios__cabeza { grid-template-columns: minmax(0, 1fr); }
  .producto { width: 100%; margin-top: 20px; }
  .producto .cinta, .producto .atributos { display: none; }
  .producto__datos > div { grid-template-columns: minmax(0, 1fr); }
  .cultura__rejilla { grid-template-columns: minmax(0, 1fr); }
  .cultura__tronco { max-width: 360px; margin: 0 auto; }
  .diagnostico { grid-template-columns: minmax(0, 1fr); }
  .preguntas__rejilla { grid-template-columns: minmax(0, 1fr); }
  .preguntas summary { font-size: 1.0625rem; }
  .nos-portada__fila, .nos-par { grid-template-columns: minmax(0, 1fr); }
  .nos-portada__fila { min-height: 0; padding-bottom: calc(var(--u, 90px) * 2.4); }
  .nos-portada .cinta { left: 0; top: auto; height: calc(var(--u, 90px) * 2.4); bottom: 0; }
  .notas__fila { grid-template-columns: minmax(0, 1fr); }
  .notas__fila time { grid-row: auto; }
  .ficha { grid-template-columns: 1fr; }
  .ficha__foto { border-right: 0; border-bottom: 1px solid var(--filete); min-height: 0; }
  .trabajo .ficha { grid-template-columns: minmax(0, 1fr); }
  .trabajo .ficha__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .seccion__accion--derecha { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .marca span { display: none; }
  .nav .boton { padding: 8px 12px; font-size: .9rem; }
  .nav { gap: 12px; }
  .nav__nos { display: none; } /* en teléfono caben solo la cotización y el selector de idioma */
}

/* Herramienta de prueba (quitar antes de publicar) */
.prueba {
  position: fixed; left: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  padding: 4px; background: var(--negro); color: var(--blanco);
  border: 1px solid var(--filete-oscuro); border-radius: 2px;
  font-size: .875rem;
}
.prueba button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
  font: inherit; color: var(--apagado-oscuro); background: transparent; border: 0; border-radius: 2px; cursor: pointer;
}
.prueba button:hover { color: var(--blanco); background: var(--filete-oscuro); }
.prueba__nombre { min-width: 15ch; text-align: center; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .portada__patron { animation: none; }
}

/* Cintas: formas planas que separan las secciones (pedido del fundador, 2026-10-26; referencia: cartel de Mexico Tech Town).
   Composición de cartel, no fila: cada forma tiene su lugar (--x en % del ancho) y su tamaño en unidades de la altura de la banda
   (--u), así que hay losas grandes, piezas medianas y detalles chicos que se enciman y se salen de la banda. Colores sólidos, sin degradados.
   Cada cinta tiene otra composición; las tres no repiten molde. */
/* Paleta profunda (fundador, 2026-10-26: los tonos vivos se veían infantiles): marino, azul acero y vino salen de los tokens del sitio;
   berenjena y latón oscuro los acompañan. Los nombres de variable se conservan para no tocar el HTML. */
.cinta { --am: var(--forma-laton); --na: var(--forma-vino); --vi: var(--forma-berenjena); --ci: var(--forma-acero); --az: var(--marino);
  position: absolute; inset: 0; z-index: 1; overflow-x: clip; }
/* Cruce: la cinta y el título de sección comparten el mismo lugar; el título va en medio y las formas lo rodean
   (fundador, 2026-10-26). La banda crece con el título: arriba y abajo queda casi una unidad (--u) para las formas. */
.cruce { --u: clamp(88px, 11vw, 160px); position: relative; }
.cruce--division { height: calc(var(--u) * 1.15); }
.cruce__titulo { position: relative; z-index: 2; margin: 0 auto; padding: calc(var(--u) * .95) var(--gutter); text-align: center; }
.cruce__titulo--grande { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; }
.cruce .productos__pregunta { margin-bottom: 0; }
.cultura .cruce { --u: clamp(56px, 7vw, 100px); margin-bottom: clamp(24px, 3vw, 48px); } /* título de «Nuestro trabajo» más pequeño: texto y formas (fundador, 2026-10-27) */
.cultura .cruce__titulo--grande { font-size: clamp(1.75rem, 3.8vw, 3.1rem); }
.cultura .cinta { inset: 0 auto; left: 50%; width: min(100%, 980px); translate: -50% 0; } /* mismas formas que «¿Qué estás buscando?», en un ancho que sigue al título */
.cierre .cruce { --u: clamp(72px, 9vw, 130px); margin: calc(-.8 * var(--u)) 0 0; } /* formas y título a menor escala: las formas quedan en el aire de arriba y abajo, sin pisar el texto */
/* Sobre el azul pleno las formas van claras (fundador, 2026-10-27); una queda en marino de contraste */
.cierre .cinta { --am: var(--blanco); --na: #bcd4ff; --vi: var(--marino-claro); --ci: var(--cielo); --az: var(--marino); }
.cierre .cruce__titulo { max-width: 22ch; padding-top: calc(var(--u) * 1.6); } /* el texto baja para quedar centrado en el azul, ya que las formas sobresalen por arriba */
.cierre__fila { justify-content: center; margin-top: calc(-1 * clamp(24px, 3vw, 44px)); position: relative; z-index: 3; } /* el botón sube hacia el título (fundador, 2026-10-27) */
.cierre__accion { justify-items: center; text-align: center; }
.cinta i { position: absolute; left: var(--x); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: var(--c); rotate: var(--r, 0deg); transform-origin: var(--o, 50% 50%); }
.f-par { clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); }
.f-cuad { clip-path: polygon(10% 0, 100% 16%, 90% 100%, 0 84%); }
.f-tri { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.f-tri2 { clip-path: polygon(0 0, 100% 0, 0 100%); }
.f-barra { clip-path: polygon(0 82%, 90% 0, 100% 18%, 10% 100%); }
.f-flecha { clip-path: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%); }
.f-cuarto { border-radius: 100% 0 0 0; }
.f-medio { border-radius: 999px 999px 0 0; }
.f-disco { border-radius: 50%; }
/* Estado fijo (fundador, 2026-10-26): amarillo, azul y morado, los de la portada oscurecidos para leerse sobre blanco; no siguen la escena. */
.c-rs { --c: var(--forma-amarillo); } .c-rb { --c: var(--forma-azul); } .c-mo { --c: var(--forma-morado); } .c-am { --c: var(--am); } .c-na { --c: var(--na); } .c-vi { --c: var(--vi); } .c-ci { --c: var(--ci); } .c-az { --c: var(--az); }
/* Las formas de abajo se miden desde el borde inferior, para no chocar con el título si este ocupa más renglones */
.cinta i.abajo { top: auto; bottom: calc(var(--y) * var(--u)); }
/* El cruce dentro de la envoltura se abre a todo el ancho de la pantalla */
.envoltura > .cruce { width: 100vw; margin-left: calc(50% - 50vw); }
/* En teléfono la banda es más angosta: se quitan los detalles para que la composición respire */
@media (max-width: 640px) { .cinta .m-no { display: none; } }

/* Animación: cada forma entra a su manera, una sola vez, cuando la cinta aparece en pantalla.
   e-desliz recorre su propia diagonal desde fuera; e-escala crece desde la esquina en que se apoya (--o); e-gozne gira sobre esa esquina
   como una pieza que se asienta; e-cae baja desde arriba. ease-out y retrasos propios (--d), todo termina antes de 1 s.
   Después (clase .quieta, cintas.js) las formas responden al puntero en escritorio: se apartan un poco de él. */
.cinta i { transition: translate .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), scale .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
  rotate .65s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), opacity .25s ease-out var(--d, 0ms); }
.con-cintas .cinta:not(.visto) i { opacity: 0; }
.con-cintas .cinta:not(.visto) .e-desliz { translate: -38% 60%; }
.con-cintas .cinta:not(.visto) .e-escala { scale: 0; }
.con-cintas .cinta:not(.visto) .e-gozne { rotate: calc(var(--r, 0deg) - 50deg); }
.con-cintas .cinta:not(.visto) .e-cae { translate: 0 -140%; }
.cinta.quieta i { transition: translate .35s ease-out, rotate .35s ease-out; translate: var(--px, 0) var(--py, 0); rotate: calc(var(--r, 0deg) + var(--pr, 0deg)); }
.revela { clip-path: polygon(0 -10%, 115% -10%, 100% 120%, 0 120%); transition: clip-path .6s cubic-bezier(.2, .7, .2, 1) .15s; }
.con-cintas .revela:not(.visto) { clip-path: polygon(0 -10%, 0 -10%, 0 120%, 0 120%); }

.pie__aviso { font-size: .8125rem; }