/* Versión inspirada en Cuberto: fondo blanco, mucho aire, paneles negros redondeados, texto que rueda y cursor en negativo. */
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --tinta: #0B0B0A; --gris-txt: #6B6A64; --gris: #ECECEA; --gris-2: #F5F5F3; --linea: #E2E2DE; --am: #FFD400;
  --osc-txt: #A5A49E; --osc-linea: rgba(255,255,255,.14); --r: 22px; --r-s: 14px; --cab: 72px;
  --sec: clamp(5rem, 3rem + 7vw, 9rem); --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 1rem); }
body { margin: 0; background: #fff; color: var(--tinta); font: 400 1.0625rem/1.5 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.quieto { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.03em; line-height: 1.06; }
h2 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); }
h3 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.negro :focus-visible, .pie :focus-visible, .cierre :focus-visible { outline-color: var(--am); }
.ancho { width: min(100% - 2 * clamp(1.15rem, 5vw, 5rem), 1320px); margin-inline: auto; }
.ancho--medio { width: min(100% - 2 * clamp(1.15rem, 5vw, 5rem), 1040px); }
.etq { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-txt); }
.negro .etq { color: var(--osc-txt); }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--am); border-radius: 999px; }
.saltar:focus { top: 1rem; }
.fl { width: 1em; height: 1em; flex: none; }
.redondo { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--tinta); color: #fff; font-size: .85rem; transition: background .3s, color .3s, transform .4s var(--ease); }
.negro .redondo { background: #fff; color: var(--tinta); }

/* Texto que rueda: la palabra sube y entra una copia desde abajo */
.rueda { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; }
.rueda > span { display: inline-block; transition: transform .45s var(--ease); }
.rueda::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .45s var(--ease); }
@media (hover: hover) {
  a:hover > .rueda > span, button:hover > .rueda > span, a:hover > b > .rueda > span { transform: translateY(-100%); }
  a:hover > .rueda::after, button:hover > .rueda::after, a:hover > b > .rueda::after { transform: translateY(-100%); }
}

/* Botón píldora: el relleno amarillo nace donde está el cursor */
.btn { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95em 1.55em; border-radius: 999px; font-weight: 500; font-size: 1rem; border: 1px solid transparent; transition: color .3s, border-color .3s; text-align: center; }
.btn--peq { padding: .62em 1.15em; font-size: .92rem; }
.btn__mancha { position: absolute; z-index: -1; left: var(--mx); top: var(--my); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--am); transform: translate(-50%, -50%) scale(0); transition: transform .55s var(--ease); }
@media (hover: hover) { .btn:hover .btn__mancha { transform: translate(-50%, -50%) scale(1); } .btn:hover { color: var(--tinta); border-color: var(--am); } }
.btn--negro { background: var(--tinta); color: #fff; }
.btn--blanco { background: #fff; color: var(--tinta); }
.btn--linea { border-color: var(--linea); }
.negro .btn--linea, .cierre .btn--linea { border-color: var(--osc-linea); color: #fff; }
.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }

/* ---------- Cabecera y menú ---------- */
.cab { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .5s var(--ease); }
.cab::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--cab); background: #fff; }
.cab--oculta { transform: translateY(-100%); }
.cab__fila { position: relative; z-index: 2; height: var(--cab); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.04em; }
.logo img { width: 28px; height: 28px; border-radius: 7px; }
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); }
.nav__enlace { font-size: .95rem; font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.nav__enlace[aria-expanded="true"] { color: var(--gris-txt); }
.cab__menu { display: none; padding: .5rem 1rem; border-radius: 999px; background: var(--tinta); color: #fff; font-size: .92rem; font-weight: 500; }

/* Carta blanca que se abre desde la cabecera, con la página difuminada detrás */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(11,11,10,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; }
.velo.ver { opacity: 1; }
.carta { position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--cab) - .35rem); }
.carta[hidden] { display: none; }
.carta__dentro { background: #fff; border-radius: var(--r); padding: clamp(1.4rem, 2.6vw, 2.4rem); box-shadow: 0 30px 80px -24px rgba(11,11,10,.4); clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path .6s var(--ease); max-height: calc(100vh - var(--cab) - 1rem); overflow-y: auto; }
.carta.ver .carta__dentro { clip-path: inset(-1px round var(--r)); }
.carta__rej { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2.5rem); }
.carta__titulo { font-size: .8rem; color: var(--gris-txt); padding-bottom: .8rem; margin-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.carta__enlace { display: block; padding: .62rem 0; }
.carta__enlace b { display: block; font-size: 1.14rem; font-weight: 500; letter-spacing: -.02em; }
.carta__enlace small { display: block; margin-top: .1rem; font-size: .86rem; line-height: 1.35; color: var(--gris-txt); }
.carta__todo { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; padding-top: 1.1rem; font-size: .95rem; font-weight: 500; }
.carta--sectores { width: min(100% - 2 * clamp(1.15rem, 5vw, 5rem), 760px); left: auto; right: max(clamp(1.15rem, 5vw, 5rem), calc((100vw - 1320px) / 2)); margin: 0; }
.carta__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.carta__sector img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-s); margin-bottom: .8rem; transition: transform .8s var(--ease); }
.carta__sector b { display: block; font-size: 1.14rem; font-weight: 500; }
.carta__sector small { display: block; font-size: .86rem; line-height: 1.35; color: var(--gris-txt); margin-top: .1rem; }

/* Menú del móvil: tarjeta que baja, con enlaces numerados grandes */
.movil { display: none; position: absolute; z-index: 3; top: .5rem; left: .5rem; right: .5rem; padding: calc(var(--cab) - .4rem) 1.2rem 1.2rem; background: #fff; border-radius: var(--r); box-shadow: 0 30px 80px -20px rgba(11,11,10,.45); clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path .6s var(--ease); max-height: calc(100dvh - 1rem); overflow-y: auto; }
.movil[hidden] { display: none !important; }
.movil.ver { clip-path: inset(0 round var(--r)); }
.movil__item { border-top: 1px solid var(--linea); overflow: hidden; }
.movil__abre { display: flex; align-items: baseline; gap: .7rem; width: 100%; padding: .75rem 0; font-size: 2rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; text-align: left; transform: translateY(110%); transition: transform .7s var(--ease); }
.movil.ver .movil__abre { transform: none; transition-delay: calc(.1s + var(--d) * 45ms); }
.movil__abre > span { font-size: .74rem; letter-spacing: 0; color: var(--gris-txt); width: 1.3rem; }
.movil__abre i { margin-left: auto; align-self: center; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--ease); }
.movil__abre[aria-expanded="true"] i { transform: translateY(2px) rotate(225deg); }
.movil__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.movil__abre[aria-expanded="true"] + .movil__sub { grid-template-rows: 1fr; }
.movil__sub > div { overflow: hidden; min-height: 0; }
.movil__pastillas { display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem 0 1rem 2rem; }
.movil__pastillas a { padding: .48em .9em; border-radius: 999px; background: var(--gris); font-size: .94rem; }
.movil__pastillas .movil__todos { background: var(--tinta); color: #fff; }
.movil__pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea); font-weight: 500; }

/* ---------- Entrada ---------- */
.entrada { padding: calc(var(--cab) + clamp(2.5rem, 1.5rem + 5vw, 6rem)) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align: center; }
.entrada--sola { padding-bottom: clamp(1rem, 1rem + 2vw, 3rem); }
.entrada h1 { font-size: clamp(2.5rem, 1.25rem + 5vw, 5.6rem); line-height: 1.04; letter-spacing: -.035em; max-width: 17ch; margin-inline: auto; }
.entrada__txt { max-width: 37rem; margin: 1.5rem auto 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.45; }
.migas { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--gris-txt); margin-bottom: 1.3rem; }
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; }
.js .pal > span { transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; animation: palabra 1s var(--ease) forwards; animation-delay: calc(.05s + var(--i) * 60ms); }
@keyframes palabra { to { transform: none; } }

/* Imagen grande que crece hasta el ancho completo al bajar */
.vista { --p: 0; width: min(100% - 2 * clamp(1.15rem, 2vw, 2rem), 1760px); margin-inline: auto; }
.vista__marco { width: calc(72% + 28% * var(--p)); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--tinta); }
.vista__marco img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .vista__marco { width: 100%; aspect-ratio: 4 / 3; } }

.resumen { padding-block: var(--sec); display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; }
.resumen__txt { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; }
@media (max-width: 800px) { .resumen { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Tarjetas de servicios: la activa se abre en negro y las demás quedan plegadas ---------- */
.acordeon { position: relative; padding-bottom: var(--sec); }
.js .acordeon { height: calc(100vh + (var(--n) - 1) * 62vh); padding-bottom: 0; margin-bottom: var(--sec); }
.acordeon__fijo { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-top: var(--cab); }
.acordeon__lista { display: grid; gap: .5rem; }
.pieza { border-radius: var(--r); background: var(--gris); transition: background .55s var(--ease), color .55s var(--ease); overflow: hidden; }
.pieza__cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem clamp(1.2rem, 2.6vw, 2.2rem); cursor: pointer; }
.pieza__cab h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing: -.03em; }
.pieza__cab span { font-size: .9rem; color: var(--gris-txt); }
.pieza__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease); }
.pieza__cuerpo > div { overflow: hidden; min-height: 0; }
.pieza__rej { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; padding: 0 clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.2rem); }
.pieza__rej p { max-width: 30rem; }
.pieza__servicios { margin-top: 1.2rem; display: grid; gap: .1rem; max-width: 22rem; }
.pieza__servicios a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--osc-linea); font-weight: 500; }
.pieza__servicios .redondo { width: 1.7rem; height: 1.7rem; background: #fff; color: var(--tinta); }
.pieza__servicios a:hover .redondo { background: var(--am); transform: rotate(45deg); }
.pieza__foto { border-radius: var(--r-s); overflow: hidden; height: min(38vh, 300px); background: #000; }
.pieza__foto img { width: 100%; height: 100%; object-fit: cover; }
.pieza.activa { background: var(--tinta); color: #fff; }
.pieza.activa .pieza__cab span { color: var(--osc-txt); }
.pieza.activa .pieza__cuerpo { grid-template-rows: 1fr; }
/* Si la pantalla es baja o estrecha no se fija: cada tarjeta se ve entera */
@media (max-width: 860px), (max-height: 540px) {
  .js .acordeon { height: auto; margin-bottom: 0; padding-bottom: var(--sec); }
  .acordeon__fijo { position: static; min-height: 0; padding-top: 0; display: block; }
  .pieza { background: var(--tinta); color: #fff; }
  .pieza__cab { cursor: default; }
  .pieza__cab span { color: var(--osc-txt); }
  .pieza__cuerpo { grid-template-rows: 1fr; }
  .pieza__rej { grid-template-columns: 1fr; gap: 1.2rem; }
  .pieza__foto { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- Búsquedas en movimiento ---------- */
.busquedas { padding-bottom: var(--sec); overflow: hidden; }
.busquedas h2 { text-align: center; max-width: 16ch; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.cinta { overflow: hidden; margin-top: .6rem; }
.cinta > div { display: flex; gap: .6rem; width: max-content; animation: cinta 70s linear infinite; }
.cinta--vuelta > div { animation-direction: reverse; }
.cinta span { padding: .7em 1.2em; border-radius: 999px; background: var(--gris-2); font-size: clamp(1rem, .95rem + .4vw, 1.3rem); letter-spacing: -.01em; white-space: nowrap; }
@keyframes cinta { to { transform: translate3d(-50%, 0, 0); } }
.busquedas__txt { margin-top: 1.5rem; text-align: center; font-size: .88rem; color: var(--gris-txt); }

/* ---------- Paneles negros ---------- */
.negro { background: var(--tinta); color: #fff; }
.panel { border-radius: var(--r) var(--r) 0 0; padding-block: var(--sec); position: relative; }
.panel + .promesas, .panel + .proceso { border-radius: 0; }
.panel--corto { border-radius: var(--r); margin-inline: clamp(.5rem, 1vw, 1rem); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); }
.panel__cab { margin-bottom: clamp(2.5rem, 5vw, 5rem); max-width: 40rem; }
.panel__cab h2 { margin-top: .9rem; }
.panel__cab--centro { max-width: none; text-align: center; }
.escalon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 4rem); width: min(100%, 1040px); margin-inline: auto; }
.escalon__item:nth-child(even) { margin-top: clamp(4rem, 8vw, 8rem); }
.escalon__foto { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: #1a1a18; }
.escalon__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.escalon__item:hover img { transform: scale(1.04); }
.escalon__item p { margin-top: 1.1rem; max-width: 30rem; }
@media (max-width: 700px) { .escalon { grid-template-columns: 1fr; } .escalon__item:nth-child(even) { margin-top: 0; } }

/* ---------- Mosaico de compromisos ---------- */
.promesas { padding-block: var(--sec); }
.mosaico { columns: 3; column-gap: 1rem; width: min(100%, 1120px); margin-inline: auto; }
.mosaico article { break-inside: avoid; margin-bottom: 1rem; padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: var(--r-s); background: #FFF7CC; }
.mosaico article:nth-child(3n+2) { background: var(--gris-2); padding-block: clamp(2rem, 4vw, 3.8rem); }
.mosaico article:nth-child(3n) { background: #F0EEE6; }
.mosaico h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin-bottom: .7rem; }
@media (max-width: 900px) { .mosaico { columns: 2; } }
@media (max-width: 560px) { .mosaico { columns: 1; } }

/* ---------- Pasos ---------- */
.proceso { padding-bottom: var(--sec); }
.proceso h2 { margin-top: .9rem; }
.proceso > .resumen__txt { margin-top: 1rem; max-width: 26em; }
.pasos { margin-top: clamp(2.5rem, 4vw, 4rem); }
.pasos li { display: grid; grid-template-columns: 1fr 1.6fr 1.8fr; gap: 1rem 2rem; padding-block: clamp(1.3rem, 2vw, 2rem); border-top: 1px solid var(--linea); align-items: baseline; }
.pasos li:last-child { border-bottom: 1px solid var(--linea); }
.pasos span { font-size: .9rem; color: var(--gris-txt); }
.pasos h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.8rem); letter-spacing: -.025em; }
@media (max-width: 760px) { .pasos li { grid-template-columns: 2.4rem 1fr; } .pasos p { grid-column: 2; } }

/* ---------- Blog y preguntas (negro continuo) ---------- */
.diario { border-radius: var(--r) var(--r) 0 0; padding-block: var(--sec) calc(var(--sec) * .6); }
.diario__cab { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1.4rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3vw, 2.8rem) clamp(1rem, 2vw, 1.8rem); }
.articulo__foto { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 10; background: #1a1a18; margin-bottom: 1rem; }
.articulo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.articulo:hover img { transform: scale(1.04); }
.articulo h3 { margin-bottom: .5rem; }
.articulo p { font-size: .95rem; color: var(--osc-txt); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.articulos--claro .articulo p { color: var(--gris-txt); }
@media (max-width: 900px) { .articulos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .articulos { grid-template-columns: 1fr; } }

.preguntas { padding-block: clamp(3rem, 5vw, 5.5rem); }
.preguntas__rej { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem clamp(2rem, 5vw, 5rem); }
.preguntas h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.preguntas details { border-top: 1px solid var(--osc-linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--osc-linea); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; list-style: none; cursor: pointer; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); font-weight: 500; letter-spacing: -.015em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary i { position: relative; flex: none; width: 15px; height: 15px; }
.preguntas summary i::before, .preguntas summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.preguntas summary i::after { transform: rotate(90deg); }
.preguntas details[open] summary i::after { transform: rotate(0); }
.preguntas details p { padding: 0 2.5rem 1.4rem 0; color: var(--osc-txt); max-width: 42rem; }
@media (max-width: 800px) { .preguntas__rej { grid-template-columns: 1fr; } }

/* ---------- Cierre con arcos que brillan ---------- */
.cierre { position: relative; overflow: hidden; background: var(--tinta); color: #fff; text-align: center; padding-block: clamp(6rem, 4rem + 9vw, 11rem) clamp(5rem, 3rem + 7vw, 9rem); isolation: isolate; }
.cierre__dentro { position: relative; }
.cierre h2 { font-size: clamp(2.5rem, 1.25rem + 5vw, 5.4rem); max-width: 14ch; margin-inline: auto; }
.cierre p { max-width: 34rem; margin: 1.3rem auto 2rem; color: #D6D5CF; }
.arcos { position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(150vw, 1500px); aspect-ratio: 2 / 1; transform: translateX(-50%); }
.arcos i { position: absolute; left: 50%; bottom: 0; width: calc(100% - var(--k) * 19%); height: calc(100% - var(--k) * 19%); transform: translateX(-50%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: rgba(255, 212, 0, .055); box-shadow: inset 0 1px 0 rgba(255, 212, 0, .28); }
.arcos i:nth-child(1) { --k: 0; } .arcos i:nth-child(2) { --k: 1; } .arcos i:nth-child(3) { --k: 2; } .arcos i:nth-child(4) { --k: 3; } .arcos i:nth-child(5) { --k: 4; background: rgba(255, 212, 0, .13); }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #fff; padding-block: clamp(3rem, 5vw, 5rem) 2rem; border-top: 1px solid var(--osc-linea); position: relative; }
.pie__rej { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem clamp(2rem, 5vw, 5rem); }
.pie__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-content: start; }
.pastilla { display: inline-block; padding: .5em 1em; border: 1px solid var(--osc-linea); border-radius: 999px; font-size: .95rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; overflow-wrap: anywhere; }
.pastilla:hover { background: var(--am); color: var(--tinta); border-color: var(--am); }
.pie__datos p { margin-top: .9rem; font-size: .88rem; line-height: 1.4; }
.pie__datos small { display: block; color: var(--osc-txt); font-size: .78rem; }
.pie__nav { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.6rem; }
.pie__nav p { color: var(--osc-txt); font-size: .85rem; margin-bottom: .8rem; }
.pie__nav a { display: block; padding-block: .22rem; font-weight: 500; font-size: .96rem; }
.pie__dos { columns: 2; column-gap: 1rem; }
.pie__base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.pie__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--osc-txt); }
.pie__legal a:hover { color: #fff; }
.pie__red { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,.1); flex: none; transition: background .3s, color .3s; }
.pie__red svg { width: 1.05rem; height: 1.05rem; }
.pie__red:hover { background: var(--am); color: var(--tinta); }
@media (max-width: 960px) { .pie__rej { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pie__datos { grid-template-columns: 1fr; } .pie__nav { grid-template-columns: 1fr 1fr; } .pie__nav nav:first-child { grid-column: 1 / -1; } }

/* ---------- Páginas interiores ---------- */
.bloque { padding-block: var(--sec) 0; }
.bloque:last-of-type { padding-bottom: var(--sec); }
.bloque h2 { margin-top: .9rem; }
.bloque--corto { padding-top: clamp(3rem, 5vw, 5.5rem); }
.bloque--gris { margin-top: var(--sec); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); background: var(--gris-2); }
.bloque__txt { margin-top: 1rem; color: var(--gris-txt); max-width: 30rem; }
.proceso { padding-top: var(--sec); }
.proceso#proceso { padding-top: 0; }
.doble { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.doble h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.doble--grupo .lineas { margin-top: 0; }
@media (max-width: 800px) { .doble { grid-template-columns: 1fr; } }
.numeradas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.numeradas article { padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: var(--r); background: var(--gris-2); min-height: 15rem; display: flex; flex-direction: column; }
.numeradas span { font-size: .9rem; color: var(--gris-txt); margin-bottom: auto; padding-bottom: 2rem; }
.numeradas h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.9rem); letter-spacing: -.025em; margin-bottom: .5rem; }
@media (max-width: 700px) { .numeradas { grid-template-columns: 1fr; } .numeradas article { min-height: 0; } }
.lineas { margin-top: clamp(2rem, 4vw, 3.5rem); }
.linea { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 1rem; align-items: center; padding-block: clamp(1rem, 1.6vw, 1.5rem); border-top: 1px solid var(--linea); transition: padding .5s var(--ease); }
.linea:last-child { border-bottom: 1px solid var(--linea); }
.linea b { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.linea__eti { font-size: .88rem; color: var(--gris-txt); }
@media (hover: hover) { .linea:hover { padding-inline: .7rem; } .linea:hover .redondo { background: var(--am); color: var(--tinta); transform: rotate(45deg); } }
.doble--grupo .linea { grid-template-columns: 1.3fr 1fr auto; }
.doble--grupo .linea b { order: -1; }
@media (max-width: 700px) { .linea, .doble--grupo .linea { grid-template-columns: 1fr auto; } .linea__eti { grid-column: 1; grid-row: 2; } .linea b { grid-row: 1; order: 0; } .linea .redondo { grid-column: 2; grid-row: 1 / span 2; } }
.marcas { display: grid; gap: .1rem; }
.marcas li { position: relative; padding: 1rem 0 1rem 2rem; border-top: 1px solid var(--osc-linea); font-size: 1.1rem; }
.marcas li::before { content: ""; position: absolute; left: .1rem; top: 1.45rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--am); }
.marcas--claro li { border-color: var(--linea); }
.suena li { padding-block: 1.1rem; border-top: 1px solid var(--linea); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.015em; line-height: 1.25; }
.ab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem; margin-top: 2.2rem; }
.ab article { padding: clamp(1.4rem, 3vw, 2.5rem); border-radius: var(--r); background: rgba(255,255,255,.08); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; }
.ab span { display: block; font-size: .85rem; letter-spacing: 0; font-weight: 400; color: var(--osc-txt); margin-bottom: 2rem; }
.ab__b { background: var(--am) !important; color: var(--tinta); }
.ab__b span { color: rgba(11,11,10,.65); }
.ab > i { font-size: 1.4rem; }
@media (max-width: 700px) { .ab { grid-template-columns: 1fr; } .ab > i { justify-self: center; transform: rotate(45deg); } }
.aviso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin-block: var(--sec); padding: clamp(1.6rem, 3vw, 3rem); border-radius: var(--r); background: var(--am); }
.aviso h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.8rem); max-width: 18ch; }
.aviso p { margin-top: .7rem; }
.persona { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.persona img { border-radius: var(--r); width: 100%; aspect-ratio: 1; object-fit: cover; }
.persona .btn { margin-top: 1.5rem; }
@media (max-width: 800px) { .persona { grid-template-columns: 1fr; } }
.promesas--sin { padding-bottom: var(--sec); }

.contacto { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem clamp(2rem, 6vw, 6rem); padding-block: calc(var(--cab) + clamp(2.5rem, 5vw, 5rem)) var(--sec); }
.contacto h1 { font-size: clamp(2.5rem, 1.25rem + 4.4vw, 5rem); line-height: 1.04; letter-spacing: -.035em; }
.contacto__txt p { margin-block: 1.4rem 1.8rem; max-width: 26rem; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.campo { display: grid; gap: .35rem; font-size: .9rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .9rem 1rem; border: 1px solid var(--linea); border-radius: var(--r-s); background: var(--gris-2); font: inherit; color: inherit; transition: border-color .25s, background .25s; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--tinta); background: #fff; }
.mal, .campo .mal { border-color: #C22F1B !important; }
.acepto { display: flex; gap: .6rem; font-size: .88rem; align-items: flex-start; }
.acepto input { margin-top: .22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--tinta); flex: none; }
.acepto a { text-decoration: underline; text-underline-offset: 2px; }
.acepto.mal { color: #C22F1B; }
.form .btn { justify-self: start; }
.form__aviso { font-size: .92rem; min-height: 1.4em; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

.prosa { width: min(100% - 2 * clamp(1.15rem, 5vw, 5rem), 740px); margin-inline: auto; font-size: 1.1rem; line-height: 1.65; color: #24231F; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2em; font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; color: var(--tinta); }
.prosa h3 { margin-top: 1.7em; }
.prosa a { text-decoration: underline; text-underline-offset: 3px; }
.prosa ul, .prosa ol { padding-left: 1.3em; display: grid; gap: .45em; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa .resumen { display: block; padding: 1.2rem 1.4rem; border-radius: var(--r-s); background: var(--gris-2); }
.prosa figure img { width: 100%; border-radius: var(--r-s); }
.prosa table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.prosa th, .prosa td { padding: .6rem .7rem; border: 1px solid var(--linea); text-align: left; }
.prosa blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 3px solid var(--am); }

/* ---------- Detalles ---------- */
.wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--am); color: var(--tinta); box-shadow: 0 10px 26px -10px rgba(11,11,10,.55); transition: transform .4s var(--ease); }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 1.45rem; height: 1.45rem; }
.js .aparece { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .aparece.dentro { opacity: 1; transform: none; }

/* ---------- Adaptación del menú ---------- */
@media (max-width: 960px) {
  :root { --cab: 64px; }
  .nav { display: none; }
  .cab__menu { display: inline-flex; position: relative; z-index: 5; }
  .logo { position: relative; z-index: 5; }
  .movil { display: block; }
  .cab.abierto .cab__menu { background: var(--gris); color: var(--tinta); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .pal > span { transform: none; }
  .js .aparece { opacity: 1; transform: none; }
  .js .acordeon { height: auto; margin-bottom: 0; padding-bottom: var(--sec); }
  .acordeon__fijo { position: static; min-height: 0; padding-top: 0; display: block; }
  .pieza { background: var(--tinta); color: #fff; }
  .pieza__cuerpo { grid-template-rows: 1fr; }
  .cinta > div { animation: none; }
}

/* ---------- Ajustes tras la revisión ---------- */
.desp { display: flex; }
.nav__enlace { line-height: 1.3; }
.pasos li { grid-template-columns: .45fr 1.6fr 1.8fr; }
.escalon__item:first-child img { object-position: 72% 50%; }
.pie__base { padding-right: 3.6rem; }
@media (max-width: 760px) { .pasos li { grid-template-columns: 2.4rem 1fr; } }
.cab__fila { z-index: 4; }
.doble h2, .panel--corto h2 { margin-top: .9rem; }

/* ===== Personalidad de Okay Dev y claridad de BIGSEO (07/11/2026) ===== */
/* Portada amarilla a pantalla completa */
.portada { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100svh; background: var(--am); text-align: center; }
.portada__dentro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; padding-block: calc(var(--cab) + 1.5rem) 2.5rem; }
.portada h1 { font-size: clamp(.74rem, .7rem + .15vw, .86rem); font-weight: 500; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase; }
.portada__grande { margin-top: 1.2rem; font-size: clamp(2.45rem, 1.2rem + 4.7vw, 5.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -.04em; }
.portada__frase { display: block; }
.caja { position: relative; display: inline-grid; justify-items: center; margin-top: .12em; padding: .03em 0 .1em; border-radius: .16em; background: var(--tinta); color: #fff; overflow: hidden; vertical-align: top; transition: width .65s var(--ease); }
.caja > span { grid-area: 1 / 1; padding-inline: .28em; white-space: nowrap; opacity: 0; transform: translateY(70%); transition: opacity .35s, transform .65s var(--ease); justify-self: center; width: max-content; }
.caja > .activa { opacity: 1; transform: none; }
.portada .entrada__txt { margin-top: 1.4rem; max-width: 35rem; }
.portada .botones { margin-top: 1.6rem; }
.portada .btn--negro:hover .btn__mancha, .cierre .btn--negro:hover .btn__mancha, .aviso .btn--negro:hover .btn__mancha { background: #fff; }
.portada .btn--negro:hover, .cierre .btn--negro:hover, .aviso .btn--negro:hover { border-color: #fff; }

/* Fotos flotando alrededor del titular */
.flota { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); }
.flota > div { overflow: hidden; border-radius: clamp(8px, 1vw, 16px); aspect-ratio: 5 / 4; background: var(--tinta); box-shadow: 0 18px 40px -22px rgba(11,11,10,.6); animation: flota-entra 1.1s var(--ease) both; animation-delay: calc(.2s + var(--i) * 70ms); }
.flota img { width: 100%; height: 100%; object-fit: cover; }
@keyframes flota-entra { from { opacity: 0; transform: scale(.75) translateY(24px); } }
@media (max-width: 1100px) { .flota { display: none; } }

/* Cinta de letras enormes */
.letrero { position: relative; z-index: 2; overflow: hidden; background: var(--tinta); color: var(--am); padding-block: .35rem; }
.letrero > div { display: flex; align-items: center; width: max-content; animation: cinta 60s linear infinite; }
.letrero span { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.15; text-transform: uppercase; white-space: nowrap; }
.letrero i { flex: none; width: .9rem; height: .9rem; margin-inline: clamp(1rem, 2vw, 2rem); border-radius: 50%; background: #fff; }

/* Cierre en amarillo */
.cierre { background: var(--am); color: var(--tinta); }
.cierre p { color: var(--tinta); }
.arcos i { background: rgba(11,11,10,.035); box-shadow: inset 0 1px 0 rgba(11,11,10,.16); }
.arcos i:nth-child(5) { background: rgba(11,11,10,.07); }
.cierre :focus-visible { outline-color: var(--tinta); }
.pie { border-top: 0; }

/* WhatsApp visible sobre el amarillo */
.wa { background: var(--tinta); color: var(--am); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 10px 26px -10px rgba(11,11,10,.55); }

@media (max-width: 700px) {
  .portada__grande { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .caja { display: inline-block; font-size: .78em; padding: .1em .32em .14em; }
  .caja > span { position: absolute; left: 0; right: 0; top: .1em; width: auto; padding-inline: .32em; white-space: normal; }
  .caja > .activa { position: static; display: block; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .letrero > div { animation: none; }
  .flota > div { animation: none; }
}

/* La palabra destacada queda siempre centrada dentro de su recuadro, aunque el recuadro cambie de ancho */
@media (min-width: 701px) {
  .js .caja { display: inline-block; height: 1.2em; padding: 0; }
  .js .caja > span { position: absolute; left: 50%; top: .02em; transform: translate(-50%, 70%); }
  .js .caja > .activa { transform: translate(-50%, 0); }
}

/* ===== Portada de Okay Dev, estructura de BIGSEO, menú y tarjetas de Cuberto (07/11/2026) ===== */

.btn--am { background: var(--am); color: var(--tinta); }
.btn--am .btn__mancha { background: #fff; }
.btn--am:hover { border-color: #fff; }
.btn--clara { border-color: rgba(255,255,255,.4); color: #fff; }

/* Portada: rejilla fina sobre el amarillo y titular más contundente */
.portada { background-color: var(--am); background-image: linear-gradient(rgba(11,11,10,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,10,.055) 1px, transparent 1px); background-size: 64px 64px; }
.portada__grande { font-weight: 700; }

/* Tarjetas de servicios: cabecera sobre el bloque que ya gustaba */
.servicios-cab { padding-top: var(--sec); text-align: center; }
.servicios-cab h2 { max-width: 18ch; margin-inline: auto; }
@media (max-width: 860px), (max-height: 540px) { .servicios-cab { padding-bottom: 2.5rem; } }

/* Mesa inclinada con pantallas y fotos */
.mesa-sec { background: #161615; color: #fff; padding-block: var(--sec) 0; overflow: hidden; }
.mesa-sec__cab { text-align: center; }
.mesa-sec__cab h2 { max-width: 16ch; margin-inline: auto; }
.mesa-sec__cab p { margin-block: 1rem 1.5rem; color: var(--osc-txt); }
.mesa { perspective: 1500px; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: 3rem; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.mesa__rej { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); width: min(118%, 1760px); margin-left: 50%; transform: translateX(-50%) rotateX(calc(20deg - var(--m, 0) * 14deg)) rotateZ(-3deg); transform-origin: 50% 0; transition: transform .2s linear; }
.mesa__pieza { margin: 0; }
.mesa__pieza:nth-child(4n+2) { margin-top: 2.2rem; }
.mesa__pieza:nth-child(4n+4) { margin-top: 1.1rem; }
.mesa__pantalla { overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3.1; background: #fff; color: #111; font-size: .86rem; box-shadow: 0 30px 60px -28px #000; }
.mesa__pieza--foto .mesa__pantalla { background: #000; }
.mesa__pieza--foto img { width: 100%; height: 100%; object-fit: cover; }
.mesa figcaption { margin-top: .7rem; font-size: .85rem; color: var(--osc-txt); }
.m--nav { display: flex; align-items: center; gap: .3rem; padding: .55rem .8rem; background: #F2F1EC; }
.m--nav i { width: 9px; height: 9px; border-radius: 50%; background: #CFCDC5; }
.m--nav span { margin-left: .7rem; padding: .1rem .7rem; border-radius: 99px; background: #fff; font-size: .7rem; color: #6a6a64; }
.m-web { display: grid; align-items: end; min-height: 100%; height: 13rem; padding: 1.1rem; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.76), rgba(0,0,0,.12)), url("../img/fotos/CR-960.webp") center / cover; }
.m-web b { display: block; font-size: 1.2rem; line-height: 1.1; letter-spacing: -.03em; font-weight: 600; }
.m-web small { display: block; margin: .3rem 0 .6rem; }
.m-web em { display: inline-block; padding: .4rem .85rem; border-radius: 99px; background: var(--am); color: #000; font-style: normal; font-size: .8rem; font-weight: 500; }
.m-mapa__q, .m-ads__q { margin: .7rem; padding: .5rem .9rem; border-radius: 99px; background: #F2F1EC; font-size: .8rem; }
.m-mapa__fondo { position: relative; height: 84px; background: linear-gradient(90deg, transparent 49%, #fff 49% 51%, transparent 51%), linear-gradient(20deg, transparent 47%, #fff 47% 50%, transparent 50%), #E7E5DC; }
.pin { position: absolute; left: 48%; top: 22%; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #000; transform: rotate(-45deg); box-shadow: inset 0 0 0 7px #000, inset 0 0 0 13px var(--am); }
.m-ficha { position: relative; padding: .6rem .9rem; border-top: 1px solid #EEE; }
.m-ficha b { display: block; font-weight: 600; font-size: .86rem; min-height: 1em; }
.m-ficha small { display: block; color: #66655f; font-size: .74rem; min-height: 1em; }
.m-ficha:not(.m-ficha--si) b, .m-ficha:not(.m-ficha--si) small { width: 50%; height: .55em; min-height: 0; margin-bottom: .4em; border-radius: 99px; background: #E9E7DF; }
.m-ficha span { position: absolute; right: .8rem; top: .8rem; padding: .22rem .65rem; border-radius: 99px; background: #000; color: #fff; font-size: .7rem; }
.m-ad { padding: .65rem .9rem; border-top: 1px solid #EEE; }
.m-ad small { color: #66655f; font-size: .72rem; }
.m-ad b { display: block; margin: .15rem 0; color: #173EA5; font-weight: 500; font-size: 1.02rem; letter-spacing: -.02em; }
.m-ad p { font-size: .8rem; line-height: 1.35; color: #444; }
.m-ad--vacio i { display: block; width: 86%; height: .55em; margin: .55em 0; border-radius: 99px; background: #E9E7DF; }
.m-ad--vacio i:first-child { width: 42%; }
.m-panel { padding: 1.1rem; }
.m-panel p { margin-bottom: .8rem; font-weight: 600; }
.m-panel li { display: grid; grid-template-columns: 5.4rem 1fr; align-items: center; gap: .6rem; margin-bottom: .55rem; font-size: .8rem; }
.m-panel i { display: block; height: 1rem; width: var(--v); border-radius: 5px; background: var(--am); }

/* Declaración a pantalla completa con la marca recortada abajo */
.declara { position: relative; overflow: hidden; background: var(--am); color: var(--tinta); text-align: center; padding-block: var(--sec) 0; }
.declara__dentro { position: relative; z-index: 1; }
.declara h2 { font-weight: 700; max-width: 13ch; margin-inline: auto; font-size: clamp(2.5rem, 1.25rem + 5vw, 5.6rem); letter-spacing: -.04em; }
.declara mark { display: inline-block; padding: 0 .2em .06em; border-radius: .14em; background: var(--tinta); color: #fff; }
.declara p { max-width: 33rem; margin: 1.5rem auto 0; font-size: 1.12rem; }
.declara .declara__fuerte { margin-top: 1rem; font-weight: 700; }
.declara .btn { margin-top: 1.7rem; }
.declara .declara__marca { max-width: none; margin: clamp(2rem, 4vw, 3.5rem) 0 -.27em; font-size: min(25vw, 27rem); font-weight: 900; line-height: 1; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; color: rgba(11,11,10,.08); }

/* Sistema en recorrido: la línea se dibuja al bajar y cada paso se enciende */
.sistema { padding-block: var(--sec); }
.sistema .panel__cab { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sistema__txt { margin-top: 1rem; color: var(--osc-txt); }
.serpiente { position: relative; }
.serpiente__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.serpiente__svg path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.serpiente__base { stroke: rgba(255,255,255,.16); }
.serpiente__avance { stroke: var(--am); }
.serpiente ol { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); }
.serpiente li { grid-column: var(--c); grid-row: var(--f); padding-right: 1rem; }
.serpiente__n { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: 12px; background: #2A2A27; color: #fff; font-size: 1.15rem; font-weight: 700; transition: background .4s, color .4s, transform .5s var(--ease); }
.serpiente li.encendido .serpiente__n { background: var(--am); color: var(--tinta); transform: scale(1.06); }
.serpiente h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); margin-bottom: .5rem; }
.serpiente p { color: var(--osc-txt); font-size: 1rem; }
@media (max-width: 800px) {
  .serpiente ol { grid-template-columns: 1fr; gap: 2.2rem; }
  .serpiente li { grid-column: 1; grid-row: auto; padding-left: 4.2rem; position: relative; padding-right: 0; }
  .serpiente__n { position: absolute; left: 0; top: 0; }
}

/* Dos sectores: texto a un lado y búsquedas que suben al otro */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; padding-block: var(--sec); }
.dos__txt > p { margin-top: 1.2rem; max-width: 30rem; }
.dos__enlaces { margin-top: 2rem; display: grid; gap: .6rem; }
.dos__sector { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; padding: .6rem; padding-right: 1rem; border-radius: var(--r-s); background: var(--gris-2); transition: background .3s; }
.dos__sector:hover { background: var(--am); }
.dos__sector img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.dos__sector b { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.dos__sector small { display: block; font-size: .88rem; line-height: 1.35; color: var(--gris-txt); }
.dos__sector:hover small { color: var(--tinta); }
.dos__columnas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; height: clamp(26rem, 42vw, 38rem); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.vertical > div { display: flex; flex-direction: column; gap: .7rem; animation: vertical 42s linear infinite; }
.vertical--vuelta > div { animation-direction: reverse; }
.vertical span { display: flex; align-items: end; min-height: 8.5rem; padding: 1rem 1.15rem; border-radius: var(--r-s); font-size: clamp(1.05rem, 1rem + .5vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; background: var(--tinta); color: #fff; }
.vertical span:nth-child(3n+2) { background: var(--am); color: var(--tinta); }
.vertical span:nth-child(3n) { background: var(--gris); color: var(--tinta); }
@keyframes vertical { to { transform: translate3d(0, calc(-100% / 3), 0); } }
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } .dos__columnas { height: 20rem; } .vertical span { min-height: 6.5rem; } }
@media (max-width: 520px) { .dos__sector { grid-template-columns: 4.4rem 1fr auto; } }

/* Compromisos sobre amarillo, uno cada vez, con la marca en vertical al fondo */
.escrito { position: relative; overflow: hidden; background: var(--am); padding-block: var(--sec); text-align: center; }
.escrito__fondo { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; }
.escrito__fondo span { writing-mode: vertical-rl; font-size: clamp(5rem, 11vw, 12rem); font-weight: 900; line-height: .9; letter-spacing: -.04em; text-transform: uppercase; color: rgba(11,11,10,.06); white-space: nowrap; }
.escrito__fondo span:first-child { transform: rotate(180deg); }
.escrito__dentro { position: relative; }
.escrito h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.8rem); font-weight: 700; max-width: 16ch; margin-inline: auto; letter-spacing: -.035em; }
.escrito__pestanas { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: 1.8rem; }
.escrito__pestanas button { width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: .85rem; font-weight: 600; border: 1.5px solid rgba(11,11,10,.3); transition: background .3s, color .3s, border-color .3s; }
.escrito__pestanas .activa { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.escrito__lista { display: grid; margin-top: 1.8rem; min-height: 9rem; }
.escrito__lista article { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s, transform .6s var(--ease), visibility .45s; }
.escrito__lista .activa { opacity: 1; visibility: visible; transform: none; }
.escrito__lista h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); margin-bottom: .6rem; }
.escrito__lista p { max-width: 32rem; margin-inline: auto; font-size: 1.12rem; }

/* Guía en tarjetas */
.guia { padding-block: var(--sec); }
.guia h2 { margin-top: .9rem; }
.guia__rej { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.guia__carta { display: flex; flex-direction: column; justify-content: space-between; gap: 2.2rem; min-height: 12.5rem; padding: 1.4rem; border-radius: var(--r-s); background: var(--gris-2); transition: background .35s, color .35s, transform .5s var(--ease); }
.guia__carta span { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.18; }
.guia__carta b { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; font-size: .98rem; }
@media (hover: hover) { .guia__carta:hover { background: var(--tinta); color: #fff; transform: translateY(-4px); } .guia__carta:hover .redondo { background: var(--am); color: var(--tinta); transform: rotate(45deg); } }
@media (max-width: 860px) { .guia__rej { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .guia__rej { grid-template-columns: 1fr; } .guia__carta { min-height: 9rem; } }

/* Pie con la marca enorme */
.pie__marca { margin: clamp(2.5rem, 5vw, 4rem) 0 0; text-align: center; font-size: min(21.5vw, 21rem); font-weight: 900; line-height: .86; letter-spacing: -.055em; text-transform: uppercase; color: var(--am); white-space: nowrap; }
.pie__base { margin-top: 2.5rem; }

/* Páginas interiores: cabecera oscura de BIGSEO */
.heroo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(88vh, 760px); background: var(--tinta); color: #fff; padding-block: calc(var(--cab) + 2.5rem) 3rem; }
.heroo__foto { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroo::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(11,11,10,.92) 0%, rgba(11,11,10,.72) 48%, rgba(11,11,10,.2) 100%); }
.migas--izq { justify-content: flex-start; color: #CFCEC8; }
.heroo__grande { font-size: clamp(2.4rem, 1.25rem + 4.2vw, 5rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; max-width: 16ch; }
.heroo__h1 { margin-top: 1rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: #E9E8E2; }
.heroo__lead { margin-top: 1rem; max-width: 36rem; font-size: 1.12rem; color: #E9E8E2; }
.botones--izq { justify-content: flex-start; }
.heroo__sellos { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin-top: 2.2rem; font-size: .92rem; color: #E9E8E2; }
.heroo__sellos li::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .55rem; border-radius: 50%; background: var(--am); }
@media (max-width: 760px) { .heroo::after { background: rgba(11,11,10,.74); } }
.intro-c { padding-block: var(--sec) 0; text-align: center; }
.intro-c .resumen__txt { max-width: 26em; margin-inline: auto; }
.recibes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.recibes li { padding: clamp(1.4rem, 2.4vw, 2.2rem); min-height: 11rem; border-radius: var(--r-s); background: var(--gris-2); font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; border-top: 3px solid var(--am); }
@media (max-width: 760px) { .recibes { grid-template-columns: 1fr; } .recibes li { min-height: 0; } }
.alternos { padding-block: var(--sec); }
.alterno { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem clamp(2rem, 6vw, 6rem); width: min(100%, 1080px); margin-inline: auto; }
.alterno + .alterno { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.alterno:nth-child(odd) > :first-child { order: 2; }
.alterno h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem); letter-spacing: -.03em; margin-bottom: .8rem; }
.alterno__foto { overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; background: #000; }
.alterno__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .alterno { grid-template-columns: 1fr; } .alterno:nth-child(odd) > :first-child { order: 0; } }
.problemas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.problemas li { padding: clamp(1.4rem, 2.4vw, 2.2rem); border-radius: var(--r-s); background: var(--gris-2); border-top: 3px solid var(--tinta); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
@media (max-width: 700px) { .problemas { grid-template-columns: 1fr; } }
.ab--claro { margin-top: 0; }
.ab--claro article { background: var(--gris-2); }
.ab--claro span { color: var(--gris-txt); }
.separa { height: var(--sec); }
.bloque:has(+ .negro) { padding-bottom: var(--sec); }

@media (prefers-reduced-motion: reduce) {
  .vertical > div { animation: none; }
  .mesa__rej { transition: none; }
}

/* Servicios en columnas */
.columnas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.columna { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--r-s); background: var(--gris-2); border-top: 3px solid var(--am); }
.columna h3 { margin-bottom: .7rem; }
.columna p { font-size: .95rem; color: var(--gris-txt); margin-bottom: 1.2rem; }
.columna ul { margin-top: auto; }
.columna a { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--linea); font-weight: 500; }
.columna .redondo { width: 1.6rem; height: 1.6rem; }
@media (hover: hover) { .columna a:hover .redondo { background: var(--am); color: var(--tinta); transform: rotate(45deg); } }
@media (max-width: 1000px) { .columnas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .columnas { grid-template-columns: 1fr; } }

/* Cookies */
.pie__cookies { font: inherit; color: inherit; text-align: left; }
.pie__cookies:hover { color: #fff; }
.ck { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; width: min(calc(100% - 2rem), 26rem); padding: 1.3rem; border-radius: var(--r-s); background: #fff; color: var(--tinta); box-shadow: 0 24px 60px -18px rgba(11,11,10,.5), 0 0 0 1px rgba(11,11,10,.06); font-size: .92rem; line-height: 1.4; }
.ck__t { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: .4rem; }
.ck a { text-decoration: underline; text-underline-offset: 2px; }
.ck__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.ck__botones button { padding: .62em 1.1em; border-radius: 999px; font-weight: 500; font-size: .9rem; transition: background .25s, color .25s; }
.ck__si { background: var(--tinta); color: #fff; }
.ck__si:hover { background: var(--am); color: var(--tinta); }
.ck__no { background: var(--gris); }
.ck__no:hover { background: var(--am); }

/* ===== Fallos de portada (07/11/2026): collage en móvil, fotos sin tapar el titular y movimiento al bajar ===== */
.portada__grande { font-size: clamp(2.45rem, 1.2rem + 4.2vw, 5.2rem); }
.collage { display: none; }
.declara .declara__marca { width: max-content; will-change: transform; }
@media (max-width: 1100px) {
  .portada { min-height: 0; }
  .portada__dentro { flex: none; padding-block: calc(var(--cab) + 1.6rem) 1.6rem; }
  .collage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 3.8fr 1fr; grid-template-rows: 1fr 1fr; gap: .4rem; width: min(100% - 1.75rem, 46rem); aspect-ratio: 355 / 113; margin: 0 auto 1.6rem; }
  .collage__hueco { position: relative; overflow: hidden; border-radius: 8px; background: var(--tinta); box-shadow: 0 10px 24px -14px rgba(11,11,10,.6); }
  .collage__hueco--3 { grid-column: 2; grid-row: 1 / span 2; border-radius: 12px; }
  .collage__hueco--1 { grid-column: 1; grid-row: 1; }
  .collage__hueco--2 { grid-column: 1; grid-row: 2; }
  .collage__hueco--4 { grid-column: 3; grid-row: 1; }
  .collage__hueco--5 { grid-column: 3; grid-row: 2; }
  .collage__hueco > div { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; }
  .collage__hueco > .activa { opacity: 1; }
  .collage__hueco img { width: 100%; height: 100%; object-fit: cover; }
}

/* ===== Banner: salida al hacer scroll y palabra destacada (medido en Okay Dev, 07/11/2026) ===== */
.portada__grande { font-size: clamp(2.45rem, 5.2vw, 5.2rem); }

/* La palabra sale hacia arriba y entra la nueva desde abajo, sin verse las dos a la vez */
.caja > span { opacity: 1; transform: translateY(125%); transition: none; }
.caja > .activa { transform: none; transition: transform .7s var(--ease); }
.caja > .sale { transform: translateY(-125%); transition: transform .7s var(--ease); }
@media (min-width: 701px) {
  .js .caja > span { transform: translate(-50%, 125%); }
  .js .caja > .activa { transform: translate(-50%, 0); }
  .js .caja > .sale { transform: translate(-50%, -125%); }
}

/* Vuelta: rápida y con frenada. Salida: con retardo distinto en cada foto y acelerando */
.flota__salida { transition: transform .55s var(--ease), opacity .55s var(--ease); }
.portada h1, .portada__frase, .portada .entrada__txt { transition: transform .55s var(--ease), opacity .4s; }
@media (min-width: 1101px) {
  .salida .flota__salida { transform: translate(var(--sx, 0), var(--sy, 0)) rotate(var(--sg, 0)) scale(.55); opacity: 0; transition: transform .56s cubic-bezier(.55,.055,.675,.19) var(--sd, 0ms), opacity .56s cubic-bezier(.55,.055,.675,.19) var(--sd, 0ms); }
  .salida .portada__frase, .salida .entrada__txt { opacity: 0; transform: scale(.92); transition: transform .45s ease-in .15s, opacity .45s ease-in .15s; }
  .salida h1 { transform: translateY(var(--baja, 0)); transition: transform .6s var(--ease) .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .caja > span { opacity: 0; }
  .caja > .activa { opacity: 1; }
}

/* La capa de salida no lleva la forma de la foto: esa pasa al elemento interior */
.flota > .flota__salida { overflow: visible; border-radius: 0; aspect-ratio: auto; background: none; box-shadow: none; animation: none; }
.flota__salida > div { overflow: hidden; border-radius: clamp(8px, 1vw, 16px); aspect-ratio: 5 / 4; background: var(--tinta); box-shadow: 0 18px 40px -22px rgba(11,11,10,.6); animation: flota-entra 1.1s var(--ease) both; animation-delay: calc(.2s + var(--i) * 70ms); }
@media (prefers-reduced-motion: reduce) { .flota__salida > div { animation: none; } }

/* El recuadro baja hasta quedar junto al botón, como la barra de Okay Dev */
.caja { transition: width .65s var(--ease), transform .55s var(--ease); }
@media (min-width: 1101px) { .salida .caja { transform: translateY(var(--baja-caja, 0)); transition: width .65s var(--ease), transform .6s var(--ease) .2s; } }

/* Tarjetas de servicios: la foto va integrada de fondo a la derecha, así la tarjeta mide lo que mide su texto */
.pieza { position: relative; }
.pieza__cab, .pieza__rej { position: relative; z-index: 1; }
.pieza__foto { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 58%; height: auto; aspect-ratio: auto; border-radius: 0; background: none; opacity: 0; transition: opacity .55s var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%); mask-image: linear-gradient(90deg, transparent, #000 48%); pointer-events: none; }
.pieza.activa .pieza__foto { opacity: .95; }
.pieza__rej { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-height: 760px) and (min-width: 861px) {
  .pieza__cab { padding-block: .85rem; }
  .pieza__cab h3 { font-size: 1.5rem; }
  .pieza__rej { padding-bottom: 1rem; }
  .pieza__servicios { margin-top: .7rem; }
  .pieza__servicios a { padding: .32rem 0; }
  .pieza__servicios .redondo { width: 1.45rem; height: 1.45rem; }
  .acordeon__lista { gap: .4rem; }
}
@media (max-width: 860px), (max-height: 540px) {
  .pieza .pieza__foto { opacity: .95; }
}
@media (max-width: 860px) {
  .pieza__rej { grid-template-columns: 1fr; }
  .pieza__foto { width: 100%; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.55)); mask-image: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.55)); }
}

/* La foto se coloca respecto a toda la tarjeta y ocupa también la franja del título */
.pieza__rej { position: static; }
.pieza__rej > div:first-child { position: relative; z-index: 1; }
/* Mientras cargan, las fotos del banner no son cajas negras */
.flota__salida > div { background: rgba(11,11,10,.1); }

/* Recorrido de 9 pasos: filas de tres y mas aire entre filas */
.serpiente ol { row-gap: clamp(3.2rem, 5vw, 5rem); }
.serpiente li { padding-right: clamp(.5rem, 2vw, 2rem); }
@media (max-width: 800px) { .serpiente ol { row-gap: 2.2rem; } }

/* Las tarjetas de la guía entran una detrás de otra */
.js .guia__rej.aparece { opacity: 1; transform: none; transition: none; }
.js .guia__rej.aparece .guia__carta { opacity: 0; }
.js .guia__rej.aparece.dentro .guia__carta { opacity: 1; animation: carta-entra .8s var(--ease) backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes carta-entra { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .js .guia__rej.aparece .guia__carta { opacity: 1; animation: none; } }

/* ===== Nosotros, con la estructura de BIGSEO ===== */
.fundador { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; }
.fundador h2 { max-width: 15ch; margin-bottom: 1.4rem; }
.fundador blockquote { margin: 1.6rem 0; padding-left: 1.2rem; border-left: 3px solid var(--am); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.fundador cite { display: block; margin-top: .6rem; font-size: .9rem; font-style: normal; font-weight: 400; letter-spacing: 0; color: var(--gris-txt); }
.fundador__foto { position: relative; justify-self: center; width: min(100%, 26rem); padding: 1.2rem 1.2rem 0 0; isolation: isolate; }
.fundador__foto::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 18%; border-radius: var(--r); background: var(--am); }
.fundador__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r); }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifras article { padding: clamp(1.8rem, 3vw, 3rem) clamp(1.1rem, 1.6vw, 1.8rem); text-align: center; color: var(--tinta); background: #FFD400; }
.cifras article:nth-child(2) { background: #FFC800; }
.cifras article:nth-child(3) { background: #FFB800; }
.cifras article:nth-child(4) { background: #161615; color: #fff; }
.cifras article:nth-child(5) { background: var(--tinta); color: #fff; }
.cifras b { display: block; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.cifras h3 { margin-top: .5rem; font-size: 1.05rem; }
.cifras p { margin-top: .5rem; font-size: .9rem; line-height: 1.35; }
@media (max-width: 900px) { .cifras { grid-template-columns: 1fr 1fr; } }
.equipo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.equipo__persona div { overflow: hidden; border-radius: var(--r-s); aspect-ratio: 4 / 5; background: var(--gris); margin-bottom: .8rem; }
.equipo__persona img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--ease); }
.equipo__persona:hover img { transform: scale(1.05); }
.equipo__persona p { font-size: .9rem; color: var(--gris-txt); margin-top: .2rem; }
@media (max-width: 800px) { .equipo { grid-template-columns: 1fr 1fr; } }
.valores { margin-top: var(--sec); }
.valores__rej { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.valores__rej article { padding: clamp(1.5rem, 2.6vw, 2.4rem); border-radius: var(--r-s); background: #fff; text-align: center; box-shadow: 0 14px 40px -30px rgba(11,11,10,.5); }
.valores__rej h3 { margin-bottom: .6rem; }
.valores__rej p { font-size: .98rem; color: var(--gris-txt); }
@media (max-width: 860px) { .valores__rej { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .valores__rej { grid-template-columns: 1fr; } }
.alcance { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.alcance h2 { max-width: 13ch; margin-bottom: 1.2rem; }
.alcance p:last-child { max-width: 30rem; }
.mapa { width: 100%; height: auto; overflow: visible; }
.mapa__puntos { fill: none; stroke: #BDBCB6; stroke-width: 8; stroke-linecap: round; }
.mapa__sede { fill: var(--tinta); stroke: var(--am); stroke-width: 5; }
.mapa__onda { fill: var(--am); opacity: 0; transform-box: fill-box; transform-origin: center; animation: mapa-onda 2.6s ease-out infinite; }
.mapa__onda--2 { animation-delay: 1.3s; }
.mapa__nombre { font-size: 26px; font-weight: 600; letter-spacing: -.02em; fill: var(--tinta); }
@keyframes mapa-onda { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(6); } }
@media (max-width: 800px) { .fundador, .alcance { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mapa__onda { animation: none; } }

/* El correo del pie no se parte en dos lineas */
.pastilla { white-space: nowrap; font-size: .9rem; }
.pie__datos { grid-template-columns: auto 1fr; }
@media (max-width: 560px) { .pie__datos { grid-template-columns: 1fr; } }

/* El nombre de la sede se lee sobre los puntos del mapa */
.mapa__nombre { paint-order: stroke; stroke: #fff; stroke-width: 8px; stroke-linejoin: round; }

/* Las cifras no se parten: +60.000 euros en una sola linea */
.cifras b { font-size: clamp(1.85rem, 3.9vw, 3.8rem); white-space: nowrap; }

/* Franja de datos como la de BIGSEO: un solo color en degradado, cifra y palabra juntas en grande */
.cifras article { color: var(--tinta); padding: clamp(1.7rem, 2.6vw, 2.6rem) clamp(1rem, 1.6vw, 1.8rem); }
.cifras article:nth-child(1) { background: #FFE14D; }
.cifras article:nth-child(2) { background: #FFD400; }
.cifras article:nth-child(3) { background: #FFC400; color: var(--tinta); }
.cifras article:nth-child(4) { background: #FFB000; color: var(--tinta); }
.cifras b, .cifras h3 { display: block; margin: 0; font-size: clamp(1.6rem, 2.9vw, 2.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
.cifras p { margin-top: .7rem; font-size: .92rem; line-height: 1.35; font-weight: 500; }

/* Texto y firma del fundador */
.fundador p + p { margin-top: 1rem; }
.fundador__firma { margin-block: 1.4rem 1.2rem; padding-left: 1rem; border-left: 3px solid var(--am); font-size: .92rem; color: var(--gris-txt); }
.fundador__firma b { display: block; font-size: 1.05rem; font-weight: 600; color: var(--tinta); }
.fundador h2 { max-width: 17ch; }

.valores .panel__cab h2 { max-width: 20ch; margin-inline: auto; }
.valores__intro { max-width: 38rem; margin: 1.1rem auto 0; color: var(--gris-txt); }

/* Animaciones al bajar: foto que sube dentro del cuadro y títulos que suben palabra a palabra */
.foto-sube { height: 118% !important; max-width: none; object-fit: cover; will-change: translate; }
.heroo__foto.foto-sube { bottom: auto; }
.vista__marco, .articulo__foto, .alterno__foto, .equipo__persona div { position: relative; }
.js h2.titulo-sube.aparece { opacity: 1; transform: none; transition: none; }
.js h2.titulo-sube .pal > span { animation: none; transform: translateY(108%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js h2.titulo-sube.dentro .pal > span { transform: none; }

/* Botón del bloque amarillo: negro para que destaque, con relleno blanco al pasar el ratón */
.declara .btn--am { background: var(--tinta); color: #fff; }
.declara .btn--am:hover { color: var(--tinta); border-color: #fff; }

.declara h2 { max-width: 15ch; }
.declara mark { white-space: nowrap; margin-top: .08em; }
@media (max-width: 420px) { .declara h2 { font-size: 2.3rem; } }

/* Móvil: la misma mesa inclinada que en escritorio, con piezas más grandes que la pantalla */
@media (max-width: 860px) {
  .mesa { perspective: 900px; }
  .mesa__rej { width: 290%; gap: .8rem; }
  .mesa__pantalla { border-radius: 10px; }
  .mesa__pantalla > * { zoom: .68; }
  .mesa figcaption { font-size: .78rem; }
  .mesa-sec__cab h2 { font-size: clamp(2rem, 8.6vw, 3rem); }
}

/* Móvil: las ocho piezas se ven enteras, más pequeñas y compactas, con la misma inclinación */
@media (max-width: 860px) {
  .mesa { -webkit-mask-image: none; mask-image: none; padding-bottom: clamp(2.5rem, 8vw, 4rem); margin-top: 2rem; }
  .mesa__rej { width: 92%; gap: .7rem .6rem; }
  .mesa__pantalla > * { zoom: .44; }
  .mesa__pantalla { border-radius: 8px; }
  .mesa__pieza:nth-child(n) { margin-top: 0; }
  .mesa figcaption { margin-top: .35rem; font-size: .72rem; }
}
@media (max-width: 560px) {
  .mesa__rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mesa__pieza:nth-child(even) { margin-top: .9rem; }
}

/* En móvil la inclinación es más suave y centrada, para que ninguna pieza se salga por los lados */
@media (max-width: 860px) {
  .mesa { perspective: 1300px; }
  .mesa__rej { width: 88%; transform: translateX(-50%) rotateX(calc(12deg - var(--m, 0) * 12deg)) rotateZ(-1.5deg); transform-origin: 50% 50%; }
}

/* Móvil: sin retraso (la mesa sigue al dedo) y con un movimiento más exagerado: entra muy inclinada, girada y pequeña, y acaba recta */
@media (max-width: 860px) {
  .mesa { perspective: 800px; overflow: visible; }
  .mesa__rej { transition: none; will-change: transform; transform: translateX(-50%) rotateX(calc(42deg - var(--m, 0) * 42deg)) rotateZ(calc(-7deg + var(--m, 0) * 7deg)) scale(calc(.8 + var(--m, 0) * .2)); transform-origin: 50% 20%; }
  .mesa__pantalla { box-shadow: none; }
}

/* Escritorio: mismo movimiento exagerado que en móvil, sin retraso */
@media (min-width: 861px) {
  .mesa { perspective: 1100px; }
  .mesa__rej { transition: none; will-change: transform; transform: translateX(-50%) rotateX(calc(40deg - var(--m, 0) * 40deg)) rotateZ(calc(-7deg + var(--m, 0) * 7deg)) scale(calc(.8 + var(--m, 0) * .2)); transform-origin: 50% 20%; }
}

/* ===== Galería como la de Okay Dev: sustituye a la mesa inclinada anterior ===== */
.mesa-sec { padding-bottom: 0; }
.mesa { position: relative; overflow: hidden; perspective: none; height: clamp(26rem, 40vw, 40rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: 0; -webkit-mask-image: none; mask-image: none; }
.mesa__rej { display: flex; align-items: flex-start; gap: 20px; width: min(88%, 1180px); margin: 0 auto; transform: none; transition: none; will-change: auto; perspective: 1200px; perspective-origin: 50% 0; transform-style: preserve-3d; }
.mesa__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; transform-style: preserve-3d; will-change: transform; }
.mesa__col:nth-child(2) { margin-top: 56px; }
.mesa__col:nth-child(3) { margin-top: 48px; }
.mesa__pieza, .mesa__pieza:nth-child(n) { margin: 0; transform-style: preserve-3d; will-change: transform; }
.mesa__pantalla { backface-visibility: hidden; }
.mesa__pantalla > * { zoom: .68; }
.mesa__pieza--foto .mesa__pantalla > * { zoom: 1; }
.mesa figcaption { margin-top: .5rem; font-size: .82rem; }
@media (max-width: 860px) {
  .mesa { height: auto; overflow: visible; margin-top: 2rem; padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  .mesa__rej { flex-wrap: wrap; width: 92%; gap: 12px 10px; }
  .mesa__col { flex: 0 0 calc(50% - 5px); gap: 12px; }
  .mesa__col:nth-child(n) { margin-top: 0; }
  .mesa__col:nth-child(even) { margin-top: 14px; }
  .mesa__pieza--extra { display: none; }
  .mesa__pantalla > * { zoom: .44; }
  .mesa__pieza--foto .mesa__pantalla > * { zoom: 1; }
  .mesa figcaption { margin-top: .35rem; font-size: .72rem; }
}

/* Móvil: cada tarjeta sube y tapa a la anterior, con un filo blanco entre ellas y el borde de la anterior a la vista */
@media (max-width: 860px) {
  .acordeon__lista { gap: 14px; }
  .pieza { position: sticky; top: calc(var(--cab) + 10px + var(--pila, 0) * 16px); box-shadow: 0 0 0 7px #fff; }
  .pieza:nth-child(2) { --pila: 1; }
  .pieza:nth-child(3) { --pila: 2; }
  .pieza:nth-child(4) { --pila: 3; }
}

/* Móvil: tarjetas del mismo alto y en el mismo sitio, para que encajen exactas, con recorrido en blanco entre una y otra */
@media (max-width: 860px) {
  .acordeon__lista { gap: 42vh; }
  .pieza, .pieza:nth-child(n) { --pila: 0; box-shadow: none; min-height: 25rem; display: flex; flex-direction: column; }
  .pieza__cuerpo { flex: 1; }
}

/* Móvil: una línea fina distingue la tarjeta que sube de la que tapa */
@media (max-width: 860px) { .pieza, .pieza:nth-child(n) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } }

/* Opción C: render 3D de fondo e interfaz real en código encima */
.iu { position: absolute; z-index: 2; width: min(17rem, 80%); padding: .85rem .95rem; border-radius: 14px; background: #fff; color: #111; font-size: .8rem; line-height: 1.3; text-align: left; box-shadow: 0 28px 50px -22px #000, 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.iu p, .iu ul { margin: 0; }
.iu small { display: block; font-size: .7rem; color: #66655f; }
.iu__q { padding: .4rem .75rem; margin-bottom: .6rem !important; border-radius: 99px; background: #F2F1EC; font-size: .74rem; }
.iu__tit { margin-bottom: .55rem !important; font-weight: 600; font-size: .86rem; }
.iu__etq { margin-bottom: .1rem; }
.iu__gr { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.iu__enlace { display: block; font-size: .94rem; font-weight: 500; letter-spacing: -.015em; color: #173EA5; }
.iu__p { margin-top: .15rem !important; color: #55544e; font-size: .76rem; }
.iu__btn { display: inline-block; margin-top: .55rem; padding: .3rem .75rem; border-radius: 99px; background: var(--am); color: #000; font-style: normal; font-weight: 600; font-size: .72rem; }
.iu__ficha { position: relative; padding-right: 3.6rem; }
.iu__ficha b { display: block; font-weight: 600; font-size: .9rem; }
.iu__ficha span { position: absolute; right: 0; top: .1rem; padding: .25rem .6rem; border-radius: 99px; background: #000; color: #fff; font-size: .68rem; }
.iu__hueco { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid #EEE; }
.iu__hueco i { display: block; height: .45em; margin-bottom: .4em; border-radius: 99px; background: #E9E7DF; }
.iu__hueco i:first-child { width: 55%; }
.iu__barras li { display: grid; gap: .22rem; margin-bottom: .45rem; font-size: .72rem; }
.iu__barras i { display: block; height: .6rem; width: var(--v); border-radius: 4px; background: var(--am); }
.iu__ok { margin-top: .2rem !important; font-size: .72rem; color: #55544e; }
.iu__lista { margin-top: .1rem !important; }
.iu__lista li { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .78rem; }
.iu__lista li::before { content: ""; flex: none; width: .95rem; height: .95rem; border-radius: 50%; background: var(--am) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }
.iu__perfil { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.iu__perfil i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--am); }
.iu__perfil b { display: block; font-size: .76rem; font-weight: 600; }
.iu__post { height: 4.2rem; margin-bottom: .45rem; border-radius: 8px; background: linear-gradient(135deg, #FFD400 0 34%, #1b1b19 34% 68%, #6d6c66 68%); }
.iu__nav { display: flex; align-items: center; gap: .25rem; margin: -.85rem -.95rem .7rem; padding: .45rem .7rem; border-radius: 14px 14px 0 0; background: #F2F1EC; }
.iu__nav i { width: 7px; height: 7px; border-radius: 50%; background: #CFCDC5; }
.iu__nav span { margin-left: .4rem; font-size: .66rem; color: #66655f; }
.iu__form u { display: block; margin-top: .35rem; padding: .32rem .55rem; border: 1px solid #E4E2DA; border-radius: 7px; color: #8a8982; font-size: .72rem; text-decoration: none; }
.iu__chat { display: grid; gap: .32rem; }
.iu__chat p { justify-self: start; max-width: 86%; padding: .32rem .6rem; border-radius: 11px 11px 11px 3px; background: #F2F1EC; font-size: .74rem; }
.iu__chat .yo { justify-self: end; border-radius: 11px 11px 3px 11px; background: var(--am); }

/* Portada de las páginas: render a la derecha, fundido con el fondo, para que no quede debajo del texto */
.heroo__foto { left: auto; right: 0; width: 64%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.heroo::after { background: linear-gradient(90deg, rgba(11,11,10,.5) 0%, rgba(11,11,10,.15) 45%, transparent 70%); }
.heroo > .iu { right: clamp(1.5rem, 6vw, 7rem); bottom: clamp(2rem, 12%, 6rem); animation: iu-entra 1s var(--ease) .35s backwards, iu-flota 7s ease-in-out 1.4s infinite; }
@keyframes iu-entra { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes iu-flota { 50% { transform: translateY(-9px); } }
@media (max-width: 1100px) and (min-width: 761px) { .heroo__foto { width: 56%; } .heroo > .iu { width: 13.5rem; right: 1.2rem; } }
@media (max-width: 760px) {
  .heroo { align-items: flex-start; padding-bottom: 66vw; }
  .heroo::after { display: none; }
  .heroo__foto, .heroo__foto.foto-sube { top: auto; bottom: 0; left: 0; width: 100%; height: 70vw !important; translate: none !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%); mask-image: linear-gradient(180deg, transparent, #000 26%); }
  .heroo > .iu { right: 1rem; bottom: 1rem; width: 56vw; padding: .65rem .75rem; font-size: .72rem; }
  .heroo > .iu .iu__nav { margin: -.65rem -.75rem .5rem; }
}

/* Tarjetas de servicio y bloques alternos */
.pieza__foto .iu { right: 1.4rem; bottom: 1.4rem; width: 14.5rem; }
.alterno__foto .iu { right: clamp(.8rem, 3%, 1.8rem); bottom: clamp(.8rem, 5%, 1.8rem); width: min(15.5rem, 62%); }
@media (max-height: 760px) { .pieza__foto .iu { width: 12.5rem; padding: .6rem .7rem; font-size: .72rem; } .pieza__foto .iu__nav { margin: -.6rem -.7rem .5rem; } }
@media (max-width: 860px), (max-height: 540px) { .pieza__foto .iu { display: none; } }
@media (max-width: 560px) { .alterno__foto .iu { padding: .55rem .65rem; font-size: .68rem; width: 62%; } .alterno__foto .iu__tit { font-size: .74rem; } }
@media (prefers-reduced-motion: reduce) { .heroo > .iu { animation: none; } }

/* En las tarjetas el render se ve entero, entre el texto y la interfaz */
@media (min-width: 861px) {
  .pieza__foto { width: 76%; -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 56%); mask-image: linear-gradient(90deg, transparent 22%, #000 56%); }
  .pieza__foto .iu { right: 1.1rem; bottom: 1.1rem; width: 12.2rem; padding: .65rem .75rem; font-size: .72rem; }
  .pieza__foto .iu__nav { margin: -.65rem -.75rem .5rem; }
  .pieza__foto .iu__gr, .pieza__foto .iu__enlace { font-size: .86rem; }
}

/* Móvil: el render se ve entero y la interfaz no lo tapa */
@media (max-width: 760px) {
  .heroo { padding-bottom: 82vw; }
  .heroo__foto, .heroo__foto.foto-sube { height: 88vw !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%); mask-image: linear-gradient(180deg, transparent, #000 16%); }
  .heroo > .iu { width: 50vw; right: .75rem; bottom: .75rem; }
}
@media (max-width: 560px) {
  .alterno__foto { aspect-ratio: 4 / 3; }
  .alterno__foto .iu { width: 54%; right: .6rem; bottom: .6rem; zoom: .82; }
}

/* Banner de la home: escena de vídeo oscura con el titular en el centro */
.portada { background: #111214; color: #fff; }
.portada__video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(3%) scale(1.12); background: #111214; }
.portada::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 62% at 50% 46%, rgba(11,11,10,.86) 0%, rgba(11,11,10,.66) 58%, rgba(11,11,10,0) 100%); }
.portada h1, .portada .entrada__txt { color: #fff; }
.portada .entrada__txt { color: #E9E8E2; }
.portada__grande { font-size: clamp(2.45rem, 4vw, 4.6rem); }
.portada__frase { max-width: 13em; margin-inline: auto; }
.portada .caja { background: var(--am); color: var(--tinta); }
@media (max-width: 1100px) {
  .portada::before { display: none; }
  .portada__video { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; transform: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%); mask-image: linear-gradient(180deg, transparent, #000 14%); }
  .portada__grande { font-size: clamp(2.2rem, 10.5vw, 3rem); }
}
@media (min-width: 1101px) {
  /* El vídeo ocupa el hueco entre la cabecera y la cinta, para que no se corten los objetos */
  .portada__video { inset: var(--cab) 0 calc(clamp(2.2rem, 1.2rem + 3.6vw, 5rem) * 1.15 + .7rem); height: calc(100% - var(--cab) - clamp(2.2rem, 1.2rem + 3.6vw, 5rem) * 1.15 - .7rem); object-position: 50% 42%; transform: none; }
  .portada__frase { max-width: 9.6em; }
}

/* Kinetik System: precio y requisito bajo los seis pasos */
.sistema__pie { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.sistema__precio { display: flex; flex-direction: column; gap: .45rem; max-width: 36rem; }
.sistema__precio b { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--am); font-weight: 600; }
.sistema__precio span { color: var(--osc-txt); }
.sistema .panel__cab h2 { text-wrap: balance; }

/* Galería: cada tarjeta se tumba dentro de su hueco, sin espacio 3D compartido, para que no se solapen */
.mesa__rej, .mesa__col, .mesa__pieza, .mesa__pieza:nth-child(n) { transform-style: flat; }
.mesa__rej { perspective: none; }
.mesa__pieza, .mesa__pieza:nth-child(n) { transform-origin: 50% 100%; }

/* Bloque «Cómo conseguir clientes para tu empresa de reformas» */
.conseguir__txt { margin-top: 1rem; color: #55554f; max-width: 30rem; }
.conseguir { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: via; }
.conseguir li { counter-increment: via; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.conseguir li::before { content: counter(via); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--am); color: var(--tinta); display: grid; place-items: center; font-weight: 600; }
.conseguir h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.conseguir p { margin: 0; color: #55554f; }

/* Sin la cinta de letras: el vídeo de la portada llega hasta abajo */
@media (min-width: 1101px) {
  .portada__video { inset: var(--cab) 0 0; height: calc(100% - var(--cab)); }
}

/* Menú «Liquid Glass» de Apple: cápsula flotante de cristal claro, con brillos en el borde.
   Se adapta a lo que pasa por debajo: cristal oscuro con texto blanco sobre zonas oscuras (clase cab--oscuro, desde app.js) */
.cab::before { display: none; }
.cab__fila { isolation: isolate; margin-top: 10px; height: calc(var(--cab) - 20px); width: min(100% - 2 * clamp(.6rem, 3vw, 3rem), 1180px); padding-inline: 1.2rem .4rem; border-radius: 999px; background: rgba(255,255,255,.86); transition: background-color .35s, color .35s, box-shadow .35s;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 .5px rgba(11,11,10,.1), 0 12px 32px -10px rgba(11,11,10,.28); }
.cab__fila::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(110% 160% at 18% -60%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), radial-gradient(80% 120% at 90% 160%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cab__fila { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.06); backdrop-filter: blur(16px) saturate(190%) brightness(1.06); }
  .cab--oscuro .cab__fila { background: rgba(28,28,30,.38); -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(.9); backdrop-filter: blur(16px) saturate(170%) brightness(.9); }
  .carta__dentro, .movil { background: rgba(255,255,255,.84); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
}
.cab--oscuro .cab__fila { color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.14), 0 12px 32px -10px rgba(0,0,0,.5); }
.cab--oscuro .cab__fila::before { opacity: .35; }
.cab--oscuro .nav .btn--negro, .cab--oscuro .cab__menu { background: #fff; color: var(--tinta); }
@media (max-width: 1100px) { .cab__fila { padding-inline: 1rem .35rem; } }