/* ═══════════════════════════════════════════════════════════════
   TODO ES COLOR DI ROSA — páginas interiores (blog y 404)
   ---------------------------------------------------------------
   El HTML del blog lo arma seratta-admin, igual para todas las marcas
   (src/lib/sitios/plantilla.ts), y cada sitio lo viste con su propio
   paginas.css. Las clases (.pg-*, .bl-*, .ar-*) son las mismas.

   Esta hoja sale de la de Cartagena —la única clara que teníamos— con
   la paleta y las letras de esta marca: el rosa de la casa, el tinta
   casi negro del sitio, Playfair para los titulares y Archivo para
   leer. Son las MISMAS que carga la home, así que el visitante no
   siente que cambió de página al entrar al blog.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --arena:#FBF6F2;
  --arena-2:#F8DEE6;
  --espuma:#FFFFFF;
  --naranja:#D93C55;
  --naranja-2:#F04E63;
  --naranja-3:#F9C8D4;
  --coral:#C4708B;
  --marron:#0C0A0B;
  --marron-2:#231D1F;
  --noche:#0C0A0B;
  --linea:rgba(12,10,11,.14);
  --linea-2:rgba(12,10,11,.28);
  --texto:rgba(12,10,11,.86);
  --suave:rgba(12,10,11,.62);   /* ≈ 5:1 sobre la arena: pasa AA */
  --pad:clamp(1.1rem,4vw,3.4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Playfair Display","Bodoni Moda",Georgia,serif;
  --ff:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--texto); font-family:var(--ff); font-weight:400; line-height:1.7;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(58rem 34rem at 80% -12%, rgba(226,96,28,.16), transparent 62%),
    radial-gradient(46rem 28rem at -8% 14%, rgba(255,192,138,.22), transparent 60%),
    var(--arena);
  background-attachment:fixed;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--naranja); color:#fff}

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:999; transform:translateY(-160%);
  background:var(--marron); color:var(--espuma); padding:.7rem 1.1rem; font-weight:600; text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--naranja); outline-offset:3px}
main:focus{outline:none}

/* ── cabecera ─────────────────────────────────────────────────── */
.pg-hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.5rem;
  padding:.9rem var(--pad); background:rgba(255,248,238,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea);
}
.pg-brand{display:flex; align-items:center; min-height:44px}
.pg-brand img{height:30px; width:auto}
.pg-nav{display:flex; align-items:center; flex-wrap:wrap; gap:.2rem clamp(1rem,2.4vw,2rem)}
.pg-nav a:not(.pg-btn){
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  color:var(--suave); padding:.75rem 0; transition:color .3s var(--ease);
}
.pg-nav a:not(.pg-btn):hover,.pg-nav a[aria-current="page"]{color:var(--marron)}
.pg-nav a[aria-current="page"]{box-shadow:inset 0 -2px var(--naranja)}

/* ── botones ──────────────────────────────────────────────────── */
.pg-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.85rem 1.9rem;
  border-radius:999px; background:var(--naranja); color:#fff; border:1px solid var(--naranja);
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 8px 28px -12px rgba(226,96,28,.9); cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.pg-btn:hover{background:var(--marron); border-color:var(--marron); color:var(--espuma)}
.pg-btn--ghost{background:transparent; border-color:var(--linea-2); color:var(--marron); box-shadow:none}
.pg-btn--ghost:hover{background:var(--marron); color:var(--espuma)}
.pg-btn--sm{min-height:42px; padding:.6rem 1.3rem; font-size:.64rem}
.pg-acciones{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem}

/* ── tipografía de página ─────────────────────────────────────── */
.pg-main{padding:clamp(3rem,9vh,6rem) var(--pad) 0; max-width:1360px; margin:0 auto}
.pg-eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--naranja); margin:0 0 1.1rem;
}
.pg-h1{
  font-family:var(--f-display); color:var(--marron); font-weight:400; margin:0 0 1.3rem; max-width:18ch;
  font-size:clamp(2.3rem,1.2rem + 4.4vw,5rem); line-height:1.02; letter-spacing:-.02em;
}
.pg-h1 em{font-style:italic; color:var(--naranja)}
.pg-h1--ar{max-width:none; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); line-height:1.1}
.pg-lead{max-width:60ch; font-size:1.08em; margin:0; color:var(--texto)}
.hint{font-size:.86rem; color:var(--suave); line-height:1.55; margin:0}

/* ── blog: listado ────────────────────────────────────────────── */
.bl-grid{
  list-style:none; margin:clamp(2.8rem,7vh,4.5rem) 0 0; padding:0;
  display:grid; gap:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
}
.bl-card a{
  display:block; height:100%; text-decoration:none; color:inherit; padding:.75rem;
  border:1px solid var(--linea); border-radius:18px; background:rgba(255,248,238,.72);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.bl-card a:hover,.bl-card a:focus-visible{border-color:rgba(226,96,28,.55); transform:translateY(-4px); box-shadow:0 18px 44px -24px rgba(12,10,11,.55)}
.bl-card figure{margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:12px; background:var(--arena-2)}
.bl-card img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.bl-card a:hover img{transform:scale(1.05)}
.bl-sin{background:radial-gradient(circle at 50% 40%,rgba(255,192,138,.55),transparent 58%),var(--arena-2)!important}
.bl-card h2{font-family:var(--f-display); font-size:1.24rem; font-weight:400; line-height:1.25; color:var(--marron); margin:1rem .3rem .5rem}
.bl-card p{font-size:.92rem; color:var(--suave); margin:0 .3rem; line-height:1.55}
.bl-meta{font-size:.66rem!important; letter-spacing:.16em; text-transform:uppercase; color:var(--naranja)!important; font-weight:600; margin:.9rem .3rem .3rem!important}

/* ── blog: artículo ────────────────────────────────────────��──── */
.ar{max-width:46rem; margin:0 auto}
.ar-back{
  display:inline-block; margin-bottom:2rem; padding:.5rem 0; font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--suave); transition:color .3s;
}
.ar-back:hover{color:var(--naranja)}
.ar-cover{margin:clamp(2.2rem,5vh,3rem) 0; border-radius:18px; overflow:hidden; border:1px solid var(--linea)}
.ar-cover img{width:100%; max-height:34rem; object-fit:cover}
.ar-body{margin-top:2rem}
.ar-body h2{font-family:var(--f-display); color:var(--marron); font-weight:400; font-size:clamp(1.5rem,1.1rem + 1.2vw,2.1rem); line-height:1.2; margin:2.6rem 0 1rem}
.ar-body h3{color:var(--marron); font-weight:600; font-size:1.22rem; line-height:1.3; margin:2.1rem 0 .8rem}
.ar-body p{margin:0 0 1.25rem}
.ar-body strong{color:var(--marron); font-weight:600}
.ar-body a{color:var(--naranja); text-underline-offset:3px}
.ar-body a:hover{color:var(--marron)}
.ar-body ul{margin:0 0 1.5rem; padding-left:1.2rem}
.ar-body li{margin-bottom:.5rem; padding-left:.3rem}
.ar-body li::marker{color:var(--naranja)}
.ar-body figure{margin:2.4rem 0; border-radius:14px; overflow:hidden; border:1px solid var(--linea)}
.ar-body blockquote{margin:2.4rem 0; padding:1.1rem 1.4rem; border-left:2px solid var(--naranja); background:rgba(226,96,28,.07); border-radius:0 12px 12px 0}
.ar-body blockquote p{font-family:var(--f-display); color:var(--marron); font-size:1.3rem; line-height:1.45; margin:0}
.ar-faq{margin:3rem 0 0; border-top:1px solid var(--linea)}
.ar-faq h2{font-size:.7rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--naranja); margin:2rem 0 .6rem}
.ar-faq details{border-bottom:1px solid var(--linea)}
.ar-faq summary{cursor:pointer; color:var(--marron); font-weight:600; padding:1.1rem 2rem 1.1rem 0; list-style:none; position:relative}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after{content:"+"; position:absolute; right:0; top:1rem; color:var(--naranja); font-size:1.2rem}
.ar-faq details[open] summary::after{content:"−"}
.ar-faq details p{margin:0 0 1.2rem}
.ar-cta{
  max-width:46rem; margin:clamp(3.5rem,9vh,5rem) auto 0; padding:clamp(1.8rem,4vw,2.6rem); text-align:center;
  border:1px solid rgba(226,96,28,.35); border-radius:22px;
  background:radial-gradient(circle at 50% 0,rgba(255,192,138,.5),transparent 68%),rgba(255,248,238,.8);
}
.ar-cta h2{font-family:var(--f-display); color:var(--marron); font-weight:400; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem); line-height:1.12; margin:0 0 .7rem}
.ar-cta p{margin:0 auto 1.7rem; max-width:42ch}
.ar-ciudades{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem}
.ar-rel{max-width:1360px; margin:clamp(4rem,10vh,6rem) auto 0}
.ar-rel .bl-grid{margin-top:1.2rem}

/* ── pie ──────────────────────────────────────────────────────── */
.pg-ft{
  margin-top:clamp(4.5rem,12vh,7rem); padding:clamp(2.4rem,6vh,3.4rem) var(--pad) 1.6rem;
  background:var(--marron); color:rgba(246,235,216,.82); border-top:1px solid var(--linea);
  display:grid; gap:2.2rem 3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.pg-ft img{height:26px; width:auto; margin-bottom:.9rem; opacity:.95}
.pg-ft p{max-width:34ch; font-size:.8rem; color:rgba(246,235,216,.62); margin:0; line-height:1.6}
.pg-ft .pg-legal{margin-top:1rem; font-size:.7rem; letter-spacing:.06em}
.pg-ft h2{font-size:.6rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(246,235,216,.6); margin:0 0 .9rem}
.pg-ft ul{list-style:none; margin:0; padding:0}
.pg-ft li a{display:inline-block; padding:.4rem 0; font-size:.84rem; color:rgba(246,235,216,.85); text-decoration:none; transition:color .35s var(--ease),transform .35s var(--ease)}
.pg-ft li a:hover{color:var(--naranja-3); transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
}