/* ============================================================
   Paginas interiores: servicios, estrenos, blog, precios, contacto.
   Van encima de estilo.css y reutilizan sus tokens, .boton, .enlace,
   .capitulo, .seccion, .movil, .paquete, .pie y .wa-flotante.
   Mismo lenguaje que el hero: titulares en 800 y mayusculas, bloques
   planos, bordes duros, sombras desplazadas sin blur, reglas gruesas.
   El color del cliente o del sector (--tono, lo pone el generador en el
   body) va en un bloque plano detras de los moviles, en la barra bajo la
   palabra clave y en las sombras duras.
   ============================================================ */

.pag{position:relative; z-index:1}
.pag-bloque{padding:clamp(64px,11vh,130px) var(--margen); border-top:3px solid rgba(var(--paper-rgb),.16)}
.pag-bloque--pegado{border-top:0; padding-top:0}
.pag-ancho{max-width:1180px; margin:0 auto}

/* ---------- hero de servicio: el mismo cartel que la portada (.hero en estilo.css) ---------- */
/* titular algo mas corto de cuerpo (las frases son mas largas), el publico de la
   pagina marcado en amarillo y las tres garantias bajo el CTA */
.hero--pag .capitulo{margin-bottom:clamp(14px,2vh,22px)}
.hero--pag .hero__titulo{font-size:clamp(2.4rem, .4rem + 4.4vw, 4.6rem)}
.hero--pag .hero__publicos a[aria-current]{background:var(--amarillo); border-color:var(--amarillo); color:var(--ink)}
.hero--pag .hero__wa{border:0}
.hero--pag .hechos{display:flex; flex-direction:column; gap:10px; margin-top:clamp(22px,3.4vh,36px); padding:0; list-style:none; color:rgba(var(--paper-rgb),.85); font-weight:500; font-size:15px}
.hero--pag .hechos li::before{content:""; display:inline-block; width:12px; height:12px; background:var(--amarillo); margin:0 12px 0 0}
.hero--pag .hero__obra--grande{grid-column:1 / -1; box-shadow:10px 10px 0 var(--fucsia)}
@media(max-width:820px){
  .hero--pag .hero__titulo{font-size:clamp(2.2rem, .5rem + 8vw, 3.8rem)}
  .hero--pag .hechos{font-size:14px}
}

/* ---------- respuesta directa: la definicion que Google y las IA citan ---------- */
.pag-respuesta{display:grid; gap:32px}
@media(min-width:900px){.pag-respuesta{grid-template-columns:1fr 1.4fr; gap:8vw}}
.pag-respuesta p.grande{
  font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height:1.35; font-weight:500;
  max-width:32ch;
}
.pag-respuesta p.grande b{font-weight:800}

/* ---------- para quien: filas con regla gruesa, sin tarjetas ---------- */
.pag-filas{list-style:none; margin-top:clamp(32px,4vw,56px); border-top:3px solid var(--paper)}
.pag-filas li{
  display:grid; gap:6px 40px; padding:22px 0;
  border-bottom:2px solid rgba(var(--paper-rgb),.25);
}
@media(min-width:800px){.pag-filas li{grid-template-columns:minmax(220px,1fr) 2fr; align-items:baseline}}
.pag-filas b{font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.1rem, 1rem + .5vw, 1.45rem)}
.pag-filas span{color:rgba(var(--paper-rgb),.78); max-width:56ch}

/* ---------- que lleva: rejilla asimetrica con bordes duros ---------- */
.pag-lleva{display:grid; gap:3px; margin-top:clamp(32px,4vw,56px); background:var(--paper); border:3px solid var(--paper); box-shadow:12px 12px 0 var(--tono)}
@media(min-width:900px){
  .pag-lleva{grid-template-columns:2fr 1fr 1fr}
  .pag-lleva .ancha{grid-row:span 2}
}
.pag-lleva div{background:var(--ink); padding:clamp(22px,3vw,40px)}
.pag-lleva .num{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 1.5rem + 2vw, 3.4rem); line-height:.85; letter-spacing:-.05em; color:var(--amarillo); margin-bottom:16px}
.pag-lleva .ancha .num{font-size:clamp(3.5rem, 2.5rem + 4vw, 6.5rem)}
.pag-lleva h3{font-size:1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.05; margin-bottom:8px}
.pag-lleva .ancha h3{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); max-width:14ch}
.pag-lleva p{color:rgba(var(--paper-rgb),.75); font-size:var(--step-caption); max-width:40ch}

/* ---------- casos en zig-zag ---------- */
.pag-casos{display:grid; gap:clamp(64px,10vh,120px); margin-top:clamp(40px,6vw,72px)}
.pag-caso{display:grid; gap:36px; align-items:center}
@media(min-width:900px){
  .pag-caso{grid-template-columns:1fr 1.3fr; gap:8vw}
  .pag-caso:nth-child(even) .pag-caso__movil{order:2}
}
.pag-caso__movil{display:grid; place-items:center}
.pag-caso__movil .movil{width:min(64vw,260px); box-shadow:12px 12px 0 rgb(var(--tono-rgb))}
.pag-caso__movil .movil__pantalla img{opacity:1; transform:none; transition:transform 6s linear}
.pag-caso__movil a:hover .movil__pantalla img{transform:translateY(-12%)}
.pag-caso__movil a{display:block; text-decoration:none}
.pag-caso .ficha{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fucsia-texto)}
.pag-caso h3{font-size:clamp(1.8rem, 1.3rem + 2vw, 3rem); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.92; margin:.5rem 0 1rem}
.pag-caso p{color:rgba(var(--paper-rgb),.8); max-width:44ch}
.pag-caso blockquote{margin-top:1.4rem; padding-left:18px; border-left:6px solid rgb(var(--tono-rgb)); font-weight:700; color:var(--paper); max-width:40ch}
.pag-caso blockquote::before{content:"\201C"} .pag-caso blockquote::after{content:"\201D"}
.pag-caso .enlace{margin-top:1.6rem}

/* ---------- instagram o web: tabla comparada ---------- */
.pag-tabla{width:100%; border-collapse:collapse; margin-top:clamp(32px,4vw,56px); font-size:var(--step-caption); border-top:3px solid var(--paper)}
.pag-tabla th, .pag-tabla td{padding:16px 14px 16px 0; text-align:left; border-bottom:2px solid rgba(var(--paper-rgb),.25); vertical-align:top}
.pag-tabla thead th{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--fucsia-texto); font-weight:700}
.pag-tabla tbody th{font-weight:700; width:30%}
.pag-tabla td{color:rgba(var(--paper-rgb),.7)}
.pag-tabla td.si{color:var(--amarillo); font-weight:700}
@media(max-width:599px){
  .pag-tabla thead{display:none}
  .pag-tabla tr{display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:14px 0; border-bottom:2px solid rgba(var(--paper-rgb),.25)}
  .pag-tabla tbody th{grid-column:1/-1; width:auto; border:0; padding:0 0 8px}
  .pag-tabla td{border:0; padding:0}
  .pag-tabla td::before{content:attr(data-col); display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-bottom:4px}
}

/* ---------- precios en las paginas de servicio: dos tacos ---------- */
.pag-precios{display:grid; gap:clamp(20px,2.4vw,32px); margin-top:clamp(32px,4vw,56px)}
@media(min-width:800px){.pag-precios{grid-template-columns:1fr 1fr}}
.pag-precio{position:relative; background:var(--ink); padding:clamp(26px,3vw,44px); display:grid; gap:10px; align-content:start; border:3px solid var(--paper); box-shadow:12px 12px 0 var(--paper)}
.pag-precio.destaca{background:var(--amarillo); color:var(--ink); border-color:var(--amarillo); box-shadow:12px 12px 0 var(--fucsia)}
.pag-precio .sello{position:absolute; right:-12px; top:-16px; transform:rotate(6deg); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#fff; background:var(--fucsia); border:3px solid var(--ink); padding:7px 11px}
.pag-precio h3{font-size:1.1rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em}
.pag-precio .cifra{font-size:clamp(2.8rem, 2rem + 3.2vw, 5rem); font-weight:800; letter-spacing:-.05em; line-height:.9}
.pag-precio .cifra small{font-size:13px; font-weight:600; color:var(--smoke); letter-spacing:0; margin-left:8px}
.pag-precio.destaca .cifra small{color:rgba(10,10,11,.7)}
.pag-precio p:not(.cifra):not(.sello){color:rgba(var(--paper-rgb),.78); font-size:var(--step-caption)}
.pag-precio.destaca p:not(.cifra):not(.sello){color:rgba(10,10,11,.82)}
.pag-precio .boton{justify-self:start; margin-top:12px}
.pag-precio.destaca .boton{box-shadow:8px 8px 0 var(--ink)}
.pag-precio .enlace{justify-self:start; margin-top:12px}
.pag-nota{margin-top:32px; color:var(--smoke); font-size:var(--step-caption); max-width:70ch}

/* ---------- cierre ---------- */
.pag-cierre{text-align:left; border-top:8px solid var(--fucsia)}
.pag-cierre .seccion{max-width:16ch}
.pag-cierre .acciones{margin-top:2.4rem}

/* ---------- enlaces entre paginas ---------- */
.pag-otras{display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:32px}

@media(prefers-reduced-motion:reduce){
  .pag-caso__movil .movil__pantalla img{transition:none}
}

/* ═════════════ cabecera de pagina interior (sin moviles) ═════════════ */
.pag-cabeza{padding:calc(110px + 5vh) var(--margen) clamp(40px,7vh,80px); max-width:1180px; margin:0 auto; box-sizing:content-box}
.pag-cabeza h1{
  font-weight:800; text-transform:uppercase; font-size:clamp(2.2rem, 1.2rem + 4vw, 4.8rem);
  line-height:.9; letter-spacing:-.04em; max-width:14ch;
}
.pag-cabeza .bajada{margin-top:1.6rem}
.miga{display:flex; flex-wrap:wrap; gap:8px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--smoke); margin-bottom:1.6rem; list-style:none}
.miga a{color:var(--smoke); text-decoration:none; border-bottom:2px solid transparent}
.miga a:hover{color:var(--paper); border-color:var(--amarillo)}
.miga li + li::before{content:"/"; margin-right:8px; color:var(--fucsia-texto)}

/* ═════════════ estrenos: indice ═════════════ */
.est-lista{display:grid; gap:clamp(64px,10vh,120px)}
.est-item{display:grid; gap:32px; align-items:center; text-decoration:none; color:inherit}
@media(min-width:900px){
  .est-item{grid-template-columns:1.6fr 1fr; gap:6vw}
  .est-item:nth-child(even) .est-item__img{order:2}
}
.est-item__img{position:relative; transition:transform .15s}
.est-item__img > img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center top; border:3px solid var(--paper); box-shadow:14px 14px 0 rgb(var(--tono-rgb))}
.est-item:hover .est-item__img{transform:translate(-3px,-3px)}
.est-item__img .movil{position:absolute; width:clamp(96px,13vw,170px); right:-3%; bottom:-10%; transform:rotate(4deg); box-shadow:8px 8px 0 var(--ink), 10px 10px 0 var(--paper)}
.est-item__img .movil__pantalla img{opacity:1; transform:none}
.est-item .ficha{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fucsia-texto)}
.est-item h2{font-size:clamp(2rem, 1.4rem + 2.4vw, 3.6rem); font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.92; margin:.5rem 0 .9rem}
.est-item p{color:rgba(var(--paper-rgb),.8); max-width:40ch}
.est-item .enlace{margin-top:1.4rem}

/* ═════════════ estreno: pagina de caso ═════════════ */
.caso-cartel{max-width:1180px; margin:0 auto; padding:0 var(--margen); position:relative; box-sizing:content-box}
.caso-cartel > picture > img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center top; border:3px solid var(--paper); box-shadow:16px 16px 0 rgb(var(--tono-rgb))}
.caso-cartel .movil{position:absolute; width:clamp(110px,16vw,220px); right:calc(var(--margen) + 3%); bottom:-5%; box-shadow:8px 8px 0 var(--ink), 10px 10px 0 var(--paper)}
.caso-cartel .movil__pantalla img{opacity:1; transform:none}
@media(max-width:699px){.caso-cartel > picture > img{aspect-ratio:4/5; box-shadow:10px 10px 0 rgb(var(--tono-rgb))}}
.ficha-tecnica{display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:clamp(28px,4vw,48px); border-top:3px solid var(--paper)}
@media(min-width:800px){.ficha-tecnica{grid-template-columns:repeat(4,1fr)}}
.ficha-tecnica div{padding:18px 16px 18px 0; border-bottom:2px solid rgba(var(--paper-rgb),.25)}
.ficha-tecnica dt{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fucsia-texto); margin-bottom:6px}
.ficha-tecnica dd{font-weight:700}
.ficha-tecnica a{color:var(--paper); text-decoration-color:var(--amarillo); text-decoration-thickness:2px; text-underline-offset:4px}

/* ═════════════ texto largo: articulos y casos ═════════════ */
/* de lectura: aqui se mide. Solo la cabecera, los enlaces, las citas y el cierre llevan el lenguaje del cartel */
.art{max-width:68ch; margin:0 auto; padding:0 var(--margen) clamp(72px,12vh,140px)}
.art--caso{padding-top:clamp(80px,12vh,140px)}
.art h2{font-size:clamp(1.5rem, 1.25rem + 1vw, 2.1rem); font-weight:800; line-height:1.05; margin:2.8em 0 .7em; letter-spacing:-.025em}
.art h3{font-size:1.2rem; font-weight:700; margin:1.8em 0 .5em}
.art p, .art li{color:rgba(var(--paper-rgb),.84); line-height:1.7}
.art p + p{margin-top:1.1em}
.art ul, .art ol{margin:1em 0 1.2em 1.2em}
.art li + li{margin-top:.5em}
.art li b, .art p b{color:var(--paper)}
.art a:not(.boton):not(.enlace){color:var(--paper); text-decoration-color:var(--amarillo); text-decoration-thickness:2px; text-underline-offset:4px}
.art a:not(.boton):not(.enlace):hover{color:var(--amarillo)}
.art blockquote{margin:1.8em 0; padding-left:20px; border-left:6px solid var(--amarillo); font-weight:700; color:var(--paper); font-size:1.15rem; line-height:1.4}
.art__autor{font-weight:600; font-size:.85em; color:var(--smoke)}
.art .resumen{font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.5; color:var(--paper); font-weight:500}
.art table{width:100%; border-collapse:collapse; margin:1.4em 0; font-size:var(--step-caption); border-top:3px solid var(--paper)}
.art th, .art td{text-align:left; padding:12px 12px 12px 0; border-bottom:2px solid rgba(var(--paper-rgb),.25); vertical-align:top}
.art th{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fucsia-texto); font-weight:700}
.art figure{margin:2.4em 0}
.art figure .movil{margin:0 auto; width:min(60vw,240px); box-shadow:10px 10px 0 var(--amarillo)}
.art figure .movil__pantalla img{opacity:1; transform:none}
.art figcaption{text-align:center; color:var(--smoke); font-size:13px; margin-top:22px}
.meta{display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--smoke); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-top:1.6rem}
/* el cierre del articulo: un taco con borde y sombra amarilla */
.caja-cta{margin-top:3em; padding:clamp(24px,3vw,36px); border:3px solid var(--paper); box-shadow:12px 12px 0 var(--amarillo)}
.caja-cta p{color:var(--paper); font-weight:600; font-size:clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height:1.4}
.caja-cta .acciones{margin-top:1.4rem}
.relacionados{margin-top:3.5em; display:grid; gap:12px; justify-items:start}
.relacionados .capitulo{margin-bottom:4px}

/* cabecera de articulo: mas corta que la de las demas paginas, que el titulo es largo */
.pag-cabeza--art{max-width:68ch}
.pag-cabeza--art h1{font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem); max-width:none}

/* ═════════════ blog: portada del articulo ═════════════ */
/* bajo el titulo, con el mismo marco que el retrato: borde negro, filo amarillo y sombra dura */
.art-portada{max-width:68ch; margin:0 auto clamp(40px,6vh,64px); padding:0 var(--margen); box-sizing:content-box}
.art-portada img{
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center top;
  border:3px solid var(--ink); outline:3px solid var(--amarillo); box-shadow:12px 12px 0 var(--amarillo);
}
@media(max-width:599px){.art-portada img{aspect-ratio:4/3; box-shadow:8px 8px 0 var(--amarillo)}}

/* ═════════════ blog: indice ═════════════ */
/* composicion de cartel, no rejilla: el primero a lo ancho con la foto sobre un
   bloque amarillo plano; los demas en filas con la foto a un lado, alternando */
.blog-cartel a{text-decoration:none; color:inherit}
.blog-cartel .cat{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fucsia-texto); margin-bottom:.9rem}
.blog-cartel h2{font-weight:800; text-transform:uppercase; letter-spacing:-.035em; line-height:.92; transition:color .15s}
.blog-cartel a:hover h2, .blog-cartel a:focus-visible h2{color:var(--amarillo)}
.blog-cartel .res{color:rgba(var(--paper-rgb),.76); margin-top:1rem; max-width:52ch; font-size:var(--step-caption)}
.blog-cartel time{display:block; margin-top:1.1rem; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--smoke)}

.blog-destacado a{display:grid; gap:32px; align-items:end}
@media(min-width:900px){.blog-destacado a{grid-template-columns:1.55fr 1fr; gap:clamp(40px,5vw,72px)}}
.blog-destacado__img{position:relative; padding:0 clamp(18px,2.4vw,32px) clamp(18px,2.4vw,32px) 0}
.blog-destacado__img::before{
  content:""; position:absolute; z-index:0; left:clamp(18px,2.4vw,32px); top:clamp(18px,2.4vw,32px); right:0; bottom:0;
  background:var(--amarillo);
}
.blog-destacado__img img{
  position:relative; z-index:1; display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center top;
  border:3px solid var(--paper); box-shadow:12px 12px 0 var(--ink); transition:transform .15s;
}
.blog-destacado a:hover img{transform:translate(-3px,-3px)}
.blog-destacado h2{font-size:clamp(2rem, 1.3rem + 2.8vw, 3.8rem)}
.blog-destacado .res{max-width:40ch; font-size:var(--step-body)}

.blog-filas{margin-top:clamp(56px,8vh,96px); border-top:3px solid var(--paper)}
.blog-fila{border-bottom:2px solid rgba(var(--paper-rgb),.25)}
.blog-fila a{display:grid; gap:20px 40px; padding:clamp(26px,3.5vw,44px) 0; align-items:center}
.blog-fila img{
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center top;
  border:3px solid var(--paper); box-shadow:10px 10px 0 var(--amarillo); transition:transform .15s;
}
.blog-fila:nth-child(even) img{box-shadow:10px 10px 0 var(--fucsia)}
.blog-fila a:hover img{transform:translate(-2px,-2px)}
.blog-fila h2{font-size:clamp(1.4rem, 1.1rem + 1.3vw, 2.3rem)}
@media(min-width:800px){
  .blog-fila a{grid-template-columns:minmax(220px,.85fr) 2fr; gap:clamp(32px,4vw,64px)}
  .blog-fila:nth-child(even) a{grid-template-columns:2fr minmax(220px,.85fr)}
  .blog-fila:nth-child(even) img{order:2}
}
@media(max-width:799px){
  .blog-fila img{width:min(100%, 420px); box-shadow:8px 8px 0 var(--amarillo)}
  .blog-fila:nth-child(even) img{box-shadow:8px 8px 0 var(--fucsia)}
}

/* paginacion: tacos con borde, 44px, amarillo el actual y al tocar */
.paginacion{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:clamp(48px,7vh,80px)}
.paginacion__nums{display:flex; flex-wrap:wrap; gap:8px}
.paginacion a, .paginacion span{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 16px;
  border:2px solid var(--paper); color:var(--paper);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  transition:background .15s, color .15s, border-color .15s;
}
.paginacion a:hover, .paginacion a:focus-visible, .paginacion [aria-current]{background:var(--amarillo); border-color:var(--amarillo); color:var(--ink)}
.paginacion .nada{opacity:.3}
.paginacion__ant::before{content:"\2190"; margin-right:10px}
.paginacion__sig::after{content:"\2192"; margin-left:10px}
@media(min-width:600px){.paginacion__sig{margin-left:auto}}

/* ═════════════ contacto ═════════════ */
.pag-contacto{max-width:1180px; margin:0 auto; padding:0 var(--margen) clamp(72px,12vh,140px); border-top:0; box-sizing:content-box}
.pag-contacto .cuadro.dos{display:grid; gap:56px}
@media(min-width:900px){.pag-contacto .cuadro.dos{grid-template-columns:1fr 1.1fr; gap:6vw}}
.datos-contacto{list-style:none; margin-top:2.4rem; display:grid; gap:18px; border-top:3px solid var(--paper); padding-top:18px}
.datos-contacto span{display:block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fucsia-texto); margin-bottom:4px}

/* ═════════════ precios: la pagina usa los .paquete de la portada, con todo el detalle ═════════════ */
.pag-precios-pagina .paquetes{padding-top:clamp(20px,3vh,40px)}
.paquetes--detalle .paquete__nombre{font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem); margin-bottom:.6rem}
.paquetes--detalle .paquete__cifra{font-size:clamp(2.8rem,2rem + 3vw,4.4rem)}

/* ═════════════ color de cada pagina ═════════════ */
.pag .almo__cartel{min-height:72dvh}

/* ═════════════ servicios: guias, tres precios ═════════════ */
.pag-guias{display:grid; gap:12px; justify-items:start; margin-top:clamp(56px,8vh,96px); padding-top:24px; border-top:3px solid var(--paper)}
.pag-guias .capitulo{margin-bottom:4px}
@media(min-width:1000px){
  .pag-precios--tres{grid-template-columns:repeat(3,1fr)}
  .pag-precios--tres .cifra{font-size:clamp(2.6rem, 1.6rem + 2.2vw, 3.8rem)}
  .pag-precios--tres .cifra small{display:block; margin:10px 0 0}
}

/* ═════════════ precios: portada gratis, Cartera y referidos ═════════════ */
.linea-portada{margin-top:clamp(28px,3vw,40px); max-width:60ch; color:rgba(var(--paper-rgb),.85); line-height:1.5}
.linea-portada b{color:var(--paper); font-weight:800}
.linea-portada .enlace{margin-top:.4rem}
.cartera{display:grid; gap:clamp(32px,4vw,64px); align-items:center}
@media(min-width:900px){.cartera{grid-template-columns:1fr 1.1fr}}
.cartera .paquetes{padding:0; border:0; background:none}
.cartera .seccion{max-width:12ch}
.referidos{display:grid; gap:10px; justify-items:start; padding:clamp(24px,3vw,40px); border:3px solid var(--amarillo); box-shadow:12px 12px 0 var(--fucsia); max-width:760px}
.referidos__titulo{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,1.1rem + 1vw,2rem); letter-spacing:-.03em; line-height:1}
.referidos__texto{font-weight:600; font-size:clamp(1.05rem,1rem + .4vw,1.3rem); line-height:1.4; max-width:40ch}

/* ═════════════ articulo: la llamada intermedia ═════════════ */
.caja-cta--medio{margin:2.6em 0; box-shadow:12px 12px 0 var(--fucsia)}

/* ═════════════ /tu-portada ═════════════ */
.portada-pide .charla .seccion{max-width:11ch}
.portada-pasos{list-style:none; counter-reset:paso; margin-top:2rem; display:grid; gap:0; border-top:3px solid var(--paper)}
.portada-pasos li{counter-increment:paso; display:grid; grid-template-columns:auto 1fr; column-gap:16px; padding:16px 0; border-bottom:2px solid rgba(var(--paper-rgb),.25); color:rgba(var(--paper-rgb),.8); font-size:var(--step-caption)}
.portada-pasos li::before{content:counter(paso, decimal-leading-zero); grid-row:span 2; font-weight:800; font-size:1.6rem; line-height:1; letter-spacing:-.04em; color:var(--amarillo)}
.portada-pasos b{display:block; color:var(--paper); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:1rem}
.muestras{display:grid; gap:clamp(24px,3vw,40px); margin-top:clamp(32px,4vw,56px)}
@media(min-width:800px){.muestras{grid-template-columns:repeat(3,1fr)}}
.muestra{display:block; text-decoration:none; color:var(--paper); background:var(--ink); border:3px solid var(--paper); box-shadow:10px 10px 0 var(--amarillo); transition:transform .15s}
.muestra--2{box-shadow:10px 10px 0 var(--fucsia)}
.muestra img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top}
.muestra:hover, .muestra:focus-visible{transform:translate(-3px,-3px)}
.muestra__ficha{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; justify-content:space-between; padding:10px 14px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; border-top:3px solid var(--paper)}
.muestra__ficha b{font-size:14px; font-weight:800; letter-spacing:.02em}

/* ═════════════ /gracias y 404 ═════════════ */
.pag-gracias .pag-cabeza .acciones{margin-top:2.4rem}
.pag-gracias .pag-cabeza h1{max-width:16ch}
.lista-404{display:grid; gap:3px; background:var(--paper); border:3px solid var(--paper); box-shadow:12px 12px 0 var(--amarillo)}
@media(min-width:800px){.lista-404{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.lista-404{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.lista-404 a:last-child{grid-column:span 2}}
.lista-404 a{display:grid; gap:6px; padding:clamp(20px,2.4vw,32px); background:var(--ink); color:var(--paper); text-decoration:none; transition:background .15s, color .15s}
.lista-404 b{font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(1.2rem,1rem + .8vw,1.7rem)}
.lista-404 span{color:rgba(var(--paper-rgb),.75); font-size:var(--step-caption)}
.lista-404 a:hover, .lista-404 a:focus-visible{background:var(--amarillo); color:var(--ink)}
.lista-404 a:hover span, .lista-404 a:focus-visible span{color:var(--ink)}
.pag-404 .pag-otras, .pag-gracias .pag-otras{margin-top:clamp(40px,6vh,64px)}