/* PubliCode · sitio 0.2.6 — dirección editorial: noche, papel y maíz */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/instrument-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fuentes/instrument-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fuentes/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fuentes/azeret-mono-latin-500-normal.woff2) format('woff2')}

:root{--noche:#0E1A21;--noche-2:#16252E;--papel:#F4EFE7;--papel-2:#FBF8F3;--tinta:#14212A;--suave:#56646C;--maiz:#E8B931;--maiz-osc:#8A6410;--linea:#DCD3C5;--linea-osc:#2A3A44;--serif:'Instrument Serif',Georgia,serif;--sans:'Instrument Sans',system-ui,sans-serif;--mono:'Azeret Mono',ui-monospace,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--maiz);outline-offset:3px;border-radius:4px}
.envoltura{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:1rem;top:-3rem;z-index:50;padding:.6rem 1rem;background:var(--maiz);color:var(--noche);font-weight:600;border-radius:.5rem}
.saltar:focus{top:1rem}

.etiqueta{display:inline-flex;align-items:center;gap:.6rem;font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--maiz-osc)}
.etiqueta::before{content:"";width:1.75rem;height:1px;background:currentColor}
.oscuro .etiqueta{color:var(--maiz)}
.titular{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,6.2vw,4.75rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.titular em{font-style:italic;color:var(--maiz-osc)}
.oscuro .titular em{color:var(--maiz)}
.entrada{margin-top:1.25rem;max-width:36rem;font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--suave)}
.oscuro .entrada{color:#B9C5CB}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.125rem;padding:.8rem 1.4rem;border-radius:99px;border:1px solid currentColor;font-weight:600;text-decoration:none;transition:transform .15s ease,background .2s}
.boton:active{transform:scale(.97)}
.boton--maiz{background:var(--maiz);border-color:var(--maiz);color:var(--noche)}
.boton--maiz:hover{background:#F2C94C}
.boton svg{width:1.15rem;height:1.15rem}
.boton[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* Encabezado */
.cabecera{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--noche) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--papel);border-bottom:1px solid var(--linea-osc)}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.marca{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;letter-spacing:.14em;font-size:.875rem}
.marca svg{width:1.9rem;height:1.9rem}
.marca b{color:var(--maiz);font-weight:600}
.menu{display:flex;align-items:center;gap:1.4rem;font-size:.9375rem}
.menu a{text-decoration:none;opacity:.85}
.menu a:hover{opacity:1}
.menu .boton{min-height:2.5rem;padding:.45rem 1rem;opacity:1}
.chip-beta{font:500 .6875rem/1 var(--mono);letter-spacing:.1em;padding:.35rem .55rem;border:1px solid var(--linea-osc);border-radius:99px;color:#B9C5CB}
@media (max-width:52rem){.menu a:not(.boton){display:none}}
@media (max-width:26rem){.chip-beta{display:none}.marca{letter-spacing:.08em}}
.cabecera .envoltura{flex-wrap:wrap}

/* Portada */
.oscuro{background:var(--noche);color:var(--papel)}
.portada{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(4rem,9vw,7rem)}
.portada::before{content:"";position:absolute;inset:auto -20% -40% 30%;height:80%;background:radial-gradient(closest-side,rgba(232,185,49,.18),transparent);pointer-events:none}
.portada .envoltura{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.desde{margin-top:1.25rem;color:#D7E0E4;font-size:.9375rem}.desde strong{color:var(--maiz)}.desde a{color:var(--papel);font-weight:600;display:inline-block;padding:.35rem 0}
.aviso-beta{margin-top:2rem;max-width:34rem;padding:.9rem 1rem;border:1px solid var(--linea-osc);border-radius:.9rem;color:#B9C5CB;font-size:.875rem;line-height:1.5}
.aviso-beta strong{color:var(--papel)}
.escena{position:relative;height:clamp(30rem,52vw,38rem)}
.telefono{position:absolute;width:clamp(13rem,21vw,16.5rem);aspect-ratio:300/649;border-radius:2.4rem;padding:.55rem;background:#05090C;box-shadow:0 2.5rem 5rem rgba(0,0,0,.55),inset 0 0 0 1.5px #2b3a43;overflow:hidden}
.telefono img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.9rem}
.telefono::after{content:"";position:absolute;top:.95rem;left:50%;width:28%;height:1.15rem;margin-left:-14%;border-radius:99px;background:#05090C}
.escena .t1{left:50%;top:0;margin-left:-8.25rem;z-index:3;animation:flotar 7s ease-in-out infinite}
.escena .t2{left:4%;top:12%;transform:rotate(-8deg) scale(.88);z-index:2;opacity:.92}
.escena .t3{right:2%;top:16%;transform:rotate(7deg) scale(.86);z-index:1;opacity:.9}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-.75rem)}}
.qr-prueba{position:absolute;z-index:4;right:0;bottom:0;display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem .8rem .8rem;border-radius:1.1rem;background:var(--papel);color:var(--tinta);box-shadow:0 1rem 2.5rem rgba(0,0,0,.4);max-width:17rem}
.qr-prueba img{width:5.25rem;height:5.25rem;flex:none}
.qr-prueba p{font-size:.8125rem;line-height:1.4}
.qr-prueba strong{display:block;font-size:.9375rem}
@media (max-width:56rem){
  .portada .envoltura{grid-template-columns:1fr}
  .escena{height:31rem;margin-top:1rem}
  .escena .t1{margin-left:-7rem}
  .qr-prueba{display:none}
}
@media (max-width:30rem){.escena{height:27rem}.telefono{width:12.5rem}.escena .t1{margin-left:-6.25rem}.escena .t2{left:-6%}.escena .t3{right:-8%}}

/* Franja de garantías */
.franja{border-top:1px solid var(--linea-osc);background:var(--noche-2);color:#D7E0E4}
.franja ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;padding:1.1rem 0;font-size:.9375rem}
.franja li{display:inline-flex;align-items:center;gap:.5rem}
.franja li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--maiz)}

/* Secciones */
.seccion{padding:clamp(4rem,9vw,7rem) 0}
.cabeza{display:grid;gap:1rem;max-width:44rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.cabeza .titular{font-size:clamp(2.25rem,5vw,3.75rem)}

/* Ejemplos */
.ejemplos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem}
.ejemplo{text-decoration:none;display:grid;gap:1rem}
.ejemplo .telefono{position:relative;width:100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ejemplo:hover .telefono,.ejemplo:focus-visible .telefono{transform:translateY(-.5rem)}
.ejemplo h3{font-size:1.0625rem;font-weight:600}
.ejemplo p{font-size:.875rem;color:var(--suave)}
.ejemplo p span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--maiz-osc)}
@media (max-width:64rem){.ejemplos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,44%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;padding-bottom:1rem;margin-inline:-1.25rem;padding-inline:1.25rem;scrollbar-width:thin}.ejemplo{scroll-snap-align:start}}

/* Funciones locales */
.funciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:1.25rem;overflow:hidden}
.funcion{padding:1.6rem 1.4rem;background:var(--papel-2)}
.funcion svg{width:1.6rem;height:1.6rem;color:var(--maiz-osc)}
.funcion h3{margin-top:1rem;font-size:1.0625rem;font-weight:600;line-height:1.3}
.funcion p{margin-top:.4rem;font-size:.9375rem;color:var(--suave);line-height:1.5}
@media (max-width:60rem){.funciones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.funcion{padding:1.25rem 1rem}.funcion h3{font-size:.9375rem}.funcion p{font-size:.8125rem}}
@media (max-width:20rem){.funciones{grid-template-columns:1fr}}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;counter-reset:paso}
.paso{position:relative;padding:2rem 1.6rem 1.75rem;border:1px solid var(--linea-osc);border-radius:1.25rem;background:var(--noche-2)}
.paso::before{counter-increment:paso;content:"0" counter(paso);display:block;font-family:var(--serif);font-style:italic;font-size:3.5rem;line-height:1;color:var(--maiz)}
.paso h3{margin-top:1rem;font-size:1.25rem;font-weight:600}
.paso p{margin-top:.5rem;color:#B9C5CB}
@media (max-width:52rem){.pasos{grid-template-columns:1fr}}

/* Comparación */
.tabla{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--linea);border-radius:1.25rem;overflow:hidden;background:var(--papel-2);font-size:.9375rem}
.tabla th,.tabla td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
.tabla thead th{font:500 .75rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);background:var(--papel)}
.tabla thead th.nexo{color:var(--noche);background:var(--maiz)}
.tabla tbody th{font-weight:600;width:26%}
.tabla td.nexo{background:#FFF7DD;font-weight:600}
.desliza{overflow-x:auto;border-radius:1.25rem}
.desliza .tabla{min-width:38rem}
.nota{margin-top:1rem;font-size:.875rem;color:var(--suave)}
@media (max-width:40rem){
  .desliza{overflow:visible}.desliza .tabla{min-width:0}
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:auto}
  .tabla thead{display:none}
  .tabla tbody tr{padding:1rem 1.1rem;border-bottom:1px solid var(--linea)}
  .tabla tbody tr:last-child{border-bottom:0}
  .tabla tbody th,.tabla td{padding:.25rem 0;border:0;width:auto}
  .tabla tbody th{font:500 .6875rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:.35rem}
  .tabla td::before{content:attr(data-etiqueta);display:block;font-size:.75rem;font-weight:600;color:var(--suave)}
  .tabla td.nexo{background:#FFF7DD;padding:.6rem .75rem;border-radius:.6rem;margin-bottom:.4rem}
  .tabla td.nexo::before{color:var(--maiz-osc)}
}

/* Paquetes */
.paquetes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch}
.paquete{display:flex;flex-direction:column;padding:2rem 1.6rem;border:1px solid var(--linea);border-radius:1.5rem;background:var(--papel-2)}
.paquete--destacado{background:var(--noche);color:var(--papel);border-color:var(--noche);box-shadow:0 2rem 4rem rgba(14,26,33,.25)}
.paquete .sello{align-self:flex-start;font:500 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:.4rem .6rem;border-radius:99px;background:var(--maiz);color:var(--noche);margin-bottom:1rem}
.paquete h3{font-family:var(--serif);font-weight:400;font-size:2.25rem;line-height:1}
.paquete .para{margin-top:.5rem;color:var(--suave);font-size:.9375rem}
.paquete--destacado .para{color:#B9C5CB}
.paquete .precio{margin-top:1.4rem;font-family:var(--serif);font-size:3.25rem;line-height:1}
.paquete .precio small{font-family:var(--sans);font-size:.875rem;color:var(--suave);margin-left:.3rem}
.paquete--destacado .precio small{color:#B9C5CB}
.paquete ul{margin-top:1.5rem;display:grid;gap:.65rem;flex:1}
.paquete li{position:relative;padding-left:1.6rem;font-size:.9375rem;line-height:1.45}
.paquete li::before{content:"";position:absolute;left:0;top:.35rem;width:.9rem;height:.5rem;border-left:2px solid var(--maiz-osc);border-bottom:2px solid var(--maiz-osc);transform:rotate(-45deg)}
.paquete--destacado li::before{border-color:var(--maiz)}
.paquete .boton{margin-top:1.75rem}
@media (max-width:60rem){.paquetes{grid-template-columns:minmax(0,1fr);max-width:30rem}.paquete{padding:1.75rem 1.25rem}.paquete .precio{font-size:clamp(2.25rem,12vw,3.25rem)}}

/* Oferta */
.oferta{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;padding:clamp(2rem,5vw,3.5rem);border-radius:2rem;background:var(--maiz);color:var(--noche)}
.oferta .titular{font-size:clamp(2rem,4.4vw,3.25rem)}
.oferta .titular em{color:var(--noche)}
.oferta .entrada{color:#3B3215}
.oferta .etiqueta{color:#5A4300}
.oferta .boton{border-color:var(--noche)}
.oferta .boton--noche{background:var(--noche);color:var(--papel)}
.oferta-visual{position:relative;height:16rem}
.oferta-visual .telefono{width:9.5rem}
.oferta-visual .telefono:nth-child(1){left:8%;top:6%;transform:rotate(-6deg)}
.oferta-visual .telefono:nth-child(2){left:42%;top:0;transform:rotate(5deg)}
@media (max-width:52rem){.oferta{grid-template-columns:1fr}.oferta-visual{display:none}}

/* Preguntas */
.preguntas{display:grid;gap:.75rem;max-width:48rem}
.preguntas details{border:1px solid var(--linea);border-radius:1rem;background:var(--papel-2)}
.preguntas summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;font-weight:600}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--maiz-osc)}
.preguntas details[open] summary::after{content:"–"}
.preguntas details p{padding:0 1.25rem 1.25rem;color:var(--suave)}

/* Pie */
.pie{padding:3.5rem 0 2.5rem;font-size:.9375rem}
.pie .envoltura{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.pie h3{font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--maiz);margin-bottom:1rem}
.pie ul{display:grid;gap:.5rem}
.pie a{color:#D7E0E4;text-decoration:none;display:inline-block;padding:.3rem 0}
.pie a:hover{text-decoration:underline}
.pie p{color:#B9C5CB;max-width:26rem}
.pie .legal{grid-column:1/-1;padding-top:1.5rem;border-top:1px solid var(--linea-osc);color:#97A6AE;font-size:.8125rem}
@media (max-width:48rem){.pie .envoltura{grid-template-columns:1fr}}

/* Documentos legales */
.documento{padding:clamp(3rem,7vw,5rem) 0 5rem}
.documento .envoltura{max-width:46rem}
.documento .volver{display:inline-block;margin-bottom:2rem;font-weight:600;text-decoration:none;color:var(--maiz-osc)}
.documento small{display:block;font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;color:var(--suave)}
.documento h1{margin-top:.75rem;font-family:var(--serif);font-weight:400;font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.02;letter-spacing:-.015em}
.documento h2{margin-top:2.25rem;font-size:1.1875rem;font-weight:600}
.documento p,.documento li{margin-top:.75rem;color:#2C3A42}
.documento ul{list-style:disc;padding-left:1.25rem}
.documento .note{margin-top:1.5rem;padding:1rem 1.15rem;border-radius:.9rem;background:#FFF4D2;border:1px solid #EBD28A;color:#4A3A0B}
.documento a{color:#7A5800}
.documento section{overflow-wrap:anywhere}

/* Movimiento */
.revelar{opacity:0;transform:translateY(1.25rem);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.revelar.visible,.sin-js .revelar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.revelar{opacity:1;transform:none}}

/* Beta: promoción y WhatsApp */
.desde s,.antes{color:#9AA8AF;font-weight:400;text-decoration-thickness:1px}
.paquete--promo{border:2px solid var(--maiz)}
.paquete .precio .antes{font-family:var(--sans);font-size:1.125rem;margin-left:.5rem;color:var(--suave)}
.privacidad-corta{margin-top:1rem;font-size:.8125rem;color:#3B3215;max-width:34rem}
.privacidad-corta a{font-weight:600}
.menu .boton svg{width:1rem;height:1rem}
.documento a.boton{color:var(--noche)}

/* 0.2.8 · aviso del catálogo en la portada */
.catalogo-aviso{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;padding:clamp(1.75rem,4vw,3rem);border-radius:1.5rem;background:var(--noche);color:var(--papel)}
.catalogo-aviso .etiqueta{color:var(--maiz)}
.catalogo-aviso .titular{margin-top:1rem;font-size:clamp(2rem,4.6vw,3.25rem)}
.catalogo-aviso .entrada{margin-top:.9rem;max-width:36rem;color:#C9D2D6}
.catalogo-aviso .boton{margin-top:0}
.catalogo-aviso .titular em{color:var(--maiz)}

/* 0.3.0 · tarifas beta y diseño gráfico adicional */
.desde-precio{font:500 .875rem/1 var(--sans);margin-right:.25rem;vertical-align:middle}
.extras{margin-top:2.5rem;padding:clamp(1.5rem,3.5vw,2.25rem);border:1px solid var(--linea);border-radius:1.25rem;background:var(--papel-2)}
.extras h3{font:400 1.875rem/1.1 var(--serif)}
.extras>p{margin-top:.5rem;color:var(--suave);max-width:40rem}
.extras ul{margin-top:1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:0 2rem}
.extras li span{min-width:0}
.extras li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--linea)}
.extras li strong{white-space:nowrap}
.extras .boton{margin-top:1.5rem}

/* PubliCode 0.4.0 · identidad de marca */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(../fuentes/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:750;font-display:swap;src:url(../fuentes/figtree-latin-750-normal.woff2) format('woff2')}
:root{--sans:'Figtree',system-ui,sans-serif;--serif:'Figtree',system-ui,sans-serif;--papel:#F6F3EA}
.titular,.documento h1{font-weight:750;letter-spacing:-.03em;line-height:1.02}
.titular em,.documento h1 em{font-style:normal;color:var(--maiz-osc)}
.oscuro .titular em{color:var(--maiz)}
.paquete h3,.paquete .precio{font-weight:750;letter-spacing:-.02em}
.paso::before{font-style:normal;font-weight:750}
.marca{gap:.55rem;letter-spacing:-.01em;font-size:1.3rem;font-weight:400;font-family:var(--sans)}
.marca svg{width:2rem;height:2rem}
.marca b{font-weight:750}
@media (max-width:26rem){.marca{letter-spacing:-.01em}}
