/* =============================================================================
   Estructura de la web. Para cambiar colores, tipografías o formas usa
   /personalizar/tema.css: este archivo solo usa esas variables.
   ============================================================================= */
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/caveat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/nunito-latin-800-normal.woff2) format('woff2')}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
.rp-cargando main,.rp-cargando .cabecera,.rp-cargando footer{visibility:hidden}
.rp-fallo-config{background:#c9352a;color:#fff;padding:12px 16px;margin:0;font:600 14px system-ui,sans-serif}
body{font-family:var(--fuente-general);background:var(--pagina-fondo);color:var(--pagina-texto);line-height:1.5;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--pagina-enlaces)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Cabecera */
.cabecera{background:var(--cabecera-fondo);padding:12px max(20px,env(safe-area-inset-left,0px));display:flex;align-items:center}
.cabecera-marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cabecera-texto);font-weight:800;letter-spacing:-.01em}
.cabecera-logo{height:var(--cabecera-logo-alto);width:auto;display:block}

main{flex:1;width:100%;max-width:var(--pagina-ancho-maximo);margin:0 auto;padding:8px max(16px,env(safe-area-inset-left,0px)) 48px}
.view{animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2,h3{color:var(--titulo-color);letter-spacing:-.02em;outline:none;text-wrap:balance}
h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.08;margin:.2em 0 .4em;max-width:16em}
h1 em{font-family:var(--fuente-manuscrita);font-style:normal;font-weight:700;color:var(--titulo-destacado-color);font-size:1.15em}
h2{font-size:clamp(1.6rem,4vw,2.3rem);margin:.4em 0 .1em}
.kicker{font-family:var(--fuente-manuscrita);font-size:1.5rem;color:var(--antetitulo-color);margin:12px 0 0}
.lead{font-size:1.15rem;max-width:40em}
.sub{color:var(--pagina-texto-suave);margin:0 0 18px}

/* Pasos */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:30px 0 34px;padding:0;list-style:none}
.pasos li{border-top:2px solid var(--paso-linea);padding:16px 4px 4px;display:flex;flex-direction:column;gap:2px}
.paso-marca{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paso-numero-fondo);color:var(--paso-numero-texto);font-weight:800;margin-bottom:8px}
.paso-marca .icono{width:20px;height:20px}
.paso-marca .icono:not([data-vacio]) + .paso-num{display:none}
.pasos span.paso-texto{color:var(--pagina-texto-suave);font-size:.95rem}

/* Iconos */
.icono{display:inline-flex;width:20px;height:20px;flex:none;align-items:center;justify-content:center}
.icono svg,.icono img{width:100%;height:100%;display:block;object-fit:contain}

/* Botones */
.btn{appearance:none;border:2px solid transparent;border-radius:var(--boton-radio);padding:13px 24px;font:inherit;font-weight:800;cursor:pointer;background:var(--boton-principal-fondo);color:var(--boton-principal-texto);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .1s,background .2s,filter .2s}
.btn:hover{background:var(--boton-principal-hover)}
.btn:active{transform:scale(.97)}
.btn.grande{font-size:1.1rem;padding:16px 30px}
.btn.sec{background:var(--boton-secundario-fondo);color:var(--boton-secundario-texto);border-color:var(--boton-secundario-borde)}
.btn.sec:hover{filter:brightness(.95)}
.btn.b-email{background:var(--boton-email-fondo);color:var(--boton-email-texto)}
.btn.b-enlace{background:var(--boton-enlace-fondo);color:var(--boton-enlace-texto)}
.btn.b-whatsapp{background:var(--boton-whatsapp-fondo);color:var(--boton-whatsapp-texto)}
.btn.b-email:hover,.btn.b-enlace:hover,.btn.b-whatsapp:hover{filter:brightness(1.08)}
.btn.mini{padding:6px 12px;font-size:.85rem}
.btn[disabled]{opacity:.55;cursor:progress}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,.foto-drop:focus-within,.link:focus-visible{outline:3px solid var(--campo-foco);outline-offset:2px}
.link{background:none;border:0;padding:0;font:inherit;color:var(--pagina-enlaces);text-decoration:underline;cursor:pointer;font-weight:700}

/* Formulario */
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.form>div{min-width:0}
.etiqueta{display:block;font-weight:700;margin-bottom:6px}
.foto-drop{border:2px dashed var(--foto-zona-borde);border-radius:18px;background:var(--foto-zona-fondo);aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;text-align:center;cursor:pointer;overflow:hidden;position:relative;color:var(--foto-zona-icono)}
.foto-drop:hover,.foto-drop.drag{border-color:var(--boton-principal-fondo)}
.foto-drop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-drop.cargando::after{content:attr(data-preparando);position:absolute;inset:0;display:grid;place-items:center;background:var(--foto-zona-fondo);opacity:.9;font-weight:700}
.foto-vacia{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px}
.foto-vacia .icono{width:40px;height:40px}
.foto-vacia small{color:var(--pagina-texto-suave)}
.ayuda{font-size:.85rem;color:var(--pagina-texto-suave);margin:6px 0 0}
.campo{display:block;font-weight:700;margin-bottom:16px}
.opc{font-weight:400;color:var(--pagina-texto-suave)}
input[type=text],input[type=email],textarea{width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--campo-borde);border-radius:12px;background:var(--campo-fondo);font:inherit;font-weight:400;color:var(--campo-texto)}
textarea{min-height:160px;resize:vertical;font-family:var(--fuente-manuscrita);font-size:1.55rem;line-height:1.25}
.contador{display:block;font-size:.82rem;color:var(--pagina-texto-suave);text-align:right;font-weight:400;margin-top:4px;font-variant-numeric:tabular-nums}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:6px 0 4px}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--boton-principal-fondo);flex:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.error{color:var(--error-texto);font-weight:700;min-height:1.2em;margin:8px 0 0}

/* ===== Postal (la colocación la decide /personalizar/postal.json) ===== */
.postal{position:relative;max-width:900px;margin:10px auto 26px;padding:24px;display:grid;
  grid-template-areas:var(--areas);grid-template-columns:var(--columnas);column-gap:24px;row-gap:6px;align-content:start;
  background-color:var(--postal-fondo);color:var(--postal-texto);
  background-image:radial-gradient(rgba(140,100,60,.05) 1px,transparent 1px);background-size:6px 6px;
  border-radius:var(--postal-radio);box-shadow:0 24px 44px -20px var(--postal-sombra)}
.postal>*{min-width:0}
.postal [data-solo=movil]{display:none}
.p-logo img{height:var(--postal-logo-alto);width:auto;display:block;max-width:100%}
.p-logo{align-self:start;margin-bottom:6px}
.p-foto{align-self:center;background:var(--postal-marco-foto);padding:10px;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.p-foto img{display:block;width:100%;aspect-ratio:var(--foto-proporcion);object-fit:cover;max-width:100%}
.postal--foto-inclinada .p-foto{transform:rotate(-1.6deg);padding-bottom:28px}
.p-para{font-family:var(--fuente-manuscrita);font-size:1.65rem;color:var(--postal-para);margin:0}
.p-texto{font-family:var(--fuente-manuscrita);font-size:var(--postal-tamano-texto);line-height:1.18;white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 10px}
.p-firma{font-family:var(--fuente-manuscrita);font-weight:700;font-size:var(--postal-tamano-firma);color:var(--postal-firma);margin:0;align-self:end}
.postal[data-texto=center] .p-texto,.postal[data-texto=center] .p-para{text-align:center}
.postal[data-texto=end] .p-texto,.postal[data-texto=end] .p-para{text-align:right}
.postal[data-firma=start] .p-firma{text-align:left}
.postal[data-firma=center] .p-firma{text-align:center}
.postal[data-firma=end] .p-firma{text-align:right}
.p-sello{justify-self:end;align-self:start;width:60px;height:72px;background:var(--postal-sello-fondo);border:4px dotted var(--postal-fondo);box-shadow:0 0 0 2px var(--postal-sello-fondo);display:grid;place-items:center;color:var(--postal-sello-icono);transform:rotate(4deg);margin-bottom:6px}
.p-sello .icono{width:28px;height:28px}
.p-linea{align-self:stretch;justify-self:stretch}
.p-linea[data-orientacion=vertical]{border-left:1.5px dashed var(--postal-linea);width:0;justify-self:center}
.p-linea[data-orientacion=horizontal]{border-top:1.5px dashed var(--postal-linea);height:0;margin:14px 0}

@media (max-width:720px){
  .postal:not(.postal--solo-escritorio):not(.postal--solo-movil){grid-template-areas:var(--areas-movil);grid-template-columns:var(--columnas-movil);padding:16px;row-gap:8px}
  .postal:not(.postal--solo-escritorio):not(.postal--solo-movil) [data-solo=movil]{display:block}
  .postal:not(.postal--solo-escritorio):not(.postal--solo-movil) [data-solo=escritorio]{display:none}
  .postal:not(.postal--solo-escritorio):not(.postal--solo-movil) .p-linea[data-orientacion-movil=horizontal]{border-left:0;width:auto;justify-self:stretch;border-top:1.5px dashed var(--postal-linea);height:0;margin:14px 0}
  .postal:not(.postal--solo-escritorio):not(.postal--solo-movil) .p-sello{position:absolute;right:14px;bottom:14px;width:48px;height:58px}
}

/* Vista forzada a móvil (la usa /vista-previa.html) */
.postal--solo-movil{grid-template-areas:var(--areas-movil);grid-template-columns:var(--columnas-movil);padding:16px;row-gap:8px;max-width:380px}
.postal--solo-movil [data-solo=movil]{display:block}
.postal--solo-movil [data-solo=escritorio]{display:none}
.postal--solo-movil .p-linea[data-orientacion-movil=horizontal]{border-left:0;width:auto;justify-self:stretch;border-top:1.5px dashed var(--postal-linea);height:0;margin:14px 0}
.postal--solo-movil .p-sello{position:absolute;right:14px;bottom:14px;width:48px;height:58px}

/* Pantalla 3 */
.compartir{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:0 auto}
.enlace-box{display:flex;gap:8px;max-width:900px;margin:14px auto 0}
.enlace-box input{margin:0;flex:1;font-size:.95rem;min-width:0}
.centro{text-align:center;margin-top:8px}

dialog{border:0;border-radius:18px;padding:24px;width:min(440px,calc(100% - 32px));background:var(--ventana-fondo);color:var(--pagina-texto);box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
dialog::backdrop{background:var(--ventana-velo)}
dialog h3{margin:0 0 14px}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--aviso-fondo);color:var(--aviso-texto);padding:12px 20px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100% - 32px);text-align:center;z-index:10}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--aviso-error-fondo)}

footer{text-align:center;font-size:.85rem;color:var(--pagina-texto-suave);padding:20px}
footer a{color:var(--pagina-texto-suave)}

/* Lienzo oculto donde se dibuja la postal para el email */
.lienzo-captura{position:fixed;left:-10000px;top:0;width:900px;pointer-events:none}
.lienzo-captura .postal{margin:0;box-shadow:none}

@media (max-width:720px){
  .form,.compartir{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}