/* =====================================================================
   Eiom — pliego grabado, TEMA CLARO: papel, tinta y óxido.
   Reglas de visibilidad: cuerpo 18 px · ningún texto por debajo de 4.5:1
   Papel #F3E9D6 · tinta #1B1510 · óxido #8E3320 (texto) / #A63B28 (línea)
   ===================================================================== */

:root{
  --papel-textura: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cdefs%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%20.30%200%200%200%200%20.23%200%200%200%200%20.15%200%200%200%20.10%200'/%3E%3C/filter%3E%3Cpattern%20id='fibra'%20width='3.2'%20height='160'%20patternUnits='userSpaceOnUse'%3E%3Cpath%20d='M.35%200V160'%20stroke='%238E6B3C'%20stroke-width='.4'%20stroke-opacity='.06'/%3E%3C/pattern%3E%3Cpattern%20id='corondel'%20width='160'%20height='80'%20patternUnits='userSpaceOnUse'%3E%3Cpath%20d='M0%20.35H160'%20stroke='%238E6B3C'%20stroke-width='.5'%20stroke-opacity='.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3Crect%20width='160'%20height='160'%20fill='url(%23fibra)'/%3E%3Crect%20width='160'%20height='160'%20fill='url(%23corondel)'/%3E%3C/svg%3E");   /* una sola loseta de 160x160, se repite y se funde */
  --field:#F3E9D6;          /* papel de la página */
  --paper:#F8F1E0;          /* papel de los pliegos */
  --paper-shade:#EADCC2;    /* sombra de papel */
  --ink:#1B1510;            /* tinta principal  (15:1 sobre el papel) */
  --ink-soft:#5C5045;       /* tinta secundaria (6.4:1) */
  --rust:#A63B28;           /* óxido para líneas y adornos (5.3:1) */
  --rust-deep:#8A2F1E;      /* óxido para texto pequeño (7:1) */
  --measure:34rem;
  --plate:48rem;
  /* ---- color base: de aquí salen todos los tonos ---- */
  --tinta-rgb:27,21,16;     /* tinta, en números, para poder usarla con transparencia */
  --oxido-rgb:166,59,40;    /* óxido, igual */

  /* ---- aire: los espacios de las cajas y las secciones ---- */
  --aire-lados:clamp(1.47rem,5.25vw,3.78rem);      /* margen interior a los lados */
  --placa-arriba:clamp(2.52rem,6.3vw,3.78rem);     /* relleno de arriba de las placas */
  --placa-abajo:clamp(2.73rem,6.3vw,3.57rem);      /* relleno de abajo de las placas */
  --aire-bloque:clamp(3.4rem,9vw,6rem);            /* separación entre bloques */
  --aire-pie:clamp(4rem,10vw,7rem);                /* aire antes del pie */

  /* ---- formas ---- */
  --radio:.4rem;
  --radio-suave:.35rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:115%}
body{
  margin:0;
  background-color:var(--field);
  background-image:var(--papel-textura);
  background-repeat:repeat;
  background-size:160px 160px;
  background-blend-mode:multiply;
  color:var(--ink);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  font-size:1.125rem;               /* 18 px: lectura cómoda en móvil */
  line-height:1.66;
  font-variant-ligatures:common-ligatures;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.lib{position:absolute;width:0;height:0;overflow:hidden}
.ink{color:var(--rust)}

/* ---------- atmósfera: fibra de papel y borde tenue ---------- */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:60}
.vignette{
  background:
    radial-gradient(150% 120% at 50% 42%, rgba(120,84,40,0) 66%, rgba(120,84,40,.10) 100%),
    linear-gradient(180deg, rgba(120,84,40,.08), rgba(120,84,40,0) 8%, rgba(120,84,40,0) 92%, rgba(120,84,40,.08));
}

/* ---------- tipografía ---------- */
h1,h2,h3,.wordmark,.marginal,.eyebrow,.t-year,.cta,.price{font-family:'IM Fell English','EB Garamond',serif;font-weight:400}
p{margin:0 0 1.25em}
/* énfasis suave: peso medio, sin gritar */
strong{font-weight:600;color:var(--ink)}
.cta{white-space:nowrap}
.cta-icono{flex:none;width:1.95rem;height:1.95rem}
p:last-child{margin-bottom:0}

.eyebrow{
  margin:0 0 1rem;font-size:.94rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.8;
}
.smallprint{font-size:1rem;line-height:1.6;color:var(--ink-soft);letter-spacing:.01em}

/* ---------- el pliego ---------- */
.sticker{
  position:relative;
  background-size:150px 150px;
  background:var(--paper);
  background-image:var(--papel-textura);
  color:var(--ink);
  border:1px solid rgba(var(--tinta-rgb),.22);
  border-radius:6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 22px -14px rgba(60,40,20,.55),
    0 2px 4px -2px rgba(60,40,20,.25);

  background-blend-mode:multiply;}
.plate{
  max-width:var(--plate);
  margin:0 auto;
  padding:var(--placa-arriba) var(--aire-lados) var(--placa-abajo);
  position:relative;
  transform:rotate(-.12deg);
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(var(--oxido-rgb),.06), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(122,74,32,.07), transparent 62%),
    var(--papel-textura);
  background-blend-mode:normal,normal,multiply;
  background-size:auto,auto,140px 140px;
}
.plate:nth-of-type(even){transform:rotate(.14deg)}
.plate::after{content:"";position:absolute;inset:11px;border:1px solid rgba(var(--tinta-rgb),.26);border-radius:4px;pointer-events:none}
.plate::before{content:"";position:absolute;inset:15px;border:1px solid rgba(var(--oxido-rgb),.32);border-radius:3px;pointer-events:none}

.marginal{
  margin:0 0 .6rem;font-size:.94rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--rust-deep);
}
.marginal::after{
  content:"";display:inline-block;width:2.6rem;height:1px;margin-left:.7rem;
  vertical-align:.3em;background:linear-gradient(90deg,rgba(138,47,30,.8),rgba(138,47,30,0));
}
h2{
  font-size:clamp(2rem,6.4vw,3.1rem);
  line-height:1.14;letter-spacing:.004em;margin:0 0 .6rem;color:var(--ink);
}
h2::after{
  content:"";display:block;width:100%;height:1px;margin-top:.9rem;
  background:linear-gradient(90deg,rgba(var(--tinta-rgb),.75),rgba(var(--oxido-rgb),.5) 45%,rgba(var(--tinta-rgb),.05));
}
.lead{font-size:1.24rem;line-height:1.6;color:var(--ink)}
.plate p{max-width:var(--measure)}

.list-ink{list-style:none;margin:1.7rem 0 0;padding:0;max-width:var(--measure)}
.list-ink li{position:relative;padding:.42rem 0 .42rem 1.6rem;border-bottom:1px solid rgba(var(--tinta-rgb),.18)}
.list-ink li:last-child{border-bottom:0}
.list-ink li::before{
  content:"";position:absolute;left:0;top:1.05em;width:.64rem;height:.64rem;
  background:var(--rust);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ---------- portada ---------- */
.hero{
  position:relative;padding:clamp(2.73rem,8.4vh,5.25rem) 1.47rem clamp(2.1rem,6.3vh,3.57rem);
  display:flex;flex-direction:column;align-items:center;
}
.eyebrow--dark{color:var(--ink-soft)}
.wordmark{
  margin:.9rem 0 .4rem;font-size:clamp(3.2rem,15vw,5.1rem);line-height:1;letter-spacing:.05em;
  color:var(--ink);text-align:center;
}
.tagline--dark{color:var(--ink-soft);text-align:center;font-style:italic;font-size:1.15rem;margin:0}

/* Sirius, la estrella de casa: pequeña, espaciada y con su destello.
   La estrella va EN el flujo, delante de la palabra: así lo que queda centrado
   bajo «Eiom» es el grupo entero (destello + SIRIUS), no solo la palabra. */
.firma{
  display:flex;align-items:center;justify-content:center;gap:.5em;margin:.5em 0 0;
  font-size:.26em;line-height:1;text-transform:uppercase;color:var(--rust-deep);
}
.firma-texto{letter-spacing:.46em;margin-right:-.46em}
.firma-estrella{
  width:1.05em;height:1.05em;flex:0 0 auto;fill:currentColor;
  animation:destello 6s ease-in-out infinite;
}
@keyframes destello{
  0%,100%{opacity:.9;transform:scale(1)}
  50%{opacity:.42;transform:scale(.84)}
}

/* el retrato va enmarcado como una lámina pegada en el pliego */
/* el retrato ya trae su propio troquel: se pega en el papel sin marco añadido */
.retrato{
  margin:1.8rem 0 0;width:min(38rem,100%);max-width:100%;
  transform:rotate(-.35deg);
  filter:drop-shadow(0 14px 18px rgba(60,40,20,.32)) drop-shadow(0 2px 3px rgba(60,40,20,.22));
}
.retrato img,.retrato video{width:100%;height:auto;display:block}

/* Camino foto (Safari/iOS, sin WebM alfa o con movimiento reducido): el vídeo todavía no
   tiene metadatos, así que se le fija el 1:1 desde el primer pintado — el mismo cuadrado
   de la foto (900×900) que lo sustituye. Al cambiar vídeo→foto la caja no se mueve. */
html.foto-js .retrato video{aspect-ratio:1/1}

/* con vídeo, el retrato pasa a bandeja ancha: caben las estrellas y las hojas de fuera.
   Vale tanto la clase .con-video (la pone retrato.js) como .con-video-js en <html>
   (la pone el script del <head>): el encuadre correcto ya está puesto antes del primer pintado. */
.retrato.con-video,
html.con-video-js .retrato{
  width:min(45.6rem, calc(100% + 2rem));margin-left:-1rem;margin-right:-1rem;max-width:none;
}
.retrato.con-video video,
html.con-video-js .retrato video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
@media(max-width:44rem){
  .retrato.con-video video,
  html.con-video-js .retrato video{aspect-ratio:4/3}
}

.hero-note{
  margin:2.4rem auto 0;max-width:27rem;text-align:center;
  font-size:1.1rem;color:var(--ink-soft);
}
.ornament-band{width:min(38rem,100%);height:auto;margin:clamp(2.6rem,7vw,3.8rem) auto 0;display:block;opacity:.95}
.scroll-cue{
  margin-top:2.4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:.9rem;text-transform:uppercase;color:var(--ink-soft);
}
.scroll-cue span{letter-spacing:.26em;padding-left:.26em}
.scroll-cue svg{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(6px);opacity:1}}

/* ---------- ritmo entre pliegos ---------- */
.plate{margin-top:var(--aire-bloque);margin-bottom:0}
.plate + .plate{margin-top:clamp(3rem,8vw,5rem)}

/* ---------- sección III ---------- */
.split{display:grid;gap:2rem;align-items:start}
@media(min-width:56rem){
  .split{grid-template-columns:1.55fr .95fr;gap:2.6rem}
}
@media(min-width:64rem){
  .hero{padding-top:clamp(2.6rem,6vh,4.4rem)}
  .retrato{width:min(40rem,80vw)}
}
.plato-simbolo{margin:0}
.plato-simbolo .simbolo{width:100%;height:auto;color:var(--rust);display:block}
.plato-simbolo img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 16px rgba(60,40,20,.3)) drop-shadow(0 2px 3px rgba(60,40,20,.2));
}
.plato-simbolo .tinta{color:var(--rust-deep)}
.plato-simbolo .draw{fill:none;stroke:currentColor}
.plato-simbolo figcaption{
  margin-top:1rem;font-size:.94rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust-deep);text-align:center;
}
.plato-simbolo--ancho{max-width:30rem;margin:3rem auto 0}

.linea{
  list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1.5rem;
}
.linea li{
  position:relative;padding-top:1.1rem;border-top:1px solid rgba(var(--oxido-rgb),.55);
}
.linea li::before{
  content:"";position:absolute;top:-4.5px;left:0;width:.55rem;height:.55rem;
  background:var(--rust);border-radius:50%;
}
.l-ano{
  display:block;font-family:'IM Fell English',serif;
  font-size:1.3rem;line-height:1.2;letter-spacing:.05em;color:var(--ink);
}
.l-cap{display:block;margin-top:.25rem;font-size:1.06rem;font-style:italic;color:var(--rust-deep);line-height:1.4}
@media(min-width:44rem){
  .linea{grid-template-columns:repeat(3,1fr);gap:2rem}
}

/* ---------- sección IV ---------- */
.exchange{
  margin-top:2.2rem;display:flex;align-items:center;gap:1rem;
  font-family:'IM Fell English',serif;font-size:1.6rem;color:var(--rust-deep);
}
.exchange::before,.exchange::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--tinta-rgb),.35),transparent);
}

/* ---------- sección V: tarifa ---------- */
.tariff{
  width:100%;border-collapse:collapse;margin:2.4rem 0 1.6rem;font-size:1.08rem;
}
.tariff td{vertical-align:baseline;padding:1.15rem .2rem}
.tariff tr + tr td{border-top:1px solid rgba(var(--tinta-rgb),.3)}
.tariff td:first-child{width:46%;padding-right:1.4rem;line-height:1.45}
.tariff td:last-child{text-align:right}
.price{display:block;font-size:1.7rem;line-height:1.12;color:var(--rust-deep)}
.sub{display:block;margin-top:.4rem;font-size:1.04rem;font-style:italic;color:var(--ink-soft);line-height:1.45}
@media(max-width:32rem){
  .tariff td:first-child{width:auto}
  .tariff td:last-child{text-align:left}
  .tariff td{display:block;border-top:0;padding:0}
  .tariff tr{display:block;border-top:1px solid rgba(var(--tinta-rgb),.3);padding:1.2rem 0}
  /* una sola línea entre las dos tarifas: las celdas no vuelven a dibujarla */
  .tariff tr + tr td{border-top:0}
  .tariff tr:first-child{border-top:0;padding-top:0}
  .tariff tr:last-child{padding-bottom:1.2rem}
  .tariff .sub{margin-bottom:0}
}

/* ---------- llamada ---------- */
.cta{
  display:inline-flex;align-items:center;gap:.8rem;
  margin:1.9rem 0 .9rem;padding:1.05rem 1.8rem;
  background:var(--rust);color:var(--paper);text-decoration:none;
  font-size:1.28rem;letter-spacing:.04em;border-radius:3px;
  box-shadow:0 8px 18px -12px rgba(60,40,20,.9);
  transition:transform .18s ease, background .18s ease;
}
.cta svg{color:var(--paper)}
.cta:hover,.cta:focus-visible{background:var(--rust-deep);transform:translateY(-2px)}
.cta:active{background:#6E2416}
@media(max-width:44rem){
  .cta{display:flex;width:100%;justify-content:center;font-size:1.18rem;padding:1.02rem 1.1rem;gap:.6rem}
  .cta-icono{width:2.15rem;height:2.15rem}
}

/* ---------- grabadora de notas de voz ---------- */
.recorder{
  margin:2.8rem 0 2.6rem;padding:2.1rem 1.58rem 1.79rem;
  border:1px solid rgba(var(--tinta-rgb),.4);border-radius:5px;position:relative;
  background:rgba(255,255,255,.42);
  text-align:center;
}
.recorder::before{content:"";position:absolute;inset:5px;border:1px solid rgba(var(--oxido-rgb),.3);border-radius:3px;pointer-events:none}
.rec-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.rec-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--tinta-rgb),.4),transparent)}
.rec-kicker{font-size:.92rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rust-deep)}
.rec-stage{display:flex;flex-direction:column;align-items:center;gap:1.3rem}

.rec-record[hidden]{display:none}
.rec-record{
  position:relative;appearance:none;border:0;background:none;cursor:pointer;
  width:10.5rem;height:10.5rem;padding:0;color:var(--rust);
  display:grid;place-items:center;border-radius:50%;
  transition:transform .18s ease, color .18s ease;
}
.rec-record:hover{transform:scale(1.02)}
.rec-record:hover .rec-ring-out{fill:currentColor;fill-opacity:.1}
.rec-record:hover .rec-bola{transform:scale(1.08)}
.rec-record:hover .rec-bola-aro{transform:scale(1.04)}
.rec-record:focus-visible{outline:2px dashed var(--rust-deep);outline-offset:6px}
.rec-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rec-bola{transition:transform .25s ease, opacity .25s ease}
.rec-bola-aro{transition:transform .25s ease, opacity .25s ease}
.rec-square{transition:opacity .25s ease;transform-box:fill-box;transform-origin:center}
.rec-datos{text-align:center}
.rec-pista{margin:.5rem 0 0;font-size:.98rem;font-style:italic;color:var(--ink-soft)}
.rec-pista[hidden]{display:none}
.rec-time{
  margin:0;position:relative;display:inline-flex;align-items:center;
  font-family:'EB Garamond',serif;font-size:1.4rem;letter-spacing:.12em;
  font-variant-numeric:tabular-nums lining-nums;color:var(--ink);
}
.rec-record.is-rec{color:var(--rust-deep)}
.rec-record.is-rec .rec-bola{opacity:0;transform:scale(.4)}
.rec-record.is-rec .rec-bola-aro{opacity:0}
.rec-record.is-rec .rec-square{opacity:1}
.rec-record.is-rec .rec-ring-out{animation:latido-aro 2.4s ease-in-out infinite}
.rec-record.is-rec .rec-bola-aro{animation:latido-aro 2.4s ease-in-out infinite}
.rec-record.is-rec .rec-square{animation:latido-cuadro 2.4s ease-in-out infinite}
.rec-time.is-live{color:var(--rust-deep)}
@keyframes latido-aro{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes latido-cuadro{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
.rec-record.is-busy{cursor:progress;color:var(--ink-soft)}

.rec-wave{
  width:100%;max-width:26rem;min-height:3.6rem;margin:0 auto;cursor:pointer;
  padding:.75rem .85rem;border:1px solid rgba(var(--tinta-rgb),.26);border-radius:4px;
  background:rgba(255,255,255,.35);
}
.rec-wave:empty{display:none}

.rec-contacto{margin:1.6rem auto 0;max-width:26rem;text-align:left}
.rec-contacto[hidden]{display:none}
.rec-label{
  display:block;font-family:'IM Fell English',serif;font-size:1.24rem;
  letter-spacing:.03em;color:var(--ink);margin-bottom:.5rem;text-align:center;
}
.rec-input{
  width:100%;padding:.85rem 1rem;font-family:'EB Garamond',serif;font-size:1.12rem;
  color:var(--ink);background:rgba(255,255,255,.65);
  border:1.5px solid rgba(var(--tinta-rgb),.6);border-radius:3px;
}
.rec-input::placeholder{color:var(--ink-soft);opacity:.95}
.rec-input:focus{outline:2px solid var(--rust);outline-offset:2px;background:#fff}
.rec-help{margin:.6rem 0 0;font-size:1rem;color:var(--ink-soft);text-align:center;line-height:1.5}
/* una sola escala de espacios: 1,5 rem entre bloques, 0,75 dentro de cada bloque */
.rec-stage{gap:1.5rem}
.rec-acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem}
.rec-acciones .rec-btn{flex:1 1 0;min-width:0;max-width:9rem;padding-left:.7rem;padding-right:.7rem}
.rec-acciones[hidden]{display:none}
.rec-principal{display:flex;justify-content:center;margin-top:1.4rem}
.rec-principal[hidden]{display:none}
@media(max-width:44rem){
  .rec-principal .rec-btn--send{width:100%;max-width:24rem}
}
.rec-btn{
  font-family:'EB Garamond',serif;font-size:1.12rem;letter-spacing:.02em;
  min-width:7.6rem;text-align:center;
  padding:.66rem 1.35rem;border:1px solid rgba(var(--tinta-rgb),.65);border-radius:3px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.rec-btn:hover{border-color:var(--rust-deep);color:var(--rust-deep);transform:translateY(-1px)}
.rec-btn[hidden]{display:none}
.rec-btn--send{background:var(--rust);color:var(--paper);border-color:var(--rust)}
.rec-btn--send:hover{background:var(--rust-deep);border-color:var(--rust-deep);color:var(--paper)}
.rec-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.rec-status{margin:1.6rem auto 0;max-width:26rem;font-size:1.04rem;color:var(--ink-soft);line-height:1.55}
.rec-status.is-error{color:var(--rust-deep);font-style:normal}
.rec-status.is-done{color:var(--rust-deep);font-style:normal;letter-spacing:.01em}
.rec-privacy{margin-top:.8rem;font-size:1rem;color:var(--ink-soft)}

/* ---------- pie ---------- */
.foot{max-width:var(--plate);margin:var(--aire-pie) auto 0;padding:3.15rem 1.68rem 4.2rem;text-align:center}
.foot{display:flex;flex-direction:column;align-items:center}
.foot-marca{
  margin:0;font-family:'IM Fell English',serif;font-size:2.5rem;line-height:1.1;
  letter-spacing:.04em;color:var(--ink);
}
.foot-lema{margin:.4rem 0 0;font-size:1.12rem;line-height:1.4;color:var(--ink-soft)}
.foot-legal{margin:1.7rem 0 0;font-size:.95rem;color:var(--ink-soft)}
.foot-legal a{
  text-decoration:none;border-bottom:1px solid rgba(138,47,30,.45);padding-bottom:.1em;
}
.foot-legal a:hover{border-bottom-color:var(--rust-deep);color:var(--rust-deep)}
.foot-legal span{margin:0 .7rem;color:rgba(var(--tinta-rgb),.4)}



/* ---------- mientras grabas: un único latido, todo a la vez ---------- */
.rec-vu{
  width:100%;max-width:24rem;height:2.6rem;margin:0 auto;
  display:none;visibility:hidden;align-items:flex-end;gap:2px;
}
/* el medidor solo existe mientras grabas: en reposo no deja hueco muerto */
.recorder[data-estado="recording"] .rec-vu{display:flex;visibility:visible}
.rec-vu i{
  flex:1;height:100%;background:var(--rust);border-radius:1px;
  transform:scaleY(.06);transform-origin:bottom;
  transition:transform .07s linear;
}


/* ---------- páginas legales: mismo pliego y mismo padding que la landing ---------- */
.legal{padding:var(--aire-bloque) 0 var(--aire-pie)}
.legal-pliego{
  max-width:var(--plate);margin:0 auto;
  padding:var(--placa-arriba) var(--aire-lados) var(--placa-abajo);
  transform:rotate(-.12deg);
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(var(--oxido-rgb),.06), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(122,74,32,.07), transparent 62%),
    var(--papel-textura);
  background-blend-mode:normal,normal,multiply;
  background-size:auto,auto,140px 140px;
}
.legal-pliego::after{content:"";position:absolute;inset:11px;border:1px solid rgba(var(--tinta-rgb),.26);border-radius:4px;pointer-events:none}
.legal-pliego::before{content:"";position:absolute;inset:15px;border:1px solid rgba(var(--oxido-rgb),.32);border-radius:3px;pointer-events:none}
.legal-pliego h1{
  font-family:'IM Fell English',serif;font-weight:400;
  font-size:clamp(2rem,6.4vw,2.9rem);line-height:1.15;margin:0 0 1.2rem;color:var(--ink);
}
.legal-pliego h1::after{
  content:"";display:block;width:100%;height:1px;margin-top:1rem;
  background:linear-gradient(90deg,rgba(var(--tinta-rgb),.75),rgba(var(--oxido-rgb),.5) 45%,rgba(var(--tinta-rgb),.05));
}
.legal-pliego h2{
  font-family:'IM Fell English',serif;font-weight:400;
  font-size:1.55rem;line-height:1.14;margin:2.4rem 0 .7rem;color:var(--ink);
}
.legal-pliego h2::after{display:none}
.legal-pliego p,.legal-pliego li{max-width:var(--measure)}
.legal-pliego ul{margin:0 0 1.35em;padding-left:1.35rem}
.legal-pliego li{margin-bottom:.4rem}
.legal-pliego a{color:var(--rust-deep)}
.legal-dato{
  margin:1.2rem 0 2rem;padding:1.3rem 1.5rem;
  border:1px solid rgba(var(--tinta-rgb),.35);border-radius:4px;background:rgba(255,255,255,.4);
  max-width:var(--measure);
}
.legal-dato dt{
  font-family:'IM Fell English',serif;font-size:1.1rem;letter-spacing:.02em;color:var(--ink);
}
.legal-dato dd{margin:.15rem 0 1rem;color:var(--ink-soft)}
.legal-dato dd:last-child{margin-bottom:0}
.marcador{
  background:rgba(var(--oxido-rgb),.13);border-bottom:2px dotted var(--rust-deep);
  padding:.05em .25em;color:var(--rust-deep);
}
.volver{margin-top:2.8rem;font-size:1.06rem}
.volver a{text-decoration:none;border-bottom:1px solid rgba(138,47,30,.5);padding-bottom:.12em}
.volver a:hover{border-bottom-color:var(--rust-deep)}

/* ---------- magia al hacer scroll ---------- */
html.js .reveal h2,
html.js .reveal .lead,
html.js .reveal p,
html.js .reveal .list-ink,
html.js .reveal .tariff,
html.js .reveal .cta,
html.js .reveal .plate-figure,
html.js .reveal .split,
html.js .reveal .exchange,
html.js .hero-note,
html.js .scroll-cue{opacity:0}
html.js .reveal h2{clip-path:inset(0 100% 0 0)}
html.js .simbolo .draw{stroke-dasharray:1 1;stroke-dashoffset:1}

@media(prefers-reduced-motion:reduce){
  /* con «reducir movimiento» no late nada: queda el cuadrado fijo y el contador corriendo */
  .rec-record.is-rec .rec-ring-out,
  .rec-record.is-rec .rec-bola-aro,
  .rec-record.is-rec .rec-square{animation:none}
  .firma-estrella{animation:none;transform:none}
  .rec-record.is-rec .rec-square{opacity:1}
  .scroll-cue svg{animation:none}
  .sticker{transform:none !important}
}

/* ---------- la lámina de la llave ---------- */
.llave-caja img,.plato-simbolo--ancho img{width:100%;height:auto;display:block}

/* Camino foto (Safari/iOS): el póster del vídeo y la foto que lo sustituye deben
   ser la MISMA imagen desde el primer pintado, si no al recargar se ve un salto
   de tamaño. Se pinta la foto como fondo de la figura y el vídeo se deja
   invisible: cuando retrato.js cambia el vídeo por la foto, no cambia nada. */
html.foto-js .retrato{background:url("assets/img/retrato-900.webp?v=3") center/cover no-repeat}
html.foto-js .retrato video{opacity:0}

/* ---------- pie: los iconos para escribirme ---------- */
/* Iconos con su botón redondo: ese círculo les da cuerpo y marca bien el área
   para el dedo. Lo que sobraba era el aro del LOGO de Telegram (aro + avión);
   ahí va solo el avión, en el mismo trazo de línea. */
.foot-redes{display:flex;gap:1.05rem;margin:1.9rem 0 0;align-items:center;justify-content:center}
.foot-redes a{
  display:flex;width:3.2rem;height:3.2rem;align-items:center;justify-content:center;
  border:1px solid rgba(var(--tinta-rgb),.30);border-radius:50%;color:var(--rust-deep);
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.foot-redes svg{width:1.55rem;height:1.55rem;display:block}
/* Los tres son el trazado OFICIAL dibujado a línea. Como cada marca tiene
   distinta cantidad de contorno (la de WhatsApp lleva burbuja + auricular, el
   correo una sola forma), se ajusta el tamaño de cada una para que las tres
   pesen lo mismo a la vista. */
.foot-redes a[href^="https://wa.me/"] svg{width:1.3rem;height:1.3rem}
.foot-redes a[href^="mailto:"] svg{width:1.6rem;height:1.6rem}
.foot-redes a[href^="https://t.me/"] svg{width:1.76rem;height:1.76rem}
.foot-redes a:hover,.foot-redes a:focus-visible{
  background:var(--rust);border-color:var(--rust);color:var(--field);transform:translateY(-2px);
}
@media(prefers-reduced-motion:reduce){.foot-redes a{transition:none}.foot-redes a:hover{transform:none}}

/* ---------- trabajos: el porfolio, con el aire de la casa ---------- */
/* La mención corta de la portada: los logos en gris, que no compitan. */
.logos-trabajos{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;align-items:center;justify-content:center;margin:2.2rem 0 .4rem}
.logos-trabajos a{
  display:grid;place-items:center;
  transition:transform .2s ease;
}
.logos-trabajos a:hover{transform:translateY(-2px)}
/* los logos de la portada, sueltos: sin caja, sin fondo y con la misma
   presencia cada uno (se iguala la superficie que ocupan, no la altura) */
@media(max-width:34rem){
  .logos-trabajos{transform:scale(.84)}
}
/* misma altura para todos los logos; cada uno conserva su forma, porque el
   ancho lo saca el navegador de la proporcion de cada imagen */
.logos-trabajos img{height:2.24rem;width:auto;max-width:100%;object-fit:contain}
/* El logo de Wayve, un 10% más alto: su marca lleva mucho aire alrededor, así
   que a la misma altura pesa menos que las demás. Se iguala así. */
.logos-trabajos img[src*="wayve"]{height:2.46rem}
.ver-trabajos{margin:1.6rem 0 0;text-align:center}
.ver-trabajos a{color:var(--rust-deep);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.12em}
.ver-trabajos a:hover{color:var(--ink)}

/* La página de trabajos: una ficha por proyecto, con su historia al lado. */
.trabajos-lista{display:grid;gap:3.6rem;margin-top:2.6rem}
.trabajo{display:grid;gap:1.4rem;padding-top:2.4rem;border-top:1px solid rgba(23,18,14,.18)}
.trabajo:first-child{border-top:0;padding-top:0}
.t-cabeza{display:flex;flex-direction:column;gap:.3rem}
.t-num{margin:0;font-size:.9rem;letter-spacing:.14em;color:var(--rust-deep)}
.trabajo h2{margin:.1rem 0 0;font-size:1.35rem}
.t-meta{margin:0;font-size:.9rem;color:var(--ink-soft)}
.t-media{display:grid;gap:1rem;justify-items:center}
.t-logo{
  position:relative;
  display:block;width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(23,18,14,.6);border-radius:var(--radio);
  background:linear-gradient(145deg,#4A3E2A,#241E14);
  overflow:hidden;
}
/* Caja explícita para el logo: algunos SVG no declaran tamaño propio y el
   navegador les daba una caja por defecto que se salía de la placa. Con la caja
   fija, el dibujo se ajusta dentro conservando su forma, siempre centrado. */
/* la imagen va anclada dentro de la placa, con un 12% de aire por lado: así el
   porcentaje resuelve contra un tamaño fijo y ningún logo puede salirse. */

/* Tamaño fino de los logos de proyectos, por encima de la caja común del 76% */
.t-logo img[src*="teresa"]{width:64.6%;height:64.6%;top:17.7%;left:17.7%}
.t-logo img[src*="transito"]{width:70.7%;height:70.7%;top:14.7%;left:14.7%}
.t-logo img[src*="colores"]{width:64.6%;height:64.6%;top:17.7%;left:17.7%}
.t-logo img[src*="jose"]{width:70.7%;height:70.7%;top:14.7%;left:14.7%}
.t-logo img[src*="wayve"]{width:68.4%;height:68.4%;top:15.8%;left:15.8%}
.t-logo img{
  position:absolute;top:12%;left:12%;width:76%;height:76%;
  object-fit:contain;display:block;
}
/* los logos oscuros van sobre placa clara, para que se lean */
.t-logo.claro{background:linear-gradient(145deg,#FBF6EA,#EFE4CE);border-color:rgba(23,18,14,.35)}
.t-shot{display:block;border:1px solid rgba(23,18,14,.28);border-radius:var(--radio-suave);overflow:hidden;line-height:0;text-decoration:none;background:#EFE7D8}
.t-shot img{width:100%;height:auto;display:block}
.t-ver{display:block;line-height:1.4;font-size:.85rem;padding:.55rem 0;text-align:center;color:var(--rust-deep);border-top:1px solid rgba(23,18,14,.14)}
.t-historia{display:grid;gap:1rem}
.t-parte h3{margin:0 0 .2rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust-deep)}
.t-parte p{margin:0}
.t-url{margin:0}
@media(min-width:56rem){
  .trabajo{grid-template-columns:1fr 1fr;grid-template-areas:"cabeza media" "historia media" "url media";gap:1.1rem 2.6rem;align-items:start}
  .t-cabeza{grid-area:cabeza}
  .t-historia{grid-area:historia}
  .t-url{grid-area:url}
  .t-media{grid-area:media}
}

/* ---------- cabecera abierta (título sin caja) ---------- */
/* Igual que una placa en márgenes y medidas, pero sin fondo, sin borde y sin
   giro: el título se apoya directamente en el papel. */
.cabeza-abierta{
  max-width:var(--plate);
  margin:0.4rem auto 0;
  padding:1.1rem var(--aire-lados) 3rem;
  position:relative;
}

/* la primera tarjeta de cada página no necesita tanto aire arriba:
   así el hueco de arriba del título y el de abajo se parecen. */
/* la tarjeta que va justo tras el título abierto */
main > .cabeza-abierta + .plate{margin-top:2.4rem}

/* ---------- el vuelo de los logos de la portada ---------- */
/* Suben y bajan muy despacio cambiando un poco de tamaño. Con ritmos distintos
   cada uno, para que no floten al unísono, y para que el ojo no note tanto las
   diferencias de peso entre unas marcas y otras.
   Solo se mueve lo que el navegador puede mover sin repintar (posición y
   escala), así que no cuesta nada en rendimiento. */
@keyframes flotar-logos{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  25%{transform:translateY(-.37rem) scale(1.055) rotate(-0.5deg)}
  50%{transform:translateY(-.55rem) scale(1.1) rotate(0.4deg)}
  75%{transform:translateY(-.27rem) scale(1.045) rotate(0.7deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
/* Cada logo con su propio ritmo: duraciones y desfases todos distintos, y dos
   caminos alternos, para que no haya dos que se muevan igual. */
/* El Sentido de Escucharte (4) y Virginia (6) son los dos únicos que miden
   exactamente lo mismo: se les dan los caminos y ritmos más separados. */
.logos-trabajos a:nth-child(1){animation-name:flotar-logos}
.logos-trabajos a:nth-child(2){animation-name:flotar-logos-b}
.logos-trabajos a:nth-child(3){animation-name:flotar-logos-c}
.logos-trabajos a:nth-child(4){animation-name:flotar-logos-b}
.logos-trabajos a:nth-child(5){animation-name:flotar-logos-c}
.logos-trabajos a:nth-child(6){animation-name:flotar-logos-b}
.logos-trabajos a:nth-child(7){animation-name:flotar-logos-b}
.logos-trabajos a:nth-child(8){animation-name:flotar-logos-c}
.logos-trabajos a:nth-child(1){animation-duration:4.6s;animation-delay:-0.4s}
.logos-trabajos a:nth-child(2){animation-duration:5.7s;animation-delay:-2.1s}
.logos-trabajos a:nth-child(3){animation-duration:6.4s;animation-delay:-3.8s}
.logos-trabajos a:nth-child(4){animation-duration:5.1s;animation-delay:-1.2s}
.logos-trabajos a:nth-child(5){animation-duration:7.1s;animation-delay:-4.9s}
.logos-trabajos a:nth-child(6){animation-duration:5.8s;animation-delay:-1.5s}
.logos-trabajos a:nth-child(7){animation-duration:6.1s;animation-delay:-0.9s}
.logos-trabajos a:nth-child(8){animation-duration:5.4s;animation-delay:-3.3s}
/* la mitad lleva otro camino: sube menos y se balancea al revés */
@keyframes flotar-logos-c{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  35%{transform:translateY(-.41rem) scale(1.06) rotate(-0.55deg)}
  70%{transform:translateY(-.21rem) scale(1.03) rotate(0.5deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
@keyframes flotar-logos-b{
  0%{transform:translateY(0) scale(1) rotate(0deg)}
  30%{transform:translateY(-.17rem) scale(1.02) rotate(0.6deg)}
  60%{transform:translateY(-.25rem) scale(1.04) rotate(-0.35deg)}
  100%{transform:translateY(0) scale(1) rotate(0deg)}
}
.logos-trabajos a{animation:flotar-logos 4.8s ease-in-out infinite;will-change:transform}
@media(prefers-reduced-motion:reduce){.logos-trabajos a{animation:none}}

/* ---------- el cierre, también abierto ---------- */
/* No es una tarjeta, así que no lleva fondo, ni borde, ni giro: solo el aire
   justo para separarlo de la última ficha. */
main > .pie-abierto{
  max-width:var(--plate);
  margin:clamp(2rem,5vw,3rem) auto clamp(2.4rem,6vw,4rem);
  padding:0 var(--aire-lados);
}

/* El logo de Virginia viene en blanco: sobre el papel crema no se vería. Se
   pinta en negro sin tocar el archivo (mismo dibujo, mismo trazo). */
.logos-trabajos a img[src*="virginia"]{filter:brightness(0)}

/* Aviso de copyright, discreto al final del pie */
.foot-credito{margin-top:1.9rem;font-size:.78rem;letter-spacing:.06em;opacity:.62;text-align:center}

/* Zonas táctiles del pie: al menos 44 px, como recomienda Apple */
.foot-redes a{min-width:44px;min-height:44px;justify-content:center;align-items:center}

/* Desbordamiento: las placas van giradas una décima de grado, y su caja
   girada sobresale un par de píxeles en pantallas bajas y anchas. Se recorta
   el sobrante horizontal para que no aparezca barra de desplazamiento. */
html,body{overflow-x:hidden;max-width:100%}

/* Palabras muy largas (apellidos, términos alemanes) parten en vez de salirse */
h1,h2,h3,p,li,a,.tariff,.foot-legal{overflow-wrap:break-word;word-break:normal;hyphens:auto}

/* ---------- interlineado de los titulos ----------
   Los titulos son de tamano grande y llevaban el interlineado del texto de
   lectura (1,6), pensado para parrafos. Al partirse en dos lineas dejaban un
   hueco enorme. Todos los titulos grandes van con el mismo interlineado;
   que ahi el aire si ayuda a leer. */
h1,h2{line-height:1.14}
h3{line-height:1.18}

/* Elegir por dónde contestar: dos botones claros, con su etiqueta visible y
   anillo de foco, en lugar de un campo libre donde cabe cualquier cosa. */
.rec-vias{display:flex;flex-wrap:wrap;gap:.6rem;margin:.2rem 0 1rem}
.rec-via{
  flex:1 1 12rem;display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;
  padding:.7rem .9rem;text-align:left;cursor:pointer;
  background:rgba(var(--oxido-rgb),.05);color:var(--ink);
  border:1px solid rgba(var(--tinta-rgb),.28);border-radius:var(--radio);
  font-family:'EB Garamond',Georgia,serif;font-size:1rem;
  transition:background .18s ease,border-color .18s ease;
}
.rec-via:hover{background:rgba(var(--oxido-rgb),.10);border-color:rgba(var(--tinta-rgb),.5)}
.rec-via:focus-visible{outline:2px solid var(--rust-deep);outline-offset:2px}
.rec-via[aria-checked="true"]{
  background:rgba(var(--oxido-rgb),.14);border-color:var(--rust-deep);
  box-shadow:inset 0 0 0 1px var(--rust-deep);
}
.rec-via-nombre{font-weight:600;letter-spacing:.02em}
.rec-via-detalle{font-size:.86rem;color:var(--ink-soft)}
.rec-label--campo{display:block;margin-top:.2rem}
.rec-input:disabled{opacity:.62}