/* ==========================================================================
   Lex Firmum — sitio web
   Dirección de arte: «Archivo en movimiento» (investigación del 12/oct/2026).
   Reglas de contenido: ver sitio-web/NOTAS.md antes de editar.
   ========================================================================== */

/* ---------- Fuentes (auto-alojadas, OFL) ---------- */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italica.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --negro: #0A0705;
  --sup: #120E0A;
  --sup-2: #1B150F;
  --sup-3: #241C14;
  --crema: #E8DDC1;
  --papel: #F1E8D3;
  --oro: #EEB74E;
  --oro-p: #A9762A;
  --oro-suave: rgba(238, 183, 78, .14);
  --texto: #E8DDC1;
  --texto-2: #B8AA8F;
  --texto-3: #8C8069;
  --tinta: #0A0705;
  --tinta-2: #4D4436;
  --linea: rgba(232, 221, 193, .12);
  --linea-oro: rgba(238, 183, 78, .32);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 56px);
  --curva: cubic-bezier(.22, 1, .36, 1);
  --curva-suave: cubic-bezier(.45, 0, .2, 1);
  --barra-wa: 0px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--barra-wa);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--oro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 2px; }

.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }

.salto {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--oro); color: var(--negro); padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.salto:focus { top: 12px; }

/* Grano de papel: fijo, muy tenue */
.grano {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("img/grano.svg");
}

/* Barra de progreso de lectura */
.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80; pointer-events: none; }
.progreso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); background: linear-gradient(90deg, var(--oro-p), var(--oro)); }

/* ---------- Tipografía de sistema ---------- */
.indice {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro);
  margin-bottom: 22px;
}
.indice-sep { width: 34px; height: 1px; background: currentColor; opacity: .6; }
.indice--tinta { color: var(--oro-p); }
.indice--tinta span:not(.indice-sep) { color: #6B5528; }

.titulo {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--crema); max-width: 16ch; text-wrap: balance;
}
.intro { margin-top: 20px; color: var(--texto-2); font-size: clamp(16px, 1.4vw, 18px); max-width: 56ch; }

/* ---------- Botones ---------- */
.boton {
  --brillo: -120%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 0 26px;
  background: linear-gradient(180deg, #F3C462, var(--oro) 55%, #DCA23D);
  color: var(--negro); font-weight: 600; font-size: 16px; letter-spacing: .01em; text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 226, 160, .25) inset, 0 10px 30px -12px rgba(238, 183, 78, .55);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.boton::after { /* destello que recorre el oro */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 235, .65) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: destello 7s var(--curva-suave) 2.2s infinite;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 226, 160, .35) inset, 0 16px 40px -14px rgba(238, 183, 78, .7); }
.boton:active { transform: translateY(0); }
.boton-flecha { transition: transform .35s var(--curva); }
.boton:hover .boton-flecha { transform: translateX(4px); }
.boton--chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.boton--grande { min-height: 62px; padding: 0 34px; font-size: 17px; }
@keyframes destello { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

.enlace-linea {
  position: relative; display: inline-flex; align-items: center; min-height: 54px;
  color: var(--crema); text-decoration: none; font-weight: 500; font-size: 15px;
}
.enlace-linea::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 1px; background: var(--linea-oro);
  transform-origin: 100% 50%; transition: transform .5s var(--curva);
}
.enlace-linea:hover::after { transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 7, 5, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s, background .4s;
}
.encabezado.con-sombra { border-bottom-color: var(--linea); background: rgba(10, 7, 5, .86); }
.encabezado-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { width: 36px; height: 36px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto b { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: .2em; color: var(--oro); }
.marca-texto span { font-family: var(--sans); font-weight: 600; font-size: 8.5px; letter-spacing: .52em; color: var(--oro); opacity: .85; margin-top: 4px; }
.navegacion ul { display: flex; gap: 30px; }
.navegacion a { position: relative; text-decoration: none; font-size: 14px; color: var(--texto-2); transition: color .3s; }
.navegacion a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--oro); transform: scaleX(0); transition: transform .4s var(--curva); }
.navegacion a:hover, .navegacion a.activo { color: var(--crema); }
.navegacion a:hover::after, .navegacion a.activo::after { transform: scaleX(1); }
.encabezado-acciones { display: flex; align-items: center; gap: 10px; }

.pausa {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid var(--linea); border-radius: 2px; color: var(--texto-2);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer; transition: border-color .3s, color .3s;
}
.pausa:hover { border-color: var(--linea-oro); color: var(--crema); }
.pausa-icono { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pausa[aria-pressed="true"] .pausa-icono { border: 0; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; padding: clamp(36px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); isolation: isolate; }
.portada-rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.titular { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.6vw, 88px); line-height: .98; letter-spacing: -.028em; color: var(--crema); }
.titular em { font-style: italic; color: var(--oro); }
.linea { display: block; }
.linea > span { display: block; }
.portada-bajada { margin-top: 28px; max-width: 50ch; color: var(--texto-2); font-size: clamp(16px, 1.45vw, 18.5px); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 34px; }
.sellos { display: grid; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linea); max-width: 520px; }
.sellos li { display: flex; gap: 14px; align-items: baseline; font-size: 14px; color: var(--texto-2); }
.sellos b { font: 500 12px/1 var(--mono); color: var(--oro); letter-spacing: .1em; }

/* Luz ambiental que deriva lentamente */
.luz { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; }
.luz--a { width: 620px; height: 620px; right: -160px; top: -120px; background: radial-gradient(circle, rgba(238, 183, 78, .20), transparent 65%); animation: deriva-a 26s ease-in-out infinite alternate; }
.luz--b { width: 520px; height: 520px; left: -220px; bottom: -200px; background: radial-gradient(circle, rgba(169, 118, 42, .22), transparent 65%); animation: deriva-b 32s ease-in-out infinite alternate; }
@keyframes deriva-a { to { transform: translate3d(-90px, 70px, 0) scale(1.12); } }
@keyframes deriva-b { to { transform: translate3d(110px, -60px, 0) scale(.92); } }

/* Roseta de seguridad (guilloché propio) girando muy despacio */
.roseta { position: absolute; z-index: -1; pointer-events: none; opacity: .5; height: auto; aspect-ratio: 1; animation: giro 160s linear infinite; }
.roseta--portada { width: min(980px, 140vw); right: -22%; top: 50%; margin-top: calc(min(980px, 140vw) / -2); opacity: .32; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Composición flotante */
.portada-arte { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 520px; justify-self: end; }
.capa { position: absolute; will-change: transform; }
.capa--marco { inset: 4% 6% 2% 12%; }
.marco { position: relative; margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--sup);
  clip-path: polygon(0 0, 86% 0, 100% 10%, 100% 100%, 0 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.marco::before { /* filo dorado del corte */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, transparent 83%, rgba(238, 183, 78, .55) 83.4%, transparent 84.2%);
}
.marco { -webkit-mask-image: radial-gradient(ellipse 60% 62% at 54% 46%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 54% 46%, #000 48%, transparent 100%); background: transparent; }
.marco picture, .marco img { width: 100%; height: 100%; object-fit: cover; }
.marco img { animation: respira 18s ease-in-out infinite alternate; transform-origin: 60% 60%; }
@keyframes respira { from { transform: scale(1.04); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.marco-franjas { /* las cinco franjas del monograma, como regla gráfica */
  position: absolute; z-index: 3; right: 7%; bottom: 7%; width: 64px; height: 64px;
  background: repeating-linear-gradient(135deg, var(--oro) 0 2px, transparent 2px 12px);
  -webkit-mask: linear-gradient(#000, #000); opacity: .75;
  clip-path: inset(0 0 0 0 round 0 0 22px 0);
}
.capa--broche { width: 30%; left: -4%; top: -2%; z-index: 3; }
.capa--lamina { width: 46%; left: -14%; bottom: 6%; z-index: 4; }
.capa--esquina { width: 34%; right: -10%; bottom: -6%; z-index: 4; }
.capa--ficha { left: -16%; top: 30%; z-index: 5; }
.capa img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }

.flota { animation: flota 9s ease-in-out infinite alternate; }
.flota--lenta { animation-duration: 12s; animation-delay: -4s; }
.flota--media { animation-duration: 10.5s; animation-delay: -2s; }
@keyframes flota { from { transform: translate3d(0, -6px, 0) rotate(-.6deg); } to { transform: translate3d(0, 7px, 0) rotate(.6deg); } }

.ficha {
  min-width: 210px; padding: 16px 18px 14px;
  background: linear-gradient(160deg, rgba(36, 28, 20, .78), rgba(18, 14, 10, .62));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(238, 183, 78, .22); border-radius: 3px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
}
.ficha-titulo { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; }
.ficha li { position: relative; display: flex; gap: 12px; align-items: center; padding: 8px 0; font-size: 13.5px; color: var(--crema); border-top: 1px solid var(--linea); }
.ficha li span { font: 500 11.5px/1 var(--mono); color: var(--texto-3); }
.ficha li i { margin-left: auto; width: 14px; height: 8px; border-left: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); transform: rotate(-45deg) translateY(-2px); }
.ficha-titulo { position: relative; padding-bottom: 10px; }
.ficha-titulo::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--oro), transparent); transform-origin: 0 50%; animation: traza 1.1s var(--curva) 1.3s both; }
@keyframes traza { from { transform: scaleX(0); } }
.ficha li { animation: enciende .6s var(--curva) both; }
.ficha li i { animation: palomita .6s var(--curva) both; }
.ficha li:nth-child(1), .ficha li:nth-child(1) i { animation-delay: 1.9s; }
.ficha li:nth-child(2), .ficha li:nth-child(2) i { animation-delay: 2.5s; }
.ficha li:nth-child(3), .ficha li:nth-child(3) i { animation-delay: 3.1s; }
@keyframes enciende { from { color: var(--texto-3); } }
@keyframes palomita { from { opacity: 0; clip-path: inset(0 100% 0 0); } }

.bajar { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 36px; margin-left: -11px; border: 1px solid var(--linea-oro); border-radius: 12px; }
.bajar span { position: absolute; left: 50%; top: 8px; width: 2px; height: 7px; margin-left: -1px; background: var(--oro); border-radius: 2px; animation: rueda 2.2s var(--curva) infinite; }
@keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Secciones genéricas ---------- */
.seccion { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
section[id], details[id] { scroll-margin-top: 84px; }
.acciones-nota a { color: var(--oro); text-underline-offset: 3px; white-space: nowrap; }
.cabecera { margin-bottom: clamp(44px, 6vw, 72px); }

/* ---------- Documentos ---------- */
.tarjetas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tarjeta {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; grid-column: span 2;
  min-height: 210px; padding: 26px 24px 28px;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(238, 183, 78, .10), transparent 60%), var(--sup);
  border: 1px solid var(--linea); border-radius: 3px;
  display: flex; flex-direction: column;
  transition: border-color .4s, transform .5s var(--curva);
}
.tarjeta:hover { border-color: var(--linea-oro); }
.tarjeta--destacada { grid-column: span 4; grid-row: span 2; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(238, 183, 78, .16), transparent 60%), linear-gradient(140deg, var(--sup-3), var(--sup)); }
.tarjeta-etiqueta { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.tarjeta h3 { margin-top: auto; padding-top: 34px; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.01em; color: var(--crema); }
.tarjeta--destacada h3 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; max-width: 12ch; }
.tarjeta--destacada .tarjeta-etiqueta { align-self: flex-start; margin: -27px 0 0 -25px; padding: 10px 16px 9px; background: var(--sup-3); border: 1px solid var(--linea-oro); border-top: 0; border-left: 0; border-radius: 0 0 6px 0; }
.tarjeta--destacada::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 22px; height: 1px; background: linear-gradient(90deg, var(--linea-oro), transparent 70%); }
.tarjeta p { margin-top: 12px; color: var(--texto-2); font-size: 15px; line-height: 1.55; max-width: 44ch; }
.tarjeta-franjas { position: absolute; right: 26px; top: 22px; width: 54px; height: 54px; background: repeating-linear-gradient(135deg, var(--oro) 0 1.5px, transparent 1.5px 10px); opacity: .45; clip-path: inset(0 0 0 0 round 0 0 18px 0); }
.tarjeta-flota { position: absolute; z-index: -1; right: 9%; top: 14%; width: min(34%, 230px); pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.tarjeta { isolation: isolate; }
.nota-pie { margin-top: 26px; font-size: 15px; color: var(--texto-2); }
.nota-pie::before { content: "→ "; color: var(--oro); }

/* ---------- Tres datos ---------- */
.datos { position: relative; padding: clamp(56px, 7vw, 90px) 0; background: var(--sup); border-block: 1px solid var(--linea); overflow: hidden; }
.datos-rejilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.datos-cabecera h2 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; color: var(--crema); }
.datos-cabecera p { margin-top: 10px; color: var(--texto-2); }
.datos-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.datos-lista li { position: relative; padding: 22px 20px; border-left: 1px solid var(--linea-oro); }
.datos-num { display: block; font-family: var(--serif); font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--oro); margin-bottom: 14px; }
.datos-lista b { display: block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.datos-lista span:last-child { display: block; margin-top: 8px; font-size: 16px; color: var(--crema); }
.datos-traza { position: absolute; left: 0; right: 0; bottom: 10px; width: 100%; height: 40px; }
.datos-traza path { fill: none; stroke: var(--oro); stroke-width: 1; opacity: .35; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--curva-suave); }
.js .datos:not(.visible) .datos-traza path { stroke-dashoffset: 1; }

/* ---------- Servicios ---------- */
.servicios-lista { display: grid; gap: clamp(44px, 6vw, 76px); }
.servicio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.servicio--invertido .servicio-imagen { order: 2; }
.servicio-imagen { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--sup); clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%); }
.servicio--invertido .servicio-imagen { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 88%); }
.servicio-imagen img { width: 100%; height: 124%; object-fit: cover; margin-top: -12%; }
.servicio-num { display: block; font-family: var(--serif); font-size: clamp(64px, 8vw, 110px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(238, 183, 78, .5); margin-bottom: 18px; }
.servicio h3 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.015em; color: var(--crema); }
.servicio p { margin-top: 16px; color: var(--texto-2); max-width: 46ch; }
.servicio-etiqueta { display: inline-block; margin-top: 24px; padding: 8px 12px; border: 1px solid var(--linea-oro); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }

/* ---------- Promesa (sección clara) ---------- */
.promesa { position: relative; overflow: hidden; isolation: isolate; padding: clamp(90px, 12vw, 160px) 0; background: var(--papel); color: var(--tinta); }
.promesa::before { /* papel de algodón: fibras muy tenues */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(1200px 500px at 15% 0%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(900px 600px at 100% 100%, rgba(169, 118, 42, .12), transparent 60%);
}
.roseta--promesa { width: 860px; left: -300px; bottom: -380px; opacity: .22; animation-duration: 220s; animation-direction: reverse; }
.promesa-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.promesa-titulo { font-family: var(--serif); font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.025em; color: var(--tinta); text-wrap: balance; }
.promesa-titulo em { font-style: italic; color: #8A5F1F; }
.promesa-sub { margin-top: 26px; font-size: clamp(17px, 1.5vw, 19px); color: var(--tinta-2); max-width: 46ch; }
.promesa-lista { padding: 30px 30px 32px; background: rgba(255, 252, 244, .55); border: 1px solid rgba(10, 7, 5, .1); border-radius: 3px; box-shadow: 0 30px 60px -40px rgba(60, 40, 10, .45); }
.promesa-lista-titulo { font: 500 12.5px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6B5528; margin-bottom: 14px; }
.tacha { padding: 13px 0; border-top: 1px solid rgba(10, 7, 5, .1); font-size: 17px; color: var(--tinta); }
.tacha span { position: relative; display: inline; background-image: linear-gradient(#A9762A, #A9762A); background-repeat: no-repeat; background-position: 0 58%; background-size: 100% 1.5px; color: #6B6151; transition: background-size .9s var(--curva), color .9s; }
.js .tacha:not(.visible) span { background-size: 0% 1.5px; color: var(--tinta); }
.promesa-limite { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(10, 7, 5, .14); font-size: 15px; color: var(--tinta-2); }
.promesa-limite b { color: var(--tinta); font-weight: 600; }

/* ---------- Proceso ---------- */
.proceso-rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 110px); }
.proceso-cabecera { position: sticky; top: 110px; align-self: start; }
.aviso { margin-top: 34px; padding: 20px 22px; border: 1px solid var(--linea); border-left: 2px solid var(--oro); background: var(--sup); max-width: 46ch; }
.aviso b { display: block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: 8px; }
.aviso p { color: var(--texto-2); font-size: 15px; }
.pasos { position: relative; display: grid; gap: 0; padding-left: 36px; }
.pasos-riel { position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px; background: var(--linea); }
.pasos-riel span { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--riel, 0)); background: linear-gradient(var(--oro), var(--oro-p)); box-shadow: 0 0 12px rgba(238, 183, 78, .6); }
.paso { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--linea); transition: opacity .6s var(--curva); }
.js .paso:not(.activo) .paso-num { opacity: .7; }
.paso::before { content: ""; position: absolute; left: -43px; top: 34px; width: 18px; height: 18px; color: var(--texto-3); background: var(--negro) repeating-linear-gradient(135deg, currentColor 0 1.6px, transparent 1.6px 3.6px); border-radius: 0 0 7px 0; transition: color .5s, box-shadow .5s, transform .5s var(--curva); }
.paso.activo::before { color: var(--oro); box-shadow: 0 0 18px rgba(238, 183, 78, .35); transform: scale(1.12); }
.paso-num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--oro); }
.paso h3 { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.15; color: var(--crema); }
.paso p { margin-top: 8px; color: var(--texto-2); font-size: 15.5px; max-width: 52ch; }

/* ---------- Entrega ---------- */
.entrega { background: linear-gradient(180deg, var(--negro), var(--sup) 40%, var(--negro)); }
.entrega-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.entrega-imagen { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 100%, 0 100%); }
.entrega-imagen img { width: 100%; height: 124%; object-fit: cover; margin-top: -12%; }
.entrega-imagen figcaption { position: absolute; left: 18px; right: 18px; width: fit-content; bottom: 16px; font: 500 12px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--crema); background: rgba(10, 7, 5, .6); padding: 8px 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.entrega-lista { margin-top: 30px; display: grid; }
.entrega-lista li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 18px 0; border-top: 1px solid var(--linea); }
.entrega-lista b { font: 500 13px/1.8 var(--mono); color: var(--oro); }
.entrega-lista strong { display: block; font-weight: 600; color: var(--crema); }
.entrega-lista span { display: block; margin-top: 4px; font-size: 15px; color: var(--texto-2); }

/* ---------- Honorarios ---------- */
.honorarios-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.politica { margin-top: 34px; display: grid; }
.politica li { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-top: 1px solid var(--linea); }
.politica b { font: 500 13px/1.8 var(--mono); color: var(--oro); }
.politica p { color: var(--texto-2); font-size: 15.5px; }
.politica strong { color: var(--crema); font-weight: 600; }
.panel { position: relative; padding: 8px 0 0; background: var(--sup); border: 1px solid var(--linea-oro); border-radius: 3px; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--oro), transparent); background-size: 200% 100%; animation: recorre 6s linear infinite; }
@keyframes recorre { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.panel-cabecera { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 26px; border-bottom: 1px solid var(--linea); }
.panel-cabecera strong { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--crema); }
.panel-cabecera span { font: 500 12px/2.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.panel-linea { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; padding: 22px 26px; border-bottom: 1px solid var(--linea); }
.panel-linea h3 { font-size: 17px; font-weight: 600; color: var(--crema); }
.panel-linea p { margin-top: 4px; font-size: 14.5px; color: var(--texto-2); max-width: 40ch; }
.panel-linea b { font: 500 12.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oro); text-align: right; max-width: 24ch; white-space: nowrap; }
.panel-linea--gobierno { background: repeating-linear-gradient(135deg, rgba(238, 183, 78, .035) 0 1px, transparent 1px 9px); }
.panel-pie { padding: 20px 26px 24px; font-size: 13.5px; color: var(--texto-3); }

/* ---------- Atención ---------- */
.atencion { padding: clamp(80px, 10vw, 130px) 0; border-top: 1px solid var(--linea); }
.atencion-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.cita { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -.015em; color: var(--crema); text-wrap: balance; }
.cita::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: 28px; background: var(--oro); }
.atencion-datos > p:not(.indice) { color: var(--texto-2); }
.datos-firma { margin: 28px 0 0; display: grid; }
.datos-firma div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--linea); }
.datos-firma dt { font: 500 12px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.datos-firma dd { margin: 0; color: var(--crema); }
.datos-firma a { text-decoration: none; border-bottom: 1px solid var(--linea-oro); }

/* ---------- Preguntas ---------- */
.preguntas { background: var(--sup); border-top: 1px solid var(--linea); }
.preguntas-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 90px); }
.acordeon { border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary { position: relative; display: flex; align-items: center; min-height: 72px; padding: 18px 48px 18px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; color: var(--crema); transition: color .3s; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--oro); }
.acordeon summary::before, .acordeon summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: var(--oro); transition: transform .45s var(--curva); }
.acordeon summary::after { transform: rotate(90deg); }
.acordeon details[open] summary::after { transform: rotate(0deg); }
.preguntas-imagen { position: relative; margin: 44px 0 0; width: min(100%, 320px); aspect-ratio: 1 / 1; overflow: hidden; clip-path: polygon(0 0, 84% 0, 100% 9%, 100% 100%, 0 100%); }
.preguntas-imagen img { width: 100%; height: 124%; object-fit: cover; object-position: 50% 8%; margin-top: -12%; }
.js .preguntas-imagen.revela-imagen.visible { clip-path: polygon(0 0, 84% 0, 100% 9%, 100% 100%, 0 100%); }
.respuesta { padding: 0 48px 26px 0; color: var(--texto-2); max-width: 64ch; }
.acordeon details[open] .respuesta { animation: abre .6s var(--curva); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Cierre ---------- */
.cierre { position: relative; overflow: hidden; isolation: isolate; padding: clamp(100px, 14vw, 190px) 0; text-align: center; }
.cierre::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 183, 78, .16), transparent 62%); animation: late 9s ease-in-out infinite alternate; }
@keyframes late { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
.roseta--cierre { width: 820px; left: 50%; top: 50%; margin: -410px 0 0 -410px; opacity: .2; animation-duration: 200s; }
.cierre-rejilla { display: flex; flex-direction: column; align-items: center; }
.cierre .indice { justify-content: center; }
.cierre-titulo { font-family: var(--serif); font-size: clamp(38px, 6vw, 80px); line-height: 1; letter-spacing: -.028em; color: var(--crema); max-width: 17ch; text-wrap: balance; }
.cierre-texto { margin-top: 24px; max-width: 54ch; color: var(--texto-2); }
.cierre .boton { margin-top: 38px; }
.cierre-dato { margin-top: 20px; font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--texto-3); }

/* ---------- Pie ---------- */
.pie { padding: 60px 0 40px; border-top: 1px solid var(--linea); overflow: hidden; }
.pie-fila { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pie-enlaces a { font-size: 14px; color: var(--texto-2); text-decoration: none; }
.pie-enlaces a:hover { color: var(--oro); }
.pie-palabra {
  margin: 46px 0 30px; font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 12.4vw, 176px); line-height: .82; letter-spacing: .03em; white-space: nowrap; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(238, 183, 78, .42);
  background: linear-gradient(100deg, transparent 40%, rgba(238, 183, 78, .5) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: brilla-palabra 9s var(--curva-suave) infinite;
}
@keyframes brilla-palabra { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
.pie-legal { max-width: 900px; font-size: 13px; line-height: 1.7; color: #A0927A; }
.pie-legal + .pie-legal { margin-top: 10px; }

/* ---------- Barra fija de WhatsApp (móvil) ---------- */
.barra-wa { display: none; }

/* ==========================================================================
   Revelados (solo si el script cargó: clase .js en <html>)
   ========================================================================== */
.titular { animation: sube .7s var(--curva) both; }
@keyframes sube { from { opacity: .35; transform: translateY(10px); } }
.aparece { animation: aparece 1s var(--curva) .6s both; }
.sellos.aparece { animation-delay: .5s; }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } }
.portada-arte { animation: aparece-arte 1.5s var(--curva) .25s both; }
@keyframes aparece-arte { from { opacity: 0; transform: translateY(24px) scale(.97); } }

.js .revela { opacity: 0; transform: translateY(18px); }
.js .revela.visible { opacity: 1; transform: none; transition: opacity .9s var(--curva), transform .9s var(--curva); transition-delay: var(--retraso, 0s); }
.js .revela-imagen { clip-path: inset(12% 0 12% 0); }
.js .revela-imagen img { scale: 1.12; }
.js .revela-imagen.visible { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--curva); }
.js .servicio-imagen.revela-imagen.visible { clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%); }
.js .servicio--invertido .servicio-imagen.revela-imagen { clip-path: polygon(0 12%, 100% 12%, 100% 88%, 8% 88%, 0 88%); }
.js .servicio--invertido .servicio-imagen.revela-imagen.visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 88%); }
.js .entrega-imagen.revela-imagen.visible { clip-path: polygon(0 0, 100% 0, 100% 90%, 94% 100%, 0 100%); }
.js .revela-imagen.visible img { scale: 1; transition: scale 1.6s var(--curva); }

/* Movimiento en pausa (botón) */
.pausado *, .pausado *::before, .pausado *::after { animation-play-state: paused !important; }
.pausado .titular, .pausado .aparece, .pausado .portada-arte { animation: none !important; }
.pausado { scroll-behavior: auto; }

/* ==========================================================================
   Adaptación
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-3px); }
}

@media (max-width: 1080px) {
  .navegacion { display: none; }
}

@media (max-width: 900px) {
  :root { --barra-wa: calc(72px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: var(--barra-wa); }
  body { font-size: 16px; }
  .pausa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pausa { width: 40px; justify-content: center; padding: 0; }
  .encabezado-fila { min-height: 60px; }
  .portada { padding-top: 28px; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 0; }
  .portada-texto { display: contents; }
  .portada-arte { order: 5; }
  .sellos { order: 6; }
  .portada-arte { justify-self: center; width: 74%; max-width: 400px; margin: 34px 0 20px; }
  .capa--broche { width: 28%; left: -12%; top: 0; }
  .capa--lamina { width: 38%; left: -8%; bottom: 10%; }
  .portada { padding-bottom: 72px; }
  .tarjeta-flota { width: 64px; right: 14px; top: 12px; }
  .tarjeta--destacada .tarjeta-franjas { display: none; }
  .capa--esquina { width: 30%; right: -12%; bottom: -4%; }
  .capa--ficha { left: -14%; top: auto; bottom: 26%; }
  .ficha { min-width: 180px; padding: 12px 14px 10px; }
  .ficha li { font-size: 12.5px; padding: 6px 0; }
  .sellos { margin-top: 8px; }
  .bajar { display: none; }
  .roseta--portada { right: -60%; top: 72%; opacity: .26; }

  .tarjetas { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--margen) * -1); padding: 4px var(--margen) 18px; scrollbar-width: none; }
  .tarjetas::-webkit-scrollbar { display: none; }
  .tarjeta, .tarjeta--destacada { flex: 0 0 78%; min-height: 250px; padding: 22px 20px 24px; scroll-snap-align: start; scroll-margin-left: var(--margen); }
  .js .tarjetas .tarjeta.revela { opacity: 1; transform: none; }
  .tarjeta h3 { padding-top: 22px; font-size: 21px; }
  .tarjeta--destacada h3 { font-size: 30px; }
  .tarjeta p { font-size: 14px; }

  .datos-rejilla { grid-template-columns: 1fr; }
  .datos-lista { grid-template-columns: 1fr; gap: 0; }
  .datos-lista li { display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; padding: 16px 0 16px 16px; }
  .datos-num { grid-row: span 2; font-size: 38px; margin: 0; }
  .datos-lista span:last-child { margin-top: 4px; }

  .servicio, .servicio--invertido { grid-template-columns: 1fr; gap: 26px; }
  .servicio--invertido .servicio-imagen { order: 0; }
  .servicio-num { font-size: 64px; margin-bottom: 10px; }

  .promesa-rejilla { grid-template-columns: 1fr; }
  .promesa-lista { padding: 22px 20px 24px; }
  .tacha { font-size: 16px; }

  .proceso-rejilla { grid-template-columns: 1fr; }
  .proceso-cabecera { position: static; }
  .pasos { padding-left: 30px; }
  .paso { grid-template-columns: 48px 1fr; padding: 22px 0; }
  .paso::before { left: -29px; top: 30px; }
  .paso-num { font-size: 26px; }

  .entrega-rejilla, .honorarios-rejilla, .atencion-rejilla, .preguntas-rejilla { grid-template-columns: 1fr; }
  .panel-linea { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
  .panel-linea b { text-align: left; max-width: none; }
  .panel-cabecera, .panel-pie { padding-inline: 20px; }
  .datos-firma div { grid-template-columns: 1fr; gap: 4px; }
  .respuesta { padding-right: 0; }
  .preguntas-imagen { display: none; }

  .barra-wa {
    position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px;
    background: linear-gradient(180deg, #F3C462, var(--oro) 55%, #DCA23D); color: var(--negro);
    font-weight: 600; font-size: 15.5px; text-decoration: none; border-radius: 3px;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 226, 160, .3) inset;
    transform: translateY(140%); visibility: hidden; pointer-events: none; transition: transform .5s var(--curva), visibility 0s linear .5s;
  }
  .barra-wa.visible { transform: none; visibility: visible; pointer-events: auto; transition: transform .5s var(--curva), visibility 0s; }
  .barra-wa-punto { width: 8px; height: 8px; border-radius: 50%; background: #1F6B3A; box-shadow: 0 0 0 0 rgba(31, 107, 58, .5); animation: pulso 2.4s ease-out infinite; }
  @keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(31, 107, 58, .45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(31, 107, 58, 0); } }
}

@media (max-width: 420px) {
  .acciones .boton { width: 100%; }
  .marca-texto b { font-size: 17px; }
}

/* ==========================================================================
   Ronda 2 (12/oct): mapa de revisión visual — ver raw/revision-sitio-2026-10-12/
   ========================================================================== */
.acciones-nota { margin-top: 16px; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--texto-3); }
.solo-corto { display: none; }
.portada-broche-movil { display: none; }

/* Menú (tableta y celular): <details>, funciona sin JS */
.menu { display: none; position: static; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 2px; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-icono { display: grid; gap: 5px; width: 18px; }
.menu-icono i { display: block; height: 1.5px; background: var(--crema); transition: transform .4s var(--curva), opacity .3s; }
.menu[open] .menu-icono i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu[open] .menu-icono i:nth-child(2) { opacity: 0; }
.menu[open] .menu-icono i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 10px var(--margen) 26px; background: var(--negro); box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .9); border-bottom: 1px solid var(--linea-oro); animation: baja-menu .45s var(--curva); }
.menu-panel a { display: flex; align-items: baseline; gap: 16px; min-height: 58px; padding: 14px 0; border-bottom: 1px solid var(--linea); font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--crema); text-decoration: none; }
.menu-panel a span { font: 500 12px/1 var(--mono); color: var(--oro); letter-spacing: .1em; }
@keyframes baja-menu { from { opacity: 0; transform: translateY(-8px); } }

/* Guía del carrusel (solo donde hay carrusel) */
.carrusel-guia { display: none; }
.carrusel-puntos { display: flex; gap: 6px; }
.carrusel-puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--linea-oro); transition: width .4s var(--curva), background .4s; }
.carrusel-puntos i.on { width: 20px; background: var(--oro); }

/* Qué sigue después de escribir */
.siguiente { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--linea); counter-reset: sig; }
.siguiente li { position: relative; padding-right: 26px; font-size: 15px; color: var(--texto-2); }
.siguiente li b { display: block; color: var(--crema); font-weight: 600; }
.siguiente li:not(:last-child)::after { content: "→"; position: absolute; right: 2px; top: 0; color: var(--oro); }

/* Sección crema: cinco bandas que la descubren al entrar (C-08) y franja de salida (A-13) */
.cortina { display: none; }
.js .cortina { position: absolute; inset: 0 -12%; z-index: 3; display: flex; pointer-events: none; transform: skewX(-14deg); }
.js .cortina span { flex: 1; margin-right: -2px; background: var(--negro); transform-origin: 50% 100%; transition: transform 1.2s var(--curva); }
.js .cortina span:nth-child(2) { transition-delay: .08s; }
.js .cortina span:nth-child(3) { transition-delay: .16s; }
.js .cortina span:nth-child(4) { transition-delay: .24s; }
.js .cortina span:nth-child(5) { transition-delay: .32s; }
.js .promesa.visible .cortina span { transform: scaleY(0); }
.promesa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(135deg, var(--oro-p) 0 2px, transparent 2px 10px); opacity: .55; }

/* Proceso con más contraste de escala (C-09) */
.proceso .titulo { font-size: clamp(38px, 5vw, 70px); max-width: 13ch; }

/* Preguntas: línea dorada que se traza al abrir (C-11) */
.acordeon details { position: relative; }
.acordeon details::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--curva); }
.acordeon details[open]::after { transform: scaleX(1); }
.acordeon details[open] summary { color: var(--oro); }

/* Laptops de poca altura: el botón entra en el primer pantallazo (B-01) */
@media (min-width: 901px) and (max-height: 900px) {
  .portada { padding-top: 26px; padding-bottom: 60px; }
  .portada .indice { margin-bottom: 16px; }
  .titular { font-size: clamp(42px, min(6.2vw, 9.4vh), 84px); }
  .portada-bajada { margin-top: 18px; }
  .acciones { margin-top: 22px; }
  .acciones-nota { margin-top: 12px; }
  .sellos { margin-top: 24px; padding-top: 16px; }
  .bajar { display: none; }
  .portada-arte { max-width: 470px; }
}

/* Pantallas amplias: la retícula gana presencia (B-07) */
@media (min-width: 1680px) {
  :root { --ancho: 1380px; }
  .titulo { font-size: clamp(34px, 3.6vw, 68px); }
  .tarjeta { min-height: 240px; }
}

@media (max-width: 1080px) {
  .menu { display: block; }
}

@media (max-width: 900px) {
  .pausa { width: 44px; height: 44px; }
  .boton--chico { min-height: 44px; }
  .acciones-nota { order: 4; margin-top: 14px; font-size: 13.5px; }
  .portada-broche-movil { display: block; position: absolute; right: -10px; top: 20px; width: 60px; z-index: 2; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); }
  .portada .titular, .portada .indice { position: relative; z-index: 3; }

  .tarjeta, .tarjeta--destacada { flex-basis: 84%; }
  .tarjeta--destacada .tarjeta-etiqueta { margin: -23px 0 0 -21px; }
  .carrusel-guia { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--texto-2); }

  .siguiente { grid-template-columns: 1fr; gap: 12px; }
  .siguiente li { padding: 0 0 0 26px; }
  .siguiente li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: repeating-linear-gradient(135deg, var(--oro) 0 1.4px, transparent 1.4px 3.2px); border-radius: 0 0 4px 0; }
  .siguiente li:not(:last-child)::after { content: none; }

  .paso::before { left: -37px; top: 26px; width: 15px; height: 15px; }
  .panel-linea p { font-size: 15px; }
  .panel-linea b { font-size: 12.5px; white-space: normal; }
  .atencion { padding: 64px 0 48px; }
  .preguntas { padding-top: 64px; }
  .pie-palabra { -webkit-text-stroke: 1.2px rgba(238, 183, 78, .6); }
  .wa-fija .encabezado .boton--chico { display: none; }
  .barra-wa { min-height: 48px; font-size: 15px; }
}

/* Tableta: composición propia (B-05, B-06) */
@media (min-width: 601px) and (max-width: 900px) {
  .portada-arte { width: 44%; max-width: 320px; }
  .portada-broche-movil { display: none; }
  .sellos { order: 4; margin-top: 26px; }
  .acciones-nota { order: 3; }
  .servicio, .servicio--invertido { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .servicio--invertido .servicio-imagen { order: 2; }
  .servicio h3 { font-size: 30px; }
  .servicio-num { font-size: 52px; }
  .tarjeta, .tarjeta--destacada { flex-basis: 46%; }
}

@media (max-width: 420px) {
  .solo-ancho { display: none; }
  .solo-corto { display: inline; }
  .tacha { font-size: 15px; }
  .tacha span { background-size: 100% 1px; }
  .cierre-dato span { display: block; line-height: 1.9; }
  .cierre-dato .cierre-sep { display: none; }
  .indice { font-size: 12px; letter-spacing: .07em; gap: 9px; }
  .indice-sep { width: 18px; }
  .tarjeta--destacada h3 { padding-top: 40px; }
  .tarjeta-flota { width: 50px; top: 8px; right: 10px; }
}

/* ==========================================================================
   Menos movimiento: todo queda en su estado final y quieto
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revela { opacity: 1 !important; transform: none !important; }
  .js .revela-imagen { clip-path: none !important; }
  .js .revela-imagen img { scale: 1 !important; }
  .js .tacha:not(.visible) span { background-size: 100% 1.5px; color: #6B6151; }
  .js .datos:not(.visible) .datos-traza path { stroke-dashoffset: 0; }
  .js .paso:not(.activo) { opacity: 1; }
  .ficha li i { opacity: 1; }
  .pausa { display: none; }
  .js .cortina { display: none; }
}