/* ═══════════════════════════════════════════════════════════════════════════
   RUBRIA PERÚ · PRESENTACIÓN — v1
   Motor y modos del deck de ORCA; paleta de Rubria con la anatomía de formato-presentaciones.md:
   portada y cierre oscuros, interiores claros, una o dos láminas de acento.
   · html.deck — pantalla ancha con JS: una lámina a la vez, con pasos.
   · sin .deck — celular, sin JS o impresión: las láminas se apilan.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* paleta de Rubria (prototipo-rubria/web/sistema.css): riel navy, violeta de acento, lila sobre oscuro */
  --deep:#132649; --mid:#1D396D; --accent:#7447A3; --accent2:#5B3A85;
  --off:#EDEAE3; --crema:#C9B3E6; --violeta:#7447A3; --violeta-piso:#EEE7F6;
  --tinta:#132649; --tinta2:#3E4C66; --linea:rgba(19,38,73,.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --sangra:max(18px,6vw);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t:650ms;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--off);color:var(--tinta);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── la lámina ── */
.lamina{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
  padding:clamp(56px,9vh,104px) var(--sangra);background:var(--off);border-bottom:1px solid var(--linea)}
.lamina.oscura{background:var(--deep);color:var(--off)}
.lamina.acento{background:var(--accent2);color:var(--off)}
.lamina.acento .bajada,.lamina.acento .cuerpo{color:#F3EDF9}
.lamina.blanca{background:#F7F6F2}

/* ── voces ── */
.marca{font-family:var(--mono);font-size:.9rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.oscura .marca,.acento .marca{color:var(--crema)}
.rot{font-family:var(--mono);font-weight:500;font-size:clamp(.66rem,.8vw,.84rem);letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin:0}
.oscura .rot,.acento .rot{color:var(--crema)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
.frase{font-size:clamp(2.3rem,5.4vw,5.4rem);line-height:1.02;max-width:18ch;text-wrap:balance}
.frase.media{font-size:clamp(2rem,4vw,4rem);max-width:22ch}
.frase em,h2 em{font-style:italic;font-weight:300;color:var(--violeta)}
.oscura .frase em,.acento .frase em,.oscura h2 em,.acento h2 em{color:var(--crema)}
h2{font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.06;max-width:24ch;text-wrap:balance}
.bajada{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.35;color:var(--mid);max-width:44ch;margin:0}
.oscura .bajada,.acento .bajada{color:var(--off);opacity:.92}
.cuerpo{font-size:clamp(1rem,1.15vw,1.18rem);line-height:1.6;color:var(--tinta2);max-width:60ch;margin:0}
.oscura .cuerpo,.acento .cuerpo{color:rgba(237,234,227,.86)}
.fuente{font-family:var(--mono);font-size:clamp(.62rem,.72vw,.76rem);letter-spacing:.04em;color:var(--tinta2);opacity:.8;margin:0}
.oscura .fuente,.acento .fuente{color:var(--off);opacity:.65}
.barra-h{height:3px;width:64px;background:var(--accent)}
.oscura .barra-h,.acento .barra-h{background:var(--crema)}
.pila{display:grid;gap:clamp(14px,2.2vh,26px);align-content:center}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:center;width:min(100%,1380px);margin-inline:auto}
.dos.mitad{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dos.portada{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.dos.portada .tel{justify-self:center;--tel-w:290px}
.ancho{width:min(100%,1240px);margin-inline:auto}

/* ── piezas ── */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(12px,1.4vw,20px);margin:0;padding:0;list-style:none}
.tarjetas li{background:#fff;border-left:4px solid var(--violeta);border-radius:0 12px 12px 0;padding:clamp(14px,1.6vw,22px);font-size:clamp(.95rem,1.05vw,1.08rem);line-height:1.5;color:var(--tinta2)}
.tarjetas li b{display:block;color:var(--tinta);font-weight:600;margin-bottom:4px}
.oscura .tarjetas li,.acento .tarjetas li{background:rgba(255,255,255,.07);border-left-color:var(--crema);color:rgba(237,234,227,.88)}
.oscura .tarjetas li b,.acento .tarjetas li b{color:var(--crema)}
.cadena{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;padding:0;list-style:none}
.cadena li{font-family:var(--mono);font-size:clamp(.7rem,.95vw,.95rem);letter-spacing:.06em;padding:.75em 1.1em;border-radius:999px;background:#fff;border:1px solid var(--linea)}
.cadena li.flecha{background:none;border:0;padding:0;color:var(--accent2)}
.cadena li.doc{background:var(--violeta);color:#fff;border-color:var(--violeta)}
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.cifras div{border:1px solid var(--linea);border-radius:14px;padding:clamp(14px,1.6vw,22px);background:#fff}
.cifras b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(1.8rem,3vw,2.8rem);color:var(--accent2);line-height:1}
.cifras span{font-size:.92rem;color:var(--tinta2)}
.niveles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.niveles div{border-radius:14px;padding:clamp(12px,1.4vw,20px);background:rgba(255,255,255,.08);border:1px solid rgba(237,234,227,.2)}
.niveles b{display:block;font-family:var(--mono);font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:500;color:var(--crema);line-height:1;margin-bottom:6px}
.niveles span{font-size:.92rem;color:rgba(237,234,227,.85)}
table{border-collapse:collapse;width:100%;font-size:clamp(.88rem,1vw,1.02rem)}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.acento th,.oscura th{color:var(--crema)} .acento td,.oscura td{border-color:rgba(237,234,227,.2)}
.chip{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.35em .7em;border-radius:999px;white-space:nowrap}
.chip.reusa{background:#EAF3F1;color:#1F5B57} .chip.ajusta{background:#F8F0E1;color:#7A5518} .chip.nuevo{background:var(--violeta-piso);color:#5B3A85}
.abrir{display:inline-flex;align-items:center;gap:.6em;width:max-content;font-family:var(--mono);font-weight:500;font-size:clamp(.7rem,.85vw,.9rem);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:.95em 1.3em;border-radius:999px;background:var(--violeta);color:#fff}
.abrir::after{content:"→";letter-spacing:0}
.oscura .abrir{background:var(--crema);color:var(--deep)}
.pantalla{border-radius:12px;overflow:hidden;border:1px solid var(--linea);background:#fff;box-shadow:0 40px 90px -40px rgba(19,38,73,.45)}
.pantalla::before{content:"";display:block;height:24px;border-bottom:1px solid var(--linea);background:
  radial-gradient(circle at 16px 12px,#D5D2CB 4px,transparent 4.5px),radial-gradient(circle at 32px 12px,#D5D2CB 4px,transparent 4.5px),radial-gradient(circle at 48px 12px,#D5D2CB 4px,transparent 4.5px),#F2F0EB}
.pantalla img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.tel{width:min(100%,var(--tel-w,270px));aspect-ratio:390/844;border-radius:34px;padding:7px;background:#0d1626;overflow:hidden;box-shadow:0 40px 90px -30px rgba(19,38,73,.55)}
.tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:28px}
.duo{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,14vw,210px);gap:clamp(14px,2vw,28px);align-items:end}
.duo .tel{width:100%}
.pie-op{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0}
.pie-op a{text-decoration:none}

/* ── el ciclo (motor de ORCA) ── */
.ciclo-escena{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(16px,2vw,40px);align-items:center;width:min(100%,1380px);margin-inline:auto}
.ciclo{width:100%;max-height:76svh;aspect-ratio:1360/1040;overflow:visible}
.ciclo .arco{fill:none;stroke:var(--violeta);stroke-width:2;stroke-linecap:round}
.ciclo .arco-2{fill:none;stroke:#349891;stroke-width:1.4;stroke-dasharray:2 8;stroke-linecap:round;opacity:.8}
.ciclo .punto{fill:var(--off);stroke:var(--accent2);stroke-width:2}
.ciclo text{font-family:var(--mono);font-weight:500;font-size:25px;letter-spacing:.12em;text-transform:uppercase;fill:var(--tinta)}
.ciclo text.dentro{fill:#1F5B57;font-size:21px}
.ciclo-lista{columns:2;gap:2em;margin:0;padding-left:1.4em;font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta2)}

/* ═════════ modo deck ═════════ */
html.deck,html.deck body{height:100%;overflow:hidden}
html.deck .lamina{position:fixed;inset:0;min-height:0;border:0;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)}
html.deck .lamina.activa{opacity:1;visibility:visible;transform:none;transition-delay:0s}
html.deck [data-paso]{opacity:0;transform:translateY(12px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
html.deck [data-paso].visto{opacity:1;transform:none}
html.deck .ciclo .arco,html.deck .ciclo .arco-2{transition:stroke-dashoffset 1400ms var(--ease)}
.hilo{display:none}
html.deck .hilo{display:block;position:fixed;left:0;top:0;height:3px;width:100%;z-index:10;background:var(--accent);transform-origin:left;transform:scaleX(var(--avance,0));transition:transform var(--t) var(--ease)}
.ayuda{display:none}
html.deck .ayuda{display:block;position:fixed;right:18px;bottom:14px;z-index:10;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2);opacity:.6;transition:opacity .6s}
html.deck.andando .ayuda{opacity:0}
.credito{display:none}
html.deck .credito{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:9;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#8A93A6;opacity:.8;text-decoration:none}

/* ── barra de edición (molde editable de la casa) ── */
.barra-ed{position:fixed;left:14px;bottom:12px;z-index:20;display:flex;align-items:center;gap:8px;font-family:var(--mono);opacity:.55;transition:opacity .3s}
.barra-ed:hover,.barra-ed:focus-within,html.editando .barra-ed{opacity:1}
.barra-ed button{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--off);background:rgba(19,38,73,.88);border:1px solid rgba(237,234,227,.2);border-radius:999px;padding:.8em 1.1em;cursor:pointer}
.barra-ed .primario{background:var(--deep)}
.barra-ed .estado{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema)}
.barra-ed button:not(.primario),.barra-ed .estado{display:none}
html.editando .barra-ed button,html.editando .barra-ed .estado{display:inline-block}
html.editando .barra-ed{left:0;right:0;bottom:0;padding:10px 16px;background:rgba(19,38,73,.96)}
html.editando .barra-ed .estado{margin-right:auto}
html.editando .ayuda,html.editando .credito{display:none}
html.editando main:focus{outline:none}
html.editando .lamina.activa [data-paso]{opacity:1!important;transform:none!important}
html.editando .lamina.activa{overflow-y:auto;align-content:start}
html.editando [contenteditable] :is(h1,h2,p,li,td,th,span):hover{outline:1px dashed rgba(52,152,145,.6);outline-offset:4px;cursor:text}
:fullscreen .barra-ed{display:none}

/* ── celular y lectura de corrido ── */
@media (max-width:819px){
  .dos,.dos.mitad,.dos.portada,.ciclo-escena{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
  .niveles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:1fr}
  .tel{--tel-w:220px}
  .tabla{overflow-x:auto}
  .tabla table{min-width:560px}
}
@media (prefers-reduced-motion:reduce){
  :root{--t:1ms}
  html.deck [data-paso]{transition-delay:0s}
  html.deck .ciclo .arco,html.deck .ciclo .arco-2{transition:none}
}
@media print{ .barra-ed,.ayuda,.hilo,.credito{display:none} .lamina{break-inside:avoid;min-height:auto} }