@font-face{font-family:Italianno;src:url('/assets/fonts/italianno-firma.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:Cinzel;src:url('/assets/fonts/cinzel-latin.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:'EB Garamond';src:url('/assets/fonts/eb-garamond-latin-var.woff2') format('woff2');font-display:swap;font-weight:400 500;font-style:normal}
@font-face{font-family:'EB Garamond';src:url('/assets/fonts/eb-garamond-italic-latin-var.woff2') format('woff2');font-display:swap;font-weight:400 500;font-style:italic}

:root{--papel:#f4f1eb;--tinta:#1b1a18;--gris-texto:#66625c;--gris-linea:#8a8680;--linea:#1b1a181f;
  --serif:'EB Garamond',Georgia,serif;--romana:Cinzel,Georgia,serif;--mano:Italianno,cursive}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Textura de papel: ruido SVG al 7 %. Le saca lo de "pantalla" sin que se note por qué. */
body{margin:0;color:var(--tinta);font:18px/1.6 var(--serif);background-color:var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}
strong{font-weight:500}
.contenido{max-width:640px;margin:0 auto;padding:0 24px}
.etiqueta{font:400 11px/1.4 var(--romana);letter-spacing:.3em;text-transform:uppercase;color:var(--gris-texto);margin:0 0 18px}

/* Marca "mano y piedra". La cola de la "g" baja mucho: lo que va debajo deja aire. */
.marca{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none}
.marca-mano{font:400 1em/.75 var(--mano)}
.marca-piedra{font:400 .19em/1 var(--romana);letter-spacing:.38em;text-transform:uppercase;margin-top:.38em}
.lema{font:400 10px/1.4 var(--romana);letter-spacing:.35em;text-transform:uppercase;color:var(--gris-texto);text-align:center;margin:0}

/* Página de error */
.error{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:24px}
.error .marca{font-size:72px}
.error p{margin:0}

/* Portada: la firma se escribe sola (se revela de izquierda a derecha). El recorte
   tiene márgenes negativos arriba y abajo para no cortar las colas de la cursiva. */
.portada{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 96px;position:relative}
.portada .marca{font-size:clamp(84px,22vw,150px);margin:0;font-weight:400}
.portada .marca-mano{clip-path:inset(-30% 100% -60% -10%);animation:escribir 2.4s cubic-bezier(.6,.05,.3,1) .4s forwards}
@keyframes escribir{to{clip-path:inset(-30% -15% -60% -10%)}}
.portada .marca-piedra{font-size:13px;margin-top:26px;opacity:0;animation:aparecer 1s ease 2.4s forwards}
.portada .frase{font-size:clamp(19px,4.8vw,26px);line-height:1.35;margin:26px 0 0;max-width:21em;opacity:0;animation:aparecer 1s ease 2.9s forwards}
.leer{position:absolute;bottom:28px;left:0;right:0;font:400 9px/1 var(--romana);letter-spacing:.35em;text-transform:uppercase;color:var(--gris-texto);text-decoration:none;opacity:0;animation:aparecer 1s ease 3.4s forwards}
@keyframes aparecer{to{opacity:1}}

/* La carta */
.carta{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--linea)}
.carta p{margin:0 0 16px}
.capital:first-letter{font-family:var(--romana);float:left;font-size:3.4em;line-height:.82;padding:.08em .14em 0 0}
.margen{font-style:italic;font-size:.82em;color:var(--gris-texto);border-left:1px solid var(--gris-linea);padding-left:12px;margin:22px 0!important}
.carta .firma{font-size:52px;align-items:flex-start;margin-top:28px!important}
.carta .firma .marca-piedra{font-size:10px;margin-top:20px}

/* Secciones */
.seccion{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--linea)}
.seccion h2.etiqueta{text-align:center}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pasos li{display:grid;grid-template-columns:44px 1fr;align-items:baseline}
.pasos .romano{font:400 22px/1 var(--romana);color:var(--gris-texto)}
.pasos p{margin:0}

/* Capturas: marco oscuro para que la interfaz luzca sobre el papel */
.captura{margin:0 0 20px;background:var(--tinta);border-radius:12px;padding:10px}
.captura img{display:block;width:100%;height:auto;border-radius:6px}
.captura figcaption{color:#cfc9c0;font-size:14px;font-style:italic;padding:10px 4px 2px}
.caso-adelanto{display:block;text-decoration:none}
.caso-adelanto h3{font-weight:500;font-size:26px;line-height:1.15;margin:0 0 10px}
.caso-adelanto p{margin:0 0 12px}
.seguir{font-style:italic;text-decoration:underline;text-underline-offset:3px}

/* Contacto */
.contacto{text-align:center}
.botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.boton{display:inline-block;border:1px solid var(--tinta);padding:12px 20px;min-height:44px;text-decoration:none;font-size:16px}
.boton:hover{background:var(--tinta);color:var(--papel)}
.boton-sec{border-color:var(--gris-linea)}
.pie{padding:40px 24px 56px;border-top:1px solid var(--linea)}

/* Caso */
.cabecera{padding-top:28px;padding-bottom:12px;text-align:center}
.cabecera .marca{font-size:44px}
.cabecera .marca-piedra{font-size:8px;margin-top:16px}
.caso article{padding-top:32px}
.caso h1{font-weight:400;font-size:clamp(34px,8vw,48px);line-height:1.05;margin:0 0 14px}
.bajada{font-style:italic;color:var(--gris-texto);margin:0}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:24px 0 8px;padding:16px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:15px}
.ficha dt{font:400 9px/1.4 var(--romana);letter-spacing:.25em;text-transform:uppercase;color:var(--gris-texto)}
.ficha dd{margin:2px 0 0}
.caso section{padding-top:40px}
.burbujas{background:#ebe6dc;border-radius:12px;padding:14px 14px 8px;margin:6px 0 16px}
.burbuja{background:#fff;border-radius:12px 12px 12px 3px;padding:8px 12px;font:15px/1.35 system-ui,sans-serif;margin:0 40px 8px 0;box-shadow:0 1px 0 #0000000f}
.aclaracion{font-size:13px;font-style:italic;color:var(--gris-texto);margin:4px 2px 6px}
.decisiones{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.decisiones li{display:grid;grid-template-columns:44px 1fr;align-items:baseline}
.decisiones .romano{font:400 22px/1 var(--romana);color:var(--gris-texto)}
.decisiones h3{font-weight:500;font-size:19px;margin:0 0 4px}
.decisiones p{margin:0}
.pendiente{border:1px dashed var(--gris-linea);border-radius:10px;padding:14px 16px;color:var(--gris-texto);font-size:16px;margin:0}
.cierre{text-align:center;padding-top:56px;padding-bottom:56px}
.cierre p{font-size:21px;margin:0 0 18px}

/* Capturas de celular (450 CSS): ancho de teléfono y centradas, sin perder el marco oscuro */
.captura-movil{max-width:340px;margin-left:auto;margin-right:auto}

.gancho{font-size:clamp(22px,5vw,28px);line-height:1.2;font-weight:500;margin:0 0 18px}
.logros{margin:0 0 18px;padding-left:1.1em}
.logros li{margin-bottom:10px}
.logros li::marker{color:var(--gris-texto)}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.portada *{opacity:1!important;clip-path:none!important}}