/* Kaths Letters — sitio web
   Layout: cabecera con logo, contenido en columna centrada (máx. 1120px), pie de contacto.
   Look deliberadamente claro (lila pálido de marca) en todos los dispositivos. */
:root{
  --purple:#8512D6; --purple-dark:#5E0B9A; --lila:#C4A5D1; --malva:#7F709B;
  --turq:#6ABDC1; --teal:#089197;
  --bg:#F7F1FA; --surface:#FFFFFF; --ink:#22172C; --muted:#6B6079; --line:#E7DCEE;
  --display:"Fraunces","Playfair Display",Georgia,serif;
  --body:"Poppins","Segoe UI",system-ui,sans-serif;
  --script:"Sacramento","Brush Script MT",cursive;
  --r:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--purple)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1120px;margin:0 auto}

/* Cabecera */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.top .logo img{height:52px;width:auto}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);font-weight:500;font-size:15px;padding:8px 14px;border-radius:999px}
.nav a[aria-current="page"],.nav a:hover{background:#F1E6F8;color:var(--purple)}
@media (max-width:560px){.top .logo img{height:44px}.nav a{padding:6px 10px;font-size:14px}}

/* Tipografía */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6vw,60px);color:var(--purple)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:20px}
.script{font-family:var(--script);font-weight:400;color:var(--purple);font-size:1.4em;text-shadow:2px 2px 0 rgba(106,189,193,.55);line-height:.9}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--malva);font-weight:600;margin:0}
.lead{font-size:18px;color:var(--muted);max-width:60ch;margin:0}
.muted{color:var(--muted)}

/* Botones */
.btn{font:inherit;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;border:1.5px solid var(--purple);background:var(--purple);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--purple-dark);border-color:var(--purple-dark)}
.btn.ghost{background:transparent;color:var(--purple)}
.btn.ghost:hover{background:#F1E6F8}
.btn.wa{background:#1F9D55;border-color:#1F9D55}
.btn.wa:hover{background:#178246;border-color:#178246}
.btn.small{padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--turq);outline-offset:2px}

/* Secciones */
main{display:block}
.section{padding-block:48px}
.stack{display:grid;gap:14px}

/* Pie */
.foot{background:var(--surface);border-top:1px solid var(--line);margin-top:40px}
.foot .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding-block:32px}
.foot h3{font-size:16px;font-family:var(--body);font-weight:600;margin-bottom:6px}
.foot p{margin:0;color:var(--muted);font-size:15px}
.foot .brand{font-family:var(--display);font-weight:800;color:var(--purple);font-size:18px}
.foot .brand span{color:var(--lila)}

/* Placeholder de foto */
.ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#F1E6F8,#E3F2F2);color:var(--malva);font-family:var(--display);font-weight:800;font-size:28px;text-align:center}
.ph small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--malva)}

@media (prefers-reduced-motion:no-preference){
  .card,.btn,.nav a{transition:background .15s,box-shadow .2s,transform .2s}
}
.thumbs .ph{font-size:10px}.thumbs .ph small{display:none}
.lr-link{display:inline-flex;align-items:center;gap:8px;font-weight:600}