/* ========================================================================== ARENZA · contacto, legales y 404 (clave ctl) ES /contacto/ /aviso-legal/ /privacidad/ /cookies/ /404.html EN /en/contact/ /en/legal-notice/ /en/privacy/ /en/cookies/ Momento firma: la consulta por pasos (contacto) que termina contada en una frase, con el portal dibujado (portal-forja) al lado y, debajo, canales, una casa de la selección y los pasos. Legales: documento quieto a todo el ancho (≥ 1200 px títulos al margen), índice pegajoso, tablas a filetes y la farola fernandina de pie sobre el filete. 404: la farola y, en la fachada, la placa de la calle de la Página Perdida con su número de portal. Anti-glitch: solo se anima transform, opacity y clip-path, y cada propiedad la anima uno solo (los pasos, GSAP; filetes y casillas, transición CSS; el éxito, keyframes CSS). Lo que se ve al cargar entra por CSS. ========================================================================== */ /* ========================================================================== 1 · CONTACTO ========================================================================== */ /* luz de ventana de la cabecera y la consulta: caja de alto FIJO anclada arriba y sin el desplazamiento con el scroll del núcleo (data-arz-g). Así, cuando la consulta cambia de alto, la sombra no se mueve ni se estira. */ .ctl-top .ctl-gobo { --gobo-o: .05; inset: auto; top: -40px; left: -8%; right: -8%; height: 1240px; } @media (min-width: 900px) { .ctl-top .ctl-gobo { height: 1480px; } } .page-contacto .ftr__cta { display: none; } /* el pie no enlaza a la página en la que ya estás */ /* migas solo en escritorio: contacto y legales son páginas de primer nivel (COMPONENTES §20.1) */ @media (max-width: 899px) { :is(.ctl-hero, .ctl-dhero) .crumbs { display: none; } } /* ---------- cabecera corta (sistema común .phero--paper): aquí manda la consulta ---------- */ .ctl-hero.phero--paper { padding-bottom: clamp(30px, 3.4vw, 52px); } /* la misma voz que el resto de interiores: h1 .display (--fs-display en móvil) y entradilla .lead en Cormorant y tinta */ .ctl-hero__t { max-width: 15ch; } /* a partir de 900 px la cabecera es corta para que la consulta quede a la vista: dos renglones fijos, en .display (misma letra, peso, interlineado y tracking) pero al cuerpo de --fs-1, topado en 4.5rem (ronda 2: el titular va en las columnas 1–7 y la entradilla arranca en la 8, con el dibujo): «Cuéntanos cómo podemos» (≈ 9,9 em) acaba siempre ≈ 110 px antes de la entradilla (1440: 66 px de cuerpo, sin cambio; ≥ 1565 px: 72 px en lugar de 80) */ @media (min-width: 900px) { .ctl-hero__t { max-width: none; font-size: min(var(--fs-1), 4.5rem); } .ctl-hero__t > span > span { white-space: nowrap; } } .ctl-hero__side { display: grid; gap: 12px; justify-items: start; } .ctl-hero__lead { max-width: 38ch; } .ctl-quick { font-size: var(--fs-sm); color: var(--mute); } .ctl-quick a { color: var(--ink); white-space: nowrap; } /* escritorio: la columna derecha ocupa la fila de las migas y la del titular, y apoya su base en la del h1 (si no, la entradilla, más alta que el titular, lo empujaba hacia abajo y abría un hueco bajo las migas) */ @media (min-width: 900px) { .ctl-hero__side { grid-row: 1 / span 2; align-self: end; padding-bottom: .3em; } } /* ---------- rejilla: consulta (6 col) + el portal dibujado GRANDE (5 col + la sangre derecha) --------- Ronda 2 (29-10): el portal pasa de 4 columnas (408 px a 1440) a las columnas 8–12 más el margen derecho, hasta el borde de la pantalla (≈ 595 px a 1440); la consulta, a las columnas 1–6 (el aire entre las dos, la columna 7, no cambia). La entradilla de la cabecera se alinea con el dibujo (col. 8). Entre 900 y 1199 px, con columnas estrechas, se queda el reparto de antes (consulta 1–7, portal 9–12) para que la consulta no se apriete. Móvil: el portal de borde a borde, al 100 % del ancho de la pantalla. */ .ctl-main { --bleed: calc(var(--margin) + max(0px, (100vw - var(--maxw)) / 2)); padding-bottom: clamp(56px, 7vw, 104px); } .ctl-main__in { row-gap: clamp(48px, 9vw, 72px); align-items: start; } /* el dibujo va sobre el papel, sin marco; el trazado lo hace el núcleo (data-draw). En escritorio acompaña a la consulta cuando un paso es largo (sticky dentro de su fila: nunca baja más allá del final del formulario). El ancho se fija (área + sangrado) y el alto se topa en 85svh: si no cabe entero (pantallas bajas o muy anchas), el dibujo se recorta por arriba (par=xMidYMax slice: la acera, la farola y el portal siempre enteros). 100vw incluye la barra de desplazamiento en Windows: lo que sobra lo recorta el overflow: clip de .ctl-top (y de body), que no crea contenedor de scroll, así que el sticky sigue funcionando. */ .ctl-portal { margin: 0; } @media (max-width: 899px) { .ctl-portal { margin-inline: calc(-1 * var(--margin)); } } @media (min-width: 900px) { .ctl-portal { position: sticky; top: calc(var(--hdr-h) + 28px); width: calc(100% + var(--bleed)); max-width: none; max-height: 85svh; overflow: hidden; } .ctl-portal .dib__svg { height: 100%; } } /* en escritorio el portal está en el primer pantallazo: empieza a trazarse con la consulta (.55 s, su --d), nunca antes que el titular (norma 26). Solo se desplaza el turno de cada etapa del núcleo; la animación sigue siendo la suya y termina igual (animationend de la última etapa). En móvil entra al bajar, sin espera. */ @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { .js .dib.ctl-portal[data-draw].is-drawing [data-t] { animation-delay: calc(.55s + var(--t, 0) * var(--dib-fps)); } .js .dib.ctl-portal[data-draw] [data-guia] { transition-delay: .45s; } } @media (min-width: 900px) and (max-width: 1199px) { .ctl-main__in > .ctl-form { grid-column: 1 / 8; } .ctl-main__in > .ctl-portal { grid-column: 9 / 13; } .ctl-hero__in > .ctl-hero__t { grid-column: 1 / 9; } .ctl-hero__in > .ctl-hero__side { grid-column: 9 / 13; } } /* ---------- la consulta ---------------------------------------------------- */ .ctl-form { position: relative; } /* progreso: «02 / 05 ······ Presupuesto», y el filete dorado que avanza (solo transform) */ .ctl-prog { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; } .ctl-prog__n { font: 300 1.625rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; white-space: nowrap; } .ctl-prog__n b { font-weight: 300; } .ctl-prog__n > span { color: var(--mute-2); } .ctl-prog__name { margin-left: auto; color: var(--gold-ink); } .ctl-prog__line { position: relative; display: block; flex: 1 0 100%; height: 1px; margin-top: 14px; background: var(--line); overflow: hidden; } .ctl-prog__line i { position: absolute; inset: 0; display: block; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, .2)); transition: transform 1s var(--ease-out); } html.no-js .ctl-stage, html.js-failed .ctl-stage { border-top: 1px solid var(--ink); } /* la propiedad de la que viene (?propiedad=slug): la clase la pone el antes de pintar */ .ctl-about { display: none; } .ctl-prop .ctl-about { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 20px; row-gap: 6px; margin-top: 26px; padding: 16px 18px 15px; background: var(--sand); background-image: var(--grain); } .ctl-about .micro { grid-column: 1 / -1; } .ctl-about__n { display: grid; gap: 3px; font: 400 1.3125rem/1.2 var(--serif); font-variant-numeric: lining-nums; } .ctl-about__n > span { min-height: 1.2em; } .ctl-about__z { font: 400 13px/1.45 var(--sans); color: var(--mute); min-height: 1.45em !important; } .ctl-about__x { justify-self: end; align-self: center; min-height: 44px; padding-inline: 4px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; } .ctl-form.is-noprop .ctl-about { display: none; } /* pasos: con JS solo se ve el actual (estado inicial por CSS, antes de pintar); sin JS, todos seguidos */ .ctl-stage { padding-top: clamp(24px, 2.8vw, 40px); } .js:not(.ctl-failed) .ctl-step:not(.is-current) { display: none; } html:is(:not(.js), .ctl-failed) .ctl-step + .ctl-step { margin-top: clamp(64px, 8vw, 96px); } /* ctl.js no arrancó (red, error): la consulta queda entera, como sin JS */ html.ctl-failed .ctl-form .js-only, html.ctl-failed .ctl-about { display: none !important; } html.ctl-failed .ctl-stage { border-top: 1px solid var(--ink); } html.ctl-failed .ctl-only-note { display: block; } .ctl-q { max-width: 18ch; margin-bottom: clamp(18px, 2.2vw, 30px); } .ctl-q:focus { outline: none; } .js .ctl-only-note { display: none; } .ctl-only-note { margin: -12px 0 24px; font-size: var(--fs-sm); color: var(--mute); } /* opciones: filas a filetes, como el índice. La fila marcada se subraya en tinta; las demás pasan a gris */ .ctl-opts { border-top: 1px solid var(--line); } .ctl-opt { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 2vw, 26px); min-height: 66px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .ctl-opt::after { /* subrayado en tinta que se dibuja al elegir */ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); pointer-events: none; } .ctl-opt:has(input:checked)::after { transform: scaleX(1); } .ctl-opt input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid rgb(16 33 54 / .45); border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; transition: border-color .3s; } .ctl-opt input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .4s var(--ease-out); } .ctl-opt input:checked { border-color: var(--ink); } .ctl-opt input:checked::after { transform: scale(1); } .ctl-opt input[type="checkbox"] { border-radius: 1px; } .ctl-opt input[type="checkbox"]::after { width: 10px; height: 5px; border-radius: 0; background: none; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-1px) rotate(-45deg) scale(0); } .ctl-opt input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .ctl-opt input:focus-visible { outline: 1.5px solid var(--gold-ink); outline-offset: 4px; } /* la fila conserva su caja; lo que se desplaza al pasar es el texto de dentro (sin temblor en el borde) */ .ctl-opt__b { display: grid; gap: 4px; min-width: 0; transition: transform .55s var(--ease-out); } .ctl-opt__t { font: 400 var(--fs-3)/1.12 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.005em; transition: color .35s ease; } .ctl-opt__s { font-size: 14px; line-height: 1.45; color: var(--mute); } .ctl-opts:has(input:checked) .ctl-opt:not(:has(input:checked)) .ctl-opt__t { color: var(--mute-2); } .ctl-opts--sm .ctl-opt { min-height: 60px; padding: 11px 0; } @media (hover: hover) and (pointer: fine) { .ctl-opt:hover .ctl-opt__b { transform: translateX(8px); } .ctl-opts:has(input:checked) .ctl-opt:hover .ctl-opt__t { color: var(--ink); } } .ctl-group.is-error .ctl-opts { border-top-color: var(--err); } .ctl-group.is-error .ctl-opt input { border-color: var(--err); } .ctl-msg:empty, .ctl-fields .field__msg:empty { display: none; } .ctl-msg { margin-top: 12px; } .ctl-groups { display: grid; gap: 40px; } .ctl-glabel { margin-bottom: 12px; } .ctl-glabel span { letter-spacing: .12em; text-transform: none; font-size: 12px; color: var(--mute-2); } @media (min-width: 900px) { .ctl-groups { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); } } /* datos: los campos del núcleo (.form/.field) */ .ctl-fields { row-gap: 30px; } .ctl-group--inline { display: grid; gap: 6px; align-content: start; } .ctl-group--inline .choices { gap: 0 22px; } .ctl-group--inline .choice { font-size: 15px; } .ctl-consent { display: grid; gap: 8px; } .ctl-consent.is-error .choice input { border-color: var(--err); } /* primera capa informativa (art. 13 RGPD) junto al consentimiento: pequeña, a filetes, sin pelear con las preguntas */ .ctl-info { margin-top: -6px; } .ctl-info__h { margin-bottom: 8px; font: 500 var(--fs-micro)/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); } .ctl-info dl { border-top: 1px solid var(--line); } .ctl-info dl > div { display: grid; grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr); column-gap: 16px; padding: 7px 0 6px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.5; color: var(--mute); } .ctl-info dt { color: var(--ink); font-weight: 500; } .ctl-info dd { max-width: 62ch; } @media (max-width: 459px) { .ctl-info dl > div { grid-template-columns: 1fr; row-gap: 1px; } } /* llamada o videollamada: los huecos de la ficha (opo-vc / opo-slot), en la hora del visitante. Alto de cada hueco fijo desde el HTML (  en los tres renglones); el JS solo cambia textos. */ .ctl-vc { gap: 12px; } .ctl-vc__opt { color: var(--mute-2); } .ctl-vc__p { font-size: 14px; line-height: 1.5; color: var(--mute); } .ctl-vc__tz { display: block; margin-top: 2px; color: var(--ink); } .ctl-vc__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .ctl-vc__slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ctl-slot { display: grid; gap: 5px; justify-items: start; align-content: start; min-height: 84px; padding: 12px 14px 11px; border: 1px solid var(--line); border-radius: 1px; text-align: left; background: transparent; color: var(--ink); transition: border-color .3s; } .ctl-slot[hidden] { display: none; } .ctl-slot:disabled { cursor: default; } .is-same .ctl-slot { min-height: 70px; } .is-same .ctl-slot__m { display: none; } .ctl-slot__d { font: 500 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .ctl-slot__t { font: 300 1.625rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; } .ctl-slot__m { font-size: 12px; line-height: 1.3; color: var(--mute-2); } @media (hover: hover) { .ctl-slot:not(:disabled):hover { border-color: var(--ink); } } .ctl-slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .ctl-slot[aria-pressed="true"] .ctl-slot__d { color: var(--gold-light); } .ctl-slot[aria-pressed="true"] .ctl-slot__m { color: var(--cream-72); } .ctl-vc__sel { min-height: 1.4em; font: italic 300 1.0625rem/1.4 var(--serif); color: var(--mute); } .ctl-vc__sel b { font-style: normal; font-weight: 400; color: var(--ink); } /* navegación del paso: «← Atrás ········ Siguiente →». El botón principal siempre a la derecha */ .ctl-nav { display: flex; align-items: center; justify-content: flex-end; gap: 14px 22px; margin-top: clamp(32px, 4vw, 48px); } .ctl-back { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin-right: auto; padding-right: 10px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .ctl-back .arw { transform: scaleX(-1); transition: transform .5s var(--ease-out); } @media (hover: hover) { .ctl-back:hover .arw { transform: scaleX(-1) translateX(6px); } } .ctl-hint { display: none; font-size: 12.5px; color: var(--mute-2); white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .ctl-hint { display: block; } } [data-ctl-tor] { display: none; } .ctl-form.is-editing [data-ctl-tor] { display: inline-flex; } .ctl-form.is-editing [data-ctl-next], .ctl-form.is-editing .ctl-step:not(.ctl-review) .ctl-back, .ctl-form.is-editing .ctl-hint { display: none; } @media (max-width: 599px) { .ctl-nav .btn { flex: 1 1 auto; padding-inline: 20px; } .ctl-back { padding-right: 6px; } } html:is(.no-js, .js-failed, .ctl-failed) .ctl-nav--send { justify-content: flex-start; } /* sin JS (o sin ctl.js) todavía no hay a dónde enviar: en lugar del botón, los canales directos */ .ctl-nosend { display: none; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--mute); } html:is(.no-js, .js-failed, .ctl-failed) .ctl-nosend { display: block; } html:is(.no-js, .js-failed, .ctl-failed) .ctl-send { display: none; } /* revisión: la consulta contada en una frase; cada respuesta subrayada lleva a su paso */ .ctl-sum { display: grid; gap: .5em; max-width: 30ch; font: 300 var(--fs-3)/1.34 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.005em; } .ctl-sum p { text-wrap: pretty; } /* respuesta editable: en línea (span role=button), corta como el texto y se lleva su puntuación */ .ctl-sum__a { color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--gold); transition: text-decoration-color .3s; } @media (hover: hover) { .ctl-sum__a:hover { text-decoration-color: var(--ink); } } .ctl-sum__a:focus-visible { outline-offset: 3px; } .ctl-sum__hint { margin-top: 18px; font-size: 13px; color: var(--mute); } .ctl-sumdata { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ink); } .ctl-sumdata > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 20px; row-gap: 4px; padding: 13px 0 12px; border-bottom: 1px solid var(--line); } .ctl-sumdata dt { font: 500 var(--fs-micro)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); padding-top: .4em; } .ctl-sumdata dd { font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; } @media (max-width: 459px) { .ctl-sumdata > div { grid-template-columns: 1fr; } } .ctl-sum__edit { margin-top: 6px; } .ctl-sum__legal { margin-top: 18px; font-size: 13px; color: var(--mute); } /* éxito: el filete dorado se dibuja una vez y el texto sube (keyframes CSS; nada más lo anima) */ .ctl-ok { display: grid; gap: 18px; justify-items: start; padding-top: clamp(30px, 4vw, 52px); } .ctl-ok:focus { outline: none; } .ctl-ok__rule { width: 100%; height: 1px; background: var(--gold); transform-origin: 0 50%; } .ctl-ok__t { max-width: 19ch; } .ctl-ok__p { max-width: 46ch; } /* el recibo: la frase de la revisión, ya sin enlaces, entre filetes */ .ctl-ok__sum { width: 100%; margin-top: 10px; padding: 18px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ctl-ok__sum .micro { margin-bottom: 10px; color: var(--mute); } .ctl-ok__sumt { display: grid; gap: .45em; max-width: 32ch; font: 300 var(--fs-3)/1.34 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.005em; } .ctl-ok__sumt p { text-wrap: pretty; } .ctl-ok__sumt b { font-weight: 400; color: var(--ink); } .ctl-ok__links { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 6px; } .ctl-form.is-sent > :not(.ctl-ok) { display: none !important; } @media (prefers-reduced-motion: no-preference) { .ctl-form.is-sent .ctl-ok__rule { animation: ctl-rule 1.2s var(--ease-out) both; } .ctl-form.is-sent .ctl-ok > :not(.ctl-ok__rule) { animation: ctl-up 1s var(--ease-out) both; animation-delay: calc(.22s + var(--i, 0) * .08s); } } @keyframes ctl-rule { from { transform: scaleX(0); } } @keyframes ctl-up { from { opacity: 0; transform: translateY(16px); } } /* ---------- después de la consulta: canales directos (la tarjeta de visita), una casa de la selección a 7/12 y «qué pasa después» a lo ancho. Móvil: canales, foto y pasos, en ese orden ------------------------------- */ .ctl-after { padding-bottom: var(--section); } .ctl-after__in { row-gap: clamp(44px, 6vw, 80px); align-items: start; } .ctl-after__h { margin-bottom: 18px; } @media (min-width: 900px) { .ctl-photo, .ctl-card { grid-row: 1; } .ctl-card { align-self: center; } .ctl-next { grid-row: 2; } } .ctl-photo__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 6px; } .ctl-photo__cap .link-arrow { min-height: 44px; } .ctl-ch { border-top: 1px solid var(--ink); } .ctl-ch > div { display: grid; gap: 10px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); } .ctl-ch dd { display: grid; gap: 6px; justify-items: start; } .ctl-ch__big { font: 400 var(--fs-3)/1.14 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.005em; } .ctl-ch__a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -7px; } /* diana de 44 px sin cambiar el ritmo */ .ctl-ch__a > span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .06em; } @media (hover: hover) { .ctl-ch__a:hover > span { animation: link-redraw .8s var(--ease-out); } } .ctl-ch__link { margin-top: 2px; } .ctl-ch__p { font-size: 14px; line-height: 1.5; color: var(--mute); } /* hora de Madrid (y la del visitante, en el mismo renglón): el hueco de «00:00» lo reserva el núcleo, nada se mueve */ .ctl-now time { font-variant-numeric: lining-nums tabular-nums; } .ctl-now__local { font: 400 14px/1 var(--sans); letter-spacing: 0; color: var(--mute); } .ctl-now__local::before { content: " "; } .ctl-next__l { border-top: 1px solid var(--line); } .ctl-next__l li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); padding: 16px 0 17px; border-bottom: 1px solid var(--line); } .ctl-next__n { font: 500 var(--fs-micro)/1.9 var(--sans); letter-spacing: .16em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; } .ctl-next__t { font: 400 1.3125rem/1.2 var(--serif); } .ctl-next__l p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--mute); max-width: 36ch; } /* escritorio: rótulo en las columnas 1–3 y los tres pasos en fila (3 + 3 + 3 columnas exactas de la rejilla) */ @media (min-width: 900px) { .ctl-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 20px; border-top: 1px solid var(--ink); } .ctl-next > .ctl-after__h { grid-column: 1 / 4; margin: 0; padding-top: .35em; } .ctl-next__l { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 0; } .ctl-next__l li { padding: 0; border-bottom: 0; } } /* ========================================================================== 2 · LEGALES (aviso legal, privacidad, cookies) ========================================================================== */ /* cabecera: el sistema común (.phero--paper) y, como único ornamento, la farola fernandina de pie sobre el filete del documento, alineada con el margen derecho de la rejilla (también por encima de 1520 px) */ .ctl-dhero.phero--paper { padding-bottom: clamp(32px, 4vw, 60px); } .ctl-dhero__t { max-width: 12ch; } .ctl-lamp { position: absolute; bottom: 0; right: calc(max(0px, (100% - var(--maxw)) / 2) + var(--margin)); width: clamp(46px, 4.8vw, 72px); margin: 0; pointer-events: none; translate: 0 1.75%; /* el dibujo deja 26/1500 bajo la acera: así la acera apoya justo en el filete */ } .ctl-dhero__meta { display: grid; gap: 8px; align-content: end; font-size: var(--fs-sm); color: var(--mute); } .ctl-dhero__meta b { display: block; font: 400 1.25rem/1.2 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; } @media (min-width: 900px) { .ctl-dhero__in { align-items: end; } .ctl-dhero__meta { padding-bottom: .5em; } } .ctl-doc > .wrap { position: relative; } .ctl-doc > .wrap::before { content: ""; position: absolute; top: 0; left: var(--margin); right: var(--margin); height: 1px; background: var(--ink); } .ctl-doc__in { padding-top: clamp(28px, 4vw, 60px); padding-bottom: var(--section); align-items: start; row-gap: 32px; } /* índice: pegajoso en escritorio; en móvil, plegado en su propio
(sin JS, sin saltos) */ .ctl-toc { display: none; } .ctl-toc__h { margin-bottom: 14px; } .ctl-toc ol, .ctl-toc-m ol { border-top: 1px solid var(--line); } .ctl-toc ol a, .ctl-toc-m a { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; min-height: 44px; padding: 11px 0 10px; font-size: 14px; line-height: 1.35; color: var(--mute); border-bottom: 1px solid var(--line-soft); transition: color .3s ease; } .ctl-toc ol a b, .ctl-toc-m a b { font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .14em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; } .ctl-toc ol a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); pointer-events: none; } .ctl-toc ol a[aria-current] { color: var(--ink); } .ctl-toc ol a[aria-current]::after { transform: scaleX(1); } @media (hover: hover) { .ctl-toc ol a:hover, .ctl-toc-m a:hover { color: var(--ink); } } .ctl-docs { margin-top: 36px; } .ctl-docs .micro { margin-bottom: 6px; } .ctl-docs ul { display: grid; justify-items: start; } .ctl-docs a, .ctl-docs button, .ctl-docs span[aria-current] { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--mute); } .ctl-docs span[aria-current] { color: var(--ink); } .ctl-docs span[aria-current]::before { content: ""; width: 5px; height: 5px; margin: 0 10px 0 -15px; border-radius: 50%; background: var(--gold); } @media (hover: hover) { .ctl-docs a:hover, .ctl-docs button:hover { color: var(--ink); } } .ctl-toc-m { border-bottom: 1px solid var(--line); } .ctl-toc-m > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; font: 500 var(--fs-micro)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .ctl-toc-m > summary::-webkit-details-marker { display: none; } .ctl-toc-m > summary span { color: var(--mute); letter-spacing: .12em; } .ctl-toc-m .acc__i { margin-left: auto; } .ctl-toc-m[open] .acc__i::after { transform: rotate(0); } .ctl-toc-m ol { margin-bottom: 18px; } .ctl-toc-m a { border-bottom-color: var(--line-soft); } @media (min-width: 900px) { /* nunca más alto que la pantalla: en portátiles bajos (1280×720, 1366×768) el índice entero queda a la vista; si aun así no cupiera, se desplaza por dentro (data-lenis-prevent en el