/* ============================================================
   Copy Nova — una imprenta en pantalla
   Tintas de proceso CMYK sobre papel blanco.
   ============================================================ */
@font-face{font-family:"Archivo CN"; src:url("../fonts/archivo.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap}
:root{
  --c:#00aeef; --m:#ec008c; --y:#fff200; --k:#121212; --estrella:#e4002b;
  --papel:#ffffff; --papel-2:#f4f4f1; --gris:#62656b; --linea:#e2e2de;
  --wa:#1fb855;
  --display:"Archivo CN","Arial Black",Arial,sans-serif;
  --texto:"Archivo CN",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1240px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0; background:var(--papel); color:var(--k); font:400 1.0625rem/1.6 var(--texto)}
h1,h2,h3{margin:0; font-family:var(--display)}
h2{font-size:clamp(2.4rem,6vw,4.8rem); font-weight:850; font-stretch:115%; font-variation-settings:"wdth" 115; line-height:.95; letter-spacing:-.035em}
h3{font-size:1.25rem; font-weight:750; font-stretch:105%}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--c); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.saltar{position:absolute; left:-999px; background:var(--k); color:#fff; padding:.6rem 1rem; z-index:99}
.saltar:focus{left:1rem; top:1rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--gris); max-width:42ch; margin-top:1.2rem}
.folio{font-size:.95rem; font-weight:600; color:var(--gris); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem}
.folio::before{content:""; flex:none; width:26px; height:8px; background:linear-gradient(90deg,var(--c) 0 25%,var(--m) 0 50%,var(--y) 0 75%,var(--k) 0)}
small{font-size:.8rem; color:var(--gris); font-weight:500}
.centro{text-align:center}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.6rem; border-radius:999px;
  font:700 1rem var(--texto); text-decoration:none; border:2px solid var(--k); cursor:pointer;
  transition:transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s}
.btn-tinta{background:var(--k); color:#fff}
.btn-linea{background:#fff; color:var(--k)}
.btn:hover{transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--c), 6px 6px 0 var(--m)}
.btn:active{transform:none; box-shadow:none}
.btn.ancho{width:100%}

/* ---------- Barra ---------- */
.barra{position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; gap:2rem;
  padding:calc(.8rem + env(safe-area-inset-top,0px)) clamp(1rem,3vw,2.2rem) .8rem; transition:background .25s, box-shadow .25s}
.barra.llena{background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--linea)}
.marca{display:flex; align-items:center; gap:.6rem; text-decoration:none; font:850 1.25rem var(--display); font-stretch:115%; letter-spacing:-.02em; position:relative; z-index:2}
.marca img{border-radius:10px}
.marca-c{width:36px; height:36px; border-radius:50%; background:conic-gradient(var(--c) 0 25%,var(--m) 0 50%,var(--y) 0 75%,var(--k) 0);
  -webkit-mask:radial-gradient(circle,transparent 8px,#000 9px); mask:radial-gradient(circle,transparent 8px,#000 9px)}
nav{display:flex; gap:1.6rem; margin-left:auto}
nav a{text-decoration:none; font-weight:600; font-size:.95rem; position:relative}
nav a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--m); transform:scaleX(0); transform-origin:left; transition:transform .2s}
nav a:hover::after{transform:scaleX(1)}
.barra-wa{background:var(--k); color:#fff; text-decoration:none; font-weight:700; font-size:.92rem; padding:.6rem 1.1rem; border-radius:999px; position:relative; z-index:2}
.menu-btn{display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:10px; position:relative; z-index:2}
.menu-btn span:not(.sr){display:block; height:2.5px; background:var(--k); margin:7px 0; transition:transform .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}
@media (max-width:900px){
  .barra{gap:.8rem}
  .barra-wa{margin-left:auto; padding:.5rem .9rem}
  .menu-btn{display:block}
  nav{position:fixed; inset:0; flex-direction:column; justify-content:center; gap:.4rem; margin:0;
    padding:0 2rem; background:var(--papel); opacity:0; pointer-events:none; transition:opacity .25s}
  nav.abierto{opacity:1; pointer-events:auto}
  nav a{font:850 2.6rem/1.2 var(--display); font-stretch:115%; letter-spacing:-.03em}
}

/* ============================================================
   PORTADA — las cuatro planchas de tinta
   ============================================================ */
.portada{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:7rem clamp(1rem,4vw,3rem) 5.5rem; overflow:hidden; isolation:isolate}
.trama{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle, var(--m) 1.6px, transparent 2.2px) 0 0/14px 14px,
             radial-gradient(circle, var(--c) 1.6px, transparent 2.2px) 7px 7px/14px 14px;
  opacity:.22;
  -webkit-mask:radial-gradient(ellipse 55% 65% at 100% 0%, #000, transparent 72%);
          mask:radial-gradient(ellipse 55% 65% at 100% 0%, #000, transparent 72%)}
.tintas{position:absolute; z-index:-1; right:-6vw; top:50%; width:min(48vw,640px); aspect-ratio:1; translate:0 -50%}
.tintas i{position:absolute; width:62%; aspect-ratio:1; border-radius:50%; mix-blend-mode:multiply; opacity:.9;
  animation:orbita 18s ease-in-out infinite alternate, brotar 1.6s cubic-bezier(.2,.9,.3,1) both}
.tintas .tc{background:var(--c); left:0; top:6%; animation-delay:0s, .1s}
.tintas .tm{background:var(--m); right:0; top:6%; animation-delay:-6s, .25s}
.tintas .ty{background:var(--y); left:19%; bottom:0; animation-delay:-12s, .4s}
@keyframes orbita{50%{transform:translate(4%,-3%)} 100%{transform:translate(-3%,4%)}}
@keyframes brotar{from{scale:0}}
@media (max-width:760px){ .tintas{width:78vw; right:-28vw; top:30%; opacity:.85} }
.corte{position:absolute; width:34px; height:34px; border:0 solid var(--k); opacity:.5}
.corte.tl{top:5.5rem; left:clamp(.6rem,2vw,1.4rem); border-width:1.5px 0 0 1.5px}
.corte.tr{top:5.5rem; right:clamp(.6rem,2vw,1.4rem); border-width:1.5px 1.5px 0 0}
.corte.bl{bottom:3.4rem; left:clamp(.6rem,2vw,1.4rem); border-width:0 0 1.5px 1.5px}
.corte.br{bottom:3.4rem; right:clamp(.6rem,2vw,1.4rem); border-width:0 1.5px 1.5px 0}
.mira{position:absolute; width:52px; right:clamp(2.5rem,6vw,5rem); top:7rem; color:var(--k); opacity:.55; animation:girar 30s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.portada-in{max-width:var(--ancho); width:100%; margin:0 auto}
.estado{display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:.95rem; margin-bottom:1rem}
.estado::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--estrella)}
.estado.si::before{background:var(--wa); animation:latido 2s ease-in-out infinite}
@keyframes latido{50%{box-shadow:0 0 0 7px rgba(31,184,85,.18)}}

.plancha{display:grid; font:900 clamp(5rem,21vw,19.5rem)/.8 var(--display); font-stretch:125%;
  font-variation-settings:"wdth" 125; letter-spacing:-.055em; margin-left:-.04em; user-select:none; -webkit-user-select:none}
.capa{grid-area:1/1; mix-blend-mode:multiply; will-change:transform;
  transform:translate3d(calc(var(--dx,0px) * var(--f)), calc(var(--dy,0px) * var(--g)), 0)}
.capa.c{color:var(--c); --f:1;   --g:.6}
.capa.m{color:var(--m); --f:-1;  --g:-.8}
.capa.y{color:var(--y); --f:.55; --g:-1.1}
.capa.k{color:var(--k); --f:0;   --g:0; opacity:.9}
/* Entrada: las planchas llegan desde fuera y se registran */
.capa{animation:registrar 1.8s cubic-bezier(.16,.84,.24,1) both}
.capa.c{animation-delay:.05s; --ix:-38vw; --iy:-12vh}
.capa.m{animation-delay:.15s; --ix:42vw;  --iy:10vh}
.capa.y{animation-delay:.25s; --ix:-10vw; --iy:22vh}
.capa.k{animation:entintar 1.1s .9s cubic-bezier(.6,0,.2,1) both}
@keyframes registrar{from{translate:var(--ix) var(--iy); opacity:0}}
@keyframes entintar{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

.portada-pie{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.6rem; margin-top:clamp(1.5rem,4vw,2.8rem)}
.sub{display:flex; align-items:center; gap:.7rem; font:700 clamp(1.15rem,2.2vw,1.6rem)/1.2 var(--display); font-stretch:110%; letter-spacing:-.01em;
  animation:aparecer .8s 1.3s both}
.estrella{width:1.5em; height:1.5em; fill:var(--estrella); flex:none; animation:destello 1.2s 1.3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes destello{from{transform:scale(0) rotate(-140deg)}}
@keyframes aparecer{from{opacity:0; transform:translateY(12px)}}
.portada .acciones{display:flex; flex-wrap:wrap; gap:.8rem; animation:aparecer .8s 1.5s both}

.control{position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(12,1fr); height:22px}
.control i{background:var(--t)}

/* ============================================================
   Secciones
   ============================================================ */
.seccion{max-width:var(--ancho); margin:0 auto; padding:clamp(5rem,10vw,9rem) clamp(1rem,4vw,3rem)}
.cab{margin-bottom:clamp(2.5rem,5vw,4rem)}
.cab-centro{text-align:center; display:flex; flex-direction:column; align-items:center}

/* ---------- Cotizador ---------- */
.cotizador{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:end}
@media (max-width:920px){ .cotizador{grid-template-columns:1fr} }
.escenario{--H:clamp(230px,32vw,400px); display:flex; align-items:flex-end; justify-content:center; gap:clamp(.9rem,3vw,2.4rem);
  padding:2.5rem .5rem 0; border-bottom:2px solid var(--k); position:relative}
.escenario::after{content:"Tamaños reales a escala"; position:absolute; right:0; bottom:-1.8rem; font-size:.8rem; color:var(--gris)}
.pliego{border:0; background:none; padding:0 0 .8rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.45rem; font:inherit; color:inherit}
.papel{display:block; width:calc(var(--w) * var(--H)); height:calc(var(--h) * var(--H)); background:#fff; position:relative; overflow:hidden;
  border:1.5px solid var(--k); transition:transform .35s cubic-bezier(.3,.8,.3,1), box-shadow .35s}
.pliego:hover .papel{transform:translateY(-6px)}
.pliego.activo .papel{transform:translateY(-14px); box-shadow:8px 8px 0 var(--c), 16px 16px 0 var(--m)}
.tinta{position:absolute; inset:10%; opacity:.18; transition:opacity .4s}
.pliego.activo .tinta{opacity:1}
.tinta::before,.tinta::after{content:""; position:absolute; left:0; right:0; transition:background .4s}
.tinta::before{top:0; height:12%; background:var(--k)}
.tinta::after{top:20%; bottom:0;
  background:radial-gradient(circle, rgba(255,255,255,.4) 38%, transparent 42%) 0 0/9px 9px, linear-gradient(160deg,#b4b4b4,#1e1e1e)}
.cotizador[data-modo="col"] .tinta::after,
.pliego[data-tam="tabloide"] .tinta::after{
  background:radial-gradient(circle, rgba(255,255,255,.35) 38%, transparent 42%) 0 0/9px 9px,
             linear-gradient(150deg, var(--c), var(--m) 50%, var(--y))}
.cotizador[data-modo="col"] .tinta::before{background:var(--m)}
.pliego-nom{font:800 1.15rem var(--display); font-stretch:110%}
.pliego-med{font-size:.78rem; color:var(--gris); margin-top:-.35rem; white-space:nowrap}
.pliego.activo .pliego-nom{color:var(--m)}

.tablero{display:flex; flex-direction:column; gap:.9rem}
.interruptor{display:grid; grid-template-columns:1fr 1fr; background:var(--papel-2); border-radius:999px; padding:5px; position:relative}
.interruptor button{position:relative; z-index:1; border:0; background:none; padding:.85rem .6rem; border-radius:999px; font:700 .98rem var(--texto); cursor:pointer; color:var(--gris); transition:color .3s}
.interruptor button[aria-checked="true"]{color:#fff}
.interruptor::before{content:""; position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:999px; background:var(--k);
  transition:transform .35s cubic-bezier(.3,.8,.3,1), background .35s}
.interruptor.der::before{transform:translateX(100%); background:linear-gradient(110deg,var(--c),var(--m))}
.et{font-weight:700; font-size:.92rem; margin-top:.4rem}
.cantidad{display:grid; grid-template-columns:60px 1fr 60px; border:2px solid var(--k); border-radius:16px; overflow:hidden}
.cantidad button{border:0; background:var(--papel-2); font-size:1.6rem; cursor:pointer; color:var(--k)}
.cantidad button:hover{background:var(--y)}
.cantidad input{border:0; text-align:center; font:850 2rem var(--display); font-stretch:115%; padding:.5rem 0; width:100%; min-width:0; color:var(--k); background:#fff;
  appearance:textfield; -moz-appearance:textfield}
.cantidad input::-webkit-inner-spin-button,.cantidad input::-webkit-outer-spin-button{-webkit-appearance:none}
.rapidos{display:flex; gap:.45rem}
.rapidos button{flex:1; border:1.5px solid var(--linea); background:#fff; border-radius:10px; padding:.5rem 0; font:700 .9rem var(--texto); cursor:pointer; color:var(--k)}
.rapidos button:hover{border-color:var(--k)}
.total{display:flex; flex-direction:column; padding:1.1rem 0 .4rem; border-top:2px dashed var(--linea); margin-top:.4rem}
.total output{font:900 clamp(3.4rem,8vw,5.4rem)/1 var(--display); font-stretch:125%; font-variation-settings:"wdth" 125; letter-spacing:-.04em; display:block}
.total output.golpe{animation:golpe .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes golpe{from{transform:translateY(6px); text-shadow:5px 0 var(--c), -5px 0 var(--m), 0 4px var(--y)}}
.detalle{color:var(--gris); font-weight:600; margin-top:.3rem}
.pista{font-weight:700; color:var(--m); min-height:1.6em}

.lista-precios{display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(4.5rem,8vw,6.5rem); border-top:2px solid var(--k)}
@media (max-width:920px){ .lista-precios{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .lista-precios{grid-template-columns:1fr} }
.lp{padding:1.6rem 1.4rem; border-bottom:1px solid var(--linea); border-left:1px solid var(--linea)}
.lp:first-child{border-left:0; padding-left:0}
@media (max-width:920px){ .lp:nth-child(3){border-left:0; padding-left:0} }
@media (max-width:520px){ .lp{border-left:0; padding-left:0; padding-right:0} }
.lp h3{margin-bottom:.8rem}
.lp p{display:grid; grid-template-columns:1fr auto; column-gap:.6rem; padding:.35rem 0}
.lp p span{color:var(--gris)}
.lp p b{font:850 1.3rem var(--display); font-stretch:110%}
.lp p small{grid-column:1/-1; text-align:right}
.escaner{height:46px; border:1.5px solid var(--k); border-radius:6px; margin-top:1rem; position:relative; overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 7px,var(--linea) 7px 9px)}
.escaner span{position:absolute; top:0; bottom:0; width:30%; left:-30%;
  background:linear-gradient(90deg,transparent,rgba(0,174,239,.6),transparent); animation:escanear 2.6s ease-in-out infinite}
@keyframes escanear{to{left:100%}}

/* ---------- Volantes ---------- */
.volantes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:center}
@media (max-width:920px){ .volantes{grid-template-columns:1fr} }
.vol-arte{display:flex; flex-direction:column; align-items:center}
.tabloide{width:min(78%,360px); aspect-ratio:27.9/43.2; background:#fff; border:2px solid var(--k); padding:6%;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6%; position:relative;
  box-shadow:14px 14px 0 var(--y); transform:rotate(-3deg)}
.tabloide::before,.tabloide::after{content:""; position:absolute; border:0 dashed var(--k); opacity:.55; pointer-events:none}
.tabloide::before{left:50%; top:2%; bottom:2%; border-left-width:1.5px}
.tabloide::after{top:50%; left:2%; right:2%; border-top-width:1.5px}
.v{position:relative; overflow:hidden; transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.v::before{content:""; position:absolute; inset:0 0 auto; height:40%}
.v::after{content:""; position:absolute; left:10%; width:60%; bottom:14%; height:7%; background:var(--k); box-shadow:0 -12px 0 -1px var(--k)}
.v1{background:var(--y)} .v1::before{background:var(--m)}
.v2{background:var(--c)} .v2::before{background:var(--k)}
.v3{background:var(--m)} .v3::before{background:var(--y)}
.v4{background:#fff; outline:1.5px solid var(--k)} .v4::before{background:var(--c)}
.vol-arte:hover .v1{transform:translate(-14%,-8%) rotate(-6deg)}
.vol-arte:hover .v2{transform:translate(14%,-8%) rotate(6deg)}
.vol-arte:hover .v3{transform:translate(-14%,8%) rotate(5deg)}
.vol-arte:hover .v4{transform:translate(14%,8%) rotate(-5deg)}
.tijera{position:absolute; top:calc(50% - .55em); left:-.7em; font-size:1.6rem; background:#fff; line-height:1; padding:0 .1em}
.vol-medida{margin-top:2.2rem; font-weight:700}
.escalas{list-style:none; padding:0; margin:2rem 0 1.4rem; border-top:2px solid var(--k)}
.escalas li{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.15rem 1rem; padding:1rem 0; border-bottom:1px solid var(--linea)}
.esc-rango{font-weight:600}
.esc-precio{font:900 2.2rem/1 var(--display); font-stretch:120%; letter-spacing:-.03em}
.esc-precio small{font:600 .85rem var(--texto); letter-spacing:0}
.esc-c{grid-column:1/-1; color:var(--gris); font-weight:600; font-size:.92rem}
.escalas li:last-child .esc-precio,.escalas li:last-child .esc-c{color:var(--m)}
.extra{margin-bottom:1.6rem}
.extra b{font:850 1.3rem var(--display)}

/* ---------- Invitaciones ---------- */
.cartulinas{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); max-width:900px; margin:0 auto}
@media (max-width:700px){ .cartulinas{grid-template-columns:1fr} }
.cartulina{display:flex; flex-direction:column; gap:1.4rem}
.carta-papel{aspect-ratio:5/6; border-radius:4px; position:relative; overflow:hidden; border:1.5px solid var(--k);
  transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .25s ease-out}
.bristol .carta-papel{box-shadow:12px 12px 0 var(--c); background:
  radial-gradient(circle at 74% 26%, var(--y) 0 17%, transparent 17.5%),
  radial-gradient(circle at 64% 34%, var(--m) 0 9%, transparent 9.5%),
  linear-gradient(var(--k),var(--k)) 1.6rem 72%/56% 5% no-repeat,
  linear-gradient(var(--gris),var(--gris)) 1.6rem 81%/42% 2.5% no-repeat,
  linear-gradient(var(--gris),var(--gris)) 1.6rem 87%/34% 2.5% no-repeat,
  #fdfdfb}
.nacarada .carta-papel{box-shadow:12px 12px 0 var(--m); background:
  linear-gradient(#5b4a2c,#5b4a2c) 50% 70%/50% 3.5% no-repeat,
  linear-gradient(#9c8a66,#9c8a66) 50% 77%/36% 2.5% no-repeat,
  linear-gradient(135deg,#f7f1e8,#e6ebf4 35%,#f4e6ef 65%,#e9f3ec)}
.nacarada .carta-papel::before{content:"✦"; position:absolute; top:24%; left:0; right:0; text-align:center; font-size:3.6rem; color:#c5a160}
.brillo{position:absolute; inset:0; opacity:.55; transition:opacity .3s; pointer-events:none;
  background:radial-gradient(circle at var(--mx,30%) var(--my,30%), rgba(255,255,255,.95), rgba(255,200,235,.55) 14%, rgba(180,220,255,.45) 26%, rgba(220,255,230,.3) 36%, transparent 50%);
  mix-blend-mode:overlay}
.bristol .brillo{display:none}
.nacarada:hover .brillo{opacity:1}
.carta-info h3{font-size:1.5rem}
.carta-info p{color:var(--gris)}
.carta-info .carta-precio{margin-top:.6rem; color:var(--k); font:900 2.4rem/1 var(--display); font-stretch:120%; letter-spacing:-.03em}
.carta-precio small{font:600 .9rem var(--texto); letter-spacing:0; margin-left:.4rem}
.disenos{list-style:none; padding:0; margin:clamp(3.5rem,6vw,5rem) auto 2.5rem; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr);
  border:2px solid var(--k); border-radius:18px; overflow:hidden}
@media (max-width:700px){ .disenos{grid-template-columns:1fr} }
.disenos li{display:flex; flex-direction:column; gap:.2rem; padding:1.4rem 1.4rem 1.2rem}
.disenos li + li{border-left:2px solid var(--k)}
@media (max-width:700px){ .disenos li + li{border-left:0; border-top:2px solid var(--k)} }
.disenos span{color:var(--gris); font-weight:600}
.disenos b{font:900 2rem var(--display); font-stretch:120%}
.disenos li:nth-child(1){background:linear-gradient(var(--c),var(--c)) 0 0/100% 6px no-repeat}
.disenos li:nth-child(2){background:linear-gradient(var(--m),var(--m)) 0 0/100% 6px no-repeat}
.disenos li:nth-child(3){background:linear-gradient(var(--y),var(--y)) 0 0/100% 6px no-repeat}

/* ---------- Menú QR ---------- */
.menuqr{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(3rem,6vw,6rem); align-items:center}
@media (max-width:920px){ .menuqr{grid-template-columns:1fr} }
.paquetes{display:grid; gap:.8rem; margin-top:2rem}
.paquete{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 1.5rem; border:2px solid var(--k); border-radius:18px;
  text-decoration:none; transition:transform .2s, box-shadow .2s}
.paquete span{font-weight:700; font-size:1.1rem}
.paquete b{font:900 2.2rem var(--display); font-stretch:120%; letter-spacing:-.03em}
.paquete:hover{transform:translate(-4px,-4px); box-shadow:4px 4px 0 var(--c), 8px 8px 0 var(--m)}
.qr-arte{position:relative; height:clamp(340px,40vw,460px)}
.mesa{position:absolute; inset:auto 0 0 0; height:28%; background:linear-gradient(#e9dcc8,#d6c3a5); border-radius:14px}
.tent{position:absolute; left:6%; bottom:20%; width:48%; background:#fff; border:2px solid var(--k); border-radius:10px; padding:7%;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; font-weight:800; font-size:.9rem; box-shadow:10px 10px 0 var(--y)}
.qr{width:100%; aspect-ratio:1; display:grid; grid-template-columns:repeat(21,1fr)}
.qr i{background:var(--k)}
.qr i.o{background:transparent}
.cel{position:absolute; right:4%; bottom:10%; width:36%; aspect-ratio:9/18; background:var(--k); border-radius:26px; padding:6% 5%;
  transform:rotate(8deg); box-shadow:-10px 14px 0 var(--c)}
.cel-pantalla{height:100%; background:#fff; border-radius:16px; padding:14% 10%; display:flex; flex-direction:column; gap:8%}
.cel-pantalla i{display:block; height:13%; border-radius:6px; background:var(--papel-2); position:relative}
.cel-pantalla i::before{content:""; position:absolute; left:8%; top:25%; width:28%; height:50%; border-radius:4px; background:var(--m)}
.cel-pantalla i:nth-child(3)::before{background:var(--c)} .cel-pantalla i:nth-child(4)::before{background:var(--y)}
.cel-pantalla i:nth-child(5)::before{background:var(--k)}
.cel-pantalla i:first-child{background:var(--k); height:8%}
.cel-pantalla i:first-child::before{display:none}

/* ---------- Pasos ---------- */
.pasos{border-top:2px solid var(--k)}
.pasos h2{margin-bottom:3rem}
.pasos ol{list-style:none; counter-reset:p; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem}
@media (max-width:820px){ .pasos ol{grid-template-columns:1fr} }
.pasos li{counter-increment:p; display:flex; flex-direction:column; gap:.2rem; font-size:1.15rem}
.pasos li::before{content:counter(p); font:900 6rem/.9 var(--display); font-stretch:125%; color:transparent; -webkit-text-stroke:2px var(--k); margin-bottom:.8rem}
.pasos li:nth-child(1)::before{text-shadow:7px 6px 0 var(--c)}
.pasos li:nth-child(2)::before{text-shadow:7px 6px 0 var(--m)}
.pasos li:nth-child(3)::before{text-shadow:7px 6px 0 var(--y)}
.pasos li span{color:var(--gris)}

/* ---------- Ubicación ---------- */
.ubicacion{display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,5rem); align-items:stretch}
@media (max-width:920px){ .ubicacion{grid-template-columns:1fr} }
.ubicacion h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.horario{width:100%; max-width:380px; border-collapse:collapse; margin:2rem 0}
.horario th,.horario td{padding:.5rem 0; border-bottom:1px solid var(--linea)}
.horario th{text-align:left; font-weight:500}
.horario td{text-align:right; color:var(--gris); font-variant-numeric:tabular-nums}
.horario tr.hoy th,.horario tr.hoy td{font-weight:800; color:var(--k)}
.horario tr.hoy th::after{content:"hoy"; margin-left:.5rem; background:var(--y); padding:.05rem .5rem; border-radius:6px; font-size:.78rem}
.ubicacion .acciones{display:flex; gap:.8rem; flex-wrap:wrap}
.mapa{min-height:420px; border:2px solid var(--k); border-radius:24px; overflow:hidden; box-shadow:-12px 12px 0 var(--m); background:var(--papel-2)}
.mapa iframe{width:100%; height:100%; min-height:420px; border:0; display:block}

/* ---------- Pie ---------- */
.pie{background:var(--k); color:#cfcfcf; padding:0 0 calc(7rem + env(safe-area-inset-bottom,0px)); overflow:hidden}
.pie-marca{font:900 clamp(4rem,19vw,17rem)/.85 var(--display); font-stretch:125%; letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:1.5px #444; font-variation-settings:"wdth" 125; white-space:nowrap; padding:3rem clamp(1rem,4vw,3rem) 2rem}
.pie-in{max-width:var(--ancho); margin:0 auto; padding:0 clamp(1rem,4vw,3rem); display:flex; flex-direction:column; gap:.4rem}
.pie a{color:#fff}
.legal{font-size:.85rem; opacity:.6; margin-top:1rem}

.wa-flotante{position:fixed; right:1.1rem; bottom:calc(1.1rem + env(safe-area-inset-bottom,0px)); z-index:40; width:62px; height:62px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px -6px rgba(0,0,0,.45); transition:transform .2s}
.wa-flotante:hover{transform:scale(1.08) rotate(-6deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ---------- Ajustes para celular ---------- */
.marca span,.barra-wa{white-space:nowrap}
@media (max-width:600px){
  .escenario{--H:calc((100vw - 5.5rem) / 1.75); gap:.8rem; padding-top:2rem}
  .pliego-med{font-size:.7rem}
  .portada{justify-content:flex-end; padding-bottom:4.5rem}
  .plancha{font-size:27vw; font-variation-settings:"wdth" 100; letter-spacing:-.05em; line-height:.82}
  .marca{font-size:1.1rem}
  .marca-c{width:30px; height:30px}
  .barra-wa{font-size:.85rem}
  .portada .acciones .btn{flex:1 1 100%}
  .pie-marca{font-size:20vw}
}
.pie-marca{font-size:clamp(3.5rem,15.5vw,15rem)}

/* ============================================================
   Logo en la portada
   ============================================================ */
.marca img{border-radius:0; width:46px; height:auto}
.logo-portada{position:absolute; z-index:-1; right:clamp(-4rem,-2vw,0rem); top:50%; width:min(46vw,620px); translate:0 -46%;
  animation:logoEntra 1.6s cubic-bezier(.2,.9,.25,1) .35s both}
.logo-portada img{width:100%; height:auto; display:block;
  transform:translate3d(calc(var(--dx,0px) * -1.2), calc(var(--dy,0px) * -1.2), 0) rotate(calc(var(--dx,0px) * .08deg))}
@keyframes logoEntra{from{opacity:0; scale:.6; rotate:-35deg}}
@media (max-width:760px){ .logo-portada{width:72vw; right:-10vw; top:6.5rem; translate:0 0; opacity:.95} }

/* ============================================================
   Catálogo de papelería
   ============================================================ */
.catalogo{background:var(--k); color:#fff; padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem); position:relative; overflow:hidden}
.catalogo::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:radial-gradient(circle, rgba(0,174,239,.6) 1.4px, transparent 2px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(ellipse 50% 60% at 0% 0%, #000, transparent 70%); mask:radial-gradient(ellipse 50% 60% at 0% 0%, #000, transparent 70%)}
.cat-in{max-width:var(--ancho); margin:0 auto; padding:0 clamp(1rem,4vw,3rem); position:relative}
.catalogo .folio,.catalogo .lead{color:#b9bcc2}
.catalogo h2{font-size:clamp(3.4rem,11vw,9rem); line-height:.85; letter-spacing:-.05em; font-variation-settings:"wdth" 125; font-stretch:125%;
  text-shadow:5px 4px 0 var(--c), -4px -3px 0 var(--m)}
.cat-cab{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem 3rem; align-items:end; margin-bottom:2rem}
@media (max-width:900px){ .cat-cab{grid-template-columns:1fr} }
.cat-buscar{display:flex; align-items:center; gap:.8rem; background:#fff; color:var(--k); border-radius:999px; padding:.4rem .5rem .4rem 1.3rem;
  box-shadow:6px 6px 0 var(--y)}
.cat-buscar:focus-within{box-shadow:6px 6px 0 var(--m)}
.cat-buscar input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:600 1.15rem var(--texto); color:var(--k); padding:.9rem 0}
.cat-buscar input::placeholder{color:#8a8d93; font-weight:500}

.chips{display:flex; gap:.5rem; overflow-x:auto; padding:.4rem 0 1rem; scrollbar-width:none; -webkit-mask:linear-gradient(90deg,#000 92%,transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; border:1.5px solid #3a3d43; background:transparent; color:#fff; border-radius:999px; padding:.6rem 1rem; font:600 .95rem var(--texto); cursor:pointer;
  transition:background .2s, border-color .2s, color .2s}
.chip span{opacity:.55; font-weight:500; margin-left:.2rem}
.chip:hover{border-color:#fff}
.chip.activo{background:#fff; color:var(--k); border-color:#fff}
.chip.activo[data-color="c"]{background:var(--c); border-color:var(--c)}
.chip.activo[data-color="m"]{background:var(--m); border-color:var(--m); color:#fff}
.chip.activo[data-color="y"]{background:var(--y); border-color:var(--y)}
.cat-estado{color:#8f939a; font-size:.92rem; margin:.4rem 0 1.2rem; min-height:1.4em}

.productos{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.9rem}
@media (max-width:520px){ .productos{grid-template-columns:1fr 1fr; gap:.6rem} }
.prod{position:relative; display:flex; flex-direction:column; background:#fff; color:var(--k); border-radius:16px; padding:1.1rem 1rem 1rem; min-height:190px;
  animation:prodEntra .45s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0) * 18ms)}
@keyframes prodEntra{from{opacity:0; transform:translateY(14px)}}
.prod::before{content:""; position:absolute; left:1rem; top:0; width:38px; height:6px; border-radius:0 0 4px 4px; background:var(--tono,var(--c))}
.prod-g{font-size:.74rem; color:var(--gris); font-weight:600; margin-bottom:.35rem}
.prod-n{font-weight:600; font-size:.98rem; line-height:1.3; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.prod-n mark{background:var(--y); color:inherit; border-radius:3px; padding:0 .1em}
.prod-pie{display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem; margin-top:.9rem}
.prod-p{font:900 1.7rem/1 var(--display); font-stretch:115%; font-variation-settings:"wdth" 115; letter-spacing:-.03em}
.prod-m{display:block; font:600 .76rem var(--texto); color:var(--m); letter-spacing:0; margin-top:.3rem}
.agregar{flex:none; width:44px; height:44px; border-radius:50%; border:2px solid var(--k); background:var(--k); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:transform .15s, background .15s}
.agregar:hover{transform:scale(1.08); background:var(--m); border-color:var(--m)}
.mini-cant{display:flex; align-items:center; border:2px solid var(--k); border-radius:999px; overflow:hidden; height:40px}
.mini-cant button{width:34px; height:100%; border:0; background:var(--y); font-size:1.2rem; cursor:pointer; color:var(--k)}
.mini-cant span{min-width:28px; text-align:center; font-weight:800}
.prod.en-lista{outline:3px solid var(--y); outline-offset:-3px}
.cat-mas{text-align:center; margin-top:2rem}
.cat-mas .btn{background:transparent; color:#fff; border-color:#fff}
.cat-mas .btn:hover{box-shadow:3px 3px 0 var(--c), 6px 6px 0 var(--m)}
.cat-vacio{background:#1f2125; border-radius:16px; padding:1.4rem; color:#cfd2d6}
.cat-vacio a{color:var(--y)}

/* ---------- Mi lista ---------- */
.lista-barra{position:fixed; left:50%; bottom:calc(1.1rem + env(safe-area-inset-bottom,0px)); translate:-50% 0; z-index:45;
  display:flex; align-items:center; gap:.8rem; border:0; cursor:pointer; background:var(--k); color:#fff; border-radius:999px;
  padding:.55rem 1.4rem .55rem .55rem; font:700 1rem var(--texto); box-shadow:0 12px 30px -8px rgba(0,0,0,.5), 0 0 0 2px #fff;
  animation:barraSube .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes barraSube{from{translate:-50% 140%}}
.lb-n{min-width:40px; height:40px; border-radius:50%; background:var(--y); color:var(--k); display:grid; place-items:center; font-weight:900}
.lb-n.salto{animation:salto .35s}
@keyframes salto{40%{transform:scale(1.35)}}
.lb-total{font:900 1.2rem var(--display); font-stretch:115%; padding-left:.8rem; border-left:1px solid #444}
body.con-lista .wa-flotante{bottom:calc(5.6rem + env(safe-area-inset-bottom,0px))}
@media (max-width:520px){ .lista-barra{left:1rem; right:5.2rem; translate:0 0; justify-content:space-between} @keyframes barraSube{from{translate:0 140%}} body.con-lista .wa-flotante{bottom:calc(1.1rem + env(safe-area-inset-bottom,0px))} }

.lista-fondo{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45); animation:aparecer .25s}
.lista{position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(440px,100%); background:#fff; display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .35s cubic-bezier(.3,.8,.3,1); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.lista.abierta{transform:none; box-shadow:-20px 0 60px rgba(0,0,0,.25)}
.lista-cab{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:2px solid var(--k)}
.lista-cab h2{font-size:2rem}
.lista-cerrar{width:44px; height:44px; border:0; background:var(--papel-2); border-radius:50%; font-size:1.6rem; cursor:pointer}
.lista-items{list-style:none; margin:0; padding:.4rem 1.4rem; overflow-y:auto; flex:1}
.lista-items li{display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; padding:.9rem 0; border-bottom:1px solid var(--linea)}
.li-n{font-weight:600; line-height:1.3}
.li-p{font-weight:800; text-align:right}
.li-sub{color:var(--gris); font-size:.85rem}
.lista-items .mini-cant{justify-self:end; height:36px}
.lista-pie{padding:1rem 1.4rem 1.4rem; border-top:2px solid var(--k); display:flex; flex-direction:column; gap:.7rem}
.lista-total{display:flex; justify-content:space-between; align-items:baseline}
.lista-total b{font:900 2.2rem var(--display); font-stretch:120%}
.lista-nota{color:var(--gris); font-size:.88rem}
.lista-vaciar{border:0; background:none; color:var(--gris); text-decoration:underline; cursor:pointer; font:inherit; font-size:.9rem}
body.lista-abierta{overflow:hidden}
.lista-barra[hidden],.lista-fondo[hidden]{display:none}
.logo-portada{width:min(32vw,470px); right:clamp(.5rem,3vw,3rem); translate:0 -50%}
@media (max-width:1100px) and (min-width:761px){ .logo-portada{width:30vw; top:38%} }
@media (max-width:760px){ .logo-portada{width:56vw; right:-4vw; top:5.2rem; translate:0 0} }
@media (max-width:520px){
  .productos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod{padding:1rem .8rem .8rem; min-height:170px}
  .prod-n{font-size:.92rem}
  .prod-p{font-size:1.45rem}
  .prod-pie{flex-wrap:wrap; gap:.5rem}
  .prod .mini-cant{height:36px}
  .prod .mini-cant button{width:30px}
  .agregar{width:40px; height:40px}
}

/* =====================================================================
   v4 — Rediseño con todos los servicios
   ===================================================================== */
.marca img{width:46px; height:auto}
.barra nav{gap:1.3rem}
@media (max-width:1100px) and (min-width:901px){ .barra nav{gap:.9rem} .barra nav a{font-size:.88rem} }

/* Cinta de servicios */
.cinta{background:var(--k); color:#fff; overflow:hidden; padding:1.05rem 0; transform:rotate(-1.4deg) scaleX(1.05); margin:1.4rem 0 0; position:relative; z-index:2}
.cinta-mov{display:flex; gap:2.6rem; width:max-content; animation:correr 45s linear infinite; font:800 1.3rem var(--display); font-stretch:115%; font-variation-settings:"wdth" 115; white-space:nowrap}
.cinta-mov span::after{content:"✦"; margin-left:2.6rem; color:var(--y)}
.cinta-mov span:nth-child(3n+1)::after{color:var(--c)}
.cinta-mov span:nth-child(3n+2)::after{color:var(--m)}
@keyframes correr{to{transform:translateX(-50%)}}

/* Bento de servicios */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(190px,auto); gap:1rem; grid-auto-flow:dense}
@media (max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .bento{grid-template-columns:1fr 1fr; gap:.7rem; grid-auto-rows:minmax(170px,auto)} }
.tile{position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1.3rem; border-radius:22px; text-decoration:none; overflow:hidden;
  border:2px solid var(--k); background:#fff; transition:transform .25s cubic-bezier(.3,.8,.3,1), box-shadow .25s}
.tile:hover{transform:translate(-4px,-4px); box-shadow:4px 4px 0 var(--c), 8px 8px 0 var(--m)}
.tile .ico{width:42px; height:42px; margin-bottom:auto; flex:none}
.tile h3{font-size:1.25rem; line-height:1.1; margin-top:1rem}
.tile p{font-size:.92rem; opacity:.75; line-height:1.35}
.t-desde{margin-top:.6rem; font-weight:600; font-size:.9rem}
.t-desde b{font:900 1.6rem var(--display); font-stretch:115%; font-variation-settings:"wdth" 115; letter-spacing:-.02em}
.t-imp{grid-column:span 2; grid-row:span 2; background:var(--c); color:#fff; border-color:var(--c)}
.t-imp h3{font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.03em; font-stretch:120%; font-variation-settings:"wdth" 120}
.t-imp .ico{width:72px; height:72px}
.t-imp .t-desde b{font-size:clamp(2.6rem,5vw,4rem)}
.t-imp::after{content:""; position:absolute; right:-15%; bottom:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.14)}
.t-vol{grid-column:span 2; background:var(--y)}
.t-tra{grid-column:span 2; background:var(--k); color:#fff}
.t-qr{grid-column:span 2; background:var(--m); color:#fff; border-color:var(--m)}
.t-pap{grid-column:span 2; background:linear-gradient(110deg,var(--c),var(--m) 55%,var(--y)); color:#fff; border-color:var(--k)}
.t-pap h3{font-size:1.8rem}
.t-lon{background:var(--papel-2)}
@media (max-width:520px){
  .t-imp{grid-column:span 2; grid-row:span 1}
  .t-vol,.t-tra,.t-qr,.t-pap{grid-column:span 2}
  .tile{padding:1rem}
  .tile h3{font-size:1.05rem}
  .tile p{font-size:.82rem}
}

/* Cotizador: botones */
.cot-botones{display:grid; grid-template-columns:1fr; gap:.6rem}
@media (max-width:520px){ .cot-botones{grid-template-columns:1fr} }
.lp-mas{margin-top:.8rem; display:flex; justify-content:flex-end}

/* Botón agregar en fondo claro */
.agregar{flex:none}
.fila .agregar,.lista-tramites .agregar,.disenos .agregar,.paquete .agregar,.cartel .agregar,.carta-info .agregar,.lp .agregar{width:40px; height:40px; font-size:1.35rem}
.agregado{animation:agregado .5s}
@keyframes agregado{40%{transform:scale(1.25); background:var(--wa); border-color:var(--wa)}}

/* Filas de precio */
.filas{list-style:none; margin:1.2rem 0 0; padding:0; border-top:2px solid var(--k)}
.fila{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--linea)}
.f-n{font-weight:600; display:flex; flex-direction:column}
.f-n small{font-weight:500; margin-top:.1rem}
.f-p{font:900 1.45rem var(--display); font-stretch:115%; font-variation-settings:"wdth" 115}
.filas-chicas .fila{padding:.55rem 0}
.filas-chicas .f-p{font-size:1.2rem}

/* Acabados */
.acab-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
@media (max-width:860px){ .acab-grid{grid-template-columns:1fr} }
.acab h3{font-size:clamp(2rem,4vw,2.8rem); font-stretch:120%; font-variation-settings:"wdth" 120; letter-spacing:-.03em}
.acab-desc{color:var(--gris); margin-top:.4rem}
.acab-arte{height:200px; display:grid; place-items:center; margin-bottom:1.6rem; border-radius:22px; position:relative; overflow:hidden}
.acab-enm .acab-arte{background:var(--c)}
.acab-eng .acab-arte{background:var(--y)}
.mica{position:relative; width:150px; aspect-ratio:8.5/5.4; border-radius:12px; background:rgba(255,255,255,.35); padding:9px; transform:rotate(-8deg);
  box-shadow:0 18px 30px -12px rgba(0,0,0,.35); overflow:hidden; border:1.5px solid rgba(255,255,255,.8)}
.mica-doc{height:100%; background:#fff; border-radius:5px; padding:10% 9%; display:flex; flex-direction:column; gap:12%}
.mica-doc i{display:block; height:12%; background:var(--k); border-radius:3px}
.mica-doc i:first-child{width:40%; height:30%; background:var(--m)}
.mica-doc i:nth-child(3){width:60%; background:#aaa}
.mica-brillo{position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 48%,transparent 60%); translate:-100% 0; animation:brillar 3.2s ease-in-out infinite}
@keyframes brillar{60%,100%{translate:100% 0}}
.libreta{position:relative; width:124px; height:160px; background:#fff; border:2px solid var(--k); border-radius:4px; padding:34px 18px 0 30px; display:flex; flex-direction:column; gap:14px;
  transform:rotate(6deg); box-shadow:12px 12px 0 var(--m)}
.libreta i{display:block; height:5px; background:var(--linea); border-radius:3px}
.libreta i:first-of-type{background:var(--k); height:8px; width:70%}
.espiral{position:absolute; left:-9px; top:6%; bottom:6%; width:20px;
  background:radial-gradient(ellipse 9px 5px at 50% 50%, transparent 55%, var(--k) 60% 85%, transparent 90%) 0 0/20px 13px repeat-y}

/* Invitaciones (3) */
.cartulinas{grid-template-columns:repeat(3,1fr); max-width:1100px}
@media (max-width:900px){ .cartulinas{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .cartulinas{grid-template-columns:1fr} }
.cartoncillo .carta-papel{box-shadow:12px 12px 0 var(--y); background:
  radial-gradient(circle at 50% 38%, #fff 0 14%, transparent 14.5%),
  linear-gradient(#fff,#fff) 50% 68%/52% 4% no-repeat,
  linear-gradient(#fff,#fff) 50% 76%/36% 2.5% no-repeat,
  linear-gradient(160deg,#ff6fb5,var(--m))}
.cartoncillo .brillo{display:none}
.carta-info{display:grid; grid-template-columns:1fr auto; column-gap:1rem; align-items:end}
.carta-info > *:not(.agregar):not(.ctrl){grid-column:1}
.carta-info .agregar,.carta-info .ctrl{grid-column:2; grid-row:1 / span 4; align-self:end}
.carta-esc{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.4rem}
.carta-esc span{font-size:.8rem; font-weight:700; color:var(--m); background:color-mix(in srgb,var(--m) 10%,#fff); padding:.15rem .5rem; border-radius:99px}
.disenos{grid-template-columns:repeat(4,1fr); max-width:1100px}
@media (max-width:900px){ .disenos{grid-template-columns:1fr 1fr} .disenos li:nth-child(3){border-left:0} .disenos li:nth-child(n+3){border-top:2px solid var(--k)} }
@media (max-width:560px){ .disenos{grid-template-columns:1fr} .disenos li + li{border-left:0; border-top:2px solid var(--k)} }
.disenos li{display:grid; grid-template-columns:1fr auto; align-items:end; column-gap:.6rem}
.disenos li span{grid-column:1/-1}
.disenos li:nth-child(4){background:linear-gradient(var(--k),var(--k)) 0 0/100% 6px no-repeat}

/* Trámites */
.tramites{background:var(--k); color:#fff; padding:clamp(5rem,10vw,8rem) 0}
.tra-in{max-width:var(--ancho); margin:0 auto; padding:0 clamp(1rem,4vw,3rem)}
.tramites .folio,.tramites .lead{color:#b9bcc2}
.tramites h1,.tramites h2{font-size:clamp(2.4rem,6vw,4.6rem); font-weight:850; font-stretch:115%; font-variation-settings:"wdth" 115; line-height:.95; letter-spacing:-.035em}
.tra-cab{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:end; margin-bottom:2rem}
@media (max-width:860px){ .tra-cab{grid-template-columns:1fr} }
.tramites .buscador{display:flex; align-items:center; gap:.7rem; background:#fff; color:var(--k); border-radius:999px; padding:.85rem 1.2rem; box-shadow:6px 6px 0 var(--c)}
.tramites .buscador input{border:0; outline:0; background:transparent; font:600 1.05rem var(--texto); width:100%; color:var(--k)}
.lista-tramites{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.7rem}
.lista-tramites li{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:1rem 1rem 1rem 1.2rem; background:#1d2024; border-radius:16px; border:1px solid #2c3036}
.lista-tramites li[hidden]{display:none}
.lista-tramites b{font:900 1.5rem var(--display); font-stretch:115%; color:var(--y)}
.lista-tramites .agregar{background:#fff; color:var(--k); border-color:#fff}
.lt-n{font-weight:600}
.nota-tra{color:#9da1a8; margin-top:1rem; font-size:.92rem}
.tramites .vacio{background:#1d2024; border-radius:14px; padding:1rem 1.2rem; margin-top:1rem}
.tramites .vacio a{color:var(--y)}
.aviso-gob{margin-top:1.6rem; padding:1.2rem 1.4rem; border-radius:16px; border:1.5px solid var(--y); color:#e7e9ec; font-size:.95rem; line-height:1.55; max-width:80ch}
.aviso-gob strong{color:var(--y)}
.tramites-corto{padding:clamp(3.5rem,7vw,5rem) 0}
.tra-corto{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.6rem}
.tra-corto h2{font-size:clamp(2rem,4.5vw,3.4rem); max-width:18ch}
.btn-claro{background:#fff; color:var(--k); border-color:#fff}

/* Negocios */
.negocios .cab{margin-bottom:3rem}
.neg-t{font-size:clamp(1.8rem,3.4vw,2.6rem); font-stretch:120%; font-variation-settings:"wdth" 120; letter-spacing:-.03em; line-height:1}
.neg-t small{font:600 1rem var(--texto); color:var(--gris); letter-spacing:0; margin-left:.4rem}
.neg-t-centro{text-align:center; margin:clamp(4rem,8vw,6rem) 0 2rem}
.neg-qr{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem); align-items:center}
@media (max-width:920px){ .neg-qr{grid-template-columns:1fr} }
.paquete{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:1.1rem 1.1rem 1.1rem 1.5rem; border:2px solid var(--k); border-radius:18px; transition:box-shadow .2s, transform .2s}
.paquete:hover{transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--c), 6px 6px 0 var(--m)}
.neg-goo{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; margin-top:clamp(4rem,8vw,6rem)}
@media (max-width:920px){ .neg-goo{grid-template-columns:1fr} }
.goo-arte{height:clamp(240px,28vw,320px)}
.mapa-falso{position:relative; height:100%; border-radius:24px; overflow:hidden; border:2px solid var(--k); background:#eaf3ea; box-shadow:-12px 12px 0 var(--c)}
.calle{position:absolute; background:#fff; border:1px solid #d5dccf}
.calle.c1{left:-10%; right:-10%; top:42%; height:26px; transform:rotate(-8deg)}
.calle.c2{top:-10%; bottom:-10%; left:58%; width:22px; transform:rotate(12deg)}
.calle.c3{left:-10%; right:-10%; top:78%; height:14px; transform:rotate(4deg); background:#f6e7b0}
.mapa-falso .pin,.mapa-cargar .pin{position:absolute; left:50%; top:46%; width:46px; height:46px; translate:-50% -100%; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--estrella);
  box-shadow:0 8px 14px -6px rgba(0,0,0,.5); animation:rebote 2.2s ease-in-out infinite}
.mapa-falso .pin::after,.mapa-cargar .pin::after{content:""; position:absolute; inset:30%; border-radius:50%; background:#fff}
@keyframes rebote{50%{translate:-50% -118%}}
.carteles{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:900px){ .carteles{grid-template-columns:1fr 1fr} }
.cartel{display:flex; flex-direction:column; border:2px solid var(--k); border-radius:20px; padding:1rem; background:#fff}
.cartel-arte{aspect-ratio:1.3; border-radius:12px; margin-bottom:1rem; display:grid; place-items:center; position:relative; overflow:hidden}
.cartel-arte span{width:46%; aspect-ratio:1; background:#fff; border-radius:8px;
  background-image:linear-gradient(var(--k),var(--k)),linear-gradient(var(--k),var(--k)),linear-gradient(var(--k),var(--k)),
    repeating-conic-gradient(var(--k) 0 25%, #fff 0 50%);
  background-size:30% 30%,30% 30%,30% 30%,16% 16%; background-position:6% 6%,94% 6%,6% 94%,0 0; background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  border:6px solid #fff; box-shadow:0 10px 18px -8px rgba(0,0,0,.4)}
.c-resenas .cartel-arte{background:var(--y)}
.c-wifi .cartel-arte{background:var(--c)}
.c-redes .cartel-arte{background:var(--m)}
.c-transfer .cartel-arte{background:var(--k)}
.cartel h4{font:750 1.1rem var(--display); margin:0}
.cartel p{color:var(--gris); font-size:.88rem; margin-top:.2rem; flex:1}
.cartel-pie{display:flex; justify-content:space-between; align-items:center; margin-top:.8rem}
.cartel-pie b{font:900 1.6rem var(--display); font-stretch:115%}
.lonas{margin-top:clamp(3rem,6vw,4.5rem); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.4rem; padding:clamp(1.6rem,4vw,2.6rem);
  border-radius:26px; color:#fff; background:linear-gradient(120deg,var(--k) 0 55%,var(--m) 55% 70%,var(--c) 70% 85%,var(--y) 85%)}
.lonas p{color:#cfd2d6; max-width:48ch; margin-top:.5rem}
@media (max-width:700px){ .lonas{background:linear-gradient(170deg,var(--k) 0 72%,var(--m) 72% 82%,var(--c) 82% 91%,var(--y) 91%)} }

/* FAQ */
.faq{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(1.5rem,5vw,4rem); border-top:2px solid var(--k)}
@media (max-width:860px){ .faq{grid-template-columns:1fr} }
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer; list-style:none; padding:1.2rem 2.6rem 1.2rem 0; font-weight:700; font-size:1.08rem; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.2rem; top:50%; translate:0 -50%; font:500 2rem var(--display); color:var(--m); transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{color:var(--gris); padding-bottom:1.2rem; max-width:62ch}

/* Mapa con carga al tocar */
.mapa-cargar{position:relative; width:100%; height:100%; min-height:420px; border:0; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.2rem; padding-bottom:2rem;
  font:800 1.2rem var(--texto); color:var(--k);
  background:linear-gradient(-8deg,transparent 46%,#fff 46% 52%,transparent 52%),linear-gradient(80deg,transparent 56%,#fff 56% 60%,transparent 60%),#e6f0e6}
.mapa-cargar .pin{top:45%}
.mapa-cargar small{font-weight:500; color:var(--gris)}

/* Pie */
.pie-in{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:2rem; max-width:var(--ancho)}
@media (max-width:860px){ .pie-in{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pie-in{grid-template-columns:1fr} }
.pie h2{font:800 1rem var(--texto); color:#fff; margin-bottom:.7rem; letter-spacing:0}
.pie-col p{margin:.3rem 0; line-height:1.5}
.pie-logo{width:150px; height:auto; background:#fff; border-radius:18px; padding:12px}
.pie .legal{max-width:var(--ancho); margin:2.4rem auto 0; padding:0 clamp(1rem,4vw,3rem); opacity:.6; font-size:.85rem}

/* Páginas interiores */
.pagina-interior{padding-top:5rem}
.legal-pagina{background:var(--papel-2); min-height:70vh}
.texto-legal{max-width:760px; margin:0 auto; padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2rem)}
.texto-legal h1{font-size:clamp(2.4rem,6vw,4rem); font-weight:850; font-stretch:115%; font-variation-settings:"wdth" 115; letter-spacing:-.035em; line-height:1; margin-bottom:1.5rem}
.texto-legal h2{font-size:1.3rem; margin:2rem 0 .5rem; letter-spacing:0; font-stretch:105%; font-variation-settings:"wdth" 105; line-height:1.2}
.texto-legal p{margin:.6rem 0; color:#33363b}
.texto-legal.centro{text-align:center}
.cuatro{font:900 clamp(6rem,24vw,14rem)/1 var(--display); font-stretch:125%; font-variation-settings:"wdth" 125; text-shadow:6px 4px 0 var(--c), -5px -3px 0 var(--m); margin:0}
.interior .tramites{padding-top:clamp(3rem,7vw,5rem)}

/* ---------- Cinta de servicios: recta, pegada a la barra de color ---------- */
.portada .control{height:12px}
.cinta{transform:none; margin:0; padding:0; height:64px; display:flex; align-items:center; background:var(--k);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cinta-mov{gap:2.2rem; animation-duration:60s; font:700 1.05rem var(--texto); font-stretch:100%; font-variation-settings:"wdth" 100; letter-spacing:.01em; align-items:center}
.cinta-mov span{display:inline-flex; align-items:center; gap:2.2rem; color:#e9eaec}
.cinta-mov span::after{content:""; width:9px; height:9px; margin:0; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.cinta-mov span:nth-child(4n+2)::after{background:var(--m)}
.cinta-mov span:nth-child(4n+3)::after{background:var(--y)}
.cinta-mov span:nth-child(4n+4)::after{background:#fff}
.cinta:hover .cinta-mov{animation-play-state:paused}
@media (max-width:600px){ .cinta{height:52px} .cinta-mov{font-size:.95rem; gap:1.6rem} .cinta-mov span{gap:1.6rem} }
.cinta{-webkit-mask:none; mask:none; position:relative}
.cinta::before,.cinta::after{content:""; position:absolute; top:0; bottom:0; width:90px; z-index:1; pointer-events:none}
.cinta::before{left:0; background:linear-gradient(90deg,var(--k),transparent)}
.cinta::after{right:0; background:linear-gradient(-90deg,var(--k),transparent)}
.texto-legal ul{margin:.4rem 0 .8rem; padding-left:1.3rem; color:#33363b}
.texto-legal li{margin:.3rem 0}