:root{
  /* Papelería ProCarta: crema, verde botella, negro, rojo lacre y oro. El azul vive solo con ciudadanía; el verde manda en residencia. */
  --crema:#F5EFE3;
  --papel:#FBF8F2;
  --verde:#1F3A2B;
  --negro:#1C1B18;
  --rojo:#9E2B25;
  --rojoLogo:#A71C17;
  --oro:#A8843E;
  --linea:#DCCFB6;
  --gris:#5E5A52;
  --azul:#1D2448;
  --acento:var(--verde);
  --display:"Chau Philomene One","Arial Narrow",Impact,sans-serif;
  --texto:"EB Garamond",Garamond,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--crema);color:var(--negro);font-family:var(--texto);font-size:1.18rem;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:6px}
h1,h2,h3{color:var(--verde);font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0;text-transform:uppercase;letter-spacing:.01em}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* Encabezado */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--crema) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:84px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca .sello img{width:52px;height:52px;transition:transform .2s}
.marca .sello:hover img{transform:rotate(-8deg) scale(1.05)}
.marca a{text-decoration:none;display:block}
.marca b{color:var(--verde);display:block;line-height:1;font-family:var(--display);font-weight:400;font-size:1.45rem;letter-spacing:.02em}
.marca small{display:block;font-style:italic;font-size:.9rem;color:var(--gris);margin-top:-2px}
nav{margin-left:auto;display:flex;gap:26px;align-items:center}
nav a{text-decoration:none;font-size:1.05rem}
nav a:not(.btn):hover{color:var(--rojo)}
.top .btn:hover{background:var(--azul);border-color:var(--azul);color:var(--papel)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:13px 22px;border-radius:999px;border:2px solid var(--acento);background:var(--acento);color:var(--papel);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn.claro{background:transparent;color:var(--acento)}
.btn.claro:hover{background:var(--acento);color:var(--papel)}
.btn.chico{padding:9px 16px;font-size:.92rem}
.nav-movil{display:none}
@media (max-width:860px){
  .top .wrap nav a:not(.btn){display:none}
  .nav-movil{display:flex;justify-content:space-between;gap:12px;padding:8px 20px 10px;border-top:1px solid var(--linea);margin-left:0}
  .nav-movil a{text-decoration:none;font-size:1.02rem;color:var(--verde);white-space:nowrap}
}
.btn{white-space:nowrap}
@media (max-width:480px){.marca .lema{width:118px}.marca b{color:var(--verde);display:block;line-height:1;font-size:1.2rem}.marca .sello img{width:42px;height:42px}.top .wrap{gap:10px}}

/* Portada */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.ceja{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.92rem;color:var(--oro)}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:14px 0 20px}
.hero h1 em{font-style:normal;color:var(--rojo)}
.hero p.lead{font-size:1.35rem;max-width:34ch;color:#2d2c28}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.marca .lema{display:block;width:150px;height:auto;margin-top:2px}

.escena{position:relative;aspect-ratio:1.3/1;width:100%}
/* proporción real: libro 8.5 x 11 pulgadas, celular de unos 2.8 x 5.8 */
.escena .libro{position:absolute;bottom:10.5%;height:auto;width:42%;aspect-ratio:8.5/11;object-fit:fill;border-radius:2px 6px 6px 2px;box-shadow:-2px 0 0 rgba(0,0,0,.35) inset,10px 14px 22px rgba(40,30,10,.28),2px 3px 6px rgba(40,30,10,.2);transform-origin:bottom center}
.escena .libro.atras{left:7.5%;transform:rotate(-1.5deg)}
.escena .libro.frente{left:50.5%;transform:rotate(1.5deg)}
.telefono{aspect-ratio:375/760;background:#0d1126}
.telefono img{width:100%;height:100%;object-fit:cover;object-position:top}
.podio{position:absolute;left:0;bottom:0;width:100%;height:auto;aspect-ratio:600/92;overflow:visible}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .escena{max-width:560px;margin:10px auto 0}
}

/* Secciones */
section{padding:84px 0;scroll-margin-top:84px}
@media (max-width:860px){section{scroll-margin-top:124px}}
.titulo{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:44px;border-bottom:1px solid var(--oro);padding-bottom:18px}
.titulo h2{font-size:clamp(2rem,4vw,3rem)}
.titulo p{max-width:46ch;color:var(--gris)}

/* Libros */
.libros{display:grid;gap:36px}
.ficha{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:center;background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:36px}
.ficha .tapa{position:relative}
.ficha .tapa img{height:auto;aspect-ratio:8.5/11;object-fit:fill;width:100%;border-radius:3px 7px 7px 3px;box-shadow:12px 16px 28px rgba(40,30,10,.25)}
.ficha.ciu{--acento:var(--azul);border-top:5px solid var(--azul)}
.ficha.res{--acento:#24472F;border-top:5px solid #24472F}
.ficha h3{color:var(--acento)}
.formulario{display:inline-block;font-family:var(--display);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:4px;padding:3px 8px;color:var(--gris);margin-right:6px}
.formulario.nuevo{color:var(--rojo)}
.ficha h3{font-size:clamp(1.7rem,3vw,2.3rem);margin:14px 0 12px}
.ficha p{max-width:56ch}
.ficha ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ficha li{padding-left:24px;position:relative}
.ficha li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--rojo)}
.idiomas{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
.ficha .idiomas{margin-top:22px}
.idiomas span{font-style:italic;color:var(--gris);margin-right:4px}
button.btn{cursor:pointer;font:inherit;font-family:var(--display);font-size:.92rem}
.tituloIdioma{margin-top:20px;font-style:italic;color:var(--gris)}
@media (max-width:760px){.ficha{grid-template-columns:1fr;padding:26px}.ficha .tapa{max-width:240px}}

/* App */
.app{--acento:var(--azul);padding-top:0}
.app h2{color:var(--azul)}
.app .ceja{display:inline-block;margin-top:8px;background:var(--rojoLogo);color:var(--crema);padding:3px 10px 2px;border-radius:4px;font-size:.8rem;letter-spacing:.14em}
.app .wrap{display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:center;background:var(--papel);border:1px solid var(--linea);border-top:5px solid var(--azul);border-radius:18px;padding:44px;max-width:1072px}
.app .wrap > *{min-width:0}
.app .telefono{position:relative;width:min(300px,100%);margin:0 auto;border-radius:34px;padding:10px;box-shadow:16px 24px 44px rgba(40,30,10,.3)}
.app .telefono img{border-radius:25px}
.app-nombre{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.app-nombre img{width:76px;height:76px;border-radius:18px;box-shadow:0 6px 14px rgba(40,30,10,.25)}
.app h2{font-size:clamp(2rem,4vw,3rem)}
.rasgos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 26px;margin:30px 0 20px;padding-top:24px;border-top:1px solid var(--linea)}
.rasgos div b{display:block;color:var(--azul);border-left:4px solid var(--rojoLogo);padding-left:10px;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.1rem}
.rasgos div span{color:#3a3934;font-size:1.02rem;line-height:1.4;display:block;margin-top:4px;padding-left:14px}
.gratis{font-size:1.05rem;color:var(--negro);margin-bottom:22px}
.gratis b{background:var(--rojoLogo);color:var(--crema);font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding:2px 9px;border-radius:4px;margin-right:4px}
.codigo{margin-top:22px;padding:16px 20px;border-left:4px solid var(--rojoLogo);background:var(--crema);border-radius:0 10px 10px 0;font-size:1.08rem}
@media (max-width:980px){.rasgos{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.app .wrap{grid-template-columns:1fr;padding:26px}}
@media (max-width:520px){.app .wrap{margin:0 16px;padding:22px 18px}}
@media (max-width:520px){.rasgos{grid-template-columns:1fr}}

/* Autora */
.autora .wrap{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.retrato{aspect-ratio:4/5;border-radius:200px 200px 16px 16px;overflow:hidden;box-shadow:14px 18px 34px rgba(40,30,10,.22)}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.autora h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.autora p+p{margin-top:14px}
.autora .nota{font-size:1rem;color:var(--gris);font-style:italic}
@media (max-width:760px){.autora .wrap{grid-template-columns:1fr}.retrato{max-width:260px}}

/* Contacto y pie */
.contacto{background:var(--verde);color:var(--papel);padding:72px 0}
.contacto h2{color:var(--crema)}
.contacto .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contacto h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:12px}
.contacto p{opacity:.85}
.canales{display:grid;gap:12px}
.canales a{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid rgba(251,248,242,.25);border-radius:12px;text-decoration:none}
.canales a:hover{background:rgba(251,248,242,.08)}
.canales small{opacity:.7}
@media (max-width:760px){.contacto .wrap{grid-template-columns:1fr}}
footer{background:var(--negro);color:#c9c6bd;font-size:.95rem;padding:30px 0}
footer .wrap{display:grid;gap:12px}
footer .legal{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:var(--oro)}

/* Sobre ProCarta */
.nosotros{padding:8px 0 0;scroll-margin-top:100px}
@media (max-width:860px){.nosotros{scroll-margin-top:140px}}
.nosotros .caja{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border-top:1px solid var(--oro);border-bottom:1px solid var(--oro);padding:28px 4px}
.nosotros img{width:84px;height:auto}
.nosotros h2{font-size:1.5rem;margin-bottom:8px}
.nosotros p{max-width:72ch;color:#2d2c28}
@media (max-width:560px){.nosotros .caja{grid-template-columns:1fr;gap:14px}.nosotros img{width:64px}}

/* Páginas legales */
.legal-pagina{padding:48px 0 84px}
.legal-pagina .wrap{max-width:780px}
.legal-pagina h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:10px 0 8px}
.volver{display:inline-block;margin-bottom:26px;text-decoration:none;color:var(--verde)}
.volver:hover{color:var(--rojo)}
.fecha{color:var(--gris);font-style:italic;padding-bottom:22px;border-bottom:1px solid var(--oro);margin-bottom:10px}
.texto-legal h2{font-size:1.45rem;margin:34px 0 10px}
.texto-legal p,.texto-legal ul{margin:0 0 14px}
.texto-legal ul{padding-left:22px}
.texto-legal li{margin-bottom:6px}
.texto-legal li::marker{color:var(--rojo)}
.texto-legal a{color:var(--verde)}

.btn.pronto{opacity:.55;cursor:default}
.btn.pronto:hover{transform:none}

.correo{display:flex;gap:10px}
.correo a{flex:1}
.correo button{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;background:transparent;color:var(--papel);border:1px solid rgba(251,248,242,.35);border-radius:12px;padding:0 16px;cursor:pointer}
.correo button:hover{background:rgba(251,248,242,.12)}

/* Preguntas frecuentes */
.preguntas{padding-bottom:20px}
.lista-preguntas{display:grid;gap:12px;max-width:860px}
.lista-preguntas details{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:0 22px}
.lista-preguntas details[open]{border-color:var(--oro)}
.lista-preguntas summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:1.15rem;color:var(--verde)}
.lista-preguntas summary::-webkit-details-marker{display:none}
.lista-preguntas summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--rojo);transition:transform .2s}
.lista-preguntas details[open] summary::after{transform:rotate(45deg)}
.lista-preguntas details p{padding:0 0 20px;max-width:70ch}
.lista-preguntas a{color:var(--verde)}
.ficha{scroll-margin-top:100px}@media (max-width:860px){.ficha{scroll-margin-top:130px}}