/* CEROBYTE v5 — "El tablero": la página como un tablero de piezas encajadas.
   Tokens primero; todo lo demás referencia tokens. Sin degradados, sin sombras en reposo, sin líneas finas. */

/* ------------------------------------------------------------------ fuentes (General Sans, Fontshare FFL, alojada aquí) */
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #ffffff;
  --surface: #eef2f6;      /* un paso desde el fondo */
  --surface-2: #dfe6ee;    /* dos pasos */
  --surface-3: #c3cfdd;
  --slate: #425466;
  --ink: #0a2540;          /* navy de marca */
  --muted: #425466;
  --accent: #5a13ff;       /* violeta del logo: solo en la acción */
  --accent-strong: #4a0be0;
  --accent-ink: #ffffff;
  --on-ink: #ffffff;
  --on-ink-muted: #c9d5e3;
  /* rotuladores por disciplina (proyectos) */
  --hl-redes: #cfe2ff;
  --hl-software: #c8f0e6;
  --hl-luz: #ffe2b0;
  --hl-eventos: #ffd5d8;

  --font: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --s-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-lead: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);
  --s-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --s-display: clamp(6rem, 14.4vw, 15rem);

  --gap: 8px;
  --margin: 12px;
  --pad: clamp(18px, 1.6vw, 24px);
  --radius: 6px;
  --section: clamp(96px, 11vw, 176px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --t-press: 120ms;
  --t-hover: 200ms;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--s-body); line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--on-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
body.menu-open { overflow: hidden; }

/* tablero: rejilla de 12 columnas con huecos de 8px */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-inline: var(--margin); }
.tile { position: relative; background: var(--surface); border-radius: var(--radius); padding: var(--pad); overflow: hidden; min-width: 0; }
.tile--ink { background: var(--ink); color: var(--on-ink); }
.tile--s2 { background: var(--surface-2); }
.tile--s3 { background: var(--surface-3); }
.tile--slate { background: var(--slate); color: var(--on-ink); }
.tile--accent { background: var(--accent); color: var(--accent-ink); }
.tile--photo { padding: 0; background: var(--ink); }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.section { margin-top: var(--section); }

/* ----------------------------------------------------------------- botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: var(--s-body); text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--t-hover) var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--light { background: var(--bg); color: var(--ink); }
.btn--wa { background: #25d366; color: #0a2540; }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-strong); }
  .btn:hover svg { transform: translateX(3px); }
  .btn--ink:hover { background: #163a63; }
  .btn--light:hover { background: var(--surface); }
  .btn--wa:hover { background: #3fe07c; }
}
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; text-decoration-thickness: .07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ------------------------------------------------------------------ header */
.header { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: background-color var(--t-hover) ease; }
.header__in { display: flex; align-items: center; gap: 24px; min-height: 64px; padding-inline: calc(var(--margin) + 8px); }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav .has-menu > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 500; border-radius: var(--radius); transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .nav > a:hover, .nav .has-menu > a:hover { background: var(--surface); } }
.nav-cta { min-height: 44px; }
.nav-tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; border-radius: var(--radius); transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .nav-tel:hover { background: var(--surface); } }
@media (max-width: 1180px) { .nav-tel { display: none; } }
.header__in { position: relative; }
.has-menu { position: static; }
.menu { position: absolute; top: 100%; right: var(--margin); width: min(900px, calc(100vw - 24px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: var(--gap); background: var(--bg); border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(10, 37, 64, .35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-hover) ease, transform var(--t-hover) var(--ease-out), visibility var(--t-hover); } /* taste-skill-ignore: capa flotante real / campo oculto */
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.menu__group { background: var(--surface); border-radius: var(--radius); padding: 16px; }
.menu__group h5 { margin: 0 0 8px; font-size: var(--s-small); font-weight: 500; color: var(--muted); }
.menu__group a { display: block; padding: 5px 0; text-decoration: none; font-size: var(--s-small); font-weight: 500; }
.menu__group a small { display: none; }
@media (hover: hover) and (pointer: fine) { .menu__group a:hover { text-decoration: underline; } }
.menu__all { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 16px; background: var(--ink); border-radius: var(--radius); }
.menu__all a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-ink); text-decoration: none; font-size: var(--s-small); font-weight: 500; }
.menu__all svg { width: 14px; height: 14px; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: var(--radius); background: var(--surface); cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--ink); transition: transform var(--t-hover) var(--ease-out), opacity var(--t-hover); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 23px; } .burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 64px 0 0; z-index: 49; background: var(--bg); padding: 12px var(--margin) 120px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-hover) ease, transform var(--t-hover) var(--ease-out), visibility var(--t-hover); }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu .mm-link { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; margin-bottom: 6px; background: var(--surface); border-radius: var(--radius); text-decoration: none; font-weight: 500; }
.mobile-menu .mm-link svg { width: 18px; height: 18px; }
.mobile-menu h5 { margin: 18px 4px 6px; font-size: var(--s-small); font-weight: 500; color: var(--muted); }
.mm-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-sub a { padding: 10px 12px; background: var(--surface); border-radius: var(--radius); text-decoration: none; font-size: var(--s-small); font-weight: 500; }
.mm-actions { display: grid; gap: 6px; margin-top: 18px; }

/* -------------------------------------------------------------------- hero
   Banda con el nombre + raíles: un viewport lleno de piezas. */
.hero { padding-top: 4px; }
.hero__board { grid-template-rows: auto auto minmax(0, 1fr); height: calc(100svh - 68px); min-height: 700px; max-height: 1080px; }
.nameband { grid-column: 1 / -1; height: clamp(110px, 13vw, 220px); padding: 0; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; }
.nameband__word { font-size: calc(var(--s-display) * 1.2); font-weight: 700; line-height: .74; letter-spacing: -.045em; white-space: nowrap; user-select: none; padding-top: .02em; }
.hero__links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.linktile { display: flex; justify-content: space-between; align-items: flex-start; min-height: 64px; padding: 16px 20px; background: var(--surface); border-radius: var(--radius); text-decoration: none; font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.linktile svg { width: 18px; height: 18px; margin-top: 3px; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .linktile:hover { background: var(--ink); color: var(--on-ink); } .linktile:hover svg { transform: translate(2px, -2px); } }
.hero__rail-l { grid-column: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.hero__main { grid-column: 3 / 11; position: relative; min-height: 0; }
.hero__main .shutter-wrap { position: absolute; inset: 0; overflow: hidden; }
.hero__statement { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; padding: var(--pad) var(--pad) calc(var(--pad) - 4px); width: min(100%, 860px); }
.hero__statement h1 { font-size: var(--s-lead); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; max-width: 24ch; }
.hero__statement p { margin-top: 10px; max-width: 60ch; }
.hero__rail-r { grid-column: 11 / 13; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--gap); min-height: 0; }
.fact { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 14px 16px; overflow: hidden; border-radius: var(--radius); font-size: var(--s-small); line-height: 1.35; }
.fact b { display: block; font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact--1 { background: var(--surface); }
.fact--2 { background: var(--surface-2); }
.fact--3 { background: var(--surface-3); }
.fact--4 { background: var(--slate); color: var(--on-ink); }
.fact--go { background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: var(--s-body); font-weight: 500; transition: background-color var(--t-hover) ease; }
.fact--go svg { width: 28px; height: 28px; align-self: flex-end; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fact--go:hover { background: var(--accent-strong); } .fact--go:hover svg { transform: translateX(4px); } }
.fact--go:active { transform: scale(.98); }
.rail-photo { padding: 0; }
.rail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rail-list { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-size: var(--s-small); line-height: 1.3; }
.rail-list li { display: flex; flex-direction: column; }
.rail-list span { color: var(--muted); }
.rail-list strong { font-weight: 500; }

/* ------------------------------------------------- showcase: mosaico de foto */
.mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mosaic__cell { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; position: relative; }
.mosaic__piece { position: absolute; inset: 0; background-image: url("../img/festyx-fx.webp"); background-size: 600% 400%; background-position: calc(var(--c) * 20%) calc(var(--r) * 33.333%); transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mosaic__cell:hover .mosaic__piece { transform: scale(1.08); } }
.mosaic__text { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--s-body); line-height: 1.3; }
.mosaic__text h2 { font-size: var(--s-lead); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.mosaic__text b { font-size: var(--s-lead); line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.mosaic__go { text-decoration: none; font-weight: 500; transition: background-color var(--t-hover) ease; }
.mosaic__go svg { width: 32px; height: 32px; align-self: flex-end; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mosaic__go:hover { background: var(--accent-strong); } .mosaic__go:hover svg { transform: translateX(4px); } }
.mosaic .m-wide { grid-column: span 2; aspect-ratio: auto; }
.mosaic__credit { grid-column: 1 / -1; font-size: var(--s-small); color: var(--muted); padding: 2px 4px 0; }

/* ------------------------------------------------ servicios: palabra gigante */
.services { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.services__col { grid-column: 1 / 8; container-type: inline-size; }
.giant { font-size: 21.5cqw; font-weight: 700; line-height: .8; letter-spacing: -.05em; margin: 0 0 20px -.04em; }
.bars { display: grid; gap: 6px; }
.bar { background: var(--surface); border-radius: var(--radius); }
.bar summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 20px; cursor: pointer; list-style: none; font-weight: 500; font-size: var(--s-body); transition: background-color var(--t-hover) ease; border-radius: var(--radius); }
.bar summary::-webkit-details-marker { display: none; }
.bar summary small { font-size: var(--s-small); font-weight: 400; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.bar summary i { position: relative; width: 18px; height: 18px; flex: none; }
.bar summary i::before, .bar summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: currentColor; transition: transform var(--t-hover) var(--ease-out); }
.bar summary i::after { transform: rotate(90deg); }
.bar[open] summary i::after { transform: rotate(0); }
@media (hover: hover) and (pointer: fine) { .bar summary:hover { background: var(--surface-2); } }
.bar__panel { padding: 4px 20px 20px; display: grid; gap: 2px; }
.bar:not([open]) .bar__panel { display: none; }
.bar__panel a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 9px 0; text-decoration: none; }
.bar__panel a strong { font-weight: 500; }
.bar__panel a span { color: var(--muted); font-size: var(--s-small); text-align: right; }
@media (hover: hover) and (pointer: fine) { .bar__panel a:hover strong { text-decoration: underline; text-underline-offset: .2em; } }
.services__side { grid-column: 9 / 13; position: sticky; top: 80px; display: grid; gap: var(--gap); }
.services__side .tile p + p { margin-top: 12px; }
.services__side .tile--photo { aspect-ratio: 4 / 5; }

/* -------------------------------------------- pieza viva: arma tu proyecto */
.kit { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.kit__head { grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 100%; }
.kit__head h2 { font-size: var(--s-head); font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.kit__pieces { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; border: 0; min-width: 0; }
.piece { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px; padding: 16px 40px 16px 16px; background: var(--surface); border-radius: var(--radius); cursor: pointer; font-weight: 500; line-height: 1.25; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.piece input { position: absolute; opacity: 0; pointer-events: none; }
.piece span { font-size: var(--s-small); font-weight: 400; color: var(--muted); transition: color var(--t-hover) ease; }
.piece::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 4px; background: var(--surface-3); transition: background-color var(--t-hover) ease; }
.piece:has(input:checked) { background: var(--ink); color: var(--on-ink); }
.piece:has(input:checked) span { color: var(--on-ink-muted); }
.piece:has(input:checked)::after { background: var(--accent); }
.piece:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.piece:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .piece:hover { background: var(--surface-2); } .piece:has(input:checked):hover { background: #163a63; } }
.kit__out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.kit__count { grid-column: 1 / 6; display: flex; align-items: flex-end; gap: 16px; }
.kit__count b { font-size: var(--s-head); font-weight: 700; line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kit__match { grid-column: 6 / 10; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.kit__match a { font-weight: 500; }
.kit__actions { grid-column: 10 / 13; display: grid; gap: var(--gap); align-content: stretch; }
.kit__actions .btn { height: 100%; min-height: 56px; justify-content: space-between; }

/* -------------------------------------------- proyectos: lomos de libro */
.shelf { padding-inline: calc(var(--margin) + 8px); }
.shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; margin-bottom: 24px; }
.shelf__head h2 { font-size: var(--s-head); font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.shelf__head p { max-width: 52ch; }
.spines { display: flex; gap: 6px; padding-top: 8px; }
.spine { flex: 1 1 0; min-width: 0; min-height: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 10px; background: var(--surface); border-radius: var(--radius); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-hover) var(--ease-out); }
.spine strong, .spine em, .spine small { writing-mode: vertical-rl; }
.spine strong { font-size: var(--s-body); font-weight: 500; line-height: 1.15; white-space: nowrap; }
.spine em { font-style: normal; font-size: var(--s-small); padding: 10px 4px; border-radius: 4px; margin-top: auto; white-space: nowrap; }
.spine[data-cat="redes-it"] em { background: var(--hl-redes); }
.spine[data-cat="software-ia"] em { background: var(--hl-software); }
.spine[data-cat="iluminacion-av"] em { background: var(--hl-luz); }
.spine[data-cat="eventos"] em { background: var(--hl-eventos); }
.spine small { font-size: var(--s-small); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .spines:hover .spine { color: var(--muted); } .spines .spine:hover { background: var(--ink); color: var(--on-ink); transform: translateY(-6px); } .spines .spine:hover small { color: var(--on-ink-muted); } .spines .spine:hover em { color: var(--ink); } }
.spine:focus-visible { background: var(--ink); color: var(--on-ink); }
.shelf__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: var(--s-small); }
.shelf__legend span { display: inline-flex; align-items: center; gap: 8px; }
.shelf__legend i { width: 14px; height: 14px; border-radius: 3px; }

/* --------------------------------------------- IA: 41 segundos */
.ai { background: var(--ink); color: var(--on-ink); padding-block: clamp(64px, 8vw, 120px); }
.ai__board { align-items: stretch; }
.ai__num { grid-column: 1 / 6; grid-row: 1 / span 2; background: transparent; padding: 0 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ai__num b { display: block; font-size: var(--s-display); font-weight: 700; line-height: .8; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ai__num h2 { font-size: var(--s-lead); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; }
.ai__num p { color: var(--on-ink-muted); max-width: 46ch; }
.ai__num .ai__actions { display: flex; flex-wrap: wrap; gap: var(--gap); }
.ai__steps { grid-column: 6 / 13; display: grid; gap: 6px; align-content: start; }
.ai__steps li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; min-height: 76px; padding: 14px 20px; background: #12345a; border-radius: var(--radius); }
.ai__steps li.is-ai { background: #1d4673; }
.ai__steps strong { display: block; font-weight: 500; }
.ai__steps small { display: block; font-size: var(--s-small); color: var(--on-ink-muted); }
.ai__steps .t { font-size: var(--s-body); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ai__foot { grid-column: 6 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-self: start; }
.ai__foot div { padding: 14px 20px; border-radius: var(--radius); background: var(--bg); color: var(--ink); font-size: var(--s-small); }
.ai__foot div:first-child { background: var(--hl-software); }
.ai__foot b { display: block; font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------- marcas: Festyx y BREO */
.brands { align-items: stretch; }
.brandtile { min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.brandtile--festyx { grid-column: 1 / 8; color: var(--on-ink); padding: 0; }
.brandtile--festyx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brandtile--festyx .brandtile__text { position: relative; margin-top: auto; background: var(--ink); padding: var(--pad); width: min(100%, 520px); border-radius: 0 var(--radius) 0 0; }
.brandtile--breo { grid-column: 8 / 13; background: var(--hl-software); }
.brandtile__name { font-size: var(--s-head); font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.brandtile p { margin-top: 10px; max-width: 46ch; }
.brandtile ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.brandtile li { font-size: var(--s-small); padding: 6px 10px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.brandtile--breo li { background: rgba(10, 37, 64, .08); }
.brandtile__actions { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 20px; }
/* fragmento real de interfaz (BREO en WhatsApp) */
.chat { display: grid; gap: 8px; padding: 16px; background: #ffffff; border-radius: var(--radius); max-width: 420px; }
.chat__bar { display: flex; align-items: center; gap: 10px; margin: -16px -16px 4px; padding: 10px 14px; background: #075e54; color: #fff; border-radius: var(--radius) var(--radius) 0 0; font-size: var(--s-small); font-weight: 500; }
.chat__bar i { width: 28px; height: 28px; border-radius: 50%; background: #25d366; color: #0a2540; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.msg { max-width: 82%; padding: 8px 10px; border-radius: 8px; font-size: var(--s-small); line-height: 1.35; background: #f0f2f5; color: #111b21; }
.msg--out { justify-self: end; background: #d9fdd3; }
.msg time { display: block; text-align: right; font-size: .75rem; color: #54656f; margin-top: 2px; }

/* --------------------------------------------- prueba: marcas grandes */
.proof__head { grid-column: 1 / -1; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; }
.proof__head h2 { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; max-width: 16ch; }
.proof__head p { color: var(--on-ink-muted); font-size: var(--s-small); }
.logo-tile { grid-column: span 3; min-height: 200px; display: grid; place-items: center; }
.logo-tile img { max-height: 64px; max-width: 70%; width: auto; filter: brightness(0) saturate(100%) invert(10%) sepia(37%) saturate(2337%) hue-rotate(189deg) brightness(93%) contrast(97%); }
.logo-tile--icon img { max-height: 72px; }
.logo-tile--tall img { max-height: 96px; }
.logo-tile small { position: absolute; left: 16px; bottom: 12px; font-size: var(--s-small); color: var(--muted); }

/* --------------------------------------------- sede: foto ancha + datos */
.about__intro { grid-column: 1 / -1; padding: 0 8px 56px; }
.about__intro h2 { font-size: var(--s-head); font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.about__intro p { margin-top: 20px; font-size: var(--s-lead); line-height: 1.25; max-width: 34ch; letter-spacing: -.01em; }
.about__photo { grid-column: 1 / 9; aspect-ratio: 16 / 10; }
.about__note { position: absolute; top: 0; right: 0; width: min(340px, 60%); background: var(--bg); padding: 20px; border-radius: 0 0 0 var(--radius); font-size: var(--s-body); z-index: 1; }
.about__note small { display: block; margin-top: 10px; font-size: var(--s-small); color: var(--muted); }
.about__side { grid-column: 9 / 13; display: grid; grid-template-rows: auto 1fr; gap: var(--gap); }
.zones { display: flex; flex-direction: column; gap: 16px; }
.zones b { font-size: var(--s-head); font-weight: 700; line-height: .85; letter-spacing: -.03em; }
.zones ul { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--s-small); }
.zones a { text-decoration: none; color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) { .zones a:hover { text-decoration: underline; } }
.facts4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.facts4 div { background: var(--surface); border-radius: var(--radius); padding: 16px; font-size: var(--s-small); }
.facts4 span { display: block; color: var(--muted); }
.facts4 strong { font-weight: 500; font-size: var(--s-body); }

/* --------------------------------------------- contacto: tira de fotos + barra */
.contact { background: var(--ink); color: var(--on-ink); padding-block: 48px clamp(64px, 8vw, 112px); overflow: hidden; }
.strip { display: flex; gap: var(--gap); width: max-content; animation: strip 70s linear infinite; }
.strip img { height: 150px; width: auto; border-radius: var(--radius); object-fit: cover; }
.strip img.r34 { aspect-ratio: 3 / 4; } .strip img.r11 { aspect-ratio: 1; } .strip img.r32 { aspect-ratio: 3 / 2; }
@keyframes strip { to { transform: translateX(-50%); } }
.contact__in { padding-inline: calc(var(--margin) + 8px); margin-top: 72px; }
.contact__in h2 { font-size: var(--s-head); font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.contact__in > p { margin-top: 14px; color: var(--on-ink-muted); max-width: 56ch; }
.leadbar { margin-top: 40px; }
.leadbar__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); }
.cell { position: relative; }
.cell label { position: absolute; left: 20px; top: 12px; font-size: var(--s-small); color: var(--on-ink-muted); pointer-events: none; }
.cell input, .cell select, .cell textarea { width: 100%; min-height: 96px; padding: 36px 20px 14px; border: 0; border-radius: var(--radius); background: #12345a; color: var(--on-ink); font-size: var(--s-body); outline: none; transition: background-color var(--t-hover) ease; }
.cell select { appearance: none; cursor: pointer; }
.cell textarea { min-height: 120px; resize: vertical; font-size: var(--s-body); }
.cell input::placeholder, .cell textarea::placeholder { color: #8fa3bd; }
.cell input:focus, .cell select:focus, .cell textarea:focus { background: #1d4673; }
.cell select option { color: #0a2540; }
.leadbar__submit { min-height: 96px; font-size: var(--s-body); justify-content: space-between; padding: 0 24px; }
.leadbar__more { margin-top: var(--gap); }
.leadbar__more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.leadbar__more .leadbar__row { margin-top: var(--gap); }
.leadbar__more:not([open]) > .leadbar__row { display: none; }
.leadbar__more .leadbar__row--full { grid-template-columns: 1fr; }
.leadbar__small { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); margin-top: 12px; font-size: var(--s-small); color: var(--on-ink-muted); }
.leadbar__small .check { grid-column: 1 / 3; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--s-small); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.check a { text-decoration: underline; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: capa flotante real / campo oculto */
.form__status:empty { display: none; }
.form__status { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius); background: #ffd5d8; color: var(--ink); font-size: var(--s-small); }
.contact__ways { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px var(--gap); margin-top: 120px; }
.contact__ways a, .contact__ways div { display: block; padding: 4px 0; text-decoration: none; }
.contact__ways span { display: block; font-size: var(--s-small); color: var(--on-ink-muted); }
.contact__ways strong { font-weight: 500; font-size: var(--s-lead); letter-spacing: -.01em; line-height: 1.15; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .15em; text-decoration-thickness: .06em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .contact__ways a:hover strong { text-decoration-color: currentColor; } }

/* ------------------------------------------------------------------ footer */
.footer { padding-block: var(--gap) var(--margin); }
.footer__board > * { min-height: 220px; }
.f-statement { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.f-statement p:first-child { font-size: var(--s-lead); line-height: 1.15; letter-spacing: -.01em; font-weight: 500; }
.f-statement p:last-child, .f-legal { font-size: var(--s-small); color: var(--muted); }
.f-nav { grid-column: 5 / 8; }
.f-nav ul { display: grid; gap: 4px; }
.f-nav a, .f-services a, .f-legal a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .f-nav a:hover, .f-services a:hover, .f-legal a:hover, .f-mail a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.f-time { grid-column: 8 / 10; display: flex; flex-direction: column; justify-content: space-between; }
.f-time b { font-size: var(--s-lead); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.f-time span { font-size: var(--s-small); color: var(--muted); }
.f-mail { grid-column: 10 / 13; display: flex; flex-direction: column; justify-content: space-between; }
.f-mail a { font-size: var(--s-body); font-weight: 500; text-decoration: none; }
.f-mail ul { display: grid; gap: 2px; font-size: var(--s-small); }
.f-services { grid-column: 1 / -1; min-height: 0 !important; }
.f-services h3 { font-size: var(--s-small); font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.f-services ul { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--s-small); }
.f-services div + div { margin-top: 16px; }
.f-mark { grid-column: 1 / 9; min-height: 320px !important; display: flex; align-items: center; justify-content: center; }
.f-mark span { font-size: calc(var(--s-display) * .82); white-space: nowrap; font-weight: 700; letter-spacing: -.045em; line-height: .8; }
.f-go { grid-column: 9 / 13; min-height: 320px !important; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: background-color var(--t-hover) ease; }
.f-go span { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.f-go svg { width: 56px; height: 56px; align-self: flex-end; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .f-go:hover { background: var(--accent-strong); } .f-go:hover svg { transform: translate(4px, -4px); } }
.f-legal { grid-column: 1 / -1; min-height: 0 !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; background: transparent; padding-block: 12px 4px; }
.f-legal > span { max-width: 110ch; }
.f-legal ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.credits a { text-decoration: underline; }

/* ---------------------------------------------- flotantes (WhatsApp, barra, popup) */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #0a2540; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(10, 37, 64, .5); transition: transform var(--t-hover) var(--ease-out); } /* taste-skill-ignore: capa flotante real / campo oculto */
.wa-float svg { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: scale(1.06); } }
.sticky-bar { display: none; }
.popup { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(10, 37, 64, .6); opacity: 0; visibility: hidden; transition: opacity var(--t-hover) ease, visibility var(--t-hover); }
.popup.is-open { opacity: 1; visibility: visible; }
.popup__box { position: relative; width: min(460px, 100%); max-height: 90svh; overflow-y: auto; background: var(--bg); border-radius: var(--radius); padding: 28px; box-shadow: 0 30px 80px -20px rgba(10, 37, 64, .5); } /* taste-skill-ignore: capa flotante real / campo oculto */
.popup__box h3 { font-size: var(--s-lead); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; margin-right: 40px; }
.popup__box > p { margin: 10px 0 18px; }
.popup__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.popup__close svg { width: 18px; height: 18px; }
.popup .form__offer { display: inline-block; margin-bottom: 12px; font-size: var(--s-small); font-weight: 500; color: var(--muted); }
.popup .form__offer .dot { display: none; }
.popup .field { margin-bottom: 10px; }
.popup .field label { display: block; font-size: var(--s-small); font-weight: 500; margin-bottom: 4px; }
.popup .field input { width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--surface); font-size: var(--s-body); }
.popup .field input:focus { background: var(--surface-2); outline: 2px solid var(--ink); }
.popup .check { margin: 12px 0 16px; }
.popup .btn--primary { background: var(--accent); color: #fff; width: 100%; }
.popup .btn--lg { min-height: 56px; }

/* --------------------------------------------------------------- movimiento */
@media (prefers-reduced-motion: no-preference) {
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter > img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter.is-in { clip-path: inset(0); }
  .js .shutter.is-in > img { transform: none; }
  .js .shutter.is-in.drift > img { animation: drift 24s 1.6s var(--ease-in-out) infinite alternate; }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }

  .js .nameband__word { transform: translateY(105%); transition: transform 1000ms var(--ease-out); }
  .js .is-in .nameband__word { transform: none; }

  .js .reveal > *, .js .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .reveal.is-visible > *, .js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .js .reveal.is-visible > :nth-child(2), .js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: 70ms; }
  .js .reveal.is-visible > :nth-child(3), .js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: 140ms; }
  .js .reveal.is-visible > :nth-child(4), .js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: 210ms; }
  .js .reveal.is-visible > :nth-child(5), .js .reveal-stagger.is-visible > :nth-child(5) { transition-delay: 280ms; }
  .js .reveal.is-visible > :nth-child(6), .js .reveal-stagger.is-visible > :nth-child(6) { transition-delay: 350ms; }
  .js .reveal.is-visible > :nth-child(7), .js .reveal-stagger.is-visible > :nth-child(7) { transition-delay: 420ms; }
  .js .reveal.is-visible > :nth-child(n+8), .js .reveal-stagger.is-visible > :nth-child(n+8) { transition-delay: 480ms; }
}
@media (prefers-reduced-motion: reduce) {
  .strip { animation: none; flex-wrap: wrap; width: auto; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .nav > a:not(.nav-cta) { padding: 0 8px; }
  .hero__rail-l { grid-column: 1 / 4; }
  .hero__main { grid-column: 4 / 13; }
  .hero__rail-r { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr) 1.3fr; grid-template-rows: none; }
  .fact { min-height: 120px; }
  .services__col { grid-column: 1 / -1; }
  .services__side { grid-column: 1 / -1; position: static; grid-template-columns: 1fr 1fr; }
  .services__side .tile--photo { aspect-ratio: auto; min-height: 280px; }
  .kit__head { grid-column: 1 / -1; }
  .kit__pieces { grid-column: 1 / -1; }
  .kit__count { grid-column: 1 / 5; } .kit__match { grid-column: 5 / 9; } .kit__actions { grid-column: 9 / 13; }
  .ai__num, .ai__steps, .ai__foot { grid-column: 1 / -1; grid-row: auto; }
  .brandtile--festyx, .brandtile--breo { grid-column: 1 / -1; }
  .brandtile--breo { order: -1; }
  .proof__head { grid-column: 1 / -1; }
  .logo-tile { grid-column: span 4; }
  .about__photo { grid-column: 1 / -1; }
  .about__side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .f-statement { grid-column: 1 / 7; } .f-nav { grid-column: 7 / 13; } .f-time { grid-column: 1 / 7; } .f-mail { grid-column: 7 / 13; }
  .f-mark { grid-column: 1 / -1; } .f-go { grid-column: 1 / -1; min-height: 200px !important; }
}
@media (max-width: 959px) {
  .nav, .nav-cta { display: none; }
  .burger { display: block; }
}

/* ------------------------------------------------------------------ móvil */
@media (max-width: 680px) {
  :root { --gap: 6px; --margin: 8px; --section: 96px; }
  .header__in { min-height: 60px; padding-inline: 12px; }
  .mobile-menu { inset: 60px 0 0; }
  .brand__img { height: 26px; }
  .hero__board { height: auto; min-height: 0; max-height: none; grid-template-rows: none; }
  .nameband { height: 110px; }
  .nameband__word { font-size: 18.5vw; line-height: .76; }
  .hero__links { grid-template-columns: 1fr 1fr; }
  .linktile { min-height: 56px; padding: 14px 16px; }
  .hero__main { grid-column: 1 / -1; order: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
  .hero__main .shutter-wrap { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
  .hero__statement { position: static; width: 100%; padding: 16px 4px 4px; }
  .hero__statement h1 { font-size: 6.4vw; }
  .hero__rail-r { order: 2; grid-template-columns: 1fr 1fr; }
  .hero__rail-r .fact--go { grid-column: 1 / -1; min-height: 88px; flex-direction: row; align-items: center; }
  .fact { min-height: 104px; }
  .hero__rail-l { order: 3; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .rail-photo { min-height: 220px; }
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic__piece { background-size: 300% 600%; background-position: calc(var(--mc) * 50%) calc(var(--mr) * 20%); }
  .mosaic__text { font-size: var(--s-small); padding: 12px; }
  .mosaic__text h2 { font-size: var(--s-lead); }
  .mosaic__text b { font-size: 1.25rem; }
  .mosaic .m-hide { display: none; }
  .giant { font-size: 18.5vw; }
  .bar summary { font-size: 1.125rem; padding: 0 16px; min-height: 58px; }
  .bar summary small { display: none; }
  .bar__panel { padding: 0 16px 16px; }
  .bar__panel a { grid-template-columns: 1fr; gap: 0; }
  .bar__panel a span { text-align: left; }
  .services__side { grid-template-columns: 1fr; }
  .kit__pieces { grid-template-columns: 1fr 1fr; }
  .piece { min-height: 104px; padding: 14px 36px 14px 14px; }
  .kit__count, .kit__match, .kit__actions { grid-column: 1 / -1; }
  .spines { flex-wrap: wrap; overflow: visible; gap: 10px 10px; }
  .spine strong, .spine em, .spine small { writing-mode: horizontal-tb; }
  .spine { flex: 0 1 auto; min-height: 0; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; }
  .spine strong { font-size: 1.0625rem; }
  .spine em { margin: 0; padding: 4px 8px; }
  .spine small { display: none; }
  .ai__steps li { grid-template-columns: 1fr; gap: 4px; }
  .ai__steps .t { font-size: 1.25rem; }
  .ai__foot { grid-template-columns: 1fr; }
  .ai__num b { font-size: 18.5vw; }
  .brandtile { min-height: 0; }
  .brandtile--festyx { min-height: 560px; }
  .proof__head { min-height: 120px; }
  .logo-tile { grid-column: span 6; min-height: 120px; }
  .logo-tile img { max-height: 44px; }
  .about__intro { padding-bottom: 32px; }
  .about__photo { aspect-ratio: 4 / 3; }
  .about__note { position: static; width: 100%; border-radius: 0; }
  .about__photo.tile--photo { display: flex; flex-direction: column; aspect-ratio: auto; background: var(--bg); }
  .about__photo.tile--photo img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius); }
  .about__side { grid-template-columns: 1fr; }
  .kit__count { align-items: center; }
  .kit__count b { font-size: var(--s-body); }
  .strip img { height: 110px; }
  .contact__in { margin-top: 48px; padding-inline: 12px; }
  .leadbar__row { grid-template-columns: 1fr; }
  .cell input, .cell select { min-height: 64px; padding: 28px 16px 8px; font-size: 1.125rem; }
  .cell label { left: 16px; top: 8px; }
  .leadbar__submit { min-height: 60px; }
  .leadbar__small { grid-template-columns: 1fr; }
  .leadbar__small .check { grid-column: auto; }
  .contact__ways { grid-template-columns: 1fr 1fr; }
  .footer__board > * { min-height: 0; }
  .f-mark { order: -2; min-height: 160px !important; }
  .f-go { order: -1; min-height: 140px !important; }
  .f-statement, .f-nav, .f-time, .f-mail { grid-column: 1 / -1; }
  .f-nav ul { grid-template-columns: 1fr 1fr; }
  .f-mark span { font-size: 18.5vw; }
  .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -10px 30px -18px rgba(10, 37, 64, .5); } /* taste-skill-ignore: capa flotante real / campo oculto */
  .sticky-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: var(--radius); background: var(--surface); text-decoration: none; font-weight: 500; font-size: var(--s-small); }
  .sticky-bar a.is-wa { background: #25d366; color: #0a2540; }
  .sticky-bar a.is-primary { background: var(--accent); color: #fff; }
  .sticky-bar svg { width: 18px; height: 18px; }
  .wa-float { display: none; }
  body { padding-bottom: 64px; }
}

/* ===================================================================
   Páginas interiores (servicios, zonas, hubs, proyectos, legales)
   =================================================================== */
.link.u, .u { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .2em; }
.section--near { margin-top: clamp(48px, 6vw, 96px); }
.f-mark img { width: min(78%, 620px); height: auto; }

/* migas */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--s-small); color: var(--on-ink-muted); }
.crumbs a { text-decoration: none; }
.crumbs i { font-style: normal; opacity: .6; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; } }

/* cabecera de página */
.phero { padding-top: 4px; }
.phero__board { align-items: stretch; }
.phero__main { grid-column: 1 / 9; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(420px, 52vh, 600px); padding: clamp(20px, 2.4vw, 36px); }
.phero__board--photo .phero__main { min-height: calc(100svh - 76px); max-height: 980px; padding: 0; }
.phero__img { position: absolute; inset: 0; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; }
.phero__panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0; }
.phero__board--photo .phero__panel { background: var(--ink); color: var(--on-ink); padding: clamp(20px, 2.2vw, 32px); width: min(100%, 940px); border-radius: 0 var(--radius) 0 0; }
.phero__panel .crumbs { margin-bottom: 20px; }
.phero__board--solo .phero__main { grid-column: 1 / -1; min-height: 380px; }
.phero__main h1 { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.phero__board--solo:not(.phero__board--photo) .phero__main h1 { font-size: var(--s-head); max-width: 24ch; }
.phero__lead { margin-top: 16px; max-width: 64ch; color: var(--on-ink); }
.phero__aside .form5 { align-self: stretch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 28px; }
.chips5 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.chips5 li { font-size: var(--s-small); padding: 6px 10px; border-radius: 4px; background: #12345a; }
.phero__aside { grid-column: 9 / 13; display: grid; min-width: 0; }
.phero__photo { min-height: 320px; position: relative; }
.phero__photo img, .phero__photo .shutter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__photo .shutter > img { width: 100%; height: 100%; object-fit: cover; }
.phero__facts { display: grid; gap: var(--gap); }
.fact5 { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.fact5 span, .facts5 span { font-size: var(--s-small); color: var(--muted); }
.fact5 b, .facts5 b { font-weight: 500; font-size: var(--s-body); }
.fact5--1 { background: var(--surface-2); } .fact5--2 { background: var(--surface-3); } .fact5--3 { background: var(--slate); color: var(--on-ink); } .fact5--3 span { color: var(--on-ink-muted); }
.facts5 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.trust5 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.trust5 li { padding: 16px 20px; border-radius: var(--radius); background: var(--surface); font-weight: 500; }
.trust5 li:nth-child(2) { background: var(--surface-2); }
.trust5 li:nth-child(3) { background: var(--surface-3); }

/* formulario en tile */
.form5 { display: flex; flex-direction: column; gap: 10px; }
.form5__title { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.form5 > p { font-size: var(--s-small); color: var(--muted); }
.f5 label { display: block; font-size: var(--s-small); font-weight: 500; margin-bottom: 4px; }
.f5 input, .f5 textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--bg); font-size: var(--s-body); color: var(--ink); outline: none; }
.f5 textarea { min-height: 84px; padding: 12px 14px; resize: vertical; }
.f5 input:focus, .f5 textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.form5 .btn { min-height: 54px; justify-content: space-between; }
.popup__alt { text-align: center; margin-top: 14px; font-size: var(--s-small); }

/* cabeceras de sección */
.shead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; padding-inline: calc(var(--margin) + 8px); margin-bottom: 24px; }
.shead h2 { font-size: var(--s-head); font-weight: 700; line-height: .98; letter-spacing: -.03em; max-width: 26ch; }
.shead p { max-width: 52ch; }

/* filas de servicio */
.rows5 { display: grid; gap: 6px; padding-inline: var(--margin); }
.row5 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2.4fr) 28px; align-items: center; gap: 24px; min-height: 96px; padding: 18px 24px; background: var(--surface); border-radius: var(--radius); text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.row5 strong { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.row5 small { font-size: var(--s-small); color: var(--muted); }
.row5 svg { width: 24px; height: 24px; transition: transform var(--t-hover) var(--ease-out); }
.row5:nth-child(even) { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .row5:hover { background: var(--ink); color: var(--on-ink); } .row5:hover small { color: var(--on-ink-muted); } .row5:hover svg { transform: translateX(4px); } }
.others5 { margin-top: 16px; }
.others5 p { grid-column: 1 / -1; padding: 0 8px; max-width: 70ch; }
.rows5--long strong { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
a.piece5 h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { a.piece5:hover h3 { text-decoration-color: currentColor; } }

/* piezas: lo que incluye / para quién */
.pieces5 > * { grid-column: span 4; min-height: 220px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.pieces5 > :first-child { grid-column: span 8; background: var(--ink); color: var(--on-ink); }
.pieces5 > :first-child h3 { font-size: var(--s-lead); }
.piece5 h3 { font-size: var(--s-body); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.piece5--1 { background: var(--surface-2); }
.pieces5 > :nth-child(6):last-child { grid-column: 1 / -1; min-height: 160px; background: var(--surface-3); }
.piece5 svg { width: 22px; height: 22px; margin-top: auto; align-self: flex-end; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.piece5:hover svg { transform: translate(3px, -3px); } a.piece5:hover { background: var(--surface-3); } a.piece5:first-child:hover { background: #163a63; } }

/* por qué: foto + texto */
.why5 { align-items: stretch; }
.why5__photo { grid-column: 1 / 7; min-height: 520px; position: relative; }
.why5__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why5__text { grid-column: 7 / 13; padding: 8px clamp(8px, 2vw, 32px); }
.why5__text h2 { font-size: var(--s-lead); font-weight: 700; line-height: .98; letter-spacing: -.03em; }
.why5__lead { margin-top: 20px; }
.stats5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 28px; }
.stats5 div { padding: 16px; border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.stats5 div:nth-child(2) { background: var(--surface-2); } .stats5 div:nth-child(3) { background: var(--surface-3); }
.stats5 b { font-size: var(--s-lead); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats5 small { font-size: var(--s-small); font-weight: 500; }
.stats5 span { font-size: var(--s-small); }
.checks5 { margin-top: 28px; display: grid; gap: 10px; }
.checks5 li { position: relative; padding-left: 28px; }
.checks5 li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }

/* cómo trabajamos */
.steps5 { background: var(--ink); color: var(--on-ink); padding-block: clamp(64px, 7vw, 112px); }
.steps5__in { padding-inline: calc(var(--margin) + 8px); }
.steps5 h2 { font-size: var(--s-head); font-weight: 700; line-height: .98; letter-spacing: -.03em; margin-bottom: 40px; }
.steps5 ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps5 ol:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.steps5 li { color: var(--on-ink-muted); }
.steps5 strong { display: block; color: var(--on-ink); font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 12px; }

/* FAQ */
.faq5 { align-items: start; }
.faq5__head { grid-column: 1 / 5; padding: 0 8px; position: sticky; top: 88px; }
.faq5__head h2 { font-size: var(--s-lead); font-weight: 700; line-height: .98; letter-spacing: -.03em; }
.faq5__head p { margin-top: 16px; font-size: var(--s-small); color: var(--muted); }
.faq5__list { grid-column: 5 / 13; }
.faq5__list .bar summary { font-size: var(--s-body); line-height: 1.3; padding-block: 16px; }
.faq5__list .bar__panel p { max-width: 70ch; }

/* zonas */
.zones5 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding: clamp(20px, 2.4vw, 36px); }
.zones5 h2 { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.zones5 p { margin-top: 12px; color: var(--on-ink-muted); }
.zones5 ul { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: start; }
.zones5 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .zones5 a:hover { text-decoration: underline; } }

/* enlaces en piezas */
.ltitle { grid-column: 1 / -1; font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; padding: 0 8px 8px; }
.ltiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }

/* cierre */
.stripwrap { overflow: hidden; padding-inline: var(--margin); }
.cta5wrap .stripwrap { margin-bottom: var(--gap); }
.section--near.stripwrap, .stripwrap + .section--near { margin-top: var(--gap); }
.cta5 { grid-template-rows: auto auto; }
.cta5 > * { min-height: 120px; }
.cta5__text { grid-column: 1 / 7; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 36px); }
.cta5__text h2 { font-size: var(--s-head); font-weight: 700; line-height: .98; letter-spacing: -.03em; }
.cta5__text p { max-width: 52ch; color: var(--on-ink-muted); }
.cta5__go { grid-column: 7 / 11; grid-row: 1 / span 2; }
.cta5__alt, .cta5__wa { grid-column: 11 / 13; }
.cta5__go, .cta5__alt, .cta5__wa { display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: background-color var(--t-hover) ease; }
.cta5__go span { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.cta5__go svg { width: 40px; height: 40px; align-self: flex-end; transition: transform var(--t-hover) var(--ease-out); }
.cta5__alt b, .cta5__wa b { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.cta5__alt span, .cta5__wa span { font-size: var(--s-small); }
.cta5__wa { background: #25d366; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .cta5__go:hover { background: var(--accent-strong); } .cta5__go:hover svg { transform: translateX(4px); } .cta5__alt:hover { background: var(--surface-3); } .cta5__wa:hover { background: #3fe07c; } }

/* foto ancha en hubs */
.banner5 { grid-column: 1 / -1; aspect-ratio: 21 / 8; position: relative; }
.banner5 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* zonas por comunidad */
.regions5 > .tile { grid-column: span 3; }
.regions5 h3 { font-size: var(--s-body); font-weight: 700; margin-bottom: 10px; }
.regions5 ul { display: grid; gap: 4px; }

/* proyectos */
.filters5 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.filters5 button { min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--surface); font-weight: 500; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.filters5 button small { color: var(--muted); margin-left: 4px; font-size: var(--s-small); }
.filters5 button.is-active { background: var(--ink); color: var(--on-ink); }
.filters5 button.is-active small { color: var(--on-ink-muted); }
@media (hover: hover) and (pointer: fine) { .filters5 button:not(.is-active):hover { background: var(--surface-2); } }
.cat5 { margin-top: clamp(56px, 6vw, 96px); }
.projs5 > .proj5 { grid-column: span 4; }
.proj5 { position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.proj5:nth-child(3n+2) { background: var(--surface-2); }
.proj5 strong { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.proj5__cat { position: absolute; top: 16px; left: 16px; font-size: var(--s-small); padding: 4px 8px; border-radius: 4px; color: var(--ink); }
.proj5__meta { font-size: var(--s-small); color: var(--muted); }
.proj5--photo { color: var(--on-ink); background: var(--ink); }
.proj5--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.proj5--photo > :not(img) { position: relative; }
.proj5--photo .proj5__meta { color: var(--on-ink-muted); }
@media (hover: hover) and (pointer: fine) { .proj5:hover { background: var(--ink); color: var(--on-ink); } .proj5:hover .proj5__meta { color: var(--on-ink-muted); } }
.case5 { align-items: start; }
.case5__label { grid-column: 1 / 5; padding: 0 8px; }
.case5__label h2 { font-size: var(--s-lead); font-weight: 700; line-height: .98; letter-spacing: -.03em; }
.case5__text { grid-column: 5 / 13; font-size: 1.25rem; line-height: 1.45; max-width: 58ch; }
.case5__list { grid-column: 5 / 13; display: grid; gap: 6px; }
.case5__list li { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); font-weight: 500; }
.case5__list li:nth-child(even) { background: var(--surface-2); }
.results5 { margin-top: var(--gap); }
.results5 > .tile { grid-column: span 3; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.results5 b { font-size: var(--s-head); font-weight: 700; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.results5 small { font-size: var(--s-body); font-weight: 500; }
.quote5 { grid-column: 1 / -1; margin-top: var(--gap); }
.quote5 blockquote { font-size: var(--s-lead); line-height: 1.2; max-width: 40ch; }
.quote5 figcaption { margin-top: 16px; font-size: var(--s-small); color: var(--muted); }
.similar5 { align-items: stretch; }
.similar5__text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 2.4vw, 36px); }
.similar5__text h2 { font-size: var(--s-lead); font-weight: 700; line-height: .98; letter-spacing: -.03em; max-width: 16ch; }
.similar5__rel { margin-top: auto; color: var(--on-ink-muted); }
.similar5__rel a { color: var(--on-ink); }
.similar5 .form5 { grid-column: 8 / 13; }
.casenav5 { grid-template-columns: repeat(3, 1fr); }


/* bloque local (landings servicio × zona) */
.local5 { align-items: stretch; }
.local5__text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 36px); }
.local5__text h2 { font-size: var(--s-lead); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 6px; }
.local5__facts { grid-column: 8 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.local5__facts .tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 130px; }
.local5__facts b { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.local5__facts span { font-size: var(--s-small); }
.local5__cities { background: var(--slate) !important; color: var(--on-ink); }
.local5__cities b { font-size: var(--s-body); line-height: 1.3; font-weight: 500; letter-spacing: 0; }
@media (max-width: 1100px) { .local5__text, .local5__facts { grid-column: 1 / -1; } }
@media (max-width: 680px) { .local5__facts .tile { min-height: 104px; } .local5__cities { grid-column: 1 / -1; } }

.incl5 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; padding: clamp(20px, 2.4vw, 32px); }
.incl5 li { position: relative; padding-left: 24px; font-weight: 500; }
.incl5 li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
@media (max-width: 1100px) { .incl5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .incl5 { grid-template-columns: 1fr; } }

/* legales */
.prose5 { grid-column: 3 / 11; padding: 0 8px; max-width: 72ch; }
.prose5 h2 { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 40px 0 12px; }
.prose5 h2:first-child { margin-top: 0; }
.prose5 p, .prose5 ul { margin-top: 12px; }
.prose5 ul { display: grid; gap: 6px; padding-left: 20px; list-style: square; }
.prose5 a { text-decoration: underline; }

/* contacto como página */
.contact--page { padding-top: 48px; }
.contact--page .stripwrap { padding: 0; }
.contact--page .contact__in { margin-top: 72px; }

.contact__in > p { color: var(--on-ink) !important; }
.contact--page .leadbar__more { margin-top: var(--gap); }

@media (max-width: 1100px) {
  .phero__main { grid-column: 1 / -1; min-height: 0; }
  .phero__aside { grid-column: 1 / -1; }
  .phero__photo { min-height: 360px; }
  .phero__facts { grid-template-columns: repeat(2, 1fr); }
  .row5 { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; }
  .row5 strong, .row5 span, .row5 small { grid-column: 1; }
  .row5 svg { grid-column: 2; grid-row: 1 / span 3; }
  .pieces5 > * { grid-column: span 6; }
  .pieces5 > :first-child { grid-column: 1 / -1; }
  .why5__photo, .why5__text { grid-column: 1 / -1; }
  .why5__photo { min-height: 360px; }
  .steps5 ol, .steps5 ol:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
  .faq5__head, .faq5__list { grid-column: 1 / -1; position: static; }
  .zones5 { grid-template-columns: 1fr; }
  .cta5__text { grid-column: 1 / -1; }
  .cta5__go { grid-column: 1 / -1; grid-row: auto; }
  .cta5__alt, .cta5__wa { grid-column: span 6; }
  .cta5__text { grid-row: auto; }
  .regions5 > .tile { grid-column: span 4; }
  .projs5 > .proj5 { grid-column: span 6; }
  .case5__label, .case5__text, .case5__list { grid-column: 1 / -1; }
  .similar5__text, .similar5 .form5 { grid-column: 1 / -1; }
  .prose5 { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .phero__main { gap: 32px; padding: 20px 16px; }
  .phero__main h1, .phero__board--solo .phero__main h1 { font-size: 6.8vw; }
  .phero__board--photo .phero__main { min-height: 0; max-height: none; background: var(--ink); }
  .phero__board--photo .phero__img { position: relative; aspect-ratio: 4 / 3; }
  .phero__board--photo .phero__panel { width: 100%; padding: 20px 16px; border-radius: 0; }
  .shead h2 { font-size: 7.6vw; }
  .phero__actions .btn { flex: 1 1 auto; }
  .trust5, .facts5 { grid-template-columns: 1fr; }
  .trust5 li { padding: 12px 16px; }
  .shead { padding-inline: 12px; margin-bottom: 16px; }
  .row5 { min-height: 0; padding: 16px; }
  .pieces5 > *, .pieces5 > :first-child { grid-column: 1 / -1; min-height: 0; }
  .stats5 { grid-template-columns: 1fr 1fr; }
  .steps5 ol, .steps5 ol:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; gap: 24px; }
  .steps5__in { padding-inline: 12px; }
  .cta5 > * { min-height: 120px; }
  .cta5__go { grid-column: 1 / -1; }
  .cta5__alt, .cta5__wa { grid-column: span 6; }
  .regions5 > .tile { grid-column: span 6; }
  .projs5 > .proj5 { grid-column: 1 / -1; min-height: 220px; }
  .results5 > .tile { grid-column: span 6; min-height: 140px; }
  .casenav5 { grid-template-columns: 1fr; }
  .contact--page .contact__in { padding-inline: 12px; }
}