/* ==========================================================================
   LEXARTIS · Leyes & Códigos — hoja de estilos
   ========================================================================== */

:root{
  --navy:#16294a;
  --navy-800:#1d3358;
  --navy-600:#2b4570;
  --cream:#f4f0e8;
  --cream-2:#faf7f1;
  --paper:#fffdf9;
  --gold:#b08432;
  --gold-soft:#d8b877;
  --ink:#1a1a1a;
  --muted:#6b6a66;
  --line:#ddd6c8;
  --ok:#1f7a57;
  --danger:#a1281f;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --book:"EB Garamond",Georgia,"Times New Roman",serif;
  --tapa:"Alike",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --radius:14px;
  --shadow:0 10px 40px rgba(22,41,74,.10);
  --shadow-lg:0 24px 70px rgba(22,41,74,.18);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:118px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0 0 .4em;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.35rem}
.eyebrow{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--gold);margin:0 0 .35rem;letter-spacing:.02em;
}
.lede{font-size:1.08rem;color:#43423e;max-width:62ch}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- nota de envío (Paso 3) ---------- */
.envio-nota{
  font-size:.85rem;color:var(--muted);letter-spacing:.01em;
  margin:-6px 0 22px;
}
.envio-nota strong{color:var(--navy);font-weight:600}
.envio-nota .sep{opacity:.4;margin:0 .5rem}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(244,240,232,.93);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:26px;height:76px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);opacity:.8;padding:6px 0;border-bottom:1.5px solid transparent;
}
.nav-links a:hover{opacity:1;border-color:var(--gold)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:1.1rem;cursor:pointer}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;cursor:pointer;
  padding:13px 26px;font-size:.95rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;transition:.18s ease;
}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-800);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#9c7429;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-sm{padding:9px 18px;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#f3efe6;padding:64px 0 76px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -10% -50% 55%;height:520px;
  background:radial-gradient(closest-side,rgba(216,184,119,.16),transparent 70%);
}
.hero-grid{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:40px;position:relative;z-index:2;
}
.hero-grid>div:first-child{max-width:760px}
.hero h1{color:#fff;margin-bottom:.25em}
.hero .eyebrow{color:var(--gold-soft)}
.hero-sub{font-size:1.12rem;color:#d6d1c6;max-width:56ch;margin-inline:auto}
.hero-logo{width:168px;margin:0 auto 26px}
.hero-precio{
  font-family:var(--serif);font-size:1.2rem;color:var(--gold-soft);
  margin:.2em 0 1em;letter-spacing:.01em;
}
.hero-precio strong{font-weight:600;color:#fff}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;justify-content:center}
.hero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero-cta .btn-ghost:hover{background:#fff;color:var(--navy)}
.hero-cta-nota{font-size:.82rem;color:#a9a291;max-width:52ch;margin:14px auto 0}

.videos{display:flex;justify-content:center}
.video-card{
  position:relative;border-radius:18px;overflow:hidden;background:#0d1830;
  box-shadow:var(--shadow-lg);aspect-ratio:960/592;   /* el del video, para no recortarlo */
  width:100%;max-width:760px;
}
.video-card video{width:100%;height:100%;object-fit:cover;display:block}
.video-ctrl{
  position:absolute;right:10px;bottom:10px;z-index:3;display:flex;gap:8px;
}
.video-ctrl button{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(12,20,38,.62);color:#fff;font-size:.95rem;line-height:1;
  backdrop-filter:blur(6px);
}
.video-ctrl button:hover{background:rgba(12,20,38,.85)}

/* ---------- tiras de datos ---------- */
.tira{background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tira-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.tira-item{padding:26px 18px;border-right:1px solid var(--line);text-decoration:none;color:inherit;display:block;min-width:0}
a.tira-item{transition:.15s}
a.tira-item:hover{background:#fff}
a.tira-item b{text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:4px}
.tira-item:last-child{border-right:none}
.tira-item b{display:block;font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;color:var(--navy);margin-bottom:4px;text-wrap:balance}
.tira-item span{font-size:.85rem;color:var(--muted)}

/* ---------- secciones ---------- */
section{padding:78px 0}
.sec-head{margin-bottom:44px}
.sec-num{
  font-family:var(--serif);font-size:.95rem;letter-spacing:.22em;color:var(--gold);
  display:block;margin-bottom:.5rem;text-transform:uppercase;
}
.alt{background:var(--cream-2)}
.dark{background:var(--navy);color:#eee9df}
.dark h2,.dark h3{color:#fff}
.dark .lede{color:#cfc9bd}
.dark .eyebrow{color:var(--gold-soft)}

/* ---------- features ---------- */
/* Recuadros chicos: son datos del producto, no el plato principal. La página
   ahora parte por el catálogo y esto va después, de apoyo. */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feature{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px;position:relative;transition:.2s;
}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature .ico{font-size:1.1rem;margin-bottom:6px;display:block}
.feature h3{font-size:1rem;margin-bottom:.25em}
.feature p{margin:0;font-size:.85rem;line-height:1.5;color:#54524d}
.feature.destacado{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,#fffdf9)}
.feature.destacado::before{
  content:"IMPORTANTE";position:absolute;top:-9px;left:16px;background:var(--gold);color:#fff;
  font-size:.56rem;letter-spacing:.14em;padding:2px 8px;border-radius:999px;font-weight:700;
}

/* ---------- formatos de texto ---------- */
.formatos{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.formato-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* Las dos tarjetas comparten las mismas filas: si un título ocupa dos líneas
   y el otro una, las cabeceras igual quedan del mismo alto, y las muestras y
   los botones arrancan a la misma altura. */
@supports (grid-template-rows: subgrid){
  .formatos{grid-template-rows:auto 1fr}
  .formato-card{display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
@supports not (grid-template-rows: subgrid){
  /* sin subgrid se reservan dos líneas de título, que es el caso más largo */
  .formato-card{display:flex;flex-direction:column}
  .formato-card header{min-height:calc(2 * 1.25em + 1.4rem)}
  .formato-card .muestra{flex:1}
}
.formato-card header{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.formato-card header h3{margin:0}
.formato-card header span{font-size:.85rem;color:var(--muted)}
.formato-card .muestra{padding:20px;background:#fff}

/* muestra del interior (página real de la maqueta) */
.formato-card .muestra img{
  width:100%;height:auto;display:block;border:1px solid #e6e0d3;
  box-shadow:0 6px 20px rgba(0,0,0,.07);
}

/* ---------- catálogo ---------- */
/* Las tres se reparten el ancho y nunca hay que deslizar la barra para ver la
   tercera, ni en el computador ni en el teléfono. */
.tabs{
  display:flex;gap:6px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:6px;width:100%;max-width:620px;margin:0 auto 36px;
  flex-wrap:nowrap;
}
.tab{
  border:none;background:transparent;border-radius:999px;cursor:pointer;
  padding:11px 10px;font-size:clamp(.78rem,1.7vw,.92rem);
  font-weight:600;color:var(--navy);opacity:.65;transition:.15s;
  white-space:nowrap;flex:1 1 0;min-width:0;
}

/* En el teléfono las tres tienen que verse de una, sin deslizar la barra: se
   reparten el ancho, se aprieta el relleno y «Compilados» deja fuera su
   «por materia», que no hace falta para distinguirlo de los otros dos. */
@media(max-width:640px){
  .tabs{width:100%;gap:2px;padding:4px}
  .tab{
    flex:1 1 0;min-width:0;padding:10px 4px;font-size:.78rem;
    white-space:normal;line-height:1.2;
  }
  .tab-largo{display:none}
}
.tab[aria-selected="true"]{background:var(--navy);color:#fff;opacity:1}

/* Dos columnas y no tres: las tarjetas quedan mas anchas y la seccion entera
   se recorre en menos scroll, que era el problema. */
.grid-prod{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.prod{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s;
}
.prod:hover{box-shadow:var(--shadow);border-color:var(--gold-soft)}
.prod.elegido{border-color:var(--gold);box-shadow:0 0 0 2px rgba(176,132,50,.25)}
.prod-top{padding:20px 22px 16px;display:flex;gap:14px;align-items:flex-start}
.prod-idx{
  font-family:var(--serif);font-size:.78rem;color:var(--gold);border:1px solid var(--gold-soft);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:3px;
}
.prod h3{font-size:1.16rem;margin:0 0 .2em;line-height:1.2}
.prod .precio{font-family:var(--serif);font-size:1.32rem;color:var(--navy);font-weight:600}
.prod .precio small{font-size:.72rem;color:var(--muted);font-family:var(--sans);font-weight:400;display:block;letter-spacing:.02em}
.prod-acciones{margin-top:auto;padding:14px 22px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ver-normas{
  background:none;border:none;color:var(--navy);cursor:pointer;font-size:.85rem;
  text-decoration:underline;text-underline-offset:3px;padding:0;opacity:.8;
}
.ver-normas:hover{opacity:1;color:var(--gold)}
.normas-lista{
  border-top:1px dashed var(--line);margin:0 22px;padding:16px 0;display:none;
}
.normas-lista.abierto{display:block}
.normas-lista ul{list-style:none;margin:0;padding:0}
.normas-lista li{padding:8px 0;border-bottom:1px dotted #e4ddcd;font-size:.88rem}
.normas-lista li:last-child{border-bottom:none}
.normas-lista .n-tipo{font-family:var(--serif);font-weight:700;color:var(--gold);display:block;font-size:.86rem;letter-spacing:.03em}
.normas-lista .n-tit{color:#4a4842}

/* ---------- apéndice ---------- */
.apendice{margin:0 22px 16px;padding:14px 16px;background:#fbf7ee;border:1px dashed var(--gold-soft);border-radius:10px;font-size:.86rem}
.apendice p{margin:0 0 8px;color:#5c5850}
.apendice .chip-row{display:flex;flex-wrap:wrap;gap:6px}

/* Con dos o más ejemplares del mismo código, cuál de ellos recibe las leyes */
.ap-ejemplares{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.ap-ejem-tit{color:#5c5850;margin-right:2px}
.ap-ejem{
  border:1px solid var(--gold-soft);background:#fff;color:var(--navy);
  border-radius:999px;padding:3px 10px;font:inherit;font-size:.82rem;cursor:pointer;
}
.ap-ejem[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- buscador de leyes ---------- */
.buscador{position:relative;max-width:720px;margin:0 auto 26px}
.buscador input{
  width:100%;padding:16px 20px 16px 48px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);font-size:1rem;font-family:inherit;
}
.buscador input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(176,132,50,.13)}
.buscador .lupa{position:absolute;left:19px;top:50%;transform:translateY(-50%);opacity:.45}
.resultados{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  max-height:340px;overflow:auto;z-index:30;display:none;
}
.resultados.abierto{display:block}
.res-item{padding:12px 18px;cursor:pointer;border-bottom:1px solid #efe9dc;display:flex;gap:12px;align-items:flex-start}
.res-item:last-child{border-bottom:none}
.res-item:hover,.res-item.activo{background:#f7f2e8}
.res-item .r-n{font-family:var(--serif);font-weight:700;color:var(--gold);white-space:nowrap;font-size:.9rem;min-width:120px}
.res-item .r-d{font-size:.88rem;color:#4a4842}
.res-item .r-m{font-size:.72rem;color:var(--muted);display:block;margin-top:2px}
.res-vacio{padding:18px;text-align:center;color:var(--muted);font-size:.9rem}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.slot{
  background:var(--paper);border:1.5px dashed var(--line);border-radius:12px;padding:16px;
  min-height:104px;display:flex;flex-direction:column;justify-content:center;position:relative;
}
.slot.lleno{border-style:solid;border-color:var(--gold-soft);background:#fffdf7}
.slot .s-num{position:absolute;top:10px;left:14px;font-family:var(--serif);font-size:.72rem;color:var(--gold);letter-spacing:.14em}
.slot .s-vacio{color:#b3aa98;font-size:.9rem;text-align:center;font-style:italic}
.slot .s-n{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:.95rem;margin-top:12px}
.slot .s-d{font-size:.85rem;color:#4a4842;line-height:1.35}
.slot .quitar{
  position:absolute;top:8px;right:8px;border:none;background:none;cursor:pointer;
  color:var(--muted);font-size:1.05rem;line-height:1;padding:4px 6px;border-radius:6px;
}
.slot .quitar:hover{background:#f0e8d8;color:var(--danger)}

/* ---------- configurador de portada ---------- */
.conf{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:42px;align-items:start}
/* La tapa queda pegada al scroll mientras se recorren los controles. Se limita
   a lo que hay de pantalla entre el encabezado y la barra de pagar —que es
   fija y antes le cortaba el pie— y la tapa se achica sola para caber. */
.conf-preview{position:sticky;top:118px;width:100%;max-width:330px;margin-inline:auto}
/* --tapa-max lo mide el guion: es el alto que queda entre el encabezado y la
   barra de pagar, que es fija y antes le cortaba el pie a la tapa. La tapa se
   angosta hasta caber en ese alto, conservando su proporción. */
.conf-preview .portada-wrap{
  width:min(100%, calc(var(--tapa-max, 999px) * 1536 / 2156));
  margin-inline:auto;
}
.conf-controles{display:grid;gap:22px}

/* ---------- las pestañas de la personalización ----------
   Los once recuadros de controles iban uno tras otro en una sola columna: en
   el teléfono eran cinco pantallas de scroll y no se veía cuánto faltaba.
   Agrupados por lo que decide cada uno —el fondo, los textos, los elementos y
   el formato— se mira uno a la vez. Se reusa el aspecto de las pestañas del
   catálogo para que se lean como lo mismo, ocupando la columna entera. */
.conf-secciones{display:grid;gap:16px}
.conf-tabs{max-width:none;margin:0}
.conf-grupo{display:grid;gap:22px}
.conf-grupo-pie{
  margin:0 0 -6px;font-size:.82rem;color:var(--muted);text-align:center;
}

.campo{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.campo>label,.campo .campo-tit{
  display:block;font-family:var(--serif);font-size:1.1rem;color:var(--navy);margin-bottom:.55rem;font-weight:600;
}
.campo .ayuda{font-size:.83rem;color:var(--muted);margin:-.2rem 0 .8rem}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea,.campo select{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);
}
.campo textarea{min-height:92px;resize:vertical;line-height:1.5}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,132,50,.13)}
.campo .cuenta{font-size:.75rem;color:var(--muted);text-align:right;margin-top:4px}

/* paleta tipo paint */
.paleta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.swatch{
  width:38px;height:38px;border-radius:9px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.15s;
}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px rgba(22,41,74,.16)}
.picker{margin-bottom:14px}
.picker-area{
  position:relative;height:138px;border-radius:10px;cursor:crosshair;touch-action:none;
  border:1px solid var(--line);overflow:hidden;
  background:
    linear-gradient(to top,#000,rgba(0,0,0,0)),
    linear-gradient(to right,#fff,hsl(var(--hue,340) 100% 50%));
}
.picker-area:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.picker-dot{
  position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);pointer-events:none;
}
.picker-hue{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:999px;
  margin-top:12px;border:1px solid var(--line);cursor:pointer;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.picker-hue::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
.picker-hue::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
.color-libre{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.color-muestra{
  width:40px;height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--elegido,#7B1E3C);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex-shrink:0;
}
.color-libre .hex{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:112px;text-transform:uppercase;
}

/* segmentos (radio visual) */
.segmento{display:flex;gap:8px;flex-wrap:wrap}
.seg{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;
  cursor:pointer;font-size:.88rem;color:var(--navy);transition:.15s;
}
.seg:hover{border-color:var(--gold-soft)}
.seg[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg .punto{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);vertical-align:-1px}

/* subida de imagen */
.dropzone{
  border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;
  cursor:pointer;background:#fff;transition:.15s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--gold);background:#fffaf0}
.dropzone small{display:block;color:var(--muted);font-size:.8rem;margin-top:6px}
.img-elegida{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.85rem}
.img-elegida img{width:46px;height:62px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* ---------- LA PORTADA DINÁMICA ----------
   Proporciones medidas sobre la maqueta original (TAPAS (4).pdf, A5):
   marco al 13,94% del ancho, 9,42% arriba y 10,44% abajo; reglas al 64,5%
   del ancho interior; el detalle va fuera del marco. Tipografía Alike.      */
.portada-wrap{position:relative}
/* La sombra va con box-shadow y no con filter: drop-shadow.
   Un `filter` obliga al navegador a repintar la tapa por otro camino, y en
   Safari de iPhone dejaba franjas de píxeles viejos —las «líneas fantasma»—
   al mover el título o el detalle y volverlos a su sitio. La tapa es un
   rectángulo redondeado, así que box-shadow da el mismo resultado. */
.portada-shadow{filter:none}
.portada{
  /* la proporción real de la tapa terminada: 153,6 x 215,6 mm */
  position:relative;aspect-ratio:1536/2156;width:100%;overflow:hidden;
  border-radius:3px 8px 8px 3px;
  box-shadow:0 24px 46px rgba(22,41,74,.28);
  font-family:var(--tapa);
  container-type:inline-size;
  isolation:isolate;
}
.portada .fondo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.portada .scrim{position:absolute;inset:0;z-index:1;background:var(--pcolor);opacity:var(--pscrim,0)}
.portada .lustre{position:absolute;inset:0;z-index:4;pointer-events:none}
.portada[data-laminado="glossy"] .lustre{
  background:linear-gradient(112deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.09) 46%,rgba(255,255,255,.02) 56%,rgba(255,255,255,0) 70%);
}
.portada[data-laminado="mate"] .lustre{
  background:linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 62%);
}

/* 3 corridas de 3 hoyos */
.espiral{position:absolute;left:0;top:0;bottom:0;width:7.4%;z-index:5;pointer-events:none}
.espiral i{
  position:absolute;left:30%;width:46%;aspect-ratio:1;border-radius:50%;
  background:rgba(0,0,0,.38);box-shadow:inset 0 .5px 1.5px rgba(0,0,0,.5);
  transform:translateY(-50%);
}
.espiral i b{
  position:absolute;left:-125%;top:24%;width:305%;height:52%;border-radius:999px;
  background:linear-gradient(180deg,var(--esp-hi),var(--esp-lo));
  box-shadow:0 .5px 1.5px rgba(0,0,0,.4);
}

.portada .marco{
  position:absolute;top:9.42%;left:13.94%;right:13.94%;bottom:10.44%;
  border:1px solid var(--ptinta);z-index:3;pointer-events:none;
}
.portada[data-marco="no"] .marco{display:none}
.portada .contenido{
  position:absolute;top:9.42%;left:13.94%;right:13.94%;bottom:10.44%;z-index:3;
  /* capa propia: el bloque se mueve con los deslizadores y así el navegador
     repinta la zona entera en vez de dejar restos */
  transform:translateZ(0);backface-visibility:hidden;
  color:var(--ptinta);display:flex;flex-direction:column;align-items:center;
  text-align:center;overflow:hidden;
}

/* El espaciador de arriba lo usa la contratapa, que sí deja mover su detalle;
   en la portada va en cero. El de abajo es elástico y mantiene el emblema
   pegado al pie del marco. */
.p-hueco-arriba{flex:0 0 auto;height:calc(var(--posv,0) * 1cqw)}
/* Los dos huecos que rodean el listado crecen igual, así queda a la misma
   distancia del subtítulo que del emblema. */
.p-hueco-medio,
.p-hueco-abajo{flex:1 1 0;min-height:0}

/* En los códigos el apéndice no se centra: arranca justo bajo el subtítulo
   y lo que sobra queda todo abajo, antes del emblema. */
.portada[data-lista="pegada"] .p-hueco-medio{flex:0 0 0}
.p-bloque{
  flex:0 0 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;
}

.p-republica{
  font-size:calc(2.76cqw * var(--esc,1));letter-spacing:.055em;line-height:1;
  margin:4.7cqw 0 0;
}
.p-titulo{
  --ft:1;
  font-size:calc(6.34cqw * var(--ft) * var(--esc,1));line-height:1.13;font-weight:400;
  margin:4.74cqw 0 0;max-width:100%;word-break:break-word;white-space:pre-line;
}
/* el nombre de la ley, bajo su número, cuando el compendio es de una sola */
.p-titulo-ley{
  font-size:calc(3.3cqw * var(--esc,1));line-height:1.25;margin:1.6cqw 0 0;
  max-width:92%;text-wrap:balance;
}
.p-reglas{width:57%;margin:2.96cqw 0 0}
/* Un código sin apéndice: el bloque baja y el subtítulo se separa algo más
   del título. Los mismos números que CODIGO_SOLO en tapa-pdf.js. */
.portada[data-solo="si"] .contenido{padding-top:3.2cqw}
.portada[data-solo="si"] .p-reglas{margin-top:4.66cqw}
.p-regla{height:1px;background:var(--ptinta);opacity:.95}
.p-subtitulo{
  font-style:italic;text-transform:uppercase;
  font-size:calc(1.74cqw * var(--esc,1));letter-spacing:.06em;line-height:1;padding:1.15cqw 0;
}
/* Un año solo, entre las dos líneas, se pierde con el cuerpo del subtítulo
   corriente: va más grande. */
.p-subtitulo[data-anio="si"]{font-size:calc(2.6cqw * var(--esc,1))}
.p-normas{
  --fs:1;
  /* El emblema manda: su sitio al pie del marco es el tope y no se mueve. Si el
     listado no cabe —muchas leyes, o el texto agrandado— cede el listado, que
     antes era `flex:0 0 auto` y empujaba al emblema fuera del recuadro, donde
     quedaba cortado por el recorte de .contenido. */
  flex:0 1 auto;min-height:0;overflow:hidden;
  /* el mismo aire arriba y abajo: es el mínimo que se respeta aunque el
     listado crezca hasta llenar el espacio */
  /* algo más angosto que el recuadro: los nombres largos de las leyes no
     tienen que llegar hasta la línea */
  /* como en la maqueta de imprenta: cuelga del subtítulo, a renglón seguido */
  margin:calc(.7cqw * var(--fs)) auto;width:88%;
  display:flex;flex-direction:column;gap:0;
}
/* Interlínea medida en la maqueta de imprenta: 11,1 pt por línea a 8,4 pt de
   letra, o sea 1,31. Con menos, la vista previa cabía más que el PDF y los dos
   elegían tamaños distintos. */
.p-norma .pn-n{font-weight:700;font-size:calc(1.86cqw * var(--fs));line-height:1.43;letter-spacing:.01em}
.p-norma .pn-d{font-size:calc(1.86cqw * var(--fs));line-height:1.43;margin-top:0}

.p-emblema{
  margin-bottom:.97cqw;width:34.5cqw;
  flex-shrink:0;line-height:0;display:flex;justify-content:center;
}
.p-emblema svg{width:100%;height:auto;display:block}
.p-emblema[data-emblema="justicia"]{width:100%;height:31.3cqw}
.p-emblema[data-emblema="justicia"] svg{width:auto;height:100%}
.p-emblema[data-emblema="ninguno"]{display:none}

.p-notas{
  /* La primera línea queda centrada sobre el borde de abajo del recuadro
     (89,56%); la segunda cae debajo. Recién con la tercera sube el bloque
     entero, lo justo para no salirse de la tapa. --notas-top lo calcula el
     sitio, porque depende de cuántas líneas haya y de su alto. */
  position:absolute;left:8%;right:8%;top:var(--notas-top,89.56%);z-index:3;
  color:var(--ptinta);text-align:center;font-family:var(--tapa);
  /* --esc lo mueve la clienta; --fn lo ajusta el sitio para que el bloque
     quepa entre el recuadro y el borde de la tapa por muchas líneas que sean */
  font-weight:400;font-size:calc(2.45cqw * var(--esc,1) * var(--fn,1));
  line-height:1.18;letter-spacing:.005em;
  white-space:pre-line;
}
.p-notas:empty{display:none}

/* ── contratapa ───────────────────────────────────────────────────────────
   Mismo fondo que la portada. El espiral va al otro lado, porque el libro
   se mira por el reverso.                                                   */
.contratapa .espiral{left:auto;right:0}
.contratapa .espiral i{left:24%}
.c-detalle{
  flex:0 0 auto;width:100%;margin-top:4.7cqw;
  font-weight:700;font-size:calc(2.78cqw * var(--esc,1));line-height:1.18;letter-spacing:.005em;
  white-space:pre-line;text-align:center;
}
.c-detalle:empty{display:none}
.seg-cara{margin:0 auto 12px;max-width:330px}

.portada-pie{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.78rem;color:var(--muted);margin-top:14px;
}
.portada-pie b{color:var(--navy);font-weight:600}

/* ---------- resumen / carrito ---------- */
.col-pago{position:sticky;top:118px;display:grid;gap:16px}
.resumen{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;
}
.resumen h3{margin-bottom:.6em}
.linea{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dotted #e6dfd0;font-size:.92rem}
.linea:last-of-type{border-bottom:none}
.linea .l-desc{color:#4a4842}
.linea .l-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:2px solid var(--navy);
}
.total .t-lab{font-family:var(--serif);font-size:1.15rem}
.total .t-val{font-family:var(--serif);font-size:1.9rem;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}

/* barra flotante */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--navy);color:#fff;
  transform:translateY(105%);transition:transform .28s ease;
}
.barra.visible{transform:none}
.barra-in{display:flex;align-items:center;gap:18px;padding:12px 22px;max-width:var(--wrap);margin:0 auto;flex-wrap:wrap}
.barra .b-desc{font-size:.88rem;opacity:.85;flex:1;min-width:180px}
.barra .b-total{font-family:var(--serif);font-size:1.4rem;font-weight:600}

/* Estando ya en la personalización, la barra sobra casi entera: «Personalizar»
   lleva justo donde estás y el precio se ve más arriba. Queda solo el paso
   siguiente, y de paso la barra ocupa la mitad de alto en el teléfono. */
.barra.solo-pagar .b-desc,
.barra.solo-pagar .b-total,
.barra.solo-pagar #barraPersonalizar{display:none}
.barra.solo-pagar .barra-in{justify-content:center;padding:10px 22px}
.barra.solo-pagar .barra-in .btn{flex:1;max-width:420px;text-align:center}

/* ---------- formulario envío ---------- */
.form-envio{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-envio .full{grid-column:1/-1}
.form-envio label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:5px}
.form-envio input,.form-envio select,.form-envio textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.95rem;background:#fff;
}
.form-envio input:focus,.form-envio select:focus,.form-envio textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,132,50,.13)}
.form-envio .error{border-color:var(--danger);background:#fff6f5}
.msg-error{color:var(--danger);font-size:.82rem;margin-top:5px;display:none}
.msg-error.visible{display:block}

/* ---------- pago ---------- */
.pago-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;text-align:center;
}
.pago-box h3{margin-bottom:.25em}
.pago-btn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  width:100%;background:#fff;border:2px solid var(--navy);color:var(--navy);
  border-radius:14px;padding:20px 22px;font-weight:700;font-size:1.1rem;cursor:pointer;
  transition:.18s;
}
.pago-btn:hover:not(:disabled){
  background:var(--navy);color:#fff;
  box-shadow:0 8px 24px rgba(22,41,74,.22);transform:translateY(-1px);
}
img.pago-logo{width:132px;height:auto;display:block}
.pago-btn .wp-txt{font-weight:600}
.pago-btn:hover img.pago-logo{
  filter:brightness(0) invert(1);   /* el logo pasa a blanco sobre el fondo azul */
}
.pago-nota{font-size:.82rem;color:var(--muted);margin-top:14px}

/* ---------- garantía ---------- */
.garantia{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.garantia-sello{
  width:132px;height:132px;border-radius:50%;border:2px solid var(--gold);
  display:grid;place-items:center;text-align:center;flex-shrink:0;
  font-family:var(--serif);color:var(--gold);line-height:1.1;
}
.garantia-sello b{display:block;font-size:2.6rem}
.garantia-sello span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.paso{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:18px;min-width:0}
.paso b{display:block;font-family:var(--serif);color:var(--gold-soft);font-size:1.5rem;margin-bottom:4px}
.paso p{margin:0;font-size:.9rem;color:#d3cec3;overflow-wrap:break-word}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:20px 44px 20px 0;font-size:1.06rem;font-family:var(--serif);font-weight:600;
  color:var(--navy);position:relative;line-height:1.3;
}
.faq-q::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--gold);transition:.2s;font-family:var(--sans);font-weight:300;
}
.faq-item.abierto .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.abierto .faq-a{max-height:760px}
.faq-a p{margin:0 0 16px;color:#4c4a45;font-size:.96rem}
.faq-a ul{margin:0 0 16px;padding-left:20px;color:#4c4a45;font-size:.96rem}
.faq-a li{margin-bottom:6px}

/* ---------- contacto ---------- */
.contacto-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  /* Las que haya, repartidas parejo: eran tres columnas fijas y al sacar una
     quedaba un hueco a la derecha. */
  padding:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px;text-align:center;
}
.contacto-item a{
  text-decoration:none;color:var(--navy);font-weight:600;font-size:1.02rem;
  border-bottom:1px solid transparent;transition:.15s;word-break:break-word;
}
.contacto-item a:hover{border-color:var(--gold);color:var(--gold)}
.contacto-item .c-lab{
  display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.contacto-item .c-ico{font-size:1.35rem;display:block;margin-bottom:8px}

footer{background:var(--navy);color:#b9b3a6;padding:40px 0;text-align:center;font-size:.85rem}
/* La barra flota sobre el contenido: sin este colchón tapa el final de cada
   sección y hay campos del formulario que no se alcanzan a ver. */
body.con-barra{padding-bottom:calc(var(--alto-barra, 70px) + 12px)}
body.con-barra footer{padding-bottom:calc(40px + var(--alto-barra, 130px) + 48px)}
footer img{width:118px;margin:0 auto 18px;opacity:.95}
footer a{color:var(--gold-soft);text-decoration:none}

/* ---------- utilidades ---------- */
.aviso{
  background:#fffaf0;border:1px solid var(--gold-soft);border-radius:10px;
  padding:14px 18px;font-size:.88rem;color:#6b5a30;margin-bottom:20px;
}
.aviso.error{background:#fff5f4;border-color:#e0a9a3;color:#8a2b22}
.aviso.ok{background:#f2fbf7;border-color:#8fc9b2;color:#1a6349}
.oculto{display:none!important}

/* ---------- banda de pedido simulado ----------
   Se ve en todo momento para que nadie crea que está comprando de verdad. */
.banda-prueba{
  position:sticky;top:0;z-index:120;
  background:repeating-linear-gradient(135deg,#a1281f 0 18px,#8d2019 18px 36px);
  color:#fff;text-align:center;padding:9px 16px;
  font-family:var(--sans);font-size:.86rem;line-height:1.35;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.banda-prueba b{font-size:1.02rem;letter-spacing:.14em}
.banda-prueba span{opacity:.92;font-size:.8rem}
body.modo-prueba nav{top:auto}
@media(max-width:640px){
  .banda-prueba{font-size:.78rem;padding:7px 12px}
  .banda-prueba b{font-size:.9rem;letter-spacing:.1em}
}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--gold-soft);
  color:#6b5a30;border-radius:999px;padding:5px 12px;font-size:.8rem;
}
.chip button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:0 0 0 2px}
.chip button:hover{color:var(--danger)}
.skeleton{background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- gracias ---------- */
.gracias{min-height:100vh;display:grid;place-items:center;background:var(--navy);color:#f3efe6;text-align:center;padding:40px 22px}
.gracias-card{max-width:620px}
.gracias-card img{width:230px;margin:0 auto 34px}
.gracias h1{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem)}
.orden-num{
  display:inline-block;font-family:var(--serif);font-size:2rem;letter-spacing:.1em;
  border:1px solid var(--gold);color:var(--gold-soft);border-radius:12px;padding:14px 34px;margin:22px 0;
}
.gracias p{color:#cfc9bd}
.gracias .btn{margin-top:26px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .conf{grid-template-columns:1fr}

  /* en móvil la portada baja junto con la pantalla mientras se personaliza.
     El bloque deja de ser grilla para que el sticky pueda salir de su fila. */
  #portada .conf{display:block}
  #portada .conf-preview{
    position:sticky;top:72px;z-index:20;
    width:auto;max-width:none;margin:0 -22px 20px;padding:12px 22px 12px;
    background:var(--cream-2);
    box-shadow:0 16px 18px -16px rgba(22,41,74,.45);
    display:flex;flex-direction:column;align-items:center;
  }
  #portada .conf-preview .portada-wrap{width:150px}
  #portada .conf-preview .portada-pie{font-size:.68rem;justify-content:center;gap:12px;margin-top:6px}
  #portada .conf-preview .seg-cara{margin-bottom:8px}
  #portada .conf-preview .seg-cara .seg{padding:7px 14px;font-size:.82rem}

  /* Al bajar a los controles la tapa se encoge y se pone de lado: sigue
     viéndose cómo cambia, pero deja bastante más pantalla para el formulario.
     Vuelve a su tamaño al subir. */
  #portada .conf-preview.compacta{
    flex-direction:row;align-items:center;justify-content:center;gap:16px;
    padding-top:8px;padding-bottom:8px;
  }
  /* como ítem de una fila flexible hay que fijarle la base, no solo el ancho */
  /* margin-inline:auto —que centra la tapa en la columna de escritorio— acá
     empuja el ítem al extremo derecho de la fila y deja un hueco enorme. */
  #portada .conf-preview.compacta .portada-wrap{flex:0 0 84px;width:84px;margin-inline:0}
  #portada .conf-preview.compacta .portada-pie{display:none}
  #portada .conf-preview.compacta .seg-cara{margin:0;max-width:none}
  #portada .conf-preview.compacta .seg-cara .seg{padding:6px 12px;font-size:.78rem}
  #portada .conf-preview .portada-wrap{flex:0 0 auto}
  /* La barra queda pegada justo debajo de la tapa, que también está pegada:
     así se cambia de pestaña sin tener que subir. --alto-previa lo mide el
     guion, porque la tapa se encoge al bajar a los controles. */
  #portada .conf-tabs{
    position:sticky;top:calc(72px + var(--alto-previa, 210px));z-index:19;
    /* `width:auto` y no el 100 % que traen las pestañas del catálogo: con el
       ancho fijado, los márgenes negativos no la ensanchan y la franja quedaba
       44 px corta por la derecha. */
    width:auto;margin:0 -22px;padding:8px 22px;
    background:var(--cream-2);border:0;border-radius:0;
    box-shadow:0 14px 16px -16px rgba(22,41,74,.4);
  }
  #portada .conf-grupo-pie{margin-bottom:0}
  #portada .conf-controles{margin-top:0}
  #envio .conf-preview{position:static;max-width:320px;margin:0 auto 10px}
}

/* en pantallas bajas la portada pegada se achica para no comerse el alto */
/* En pantalla angosta, todo a dos columnas. Antes esto vivía en un media
   query que además exigía poca altura, así que en un teléfono alto no se
   aplicaba y la tira de características se salía de la pantalla. */
@media(max-width:980px){
  .features,.grid-prod,.slots,.pasos{grid-template-columns:repeat(2,1fr)}
  .tira-in{grid-template-columns:repeat(2,1fr)}
  .tira-item{padding:22px 12px}
  .tira-item:nth-child(2){border-right:none}
  .tira-item:nth-child(1),.tira-item:nth-child(2){border-bottom:1px solid var(--line)}
  .contacto-card{grid-template-columns:1fr}
  .resumen{position:static}
  .col-pago{position:static}
}

@media(max-width:980px) and (max-height:760px){
  #portada .conf-preview .portada-wrap{width:150px}
  #portada .conf-preview{padding:10px 22px}
}
@media(max-width:760px){
  .barra .b-desc{display:none}
  .barra-in{justify-content:space-between;gap:10px;padding:10px 16px}
  /* con base 0 y min-width 0 sí se encogen; con «auto» no bajaban de su
     contenido y la barra se salía de la pantalla */
  .barra .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
  .barra .b-total{flex:0 0 auto}
}
@media(max-width:640px){
  html{scroll-padding-top:96px}
  .envio-nota{font-size:.78rem;line-height:1.6}
  .envio-nota .sep{margin:0 .35rem}
  .hero{padding:28px 0 48px}
  .hero-grid{gap:26px}
  .hero-logo{width:92px;margin:0 auto 14px}
  .hero-precio{font-size:1.05rem;margin:.1em 0 .7em}
  section{padding:56px 0}
  .nav-links{
    display:none;position:absolute;top:72px;left:0;right:0;background:var(--cream-2);
    flex-direction:column;gap:0;padding:10px 22px 18px;border-bottom:1px solid var(--line);
  }
  .nav-links.abierto{display:flex}
  .nav-links a{padding:11px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block}
  .features,.grid-prod,.slots,.pasos,.form-envio{grid-template-columns:1fr}
  .garantia{grid-template-columns:1fr;text-align:center;justify-items:center}
  .videos{gap:10px}
  .prod-top{padding:16px 18px 12px}
  /* Cuatro y no tres: se aprieta un poco más para que quepan sin deslizar. */
  #portada .conf-tabs .tab{font-size:.74rem;padding:9px 2px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- selector de compendios del pedido ---------- */
.selector-items{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:26px;
}
.selector-items .si-lab{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-shrink:0;
}
.si-chips{display:flex;gap:8px;flex-wrap:wrap}
.si-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--navy);
  border-radius:999px;padding:8px 14px;font-size:.86rem;font-family:inherit;transition:.15s;
}
.si-chip:hover{border-color:var(--gold-soft)}
.si-chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.si-chip .si-punto{
  width:13px;height:13px;border-radius:3px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.si-chip .si-x{
  border:none;background:none;cursor:pointer;color:inherit;opacity:.55;
  font-size:1.05rem;line-height:1;padding:0 0 0 2px;
}
.si-chip .si-x:hover{opacity:1;color:var(--danger)}

/* ---------- líneas del resumen con botón de quitar ---------- */
.linea .l-quitar{
  border:none;background:none;cursor:pointer;color:var(--muted);
  font-size:1rem;line-height:1;padding:0 0 0 6px;
}
.linea .l-quitar:hover{color:var(--danger)}
.linea.sub{font-size:.84rem;color:var(--muted);padding-top:0;border-bottom:none}
.linea.sub .l-desc{padding-left:14px}

/* botones del bloque de apéndice */
.ap-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ---------- teñido de la foto de tapa ---------- */
.tinte{
  --elegido:#7B1E3C;
  margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);
}
.tinte-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.tinte-cab b{font-family:var(--serif);font-size:1.06rem;color:var(--navy);font-weight:600}
.tinte-cab span{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold);font-size:1rem;
  background:#fffaf0;border:1px solid var(--gold-soft);border-radius:999px;padding:3px 12px;
}
.tinte input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;border-radius:999px;
  border:1px solid var(--line);cursor:pointer;display:block;
  background:linear-gradient(90deg,#efeae0 0%,var(--elegido) 100%);
}
.tinte input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;
  border:3px solid var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:grab;margin-top:0;
}
.tinte input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.06)}
.tinte input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:#fff;
  border:3px solid var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:grab;
}
.tinte input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tinte-pies{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:8px}
.tinte-ayuda{margin:10px 0 0;font-size:.82rem;color:var(--muted);line-height:1.45}

/* ---------- interruptores de los elementos de la tapa ---------- */
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tog{
  position:relative;display:inline-flex;align-items:center;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:10px 16px 10px 50px;font-size:.86rem;transition:.15s;
}
.tog::before{                       /* la pista */
  content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:30px;height:17px;border-radius:999px;background:#ded8ca;transition:.18s;
}
.tog::after{                        /* la perilla */
  content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;transition:.18s;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.tog[aria-pressed="true"]{color:var(--navy);border-color:var(--gold-soft);background:#fffaf0}
.tog[aria-pressed="true"]::before{background:var(--gold)}
.tog[aria-pressed="true"]::after{left:26px}
.tog:hover{border-color:var(--gold-soft)}
.tog:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.toggles-atajos{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- buscador dentro del apéndice ---------- */
.ap-buscador{position:relative;margin-top:10px}
.ap-buscador .lupa{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.4;font-size:.9rem;
}
.ap-buscador .ap-input{
  width:100%;padding:11px 14px 11px 38px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:.88rem;color:var(--ink);
}
.ap-buscador .ap-input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,132,50,.13);
}
.ap-buscador .resultados{max-height:260px}
.ap-buscador .res-item .r-n{min-width:96px;font-size:.84rem}
.ap-buscador .res-item .r-d{font-size:.82rem}
.ap-lleno{margin:10px 0 0;font-size:.82rem;color:var(--muted);font-style:italic}

/* ---------- nota del método de envío ---------- */
.nota-envio{
  margin:8px 0 0;font-size:.83rem;line-height:1.5;color:#5c5850;
  background:#fffaf0;border-left:3px solid var(--gold-soft);border-radius:0 8px 8px 0;
  padding:10px 14px;
}

/* ---------- código de descuento ---------- */
.cupon{
  text-align:left;padding-bottom:18px;margin-bottom:18px;border-bottom:1px dashed var(--line);
}
.cupon label{
  display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:8px;
}
.cupon-fila{display:flex;gap:8px}
.cupon-fila input{
  flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.92rem;background:#fff;text-transform:uppercase;letter-spacing:.04em;
}
.cupon-fila input:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,132,50,.13);
}
.cupon-fila .btn{flex:0 0 auto}
.cupon-msg{margin:8px 0 0;font-size:.83rem;line-height:1.4;min-height:1px}
.cupon-msg.bueno{color:var(--ok);font-weight:600}
.cupon-msg.malo{color:var(--danger)}

/* la línea del descuento en el resumen */
.linea.rebaja .l-desc,
.linea.rebaja .l-val{color:var(--ok);font-weight:600}

/* ---------- muestra chica del formato interior ---------- */
.muestra-mini{margin:14px 0 0;display:flex;gap:14px;align-items:flex-start}
.muestra-mini img{
  width:110px;height:auto;flex:0 0 auto;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.muestra-mini figcaption{
  font-size:.83rem;color:var(--muted);line-height:1.5;padding-top:2px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.muestra-mini figcaption button{
  border:none;background:none;padding:0;cursor:pointer;font-family:inherit;
  color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold-soft);font-size:.82rem;
}
.muestra-mini figcaption button:hover{color:var(--gold)}

/* el cajón que invita a agregar otra ley */
.slot-agregar{
  font:inherit;text-align:left;cursor:pointer;
  border-style:dashed;background:transparent;width:100%;
  transition:.15s;
}
.slot-agregar:hover{border-color:var(--gold);background:#fffdf9}
.slot-agregar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.slot-agregar .s-vacio{color:var(--navy);font-weight:600}

/* ---------- buscador de fotos para la tapa ---------- */
.buscador-fotos{margin:0 0 16px}
.bf-fila{display:flex;gap:8px}
.bf-fila input{flex:1;min-width:0}
.bf-nota{margin:8px 0 0;font-size:.8rem;color:var(--muted);line-height:1.45}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.bf-plegar{
  flex:0 0 auto;width:38px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--navy);cursor:pointer;line-height:1;
}
.bf-plegar:hover{border-color:var(--gold);color:var(--gold)}
.bf-plegar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bf-flecha{display:block;font-size:1.1rem;transition:transform .18s ease}
.bf-plegar[aria-expanded="false"] .bf-flecha{transform:rotate(180deg)}
/* plegada: se esconden las fotos y el «ver más», pero la flecha se queda
   para poder volver a desplegarlas */
.buscador-fotos.plegado .bf-resultados{display:none}
.buscador-fotos.plegado #bfVerMas{display:none}
.bf-resultados{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;margin-top:12px;
}
.bf-resultados:empty{margin-top:0}
.bf-foto{
  position:relative;padding:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;cursor:pointer;background:var(--cream-2);aspect-ratio:148/210;
}
.bf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.bf-foto:hover{border-color:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.bf-foto:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bf-foto[aria-busy="true"]{opacity:.5}
.bf-credito{
  position:absolute;left:0;right:0;bottom:0;background:rgba(22,41,74,.82);color:#fff;
  font-size:.58rem;padding:3px 5px;line-height:1.25;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bf-mas{margin-top:10px;display:flex;gap:8px;justify-content:center;align-items:center}
.bf-o{
  margin:16px 0 10px;font-size:.8rem;color:var(--muted);text-align:center;
  display:flex;align-items:center;gap:10px;
}
.bf-o::before,.bf-o::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- aviso para pedidos a medida por Instagram ---------- */
.aviso-insta{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px dashed var(--gold-soft);border-radius:var(--radius);
  padding:18px 20px;
}
.aviso-insta .ai-ico{color:var(--gold);flex-shrink:0;line-height:0;padding-top:2px}
.aviso-insta p{margin:0;font-size:.92rem;line-height:1.55;color:#4c4a45}
.aviso-insta a{
  color:var(--navy);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--gold-soft);
}
.aviso-insta a:hover{color:var(--gold)}

/* ---------- ventana con la muestra del formato ---------- */
/* Nada de `inset:0`: en el teléfono la barra del navegador tapa la parte de
   abajo de la página, y una ventana centrada sobre el alto completo quedaba con
   los botones justo debajo de esa barra —se veían las tapas y no había con qué
   confirmar—. --alto-visible es lo que de verdad se ve, y lo mantiene al día
   vigilarElTeclado(). Esto ya se hacía con el teclado abierto; hacía falta
   siempre. */
.lupa-modal{
  position:fixed;left:0;right:0;
  top:var(--vv-arriba, 0px);
  height:var(--alto-visible, 100dvh);
  max-height:100dvh;              /* por si la variable dijera de mas */
  z-index:120;display:grid;place-items:center;padding:20px;
}
.lupa-modal[hidden]{display:none}
.lupa-fondo{position:absolute;inset:0;background:rgba(15,24,44,.72);backdrop-filter:blur(3px)}
.lupa-caja{
  position:relative;background:var(--paper);border-radius:16px;padding:18px;
  /* --alto-visible lo fija el guion con el alto que de verdad queda a la vista:
     con el teclado abierto, en el teléfono, no es el de la ventana. */
  max-width:min(560px,92vw);
  /* 40px = el padding de arriba y abajo de .lupa-modal */
  max-height:min(90dvh, calc(var(--alto-visible, 100dvh) - 40px));
  overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;
}
.lupa-cab{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lupa-cab h3{margin:0;font-size:1.25rem}
.lupa-x{
  border:none;background:#efe9dc;color:var(--navy);cursor:pointer;
  width:36px;height:36px;border-radius:50%;font-size:1.4rem;line-height:1;flex-shrink:0;
}
.lupa-x:hover{background:var(--navy);color:#fff}
.lupa-caja img{
  width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;
}
.lupa-pie{margin:0;font-size:.86rem;color:var(--muted);text-align:center}

/* ---------- muestras del interior, lado a lado también en móvil ---------- */
@media(max-width:980px){
  .formatos{grid-template-columns:1fr 1fr;gap:14px}
  .formato-card header{padding:14px 14px 10px;flex-direction:column;gap:2px;align-items:flex-start}
  .formato-card header h3{font-size:1.02rem}
  .formato-card header span{font-size:.76rem}
  .formato-card .muestra{padding:12px}
}
@media(max-width:640px){
  .formatos{gap:10px}
  .formato-card header{padding:12px 12px 8px}
  .formato-card header h3{font-size:.92rem;line-height:1.2}
  .formato-card header span{font-size:.7rem}
  .formato-card .muestra{padding:8px}
}

/* ---------- «procesando», mientras se crea el pedido ---------- */
.procesando{
  position:fixed;inset:0;z-index:200;
  background:rgba(22,41,74,.92);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  font-family:var(--sans);
}
.procesando .rueda{
  width:58px;height:58px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:var(--gold-soft);
  animation:girar .9s linear infinite;
}
.procesando p{margin:0;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase}
.procesando small{margin:0;font-size:.84rem;opacity:.75;max-width:280px;text-align:center;line-height:1.5}
@keyframes girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .procesando .rueda{animation-duration:2.4s}
}

/* ---------- confirmación de los diseños ---------- */
/* La caja no se desplaza: se desplaza solo el cuerpo. Antes se desplazaba
   entera y la cabecera y los botones se quedaban a la vista con
   `position:sticky`, que en Safari falla dentro de un contenedor flex con
   scroll: en el iPhone la ventana salia con las tapas y sin con que confirmar.
   Asi los botones son la ultima fila de la caja y no hay como sacarlos. */
.disenos-caja{max-width:min(760px,94vw);overflow:hidden}
.disenos-caja > .lupa-cab,
.disenos-caja > .disenos-bajada,
.disenos-caja > .disenos-pie{flex:0 0 auto}
.disenos-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.disenos-bajada{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.disenos-lista{
  display:flex;flex-direction:column;gap:22px;
  padding:4px 6px 4px 0;
}
.disenos-item h4{
  margin:0 0 10px;font-size:1rem;color:var(--navy);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  /* los nombres largos se parten en vez de desbordar la ventana */
  min-width:0;overflow-wrap:anywhere;
}
.disenos-item h4 > :first-child{min-width:0}
.disenos-item h4 small{font-weight:400;font-size:.8rem;color:var(--muted)}
/* minmax(0,1fr) y no 1fr: si no, la columna no puede achicarse por debajo del
   contenido y las dos tapas salen de distinto porte. */
.disenos-caras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.disenos-cara{margin:0;min-width:0}
.disenos-cara figcaption{
  margin-top:6px;font-size:.76rem;color:var(--muted);text-align:center;
  letter-spacing:.06em;text-transform:uppercase;
}
.disenos-cara .portada{box-shadow:0 10px 26px rgba(22,41,74,.22)}
.disenos-pie{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.disenos-pie .btn{flex:0 0 auto}
/* En horizontal quedan ~390 px de alto: sin esto las tapas se comen la ventana
   y los botones quedan fuera de la pantalla. */
@media (orientation:landscape) and (max-height:520px){
  .disenos-caja{max-height:calc(var(--alto-visible, 100dvh) - 16px)}
  .disenos-lista{max-height:none}
  .disenos-caja[data-modo="azul"] .disenos-cuerpo{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
  .disenos-caja[data-modo="azul"] .disenos-lista{max-height:none;order:1;position:static}
  .disenos-bajada{display:none}
  .disenos-pie{flex-direction:row-reverse;gap:6px}
  .disenos-pie .btn{flex:1 1 0;width:auto;padding:8px 6px;font-size:.78rem;line-height:1.15}
}

@media(max-width:640px){
  .disenos-lista{max-height:none}
  .disenos-caras{gap:10px}
  /* En una fila y no apilados: el pie va fijo abajo, y apilado se comía media
     ventana justo cuando el teclado deja la mitad. */
  .disenos-pie{flex-direction:row-reverse;gap:6px}
  /* Compactos: antes se llevaban casi un tercio de la pantalla del teléfono */
  .disenos-pie .btn{
    flex:1 1 0;width:auto;padding:9px 6px;font-size:.8rem;line-height:1.15;
    border-radius:999px;
  }
}

/* ---------- sello «Ejemplo» sobre las muestras del interior ----------
   Las páginas que se muestran son de una maqueta real, así que conviene
   dejar claro que son referenciales y no el pedido de la clienta.       */
.sello-ejemplo{
  position:absolute;z-index:2;top:28px;left:28px;pointer-events:none;
  font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);background:rgba(22,41,74,.86);
  padding:5px 11px;border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.muestra-mini{position:relative}
.muestra-mini .sello-ejemplo{
  top:5px;left:5px;font-size:.46rem;letter-spacing:.07em;padding:2px 6px;
}
.lupa-img{position:relative;display:block}
.lupa-img .sello-ejemplo{top:12px;left:12px}

/* ---------- botón de lupa sobre las muestras del interior ---------- */
.formato-card .muestra{position:relative}
.btn-lupa{
  position:absolute;right:28px;bottom:28px;
  border:1px solid var(--line);background:rgba(255,253,249,.94);
  backdrop-filter:blur(4px);color:var(--navy);font-family:inherit;
  border-radius:999px;padding:9px 18px;font-size:.84rem;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.14);transition:.15s;
}
.btn-lupa:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-lupa:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:980px){
  .btn-lupa{right:16px;bottom:16px;padding:7px 13px;font-size:.75rem}
  .formato-card .sello-ejemplo{top:18px;left:18px;font-size:.6rem;padding:4px 9px}
}
@media(max-width:640px){
  .btn-lupa{right:12px;bottom:12px;padding:6px 11px;font-size:.7rem}
  .formato-card .sello-ejemplo{top:13px;left:13px;font-size:.55rem;letter-spacing:.12em;padding:3px 7px}
}

/* ---------- páginas estimadas ---------- */
.pie-paginas{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;
  background:#efe9dc;color:var(--muted);font-size:.72rem;font-weight:600;
}
.pie-paginas:empty{display:none}
.pie-paginas.justo{background:#fdf3e0;color:#8a6a18}
.pie-paginas.excede{background:#fdeceb;color:var(--danger)}
.si-chip .si-pag{
  margin-left:2px;padding:2px 7px;border-radius:999px;font-size:.72rem;
  background:rgba(0,0,0,.08);
}
.si-chip[aria-pressed="true"] .si-pag{background:rgba(255,255,255,.2)}
.si-chip .si-pag.excede{background:#fdeceb;color:var(--danger)}
#avisoPaginas{margin-bottom:16px;font-size:.86rem;line-height:1.5}

/* ---------- contador de páginas ---------- */
.paginas-cuenta{
  margin:6px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45;
}
.paginas-cuenta:empty{display:none}
.paginas-cuenta b{color:var(--navy);font-weight:700}
.paginas-cuenta.justo{color:#8a6a18}
.paginas-cuenta.justo b{color:#8a6a18}
.paginas-cuenta.excede{color:var(--danger);font-weight:600}
.paginas-cuenta.excede b{color:var(--danger)}
#paginasPersonal{margin-bottom:14px;font-size:.95rem}

/* ---------- aviso legal antes de pagar ---------- */
.legal{
  text-align:left;background:#fffaf0;border:1px solid var(--gold-soft);
  border-radius:12px;padding:18px 20px;margin-bottom:22px;
}
.acepto{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  font-size:.86rem;line-height:1.5;color:#3d3b37;transition:.15s;
}
.acepto:hover{border-color:var(--gold-soft)}
.acepto input{
  width:20px;height:20px;flex-shrink:0;margin:1px 0 0;accent-color:var(--navy);cursor:pointer;
}
.acepto a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acepto a:hover{color:var(--gold)}
.acepto.falta{border-color:var(--danger);background:#fff6f5}

/* nota de datos personales */
.nota-datos{
  margin:0;font-size:.8rem;line-height:1.5;color:var(--muted);
  background:#faf7f1;border-radius:8px;padding:11px 14px;
}

/* ---------- letra chica de la garantía ---------- */
.garantia-letra{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
}
.garantia-letra p{
  margin:0 0 10px;font-size:.85rem;line-height:1.6;color:#b9b3a6;overflow-wrap:break-word;
}
.garantia-letra p:last-child{margin-bottom:0}
.garantia-letra strong{color:#d8b877}


/* ---------- sombreado ----------
   El texto va en un span dentro de cada bloque, para que la sombra siga cada
   línea abrazando las palabras. */

/* la fila de colores sacados de la foto: mismo aire que los .seg de al lado */
.paleta-resalte{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.paleta-resalte .pal{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 14px;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  cursor:pointer;font-size:.88rem;color:var(--navy);transition:.15s;
}
.paleta-resalte .pal:hover{border-color:var(--gold-soft)}
.paleta-resalte .pal .punto{
  display:block;width:18px;height:18px;border-radius:50%;margin:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.paleta-resalte .pal[aria-pressed="true"]{
  border-color:var(--navy);box-shadow:0 0 0 2px var(--navy);
}
.paleta-resalte .pal-no[aria-pressed="true"]{background:var(--navy);color:#fff}


/* El mismo color repetido y corrido tres veces, cada vez más tenue. Los pasos
   son cortos para que la sombra se lea pegada a la letra y no como tres copias
   sueltas. Va sin difuminar: así es idéntica a la del PDF de imprenta, que no
   sabe difuminar. */
.portada[data-resaltado="si"] .rz{
  text-shadow:
    var(--ecod1) var(--ecod1) 0 var(--eco1),
    var(--ecod2) var(--ecod2) 0 var(--eco2),
    var(--ecod3) var(--ecod3) 0 var(--eco3);
}
/* La sombra del recuadro es un anillo pegado por fuera de la línea, del grosor
   del eco: `outline` se dibuja siempre fuera de la caja y no ocupa lugar, así
   que no hay forma de que caiga por dentro ni de que tape el trazo blanco.
   Antes iba en un ::before agrandado, y ahí había dos errores: `inset` en un
   hijo absoluto se mide contra la caja de contenido y no contra el borde, de
   modo que el rectángulo nacía ya metido hacia adentro; y un hijo con z-index
   negativo se pinta encima del borde del padre, no debajo. El resultado era la
   sombra montada sobre la línea y asomando por el lado de adentro. Es el mismo
   trazo único y por fuera que dibuja el PDF de imprenta. */
.portada[data-resaltado="si"] .marco{
  --em:max(0.10cqw, 0.8px);
  outline:var(--em) solid var(--eco1);
  outline-offset:0;
}
/* El emblema es una silueta: el halo se hace corriendo el dibujo a los cuatro
   rumbos, que es exactamente lo que hace el PDF. Los drop-shadow se encadenan
   —cada uno sombrea el resultado del anterior— y eso acá conviene: las dos
   primeras copias ensanchan a lo ancho y las dos siguientes ensanchan eso
   mismo a lo alto, así que el contorno queda parejo por los cuatro lados y las
   esquinas se cierran solas.
   Antes era un solo difuminado sin desplazamiento. Difuminar promedia, y sobre
   un grabado de línea fina —el emblema mide 52 px en la vista previa— el color
   se repartía tanto que no se veía halo ninguno. Corrido y casi sin difuminar
   el contorno se lee. */
.portada[data-resaltado="si"] .p-emblema{
  /* El mismo 0,10 % del ancho de la tapa que usan el recuadro y el PDF. En la
     vista previa eso son 0,15 px, que no alcanzan a pintarse, así que lleva un
     mínimo: la pantalla exagera un poco respecto de la impresión, pero muestra
     la decisión que se está tomando, que es para lo que sirve la vista previa. */
  --ecoe:max(0.10cqw, 0.5px);
  /* Un pelo de difuminado para que el contorno no salga escalonado. Corto: al
     encadenarse, cada copia difumina también lo que difuminó la anterior, así
     que lo que se pida acá termina esparciéndose bastante más que eso. */
  --ecob:calc(var(--ecoe) * .35);
  /* Las copias van con el segundo paso del sombreado —el de en medio— y no con
     el primero, porque encadenadas se tapan entre ellas y las opacidades se
     suman: donde se cruzan dos copias de .55 el resultado es .80, que es justo
     lo que pesa la sombra de las letras. Con el primer paso, .80, esos cruces
     llegaban a .96 y el halo quedaba más oscuro que cualquier otra cosa de la
     tapa; sobre el grabado se leía como una mancha. */
  filter:
    drop-shadow(var(--ecoe) 0 var(--ecob) var(--eco2))
    drop-shadow(calc(-1 * var(--ecoe)) 0 var(--ecob) var(--eco2))
    drop-shadow(0 var(--ecoe) var(--ecob) var(--eco2))
    drop-shadow(0 calc(-1 * var(--ecoe)) var(--ecob) var(--eco2));
  transform:translateZ(0);
  backface-visibility:hidden;
}
.portada[data-resaltado="si"] .p-regla{
  box-shadow:
    var(--ecod1) var(--ecod1) 0 var(--eco1),
    var(--ecod2) var(--ecod2) 0 var(--eco2),
    var(--ecod3) var(--ecod3) 0 var(--eco3);
}



/* ---------- el camino corto: modelo azul clásico ----------
   Segundo botón en la tarjeta del producto, y en la ventana de confirmación
   lo mínimo que hay que decidir. */
.ap-acciones .punto-azul{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  background:#020F47;margin-right:7px;vertical-align:-1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.ap-nota-azul{
  flex:1 0 100%;margin:6px 0 0;font-size:.84rem;line-height:1.45;color:var(--muted);
}

/* Con el azul clásico, los controles van al lado de las tapas: así se ve el
   cambio en la imagen mientras se escribe, sin tener que bajar. */
.disenos-caja[data-modo="azul"]{max-width:min(940px,94vw)}
.disenos-caja[data-modo="azul"] .disenos-cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:20px;align-items:start;
}
/* las tapas se llevan la columna ancha aunque en el documento vayan después:
   son lo que hay que mirar */
.disenos-caja[data-modo="azul"] .disenos-lista{order:1;max-height:none}
.disenos-caja[data-modo="azul"] .azul-controles{order:2}

@media (max-width:820px){
  /* Alto definido, no solo un tope: con `max-height` el cuerpo flexible se
     quedaba sin altura que repartir y colapsaba a cero —la ventana del azul
     clásico salía aplastada, con los controles fuera de la caja y el botón
     por encima del borde—. Con una altura concreta, la cabecera y los botones
     toman lo suyo y el resto es del cuerpo. */
  .disenos-caja{height:min(90dvh, calc(var(--alto-visible, 100dvh) - 40px))}
  .disenos-caja[data-modo="azul"] .disenos-cuerpo{grid-template-columns:1fr}
  /* en pantalla angosta las tapas van arriba y se quedan a la vista mientras
     se escribe abajo */
  .disenos-caja[data-modo="azul"] .disenos-lista{
    order:-1;position:sticky;top:0;z-index:2;
    /* Chicas a propósito: son para reconocer la tapa, no para revisarla —eso se
       hace en la confirmación final—. Lo que tiene que caber en pantalla son
       los recuadros de abajo: el título, el emblema y el nombre. */
    max-height:20dvh;
    /* opaca de verdad: sin esto el texto que pasa por detrás se transparentaba
       entre las tapas y los rótulos */
    background:var(--paper);
    padding:6px 0 10px;box-shadow:0 12px 14px -12px rgba(22,41,74,.45);
  }
  .disenos-caja[data-modo="azul"] .disenos-item,
  .disenos-caja[data-modo="azul"] .disenos-cara{background:var(--paper)}
  /* las dos tapas juntas y centradas, para que ocupen poco a lo alto */
  .disenos-caja[data-modo="azul"] .disenos-caras{
    grid-template-columns:repeat(2,minmax(0,88px));justify-content:center;gap:12px;
  }
  .disenos-caja[data-modo="azul"] .disenos-cara figcaption{font-size:.66rem;margin-top:3px}
  .disenos-caja[data-modo="azul"] .disenos-item h4{font-size:.9rem;margin-bottom:6px}
  /* En el teléfono la bajada se lleva tres líneas de las pocas que hay, y lo
     que dice ya lo dicen los propios controles que vienen abajo. */
  .disenos-caja[data-modo="azul"] .disenos-bajada{display:none}
  /* Y el «Azul clásico para X» repite el nombre que está justo encima, sobre
     las tapas: otra fila menos. */
  .disenos-caja[data-modo="azul"] .azul-para{display:none}
  .azul-controles{padding:14px 15px}
}

/* El título y los botones se quedan a la vista aunque el contenido se
   desplace: en el teléfono «Confirmar» quedaba fuera de la caja y había que
   bajar a buscarlo. */
.disenos-caja .lupa-cab{background:var(--paper)}
.disenos-caja .disenos-pie{
  background:var(--paper);padding:10px 0 0;
  /* la sombrita avisa que arriba hay mas cosa que se desplaza */
  box-shadow:0 -12px 14px -12px rgba(22,41,74,.35);
}

/* Con el teclado desplegado iOS desplaza la página para subir el campo, y se
   lleva la ventana flotante fuera de la pantalla. Se la vuelve a anclar al área
   que de verdad se ve, usando lo que informa visualViewport.

   El resto se toca lo mínimo a propósito: esto lo usan personas de 50 y 60
   años, así que no se achica la letra ni se esconden los rótulos. Lo único que
   cede es la altura de las tapas y los textos largos de ayuda. */
body.con-teclado .lupa-modal{
  position:fixed;left:0;right:0;
  top:var(--vv-arriba, 0px);
  height:var(--alto-visible, 100dvh);
  bottom:auto;
  align-items:flex-start;padding:8px 10px;
}
body.con-teclado .lupa-caja{padding:12px 14px;gap:8px;border-radius:14px}
body.con-teclado .disenos-bajada,
body.con-teclado .azul-controles .ayuda,
body.con-teclado .azul-controles .azul-para,
body.con-teclado .disenos-item h4{display:none}
body.con-teclado .disenos-caja .lupa-cab{padding-top:12px;margin-top:-12px;top:-12px}
/* Las tapas ceden altura —medida sobre lo que se ve, no sobre la pantalla— y se
   achican enteras en vez de quedar recortadas a lo ancho. */
/* Con el teclado desplegado quedan unos 340 px de alto. Entre la cabecera, las
   tapas y los botones no sobraba nada y el campo que se estaba escribiendo
   desaparecía por completo. Mientras se escribe, las tapas se guardan: vuelven
   solas al cerrar el teclado, que es cuando se miran. */
body.con-teclado .disenos-caja[data-modo="azul"] .disenos-lista{display:none}

body.con-teclado .disenos-cara figcaption{display:none}
body.con-teclado .azul-controles{padding:12px 0;background:transparent;border:0}
body.con-teclado .disenos-caja .disenos-pie{padding:10px 0 12px;margin-bottom:-12px;bottom:-12px}

.azul-controles{
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:0;
}
.azul-controles .azul-para{
  margin:0 0 12px;font-size:.9rem;color:var(--muted);
}
.azul-controles .azul-para b{color:var(--navy)}
.azul-controles label{
  display:block;font-family:var(--serif);font-size:1.02rem;color:var(--navy);
  font-weight:600;margin-bottom:.35rem;
}
.azul-controles label small{font-weight:400;color:var(--muted)}
.azul-controles .campo-tit{
  display:block;font-family:var(--serif);font-size:1.02rem;color:var(--navy);
  font-weight:600;margin-bottom:.45rem;
}
/* Las dos opciones van lado a lado y no apiladas: en el teléfono cada par se
   llevaba dos filas de las pocas que hay, y entre el emblema y el texto
   interior se comían media ventana. */
.azul-controles .segmento{margin-bottom:14px;flex-wrap:nowrap}
.azul-controles .segmento .seg{
  flex:1 1 0;min-width:0;text-align:center;padding-inline:10px;
  white-space:normal;line-height:1.25;
}
.azul-controles .campo-tit{margin-top:14px}
.azul-controles .azul-pista{
  margin:.35rem 0 0;font-size:.78rem;color:var(--muted);
}
/* Lo opcional, plegado: la ventana abre con las tres decisiones a la vista y
   nada más. Antes eran cinco recuadros seguidos y en el teléfono no cabían. */
.azul-mas{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.azul-mas > summary{
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:.96rem;font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:8px;
}
/* «(opcional)» y el signo se van al canto derecho: pegados al rótulo, en la
   columna angosta del escritorio la línea no alcanzaba y se partía en dos. */
.azul-mas > summary small{margin-left:auto;font-size:.78rem}
.azul-mas > summary::-webkit-details-marker{display:none}
.azul-mas > summary small{font-weight:400;color:var(--muted);white-space:nowrap}
/* el signo avisa que hay algo plegado sin necesitar más palabras */
.azul-mas > summary::after{
  content:"+";margin-left:10px;font-size:1.2rem;line-height:1;color:var(--muted);
}
.azul-mas[open] > summary::after{content:"–"}
.azul-mas > summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.azul-mas > label{margin-top:12px}
/* Los recuadros del azul clásico: hoja crema, borde fino y el cursor en el
   mismo azul de la tapa, para que se vean parte del producto y no un
   formulario cualquiera. */
.campo-lindo{
  width:100%;display:block;
  padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);
  font-family:var(--book);font-size:1rem;line-height:1.5;
  caret-color:#020F47;
  box-shadow:inset 0 1px 2px rgba(22,41,74,.05);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.campo-lindo::placeholder{color:#b3ab98;font-style:italic}
.campo-lindo:hover{border-color:var(--gold-soft)}
.campo-lindo:focus{
  outline:none;background:#fff;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,132,50,.16);
}
textarea.campo-lindo{min-height:64px}

/* El panel del emblema, cuando el emblema está apagado: se atenúa en vez de
   esconderse, para que la página no dé un salto y se vea cuál volvería. */
/* Atenuado, pero se puede usar: elegir un emblema lo vuelve a encender. */
.campo.apagado{opacity:.62}

/* El campo del título del azul clásico, cuando falta */
.campo-lindo.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(161,40,31,.14)}
#errAzulTitulo{margin-top:6px}

.acciones-personal{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;
}


/* aviso al llegar al tope de páginas */
.tope-caja{max-width:min(500px,92vw)}
.tope-texto{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink)}
.tope-texto strong{color:var(--navy)}
/* Bloque, no en línea: en línea el fondo se parte por renglón y el texto se
   ve recortado por arriba y por los lados. */
.tope-caja .tope-destacado{
  display:block;background:#fdf3e0;border-radius:10px;padding:12px 14px;color:#8a6a18;
  line-height:1.55;
}

/* aviso antes de pagar, cuando el pedido lleva un código sin garantía de
   actualización: el mismo estilo del aviso del tope, con una lista en vez de
   un párrafo cuando son varios códigos. */
.garantia-aviso-lista{
  margin:0;padding-left:1.2em;font-size:.95rem;line-height:1.6;color:var(--navy);
  font-weight:600;
}


/* La ventana del tope sirve para dos avisos: cuando el texto no cabe de
   entrada no hay leyes que quitar ni segundo tomo que armar. */
#modalTope[data-motivo="noEntra"] #topeConsejo,
#modalTope[data-motivo="noEntra"] #topeSegundoTomo{display:none}
#modalTope[data-motivo="noEntra"] [data-cerrar-tope].btn-ghost{
  background:var(--gold);color:#fff;border-color:var(--gold);
}


/* Otro ejemplar igual, desde el chip del pedido */
.si-chip .si-mas{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-left:6px;border-radius:50%;
  background:rgba(22,41,74,.10);color:var(--navy);
  font-size:.95rem;line-height:1;font-weight:700;
}
.si-chip .si-mas:hover{background:var(--gold);color:#fff}


/* Al final de la personalización: seguir al pago, o volver arriba a elegir otro */
.acciones-final{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){
  .acciones-final{flex-direction:column-reverse}
  .acciones-final .btn{width:100%}
}


/* ---------- carrito ----------
   Burbuja al costado derecho, sobre la barra de abajo. Se muestra sola cuando
   hay algo en el pedido. */
.carrito-burbuja{
  position:fixed;right:16px;bottom:96px;z-index:90;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(22,41,74,.38);transition:transform .15s;
}
.carrito-burbuja:hover{transform:translateY(-2px)}
/* Con el formulario de envío a la vista la burbuja estorba: tapaba los campos
   y el botón de pagar. Ver esconderCarritoEnElFormulario() en app.js. */
body.en-envio .carrito-burbuja,
body.en-envio .carrito-panel{display:none}
/* Y lo mismo la barra de abajo: en una pantalla corta caía justo encima de un
   campo —según el alto, el RUT o el teléfono— y el toque iba a parar al botón
   de la barra en vez de al campo, así que no se podía escribir nada ahí. En
   este paso la barra no aporta: el total y el botón de pagar están en el
   formulario mismo. */
body.en-envio .barra.visible{transform:translateY(105%)}
.carrito-burbuja .cb-cuenta{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:var(--gold);color:#fff;
  font:700 .78rem/22px var(--sans, inherit);
}
.carrito-panel{
  position:fixed;right:16px;bottom:96px;z-index:95;
  width:min(340px,calc(100vw - 32px));
  max-height:min(70dvh, calc(var(--alto-visible, 100dvh) - 140px));
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  display:flex;flex-direction:column;overflow:hidden;
}
.cp-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.cp-cab h3{margin:0;font-size:1.1rem}
.cp-lista{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 12px}
.cp-item{
  display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;
  border:1px solid transparent;
}
.cp-item.activo{border-color:var(--gold-soft);background:#fbf7ee}
.cp-mini{width:52px;flex:0 0 52px}
.cp-mini .portada-wrap{width:52px}
.cp-mini .portada{width:52px;border-radius:3px;box-shadow:0 4px 10px rgba(22,41,74,.22)}
.cp-datos{flex:1 1 auto;min-width:0}
.cp-nombre{font-weight:600;color:var(--navy);font-size:.9rem;overflow-wrap:anywhere}
.cp-meta{font-size:.8rem;color:var(--muted);margin-top:2px}
.cp-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cp-acciones button{
  border:none;background:none;padding:0;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--navy);text-decoration:underline;
}
.cp-acciones .cp-quitar{color:#9b2c3a}
.cp-pie{flex:0 0 auto;padding:12px 16px 16px;border-top:1px solid var(--line);display:grid;gap:8px}
.cp-total{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem}
.cp-total strong{font-family:var(--serif);font-size:1.3rem;color:var(--navy)}
.cp-nota{margin:0;font-size:.76rem;color:var(--muted)}

@media(max-width:640px){
  /* En el teléfono ocupa el ancho y se apoya en la barra de abajo */
  .carrito-burbuja{right:12px;bottom:84px;width:52px;height:52px}
  .carrito-panel{
    right:8px;left:8px;bottom:84px;width:auto;
    max-height:min(62dvh, calc(var(--alto-visible, 100dvh) - 150px));
  }
}