/* WEBO · Digital Refinement */

@font-face { font-family: "Libre Caslon Display"; src: url("/assets/fonts/caslon-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  --cascara: #F3F0E5;
  --cascara-2: #EAE6D8;
  --papel: #FBFAF5;
  --tinta: #131312;
  --tinta-2: #55534C;
  --hilo: rgb(19 19 18 / .14);
  --hilo-2: rgb(19 19 18 / .28);
  --yema: #E9A21A;
  --yema-suave: #F4D58F;
  --albaricoque: #F5DDB9;

  --serif: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.125rem, .4vw + 1rem, 1.3125rem);
  --t-h3: clamp(1.5rem, 1.1vw + 1.1rem, 2.125rem);
  --t-h2: clamp(2.5rem, 4.4vw + .6rem, 4.75rem);
  --t-h1: clamp(2.9rem, 5.4vw + .2rem, 5.75rem);

  --gutter: 24px;
  --pad: clamp(20px, 4vw, 48px);
  --section: clamp(96px, 12vw, 184px);
  --nav-h: 72px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-cajon: cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; background: var(--cascara); color: var(--tinta);
  font: 400 var(--t-base)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--yema); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--cascara); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Tipografía */
.h1, .h2, .h3 { font-family: var(--serif); letter-spacing: -.012em; }
.h1 { font-size: var(--t-h1); line-height: 1.02; font-weight: 400; }
.h2 { font-size: var(--t-h2); line-height: 1.04; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.12; }
.lead { font-size: var(--t-lg); line-height: 1.55; color: var(--tinta-2); max-width: 46ch; text-wrap: pretty; }
.versal { font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }
.fine { margin-top: 20px; font-size: var(--t-sm); color: var(--tinta-2); }
.ph { background: color-mix(in srgb, var(--yema) 32%, transparent); border-radius: 2px; padding: 0 .15em; }

/* Enlaces y botones */
.link { position: relative; text-decoration: none; font-weight: 500; padding-block: 4px; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform 280ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link::after { transform: scaleX(.35); }
  .link:hover::after { transform: scaleX(1); }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--tinta);
  font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--tinta); color: var(--cascara); }
.btn--lg { min-height: 54px; padding: 0 30px; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--yema); border-color: var(--yema); color: var(--tinta); }
}

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: background-color 240ms ease, box-shadow 240ms ease, opacity 700ms var(--ease-out); }
.intro-hold .nav { opacity: 0; }
.nav.is-scrolled { background: color-mix(in srgb, var(--cascara) 58%, transparent); box-shadow: 0 1px 0 rgb(19 19 18 / .08); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
@media (prefers-reduced-transparency: reduce) { .nav.is-scrolled { background: var(--cascara); } }
/* Sobre la franja oscura la barra se vuelve oscura también */
.nav { color: var(--tinta); }
.nav.is-dark { color: var(--cascara); }
.nav.is-dark.is-scrolled { background: color-mix(in srgb, var(--tinta) 55%, transparent); box-shadow: 0 1px 0 rgb(243 240 229 / .1); }
.nav.is-dark .nav__logo { color: var(--cascara); }
.nav.is-dark .lang a { color: rgb(243 240 229 / .6); }
.nav.is-dark .lang a[aria-current="true"] { color: var(--cascara); }
.nav.is-dark .nav__end > .btn--ink { background: var(--cascara); color: var(--tinta); border-color: var(--cascara); }
.nav.is-dark .nav__menu { border-color: rgb(243 240 229 / .35); }
.nav__in { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav__logo { display: block; width: 96px; color: var(--tinta); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
.nav__logo svg { width: 100%; height: auto; fill: currentColor; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a, .sheet a:not(.btn) { text-decoration: none; font-size: .95rem; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } }
.nav__end { display: flex; align-items: center; gap: 20px; }
.lang { display: flex; gap: 2px; font-size: var(--t-xs); letter-spacing: .12em; }
.lang a { text-decoration: none; padding: 6px 6px; color: var(--tinta-2); border-radius: 4px; }
.lang a[aria-current="true"] { color: var(--tinta); font-weight: 500; }
.nav__menu { display: none; background: none; border: 1px solid var(--hilo-2); border-radius: 999px; min-height: 40px; padding: 0 16px; cursor: pointer; font-size: .9rem; }
.sheet { position: fixed; inset: var(--nav-h) 0 0; background: var(--cascara); color: var(--tinta); border-top: 1px solid var(--hilo); opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.sheet.is-open { opacity: 1; transform: none; }
.sheet__in { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; }
.sheet a:not(.btn) { font-family: var(--serif); font-size: 2.25rem; line-height: 1.25; padding: 6px 0; }
.sheet .btn { margin-top: 24px; align-self: flex-start; }

@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__end { margin-left: auto; }
  .nav__menu { display: inline-flex; align-items: center; }
}

/* Secciones */
.section { padding-block: var(--section); }

/* HERO: primero la foto y el logo; al bajar, el logo se va y entra el mensaje */
.hero { position: relative; }
.hero__pin { position: relative; min-height: 100svh; display: flex; overflow: clip; isolation: isolate; background: #DDD3C0; }
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__wall, .hero__wall img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__wall img { object-fit: cover; }
/* La foto sangra 32 px por la derecha y 24 por abajo: el paralaje con el ratón la mueve hasta 11 y 7 px y nunca debe asomar su borde */
.hero__photo { --bleed-x: 32px; --bleed-y: 24px; position: absolute; right: calc(-1 * var(--bleed-x)); bottom: calc(-1 * var(--bleed-y)); height: calc(94% + var(--bleed-y)); aspect-ratio: 3 / 2; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 22%); -webkit-mask-composite: source-in; mask-composite: intersect; will-change: transform; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(243 240 229 / 0) 84%, var(--cascara) 100%); }
.hero__stage { width: 100%; display: grid; padding-top: var(--nav-h); padding-bottom: clamp(32px, 5vw, 72px); }
.hero__brand, .hero__copy { grid-area: 1 / 1; align-self: center; }
.hero__brand { width: clamp(260px, 36vw, 560px); color: var(--tinta); pointer-events: none; }
.hero__wm { width: 100%; height: auto; fill: currentColor; }
.hero__tag { margin-top: clamp(14px, 1.6vw, 24px); font-weight: 400; letter-spacing: .52em; font-size: clamp(.68rem, .9vw, .95rem); white-space: nowrap; }
.hero__copy { max-width: 780px; }
.h1 .line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.h1 .line > span { display: inline-block; }
.hero .h1 { font-size: clamp(3.2rem, 6.1vw, 6.6rem); line-height: .98; }
.hero__sub { margin-top: 28px; max-width: 30ch; color: #3f3d37; }
.hero__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
@media (max-width: 1023px) {
  .hero__photo { height: auto; width: calc(130% + var(--bleed-x)); }
  .hero__stage { align-content: start; padding-top: calc(var(--nav-h) + clamp(32px, 8vh, 80px)); }
  .hero__brand, .hero__copy { align-self: start; }
  .hero__brand { width: min(78vw, 420px); margin-top: 6vh; }
}

/* Recorrido de la portada: el hero se queda fijo mientras el logo cede el sitio al mensaje */
@media (prefers-reduced-motion: no-preference) {
  .hero { height: 168svh; }
  .hero__pin { position: sticky; top: 0; height: 100svh; }
  html:has(.hero) .nav__logo { opacity: 0; transform: translateY(6px); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__brand { animation: brand-out both cubic-bezier(.33, 1, .68, 1); animation-timeline: scroll(root); animation-range: 0 30svh; }
    .hero__copy .line > span { animation: lineup both cubic-bezier(.33, 1, .68, 1); animation-timeline: scroll(root); animation-range: 12svh 40svh; }
    .hero__copy .line:nth-child(2) > span { animation-range: 16svh 44svh; }
    .hero__sub { animation: fadeup both cubic-bezier(.33, 1, .68, 1); animation-timeline: scroll(root); animation-range: 22svh 50svh; }
    .hero__ctas { animation: fadeup both cubic-bezier(.33, 1, .68, 1); animation-timeline: scroll(root); animation-range: 26svh 54svh; }
    .hero__wall img { animation: wall-drift both linear; animation-timeline: scroll(root); animation-range: 0 68svh; }
    html:has(.hero) .nav__logo { animation: nav-logo both ease-out; animation-timeline: scroll(root); animation-range: 18svh 32svh; }
  }
}
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .hero__brand { transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out), filter 600ms ease; }
    .js .hero__copy .line > span { transform: translateY(108%); transition: transform 900ms var(--ease-out); }
    .js .hero__copy .line:nth-child(2) > span { transition-delay: 80ms; }
    .js .hero__sub, .js .hero__ctas { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out) 220ms, transform 800ms var(--ease-out) 220ms; }
    .js .hero__ctas { transition-delay: 320ms; }
    .hero-open .hero__brand { opacity: 0; transform: translateY(-6svh) scale(.96); filter: blur(6px); }
    .hero-open .hero__copy .line > span, .hero-open .hero__sub, .hero-open .hero__ctas { opacity: 1; transform: none; }
    html.hero-open:has(.hero) .nav__logo { opacity: 1; transform: none; }
  }
}
/* Si alguien llega con el teclado, el mensaje se ve aunque no haya bajado */
.hero__copy:focus-within .line > span, .hero__copy:focus-within .hero__sub, .hero__copy:focus-within .hero__ctas { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero__brand { display: none; } }
@keyframes brand-out { to { opacity: 0; transform: translateY(-6svh) scale(.96); filter: blur(6px); } }
@keyframes lineup { from { transform: translateY(108%); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(24px); } }
@keyframes wall-drift { to { transform: scale(1.05); } }
@keyframes nav-logo { to { opacity: 1; transform: none; } }

/* ENTRADA: la cáscara crema se abre por una línea dorada y deja ver la portada */
.hero__curtain { display: none; }
.has-intro { overflow: hidden; }
.has-intro .hero__curtain { display: block; position: absolute; inset: 0; z-index: -1; --seam: 50%; touch-action: none; }
.hero__half { position: absolute; left: 0; right: 0; background: var(--cascara); }
.hero__half--top { top: 0; height: var(--seam); }
.hero__half--bot { top: var(--seam); bottom: 0; }
.hero__seam { position: absolute; left: 0; right: 0; top: var(--seam); height: 1.5px; margin-top: -.75px; background: var(--yema); transform: scaleX(0); }
.has-intro .hero__brand { opacity: 0; }
.intro-hold .nav { opacity: 0; pointer-events: none; }

/* Revelados al hacer scroll */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Titulares palabra a palabra (22/10/2026): el bloque no se mueve, suben las palabras */
  .js .h2.is-split[data-reveal] { opacity: 1; transform: none; }
  .h2.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
  .h2.is-split .w__i { display: inline-block; transform: translateY(110%); transition: transform 950ms var(--ease-out); }
  .h2.is-split.is-in .w__i { transform: none; }
}

/* ANTES / DESPUÉS */
.compare__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 48px; }
.compare__head .h2 { grid-column: 1 / span 7; }
.compare__field { grid-column: 9 / span 4; display: grid; gap: 10px; }
.compare__field label { font-size: var(--t-sm); color: var(--tinta-2); }
.compare__field input { height: 52px; padding: 0 16px; border: 1px solid rgb(19 19 18 / .5); border-radius: 0; background: var(--papel); font-family: var(--serif); font-size: 1.35rem; }
.compare__field input:focus-visible { outline-offset: 0; }
@media (max-width: 1023px) {
  .compare__head { grid-template-columns: 1fr; row-gap: 28px; }
  .compare__head .h2, .compare__field { grid-column: 1; }
}

.stage { position: relative; }
.browser { border: 1px solid var(--hilo-2); background: var(--papel); }
.browser__bar { height: 40px; border-bottom: 1px solid var(--hilo); display: flex; align-items: center; justify-content: center; }
.browser__url { font-size: var(--t-xs); color: var(--tinta-2); border: 1px solid var(--hilo); border-radius: 999px; padding: 3px 18px; min-width: 32%; text-align: center; }
.browser__view { position: relative; aspect-ratio: 16 / 9.2; container-type: inline-size; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.old, .new { position: absolute; inset: 0; }

/* Antes: la web de una promotora que funciona pero se ha quedado en 2014. Correcta, no horrible: fuentes de sistema,
   degradados de botón, texto justificado y la foto pequeña, enmarcada y con sombra */
.old { background: #e3e6ea; color: #444; font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: 1.02cqw; line-height: 1.6; }
.old__page { position: relative; width: 72%; height: 100%; margin: 0 auto; background: #fff; box-shadow: 0 0 .7cqw rgb(0 0 0 / .14); display: flex; flex-direction: column; overflow: hidden; }
.old__strip { padding: .45cqw 2.2cqw; text-align: right; font-size: .82cqw; color: #7a7a7a; background: #f2f2f2; border-bottom: 1px solid #e0e0e0; }
.old__head { display: flex; align-items: center; gap: 1.2cqw; padding: 1.5cqw 2.2cqw; }
.old__mark { flex: none; width: 2.9cqw; height: 2.9cqw; background: linear-gradient(#3b72b8, #1d4f91); clip-path: polygon(50% 0, 100% 46%, 86% 46%, 86% 100%, 14% 100%, 14% 46%, 0 46%); }
.old__logo { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 2.15cqw; line-height: 1.1; color: #1d4f91; }
.old__tag { display: block; margin-top: .2cqw; font-size: .88cqw; color: #8a8a8a; font-style: italic; }
.old__menu { display: flex; background: linear-gradient(#3d70b2, #1d4f91); border-top: 1px solid #6b93c7; color: #fff; font-size: .98cqw; font-weight: 700; text-shadow: 0 -1px 0 rgb(0 0 0 / .25); }
.old__menu span { padding: .85cqw 1.7cqw; border-right: 1px solid rgb(255 255 255 / .18); }
.old__menu .is-on { background: rgb(0 0 0 / .16); }
.old__body { display: grid; grid-template-columns: 1fr 30%; gap: 2cqw; padding: 1.9cqw 2.2cqw; min-height: 0; }
.old__col { text-align: justify; }
.old__col p { margin-bottom: .75cqw; }
.old__h { font-family: Georgia, "Times New Roman", serif; font-size: 1.6cqw; color: #1d4f91; margin-bottom: 1cqw; padding-bottom: .45cqw; border-bottom: 1px dotted #b9b9b9; text-align: left; }
.old__fig { float: left; width: 44%; margin: .3cqw 1.5cqw .8cqw 0; padding: .35cqw; background: #fff; border: 1px solid #cfcfcf; box-shadow: .18cqw .18cqw .45cqw rgb(0 0 0 / .22); }
.old__fig img { display: block; width: 100%; height: auto; filter: saturate(1.12) contrast(1.05); }
.old__fig figcaption { margin-top: .3cqw; font-size: .78cqw; font-style: italic; color: #808080; text-align: center; }
.old__btn { display: inline-block; margin-top: .2cqw; padding: .5cqw 1.3cqw; border-radius: .35cqw; border: 1px solid #184380; background: linear-gradient(#4a7dbd, #1d4f91); color: #fff; font-size: .9cqw; font-weight: 700; text-shadow: 0 -1px 0 rgb(0 0 0 / .3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3); }
.old__news { clear: both; margin-top: 1.8cqw; padding-top: 1cqw; border-top: 1px dotted #b9b9b9; text-align: left; font-size: .92cqw; }
.old__nh { font-family: Georgia, "Times New Roman", serif; font-size: 1.25cqw; color: #1d4f91; margin-bottom: .5cqw; }
.old__news b { color: #888; font-weight: 400; margin-right: .5cqw; }
.old__box { border: 1px solid #d3d8df; background: #f6f8fa; margin-bottom: 1.3cqw; }
.old__bh { padding: .5cqw .9cqw; background: linear-gradient(#3d70b2, #1d4f91); color: #fff; font-weight: 700; font-size: .92cqw; }
.old__box ul { list-style: none; padding: .5cqw .9cqw; font-size: .88cqw; }
.old__box li { padding: .35cqw 0; border-bottom: 1px dotted #c9c9c9; color: #1d4f91; }
.old__box li:last-child { border-bottom: 0; }
.old__box li::before { content: "» "; color: #999; }
.old__plan { display: block; width: 78%; margin: .9cqw auto .4cqw; fill: none; stroke: #8b95a3; stroke-width: 1.2; }
.old__plan-t { fill: #e2e6eb; stroke-width: .8; }
.old__dl { padding: 0 .9cqw .7cqw; font-size: .86cqw; color: #1d4f91; text-decoration: underline; text-align: center; }
.old__foot { margin-top: auto; padding: .9cqw; text-align: center; font-size: .8cqw; color: #a9adb3; background: #2c3036; }

/* Después: con WEBO. Promotora con marca propia: la casa a sangre, Cormorant Garamond + Manrope (libres, autoalojadas)
   e interfaz discreta como la de WEBO (texto fino, píldoras con filete). El botón de sol y luna cambia la hora de la foto */
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/demo/cormorant-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/demo/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/demo/manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.new { --rb-ink: #2A2925; --rb-ink-2: #57534A; --rb-arena: #F4EFE6; --rb-clay: #8E5238; --rb-line: rgb(42 41 37 / .14); --rb-noche: #1C1F24;
  --rb-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --rb-sans: "Manrope", system-ui, sans-serif;
  --rb-t: 700ms; background: var(--rb-arena); color: var(--rb-ink); font-family: var(--rb-sans); font-variant-numeric: lining-nums; display: flex; flex-direction: column; clip-path: inset(0 38% 0 0); }
.new__top { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; isolation: isolate; }
.new__photo, .new__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.new__photo { z-index: -2; background: #c9c3b4; }
.new__img { object-fit: cover; object-position: 60% 62%; }
.new__img--tarde { opacity: 0; transition: opacity var(--rb-t) ease; }
/* Velos: crema de día, azul noche al atardecer, para que el texto se lea sobre la foto */
.new__top::before, .new__top::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity var(--rb-t) ease; }
.new__top::before { background: linear-gradient(90deg, rgb(244 239 230 / .92) 0%, rgb(244 239 230 / .72) 27%, rgb(244 239 230 / 0) 52%), linear-gradient(180deg, rgb(244 239 230 / .55), rgb(244 239 230 / 0) 16%); }
.new__top::after { opacity: 0; background: linear-gradient(90deg, rgb(28 31 36 / .84) 0%, rgb(28 31 36 / .58) 28%, rgb(28 31 36 / 0) 54%), linear-gradient(180deg, rgb(28 31 36 / .6), rgb(28 31 36 / 0) 18%); }
.new__nav, .new__hero, .new__facts, .new__facts b, .new__call, .new__btn, .new__more { transition: color var(--rb-t) ease, background-color var(--rb-t) ease, border-color var(--rb-t) ease, transform 140ms var(--ease-out); }
.new__nav { display: flex; align-items: center; gap: 3cqw; padding: 1.9cqw 4.4cqw; flex: none; font-size: .98cqw; }
.new__brand { font-family: var(--rb-serif); font-weight: 500; font-size: 1.95cqw; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.new__links { display: flex; gap: 2.4cqw; margin-left: auto; }
.new__call { padding: .55cqw 1.35cqw; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.new__hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 4.4cqw 6.4cqw; max-width: 46%; }
.new__kick { font-size: 1.02cqw; color: var(--rb-clay); transition: color var(--rb-t) ease; }
.new__title { margin-top: 1.1cqw; font-family: var(--rb-serif); font-weight: 500; font-size: 4.9cqw; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.new__lead { margin-top: 1.6cqw; max-width: 32ch; font-size: 1.22cqw; line-height: 1.55; opacity: .86; }
.new__btns { display: flex; align-items: center; gap: 2cqw; margin-top: 2.3cqw; font-size: 1cqw; }
.new__btn { padding: .7cqw 1.6cqw; border-radius: 99px; border: 1px solid var(--rb-ink); background: var(--rb-ink); color: var(--rb-arena); }
.new__more { padding-bottom: .15cqw; border-bottom: 1px solid currentColor; }
.new__facts { display: grid; grid-template-columns: repeat(4, 1fr); flex: none; padding: 1.5cqw 4.4cqw 1.7cqw; background: var(--rb-arena); border-top: 1px solid var(--rb-line); }
.new__facts li { display: flex; align-items: baseline; gap: 1cqw; font-size: .92cqw; opacity: .9; }
.new__facts li + li { padding-left: 2cqw; border-left: 1px solid var(--rb-line); }
.new__facts b { font-family: var(--rb-serif); font-weight: 500; font-size: 2.2cqw; line-height: 1; white-space: nowrap; }
.new__tap { cursor: pointer; }
.new__tap:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .new__links .new__tap:hover, .new__more:hover { opacity: .7; }
  .new__call:hover { background: var(--rb-ink); border-color: var(--rb-ink); color: var(--rb-arena); }
  .new__btn:hover { background: transparent; color: var(--rb-ink); }
}
/* Al atardecer */
.new.is-tarde { color: var(--rb-arena); }
.new.is-tarde .new__img--tarde, .new.is-tarde .new__top::after { opacity: 1; }
.new.is-tarde .new__top::before { opacity: 0; }
.new.is-tarde .new__kick { color: #E2B48F; }
.new.is-tarde .new__btn { background: var(--rb-arena); border-color: var(--rb-arena); color: var(--rb-ink); }
.new.is-tarde .new__facts { background: var(--rb-noche); border-top-color: rgb(244 239 230 / .12); }
.new.is-tarde .new__facts li + li { border-left-color: rgb(244 239 230 / .14); }
@media (hover: hover) and (pointer: fine) {
  .new.is-tarde .new__call:hover { background: var(--rb-arena); border-color: var(--rb-arena); color: var(--rb-ink); }
  .new.is-tarde .new__btn:hover { background: transparent; color: var(--rb-arena); }
}
.new__toast { position: absolute; left: 0; top: 0; z-index: 3; background: var(--tinta); color: var(--cascara); font-size: max(12px, 1.1cqw); padding: .8cqw 1.6cqw; border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -40%) scale(.96); transition: opacity 180ms ease, transform 260ms var(--ease-out); }
.new__toast.is-on { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* Botón de sol y luna, sobre la web nueva */
.hora { position: absolute; left: 4.4cqw; bottom: 7.6cqw; z-index: 2; display: flex; align-items: center; gap: .8cqw; padding: .3cqw 1.3cqw .3cqw .3cqw; border-radius: 99px; background: rgb(244 239 230 / .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: "Manrope", system-ui, sans-serif; font-size: max(12px, .95cqw); color: #2A2925; transition: opacity 200ms ease, visibility 0s linear 0s, color 700ms ease, background-color 700ms ease; }
.hora.is-off { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.hora__btn { position: relative; flex: none; width: max(36px, 3.3cqw); height: max(36px, 3.3cqw); padding: 0; border-radius: 50%; border: 1px solid rgb(42 41 37 / .2); background: #FBF8F2; color: #2A2925; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 700ms ease, color 700ms ease, border-color 700ms ease; }
.hora__btn:active { transform: scale(.94); }
.hora__btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.hora__btn svg { position: absolute; left: 50%; top: 50%; width: 48%; height: 48%; margin: -24% 0 0 -24%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.hora__luna { opacity: 0; transform: rotate(-70deg) scale(.6); }
.hora__txt { display: grid; }
.hora__a, .hora__b { grid-area: 1 / 1; white-space: nowrap; transition: opacity 300ms ease; }
.hora__b { opacity: 0; }
.hora.is-tarde { color: #F4EFE6; background: rgb(28 31 36 / .62); }
.hora.is-tarde .hora__btn { background: #2A2E35; border-color: rgb(244 239 230 / .3); color: #F4EFE6; }
.hora.is-tarde .hora__btn:focus-visible { outline-color: #F4EFE6; }
.hora.is-tarde .hora__sol { opacity: 0; transform: rotate(90deg) scale(.6); }
.hora.is-tarde .hora__luna { opacity: 1; transform: none; }
.hora.is-tarde .hora__a { opacity: 0; }
.hora.is-tarde .hora__b { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .hora__btn:hover { transform: scale(1.06); } .hora__btn:active { transform: scale(.94); } }

.handle { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transform: translateX(var(--x, 50%)); pointer-events: none; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--tinta); }
.handle__knob { position: absolute; top: 50%; left: 0; width: 44px; height: 52px; margin: -26px 0 0 -22px; background: var(--tinta); border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%; transition: transform 160ms var(--ease-out); }
.handle__knob::before, .handle__knob::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid var(--cascara); border-width: 0 0 1.5px 1.5px; margin-top: -3px; }
.handle__knob::before { left: 11px; transform: rotate(45deg); }
.handle__knob::after { right: 11px; transform: rotate(-135deg); }
.stage.is-dragging .handle__knob { transform: scale(.94); }
.stage__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; pointer-events: none; }
.stage__range:focus-visible + * , .stage:has(.stage__range:focus-visible) .handle__knob { outline: 2px solid var(--tinta); outline-offset: 4px; }
.stage__tags { display: flex; justify-content: space-between; margin-top: 14px; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }

@media (max-width: 767px) {
  .browser__view { aspect-ratio: 4 / 6.2; }
  .old { font-size: 2.9cqw; }
  .old__page { width: 94%; }
  .old__strip { font-size: 2.1cqw; padding: 1cqw 3cqw; }
  .old__head { padding: 3cqw; gap: 2.4cqw; }
  .old__mark { width: 6.4cqw; height: 6.4cqw; }
  .old__logo { font-size: 5.4cqw; }
  .old__tag { font-size: 2.3cqw; }
  .old__menu { font-size: 2.4cqw; flex-wrap: wrap; }
  .old__menu span { padding: 2cqw 2.6cqw; }
  .old__body { grid-template-columns: 1fr; padding: 3.4cqw; gap: 3cqw; }
  .old__h { font-size: 3.8cqw; }
  .old__fig { width: 48%; margin: .6cqw 3cqw 1.6cqw 0; padding: .8cqw; }
  .old__fig figcaption { font-size: 2cqw; }
  .old__btn { font-size: 2.4cqw; padding: 1.2cqw 3cqw; }
  .old__news { font-size: 2.4cqw; margin-top: 3cqw; padding-top: 2cqw; }
  .old__nh { font-size: 3.2cqw; }
  .old__bh { font-size: 2.5cqw; padding: 1.2cqw 2cqw; }
  .old__box ul { font-size: 2.3cqw; padding: 1cqw 2cqw; }
  .old__box:last-child { display: none; }
  .old__foot { font-size: 2.2cqw; padding: 2.2cqw; }
  .new__nav { padding: 4.6cqw 5cqw; gap: 3cqw; font-size: 2.8cqw; }
  .new__brand { font-size: 5.2cqw; }
  .new__links { display: none; }
  .new__call { margin-left: auto; padding: 1.4cqw 3.2cqw; }
  /* En móvil la casa no cabe a sangre detrás del texto: texto arriba sobre arena (o noche) y la foto debajo, entera */
  .new { transition: background-color var(--rb-t) ease; }
  .new.is-tarde { background: var(--rb-noche); }
  .new__top::before, .new__top::after { display: none; }
  .new__photo { position: relative; inset: auto; order: 3; flex: 1; min-height: 0; z-index: 0; }
  .new__img { object-position: 72% 60%; }
  .new__hero { flex: none; max-width: none; justify-content: flex-start; padding: 1cqw 5cqw 6cqw; }
  .new__kick { font-size: 2.7cqw; }
  .new__title { font-size: 10cqw; margin-top: 2.2cqw; }
  .new__lead { font-size: 3.3cqw; margin-top: 3cqw; }
  .new__btns { font-size: 3cqw; gap: 4cqw; margin-top: 4.4cqw; }
  .new__btn { padding: 1.9cqw 4cqw; }
  .new__facts { display: none; }
  .new__toast { font-size: 3cqw; padding: 2cqw 3.6cqw; }
  .hora { left: 5cqw; bottom: 5cqw; gap: 2cqw; padding: .8cqw 3.4cqw .8cqw .8cqw; font-size: max(12px, 3cqw); }
  .old__col { text-align: left; }
  .old__col p { margin-bottom: 1.6cqw; }
}

/* POR QUÉ UNA BUENA WEB: franja oscura, compacta y sobria justo antes del contacto (Borja: «más formal y más pequeño», «al final, con la miel en los labios»). Cinco datos en fila entre filetes, con la fuente enlazada */
.datos { padding-block: clamp(56px, 6vw, 88px); background: var(--tinta); color: var(--cascara); }
.concepts + .datos { padding-top: 0; } /* sigue la franja oscura de los conceptos sin un hueco doble */
.datos__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 16px; border-bottom: 1px solid rgb(243 240 229 / .5); }
.datos__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, .8vw + 1.1rem, 1.75rem); line-height: 1.15; letter-spacing: -.005em; }
.datos__lead { font-size: var(--t-sm); color: rgb(243 240 229 / .7); max-width: 52ch; }
.datos__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dato { padding: 22px 22px 4px 0; }
.dato + .dato { padding-left: 22px; border-left: 1px solid rgb(243 240 229 / .16); }
.dato__n { font-family: var(--serif); font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.15rem); line-height: 1; white-space: nowrap; }
.dato__t { margin-top: 10px; font-size: var(--t-sm); line-height: 1.5; color: rgb(243 240 229 / .74); text-wrap: pretty; }
.dato__src { display: table; margin-top: 6px; font-size: .72rem; color: rgb(243 240 229 / .62); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.dato__src:hover { color: var(--cascara); }
.dato__src:focus-visible { outline: 2px solid var(--cascara); outline-offset: 3px; }
@media (max-width: 1023px) {
  .datos__list { grid-template-columns: 1fr; }
  .dato, .dato + .dato { display: grid; grid-template-columns: 5.6rem 1fr; column-gap: 16px; align-items: baseline; padding: 14px 0; border-left: 0; border-bottom: 1px solid rgb(243 240 229 / .14); }
  .dato__n { font-size: 1.5rem; }
  .dato__t { margin-top: 0; }
}

/* QUÉ HACEMOS */
.services { background: var(--cascara-2); }
.services__title { max-width: 16ch; margin-bottom: clamp(48px, 6vw, 88px); }
.services__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.services__list { grid-column: 1 / span 7; border-top: 1px solid var(--tinta); counter-reset: svc; }
.svc { border-bottom: 1px solid var(--hilo-2); }
.svc__q { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 24px; padding: 26px 0; cursor: pointer; }
.svc__q:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.svc__out { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw + .6rem, 2.6rem); line-height: 1.1; letter-spacing: -.01em; color: var(--tinta-2); transition: color 200ms ease, transform 400ms var(--ease-out); }
.svc__name { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.svc[data-active] .svc__out { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .svc__q:hover .svc__out { color: var(--tinta); transform: translateX(6px); } }
.svc__a { display: none; padding: 0 0 28px; max-width: 52ch; }
.svc__a p:first-child { font-size: var(--t-lg); }
.svc__inc { margin-top: 14px; font-size: var(--t-sm); color: var(--tinta-2); }
.services__panel { grid-column: 9 / span 4; position: sticky; top: calc(var(--nav-h) + 40px); overflow: hidden; isolation: isolate; background: var(--tinta); color: var(--cascara); padding: clamp(28px, 3vw, 44px); min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; }
.services__egg { position: absolute; z-index: -1; right: -22%; top: -18%; width: 78%; height: auto; fill: rgb(243 240 229 / .09); transform: rotate(-14deg); transition: transform 900ms var(--ease-out); }
.services__panel p:first-of-type { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; }
.services__panel .svc__inc { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(243 240 229 / .18); font-family: var(--sans); font-size: var(--t-sm); color: rgb(243 240 229 / .72); }
@media (prefers-reduced-motion: no-preference) { .services__panel .panel__in { animation: panel 420ms var(--ease-out) both; } }
@keyframes panel { from { opacity: 0; transform: translateY(8px); } }
.svc-group { padding: 48px 0 14px; border-bottom: 1px solid var(--tinta); font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); }
.svc__chip { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--yema); color: var(--tinta); font-size: .68rem; font-weight: 500; letter-spacing: .14em; line-height: 1.3; vertical-align: 1px; }
/* Vídeo y 3D: el panel se calienta un poco para que se note que es el servicio premium */
.services__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 88% 6%, rgb(245 221 185 / .2), transparent 70%); opacity: 0; transition: opacity 700ms ease; }
.services__panel[data-premium]::before { opacity: 1; }
.services__panel[data-premium] .services__egg { transform: rotate(-6deg) scale(1.06); fill: rgb(245 221 185 / .13); }
@media (max-width: 1023px) {
  .services__list { grid-column: 1 / -1; }
  .services__panel { display: none; }
  .svc__q { grid-template-columns: 1fr; gap: 8px; }
  .svc__name { order: -1; }
  .svc[data-active] .svc__a { display: block; }
}

/* PROCESO */
/* Por encima de la franja oscura de conceptos: al caer, el huevo entra entero en ella en vez de quedar cortado */
.process { position: relative; z-index: 1; }
.process__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.process__side { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 48px); isolation: isolate; }
.process__egg { position: absolute; z-index: -1; left: 4px; top: calc(100% + clamp(40px, 6vh, 72px)); width: clamp(120px, 13vw, 190px); height: auto; fill: color-mix(in srgb, var(--yema) 30%, var(--cascara-2)); transform: rotate(-10deg); }
@media (max-width: 1023px) { .process__egg { display: none; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .process__egg { animation: egg-turn linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } }
@keyframes egg-turn { from { transform: rotate(-22deg) translateY(-30px); } to { transform: rotate(8deg) translateY(30px); } }
.process__side .h2 { margin-top: 0; }
.process__side .lead { margin-top: 28px; }
.steps { grid-column: 7 / span 6; position: relative; padding-left: 72px; }
.steps__crack { position: absolute; left: 12px; top: 14px; bottom: 14px; width: 24px; height: calc(100% - 28px); overflow: visible; }
.steps__crack polyline { fill: none; stroke: var(--tinta); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.step { position: relative; padding-bottom: clamp(56px, 7vw, 104px); }
.step:last-child { padding-bottom: 0; }
.step__mark { position: absolute; left: -72px; top: 4px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--cascara); }
.step__mark svg, .process__egg, .services__egg, .tile__egg, .lost__egg { overflow: visible; }
.step__mark svg { width: 28px; height: auto; fill: var(--hilo-2); transition: fill 400ms ease, transform 500ms var(--ease-out); }
.step.is-on .step__mark svg { fill: var(--tinta); }
.step:nth-child(3).is-on .step__mark svg { transform: rotate(-8deg); }
.step__t { margin-bottom: 14px; }
.step p { max-width: 46ch; color: var(--tinta-2); font-size: var(--t-lg); }
.step__note { position: relative; display: inline-block; margin-top: 18px; margin-left: 44px; background: var(--albaricoque); color: var(--tinta) !important; font-size: var(--t-sm) !important; font-weight: 500; padding: 4px 14px; border-radius: 999px; }
.step__note::before { content: ""; position: absolute; right: 100%; top: 50%; width: 36px; height: 1px; margin-right: 8px; background: var(--tinta); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps__crack polyline { animation: crackline linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
  }
}
@keyframes crackline { from { stroke-dashoffset: 1; } }
@media (max-width: 1023px) {
  .process__grid { grid-template-columns: 1fr; row-gap: 56px; }
  .process__side { position: static; grid-column: 1; }
  .steps { grid-column: 1; padding-left: 60px; }
  .step__mark { left: -60px; width: 40px; height: 40px; }
  .steps__crack { left: 8px; }
}

/* CONCEPTOS: franja oscura con miniaturas pequeñas, como pantallas vistas un poco de lejos */
.concepts { position: relative; background: var(--tinta); color: var(--cascara); }
.concepts .lead { color: rgb(243 240 229 / .72); }
.concepts__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.concepts__intro { grid-column: 1 / span 8; display: grid; gap: 28px; }
.concepts__intro .h2 { max-width: 14ch; }
.concepts__arrows { grid-column: 10 / span 3; justify-self: end; display: none; gap: 10px; }
.js .concepts__arrows { display: flex; }
.cc-arrow { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgb(243 240 229 / .32); background: transparent; color: var(--cascara); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 140ms var(--ease-out); }
.cc-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cc-arrow:active:not(:disabled) { transform: scale(.94); }
.cc-arrow:disabled { opacity: .28; cursor: default; }
.cc-arrow:focus-visible { outline-color: var(--cascara); }
@media (hover: hover) and (pointer: fine) { .cc-arrow:not(:disabled):hover { background: var(--cascara); color: var(--tinta); border-color: var(--cascara); } }

/* La pista llega de borde a borde de la pantalla; la primera tarjeta se alinea con la retícula */
.concepts__track {
  --edge: max(var(--pad), calc((100vw - 1320px) / 2 + var(--pad)));
  display: flex; gap: clamp(28px, 3.2vw, 52px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge);
  padding: 30px var(--edge) 34px; scrollbar-width: none;
  /* Sin esto Chrome suma el ancho de las tarjetas al documento y aparece scroll horizontal */
  contain: paint;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
}
.concepts__track::-webkit-scrollbar { display: none; }
.concepts__track:focus-visible { outline: 2px solid var(--cascara); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) { .js .concepts__track { cursor: grab; } }
.concepts__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.cc { flex: 0 0 auto; width: clamp(232px, 21vw, 296px); scroll-snap-align: start; transition: opacity 300ms ease; }
.cc__link { display: block; text-decoration: none; color: inherit; -webkit-user-drag: none; }
.cc__link:focus-visible { outline: none; }
.cc__shot { position: relative; display: block; padding: 0 20px 24px 0; transition: transform 520ms var(--ease-out); }
/* Navegador: un marco sobrio con tres puntos de ventana */
.cc__screen { position: relative; display: block; padding-top: 13px; border-radius: 7px; overflow: hidden; background: #2A2926; box-shadow: 0 0 0 1px rgb(243 240 229 / .14), 0 26px 50px -26px rgb(0 0 0 / .9); }
.cc__screen::before { content: ""; position: absolute; top: 4px; left: 8px; width: 21px; height: 5px; background: radial-gradient(circle, rgb(243 240 229 / .34) 1.5px, transparent 2px) 0 0 / 7px 5px repeat-x; }
.cc__screen img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #1E1E1C; }
/* Móvil que asoma por la esquina: la misma web, en pequeño */
.cc__phone { position: absolute; right: 0; bottom: 0; width: 27%; padding: 3px; border-radius: 11px; background: #0D0D0C; box-shadow: 0 0 0 1px rgb(243 240 229 / .2), 0 18px 34px -14px rgb(0 0 0 / .95); transition: transform 620ms var(--ease-out); }
.cc__phone img { width: 100%; height: auto; aspect-ratio: 180 / 390; object-fit: cover; object-position: top; border-radius: 8px; background: #1E1E1C; }
.cc__cap { display: block; margin-top: 12px; padding-right: 20px; font-size: var(--t-sm); line-height: 1.4; color: rgb(243 240 229 / .66); transition: color 200ms ease; }
.cc__link:focus-visible .cc__screen { outline: 2px solid var(--cascara); outline-offset: 4px; }
.cc__link:focus-visible .cc__cap { color: var(--cascara); }
@media (hover: hover) and (pointer: fine) {
  .cc__link:hover .cc__shot { transform: translateY(-8px) scale(1.035); }
  .cc__link:hover .cc__phone { transform: translate(5px, -7px); }
  .cc__link:hover .cc__cap { color: var(--cascara); }
  /* La que miras se acerca; las demás se quedan un paso atrás */
  .concepts__track:not(.is-dragging):has(.cc__link:hover) .cc:not(:has(.cc__link:hover)) { opacity: .5; }
}
.cc__link:focus-visible .cc__shot { transform: translateY(-8px) scale(1.035); }
.concepts__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; color: rgb(243 240 229 / .66); }
.concepts__foot .link { color: var(--cascara); }
/* Entrada: las tarjetas llegan desde la derecha, escalonadas */
@media (prefers-reduced-motion: no-preference) {
  .js .concepts__viewport[data-reveal] { opacity: 1; transform: none; }
  .js .concepts__viewport .cc { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .concepts__viewport:not(.is-in) .cc { opacity: 0; transform: translateX(56px); }
  .js .concepts__viewport .cc:nth-child(2) { transition-delay: 60ms; }
  .js .concepts__viewport .cc:nth-child(3) { transition-delay: 120ms; }
  .js .concepts__viewport .cc:nth-child(4) { transition-delay: 180ms; }
  .js .concepts__viewport .cc:nth-child(5) { transition-delay: 240ms; }
  .js .concepts__viewport .cc:nth-child(n+6) { transition-delay: 300ms; }
  .js .concepts__viewport.is-settled .cc { transition: opacity 300ms ease; transition-delay: 0ms; }
}
@media (max-width: 1023px) {
  .concepts__intro { grid-column: 1 / -1; }
  .concepts__arrows { grid-column: 1 / -1; justify-self: start; margin-top: 28px; }
}
@media (max-width: 599px) {
  .cc { width: min(72vw, 270px); }
}

/* PRECIOS: cuánto cuesta. Una línea continua con cinco hitos; solo el primero lleva precio y el último se abre al infinito */
/* position: relative para que el huevo del proceso (sticky) no asome por encima de esta franja */
.prices { position: relative; background: var(--cascara-2); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prices__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; margin-bottom: clamp(64px, 8vw, 120px); }
.prices__head .h2 { grid-column: 1 / -1; max-width: 14ch; }
.prices__from { grid-column: 1 / span 6; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.18; letter-spacing: -.01em; max-width: 26ch; text-wrap: pretty; }
.prices__why { grid-column: 8 / span 5; align-self: end; }

/* Sin JS (o antes de que cargue): lista sencilla con los cinco niveles */
.escala { position: relative; }
.escala__rail { display: none; }
.escala__list { display: grid; gap: 28px; padding-top: 28px; border-top: 1px solid var(--tinta); }
.hito { position: relative; }
.hito__btn { all: unset; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.hito__dot { display: none; }
.hito__name { font-family: var(--serif); font-size: clamp(1.6rem, 1vw + 1.15rem, 2.15rem); line-height: 1.08; letter-spacing: -.012em; transition: color 260ms ease; }
.hito__price { font-family: var(--serif); font-size: clamp(1.25rem, .5vw + 1.05rem, 1.5rem); line-height: 1.1; white-space: nowrap; }
.hito__price small { font-family: var(--sans); font-size: var(--t-sm); color: var(--tinta-2); margin-right: .25em; }
.hito__desc { margin-top: 12px; max-width: 46ch; color: var(--tinta-2); text-wrap: pretty; }

/* Con JS: la línea. Las posiciones de puntos, marcas y huevo las calcula initEscala */
.js .escala__list { position: relative; z-index: 1; padding-top: 0; border-top: 0; }
.js .escala__rail { display: block; position: absolute; inset: 0; pointer-events: none; }
.js .hito__btn { cursor: pointer; }
.js .hito__dot { display: block; position: absolute; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 5px var(--cascara-2); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.js .hito:nth-child(1) .hito__dot { --s: 9px; opacity: .5; }
.js .hito:nth-child(2) .hito__dot { --s: 11px; opacity: .64; }
.js .hito:nth-child(3) .hito__dot { --s: 13px; opacity: .78; }
.js .hito:nth-child(4) .hito__dot { --s: 15px; opacity: .9; }
.js .hito:nth-child(5) .hito__dot { --s: 17px; opacity: 1; }
.js .hito__dot { width: var(--s); height: var(--s); }
.js .hito__name { color: var(--tinta-2); }
.js .hito.is-on .hito__name, .js .hito.is-near .hito__name { color: var(--tinta); }
.hito__btn:focus-visible { outline: none; }
.hito__btn:focus-visible .hito__name { outline: 2px solid var(--tinta); outline-offset: 5px; border-radius: 2px; }
.hito__ast { position: relative; top: -.3em; margin-left: 1px; font-size: .9em; }
.hito__nota { margin-top: 10px; font-size: var(--t-sm); color: var(--tinta-2); }
.escala__line { position: absolute; transform-origin: 0 0; background: linear-gradient(90deg, rgb(19 19 18 / .22), var(--tinta) 72%); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); -webkit-mask-image: linear-gradient(90deg, #000 var(--solid, 80%), transparent); mask-image: linear-gradient(90deg, #000 var(--solid, 80%), transparent); }
.escala__tick { position: absolute; width: 1px; height: 11px; margin: -5.5px 0 0 -.5px; background: var(--tinta); opacity: var(--o, .4); pointer-events: none; transition: opacity 400ms ease, transform 300ms var(--ease-out); }
.escala__tick { z-index: 3; }
.escala__inf { position: absolute; margin: -.62em 0 0 -.55em; padding: 0 .2em; font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--tinta-2); background: var(--cascara-2); transition: opacity 600ms ease; }
.escala__egg { position: absolute; z-index: 2; left: 0; top: 0; width: 24px; height: 29px; margin: -15px 0 0 -12px; background: var(--tinta); border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%; box-shadow: 0 0 0 5px var(--cascara-2); transition: transform 620ms var(--ease-cajon), opacity 500ms ease; }

@media (min-width: 1024px) {
  .js .escala__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); }
  .js .hito__btn { display: grid; justify-items: start; gap: 6px; padding-top: 52px; }
  .js .hito__dot { top: calc(9px - var(--s) / 2); left: 0; }
  /* Todas las descripciones ocupan su sitio (no salta nada); solo se ve la del hito elegido */
  .js .hito__desc { max-width: 30ch; margin-top: 18px; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 420ms var(--ease-out), visibility 0s linear 420ms; }
  .js .hito.is-on .hito__desc { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
@media (max-width: 1023px) {
  .js .escala { padding-left: 46px; padding-bottom: 88px; }
  .js .escala__list { gap: 0; }
  .js .hito { padding-bottom: 30px; }
  .js .hito__dot { top: calc(1.05em - var(--s) / 2); left: -46px; margin-left: calc(12px - var(--s) / 2); }
  .js .hito__desc { display: none; }
  .js .hito.is-on .hito__desc { display: block; }
  .escala.is-vertical .escala__line { background: linear-gradient(180deg, rgb(19 19 18 / .22), var(--tinta) 72%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, #000 var(--solid, 80%), transparent); mask-image: linear-gradient(180deg, #000 var(--solid, 80%), transparent); }
  .escala.is-vertical .escala__tick { width: 9px; height: 1px; margin: -.5px 0 0 -4.5px; }
}
/* La línea se dibuja al entrar en pantalla; después aparecen los puntos, uno detrás de otro */
@media (prefers-reduced-motion: no-preference) {
  .escala__line { transition: transform 1400ms var(--ease-in-out); }
  .js .escala:not(.is-in) .escala__line { transform: scaleX(0); }
  .js .escala.is-vertical:not(.is-in) .escala__line { transform: scaleY(0); }
  .js .escala:not(.is-in) .hito__dot { opacity: 0; transform: scale(.3); }
  .js .escala:not(.is-in) .escala__tick, .js .escala:not(.is-in) .escala__inf, .js .escala:not(.is-in) .escala__egg { opacity: 0; }
  .js .escala .hito:nth-child(1) .hito__dot { transition-delay: 150ms; }
  .js .escala .hito:nth-child(2) .hito__dot { transition-delay: 380ms; }
  .js .escala .hito:nth-child(3) .hito__dot { transition-delay: 610ms; }
  .js .escala .hito:nth-child(4) .hito__dot { transition-delay: 840ms; }
  .js .escala .hito:nth-child(5) .hito__dot { transition-delay: 1070ms; }
  .js .escala .escala__tick { transition-delay: 700ms; }
  .js .escala .escala__inf { transition-delay: 1300ms; }
  .js .escala.is-in .escala__egg { transition: transform 620ms var(--ease-cajon), opacity 500ms ease 1200ms; }
  .js .escala.is-settled .hito__dot, .js .escala.is-settled .escala__tick, .js .escala.is-settled .escala__egg { transition-delay: 0s; }
}

.prices__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--hilo-2); }
.prices__cta p { font-size: var(--t-lg); max-width: 50ch; text-wrap: pretty; }

/* Lo que va aparte (libro de cuentas con puntos guía) y el bloque para entidades sociales */
.prices__more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 56px; align-items: start; margin-top: clamp(88px, 10vw, 152px); }
.aparte { grid-column: 1 / span 6; padding-top: 28px; border-top: 1px solid var(--tinta); }
.aparte .h3 { margin-bottom: 14px; }
.ledger li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; }
.ledger li::after { content: ""; order: 1; flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--hilo-2); transform: translateY(-4px); }
.ledger li > span { order: 0; }
.ledger li > b { order: 2; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; white-space: nowrap; }
.ledger__n { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; }
.ledger__m { display: block; margin-top: 3px; font-size: var(--t-sm); color: var(--tinta-2); max-width: 36ch; }
.social { grid-column: 8 / span 5; display: grid; justify-items: start; gap: 18px; padding: clamp(28px, 3.4vw, 48px); background: var(--albaricoque); }
.social__t { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.social p { color: #3f3d37; max-width: 44ch; }
.social .btn { margin-top: 6px; }

.btn--line { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--cream { background: var(--cascara); color: var(--tinta); border-color: var(--cascara); }
@media (hover: hover) and (pointer: fine) {
  .btn--line:hover { background: var(--tinta); color: var(--cascara); }
  .btn--cream:hover { background: var(--albaricoque); border-color: var(--albaricoque); }
}
@media (max-width: 1023px) {
  .prices__from, .prices__why, .aparte, .social { grid-column: 1 / -1; }
  .prices__why { align-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .qa[open] p { animation: fadeup 420ms var(--ease-out) both; }
}

/* POR QUÉ: franja oscura en mosaico */
.why { background: var(--tinta); color: var(--cascara); }
.why__title { max-width: 15ch; margin-bottom: clamp(48px, 6vw, 80px); }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; min-height: clamp(280px, 27vw, 380px); padding: clamp(28px, 3.2vw, 48px); }
.tile .h3 { max-width: 16ch; }
.tile__val { margin-top: auto; font-family: var(--serif); font-size: clamp(4.5rem, 9vw, 8.75rem); line-height: .85; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile__val small { font-size: .3em; letter-spacing: 0; opacity: .7; }
.tile__txt { max-width: 42ch; opacity: .78; }
.tile--wall .tile__txt, .tile--egg .tile__txt { margin-top: auto; }
.tile--load, .tile--egg { grid-column: span 7; background: #1E1E1C; box-shadow: inset 0 0 0 1px rgb(243 240 229 / .1); }
.tile--cookies, .tile--wall { grid-column: span 5; color: var(--tinta); }
.tile--cookies { background: var(--albaricoque); }
.tile--wall { background: #DDD3C0 url("/assets/img/wall.webp") center / cover; }
.tile--wall .tile__txt { opacity: 1; color: #3f3d37; }
.tile__egg { position: absolute; z-index: -1; right: -8%; top: -34%; width: 44%; height: auto; fill: rgb(243 240 229 / .07); transform: rotate(16deg); }
.why .ph { color: var(--tinta); }
@media (max-width: 1023px) {
  .tile--load, .tile--egg, .tile--cookies, .tile--wall { grid-column: 1 / -1; }
  .tile { min-height: 0; }
  .tile--wall, .tile--egg { min-height: 240px; }
}

/* FAQ */
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 48px); }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--tinta); }
.faq__more { margin-top: 32px; color: var(--tinta-2); }
.faq__more .link { color: var(--tinta); }
.qa { border-bottom: 1px solid var(--hilo-2); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 20px; gap: 24px; align-items: center; padding: 24px 0; font-size: var(--t-lg); font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 12px; height: 12px; border: solid var(--tinta); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-3px, -3px); transition: transform 300ms var(--ease-out); justify-self: center; }
.qa[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.qa p { padding: 0 48px 26px 0; color: var(--tinta-2); max-width: 60ch; }
@media (max-width: 1023px) {
  .faq__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .faq__side, .faq__list { grid-column: 1; position: relative; top: auto; }
  }

/* CONTACTO */
.contact { background: #DDD3C0 url("/assets/img/wall.webp") center / cover; }
.contact .lead { color: #3f3d37; }
.card { background: var(--papel); padding: clamp(24px, 3.4vw, 52px); box-shadow: 0 1px 0 rgb(19 19 18 / .06), 0 40px 90px -50px rgb(19 19 18 / .32); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.contact__side { grid-column: 1 / span 5; }
.contact__side .h2 { margin-top: 0; }
.contact__side .lead { margin-top: 28px; }
.direct { margin-top: 40px; display: grid; gap: 12px; }
.direct li { display: grid; gap: 6px; }
.direct__h { font-size: var(--t-sm); color: #3f3d37; }
.direct__mail { justify-self: start; font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 1.4vw + 1rem, 2.2rem); line-height: 1.2; overflow-wrap: anywhere; }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gutter); }
.field { display: grid; gap: 8px; align-content: start; }
.field--full, .field--choice { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--t-sm); font-weight: 500; }
.opt { color: var(--tinta-2); font-weight: 400; }
.field input[type="text"], .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--papel); border: 1px solid rgb(19 19 18 / .5); border-radius: 0; transition: border-color 200ms ease; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder { color: #8a877e; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.field [aria-invalid="true"] { border-color: #8f2a19; }
.field__help { font-size: var(--t-sm); color: var(--tinta-2); }
.field__err { font-size: var(--t-sm); color: #8f2a19; min-height: 0; }
.field__err:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--hilo-2); border-radius: 999px; background: var(--papel); font-size: .95rem; font-weight: 400; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-out); }
.choices input:checked + span { background: var(--tinta); color: var(--cascara); border-color: var(--tinta); }
.choices input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 3px; }
.choices label:active span { transform: scale(.97); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-weight: 400 !important; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.form__status { font-size: var(--t-sm); max-width: 44ch; }
.form__status[data-kind="ok"] { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; }
.form__status[data-kind="error"] { color: #8f2a19; }
.form__legal { font-size: .8rem; line-height: 1.55; color: var(--tinta-2); }
.form button[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 1023px) {
  .contact__grid { grid-template-columns: 1fr; row-gap: 56px; }
  .contact__side, .form { grid-column: 1; }
}
@media (max-width: 599px) { .form { grid-template-columns: 1fr; } .form > .field { grid-column: 1; } }

/* CIERRE Y PIE */
.closing { padding-block: clamp(80px, 10vw, 160px) clamp(40px, 5vw, 72px); }
.closing__wm { width: 100%; height: auto; fill: var(--tinta); }
.closing__tag { margin-top: clamp(16px, 2vw, 28px); text-align: center; letter-spacing: .5em; font-weight: 400; font-size: clamp(.75rem, 1.2vw, 1.15rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .closing__wm { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms var(--ease-in-out); }
  .js .closing.is-in .closing__wm { clip-path: inset(0 0 0 0); }
  .js .closing__tag { opacity: 0; transition: opacity 900ms ease 900ms; }
  .js .closing.is-in .closing__tag { opacity: 1; }
}
.footer { border-top: 1px solid var(--hilo-2); padding-top: 56px; font-size: var(--t-sm); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; }
.footer__brand { grid-column: 1 / span 5; }
.footer__brand p { margin-top: 16px; max-width: 36ch; color: var(--tinta-2); }
.footer__logo { width: 88px; fill: var(--tinta); }
.footer__grid > nav, .footer__grid > div:not(.footer__brand) { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer__grid > nav { grid-column: 7 / span 2; }
.footer__grid a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer__grid a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.footer__h { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 6px; }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-block: 24px 32px; color: var(--tinta-2); }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--hilo); }
@media (max-width: 1023px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid > nav, .footer__grid > div:not(.footer__brand) { grid-column: span 4; }
}
@media (max-width: 599px) {
  .footer__grid > nav, .footer__grid > div:not(.footer__brand) { grid-column: span 6; }
}

/* PÁGINAS INTERIORES (legales, 404) */
.page { padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 112px)); padding-bottom: var(--section); }
.page__head { max-width: 860px; }
.page__head .lead { margin-top: 24px; }
.prose { max-width: 70ch; margin-top: clamp(40px, 5vw, 72px); }
.prose h2 { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; margin: 48px 0 14px; }
.prose p, .prose li { color: var(--tinta-2); }
.prose p + p { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; margin-top: 12px; display: grid; gap: 6px; }
.prose a { text-underline-offset: 3px; }
.notice { margin-top: 32px; padding: 14px 18px; background: color-mix(in srgb, var(--yema) 22%, var(--papel)); font-size: var(--t-sm); max-width: 70ch; }
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 24px) var(--pad) 48px; }
.lost__egg { width: clamp(120px, 18vw, 200px); margin: 0 auto 40px; }
.lost .lead { margin: 24px auto 0; }
.lost .btn { margin-top: 36px; }

/* Movimiento reducido: todo en su sitio, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

/* Revisión móvil 18/10: el email del pie se salía por el borde derecho en pantallas estrechas */
.footer__grid a, .direct__mail { overflow-wrap: anywhere; }
@media (max-width: 599px) { .footer__grid > nav, .footer__grid > div:not(.footer__brand) { min-width: 0; } .footer__grid > div:not(.footer__brand) a { font-size: .82rem; } }

/* ============================================================
   Revisión móvil 20/10/2026 (Borja: «en móvil tiene errores de diseño y de fluidez»).
   Todo va detrás de max-width, pointer: coarse o hover: none: en escritorio no cambia nada.
   ============================================================ */

/* Menú abierto: barra opaca. Con el desenfoque de la barra, el panel (position: fixed) se medía contra
   ella y no contra la pantalla: salía sin fondo y los enlaces se pintaban encima de la portada */
.nav.is-menu, .nav.is-menu.is-dark { color: var(--tinta); background: var(--cascara); box-shadow: 0 1px 0 var(--hilo); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-menu .nav__logo { opacity: 1; transform: none; animation: none; color: var(--tinta); }
.nav.is-menu.is-dark .lang a { color: var(--tinta-2); }
.nav.is-menu.is-dark .lang a[aria-current="true"] { color: var(--tinta); }
.nav.is-menu.is-dark .nav__menu { border-color: var(--hilo-2); }
.sheet { overscroll-behavior: contain; }

/* Dedos: idiomas y botón del menú de 44 px de alto */
@media (pointer: coarse) {
  .nav__in { gap: 16px; }
  .nav__end { gap: 10px; }
  .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 44px; padding: 0 4px; font-size: .8125rem; }
  .nav__menu { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 359px) { .nav__logo { width: 80px; } .lang a { min-width: 30px; } }

/* Toques: sin el recuadro gris de iOS en lo que ya responde por su cuenta, y respuesta inmediata en el resto */
@media (hover: none) {
  .btn, .link, .lang a, .nav__menu, .sheet a, .svc__q, .hito__btn, .qa summary, .cc-arrow, .cc__link, .choices label, .hora__btn, .new__tap, .browser__view, .footer__grid a, .dato__src { -webkit-tap-highlight-color: transparent; }
  .link:active, .lang a:active, .sheet a:not(.btn):active, .svc__q:active .svc__out, .hito__btn:active .hito__name, .qa summary:active, .footer__grid a:active { opacity: .6; }
  .cc__link:active .cc__shot { transform: scale(.98); transition-duration: 140ms; }
  /* La foto de la portada solo se mueve con ratón: sin capa reservada en móvil */
  .hero__photo { will-change: auto; }
  /* Máscara de bordes en el carrusel: en un elemento con scroll propio obliga a repintarlo en cada fotograma del deslizamiento */
  .concepts__track { -webkit-mask-image: none; mask-image: none; }
}

/* PORTADA EN MÓVIL Y TABLETA. La foto se mide por la altura visible (svh), no solo por el ancho:
   en un iPhone real, con las barras de Safari, quedan unos 660 px y la foto subía hasta el texto */
@media (max-width: 1023px) {
  .hero__photo { width: max(80%, min(calc(130% + var(--bleed-x)), calc((100svh - 400px) * 1.5))); }
}
@media (max-width: 767px) {
  .hero__stage { padding-top: calc(var(--nav-h) + clamp(16px, 6svh, 80px)); }
  .hero .h1 { font-size: clamp(2.5rem, 7.6svh, 3.2rem); }
  .hero__sub { margin-top: clamp(14px, 3.2svh, 28px); }
  .hero__ctas { margin-top: clamp(20px, 4.4svh, 40px); row-gap: 14px; }
}
/* El logo se va antes de que suba el titular (en el móvil ocupan el mismo sitio) y sin desenfoque */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .hero__brand { animation-name: brand-out-m; animation-range: 0 20svh; }
    .hero__copy .line > span { animation-range: 12svh 36svh; }
    .hero__copy .line:nth-child(2) > span { animation-range: 15svh 39svh; }
    .hero__sub { animation-range: 19svh 43svh; }
    .hero__ctas { animation-range: 22svh 46svh; }
  }
}
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .hero-open .hero__brand { filter: none; }
  }
}
@keyframes brand-out-m { to { opacity: 0; transform: translateY(-5svh) scale(.97); } }

/* Desplegables (qué hacemos y precios): el texto entra con un fundido corto en vez de aparecer de golpe */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .svc[data-active] .svc__a, .js .hito.is-on .hito__desc { animation: abre 320ms var(--ease-out) both; }
}
@keyframes abre { from { opacity: 0; transform: translateY(6px); } }

/* Datos: la fuente se lee sin forzar la vista */
@media (max-width: 1023px) { .dato__src { font-size: .78rem; } }

/* Lo que va aparte: en móvil la descripción quedaba en una columna de tres palabras al lado del precio.
   Ahora nombre, puntos y precio en una línea y la descripción debajo, a todo el ancho */
@media (max-width: 599px) {
  .ledger li { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: baseline; column-gap: 10px; }
  .ledger li > span { display: contents; }
  .ledger__n { grid-column: 1; grid-row: 1; font-size: 1.2rem; }
  .ledger li::after { grid-column: 2; grid-row: 1; min-width: 0; }
  .ledger li > b { grid-column: 3; grid-row: 1; font-size: 1.05rem; white-space: normal; text-align: right; }
  .ledger__m { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 6px; }
}

/* Pie en móvil: el email entero en una línea (se partía en «gmail.co / m») y enlaces cómodos de tocar */
@media (max-width: 599px) {
  .footer__grid > div:nth-child(3) { grid-column: 1 / -1; order: 1; }
  .footer__grid > nav, .footer__grid > div:nth-child(4) { order: 2; }
  .footer__grid > div:nth-child(3) a { overflow-wrap: normal; }
  .footer__grid > div:not(.footer__brand) a { font-size: var(--t-sm); }
}
@media (pointer: coarse) {
  .footer__grid > nav, .footer__grid > div:not(.footer__brand) { gap: 0; }
  .footer__grid a { padding-block: 8px; }
}