/* ================================================================
   BLOG del v2 — artículo, índice y categorías.
   Vive aparte de style.css / internas.css para no chocar con las
   otras sesiones. Se carga con $CSS_BLOG = true.
   ================================================================ */

/* el nav flotante, como en el resto del rediseño */
.site-header{top:36px; margin:26px 0 -122px}
@media(max-width:980px){ .site-header{top:12px; margin:12px 0 -90px} }
.topbar{background:url('../img/body-tail-1.png') repeat}

/* ---------- ENTRADA del artículo (mismo lenguaje que las internas) ---------- */
.post-hero{position:relative; background:#f9dedf; padding:0; overflow:hidden;
  border-radius:0 0 50% 50% / 0 0 110px 110px}
.post-hero .wrap{position:relative; padding:146px 0 60px}
.post-hero .container{display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:center}
.post-hero .crumbs{justify-content:flex-start; margin:0 0 14px}
.post-chip{display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rose-900); padding:9px 18px; border-radius:999px;
  background:#fff; box-shadow:0 8px 20px rgba(182,99,104,.14)}
.post-chip svg{width:14px; height:14px; color:var(--rose-700)}
.post-hero h1{font-family:var(--font-serif); font-weight:600; color:var(--ink); margin:0;
  font-size:clamp(28px,3.4vw,46px); line-height:1.1; max-width:17ch}
.post-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0 0;
  font-size:13px; color:var(--ink-soft)}
.post-meta span{display:inline-flex; align-items:center; gap:7px}
.post-meta svg{width:15px; height:15px; flex:0 0 auto; color:var(--rose-700)}
.post-meta .sep{width:5px; height:5px; border-radius:50%; background:var(--rose-500); flex:0 0 auto}
.post-hero .lead{color:var(--ink-soft); font-size:16px; line-height:1.68; max-width:520px; margin:16px 0 0}

/* imagen destacada dentro de la forma orgánica */
.post-art{position:relative; display:flex; justify-content:center; align-items:center}
/* las destacadas del blog son banners 1200x630 CON texto: la forma orgánica y el
   zoom se los comían, así que aquí van en tarjeta 1.6 y sin recorte agresivo */
.post-blob{position:relative; width:100%; max-width:580px; aspect-ratio:1.905;
  border-radius:28px; overflow:hidden;
  background:var(--rose-500); box-shadow:0 26px 56px rgba(182,99,104,.26)}
.post-blob img{width:100%; height:100%; object-fit:cover; display:block}
.post-art .dots{display:none}
.post-art .dots span{width:24px; height:24px; border-radius:50%; box-shadow:0 6px 14px rgba(182,99,104,.22)}
.post-art .dots span:nth-child(1){background:var(--rose-100)}
.post-art .dots span:nth-child(2){background:var(--rose-500)}
.post-art .dots span:nth-child(3){background:var(--rose-900)}
.post-art .spk{position:absolute; color:var(--rose-700); animation:twinkle ease-in-out infinite}
.post-art .spk1{width:26px; left:0; top:8%; animation-duration:3.2s}
.post-art .spk2{width:16px; left:10%; top:20%; animation-duration:2.6s; animation-delay:.7s}
.post-art .spk3{width:20px; right:8%; bottom:6%; animation-duration:3.6s; animation-delay:1.5s}
@media(prefers-reduced-motion:reduce){ .post-art .spk{animation:none} }

/* ---------- CUERPO del artículo ---------- */
.post-main{background:var(--cream); padding:56px 0 70px}
.post-main .container{max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start}
.post-body{max-width:760px; color:var(--ink-soft); font-size:16.5px; line-height:1.8}
.post-body > *:first-child{margin-top:0}
.post-body p{margin:0 0 20px}
.post-body strong{color:var(--ink); font-weight:600}
.post-body a{color:var(--rose-900); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.post-body h2{font-family:var(--font-serif); font-weight:600; color:var(--ink);
  font-size:clamp(23px,2.5vw,31px); line-height:1.22; margin:42px 0 14px}
.post-body h3{font-family:var(--font-serif); font-weight:600; color:var(--ink);
  font-size:clamp(19px,2vw,23px); line-height:1.3; margin:32px 0 10px}
.post-body h4{font-family:var(--font-sans); font-weight:600; color:var(--ink); font-size:17px; margin:26px 0 8px}
.post-body ul, .post-body ol{margin:0 0 22px; padding-left:0; list-style:none}
.post-body ol{counter-reset:li}
.post-body li{position:relative; padding-left:30px; margin-bottom:10px}
.post-body ul li::before{content:""; position:absolute; left:6px; top:.62em; width:9px; height:9px;
  border-radius:50%; background:var(--rose-500)}
.post-body ol li{counter-increment:li}
.post-body ol li::before{content:counter(li); position:absolute; left:0; top:.05em;
  width:22px; height:22px; border-radius:50%; background:var(--rose-100); color:var(--rose-900);
  font-family:var(--font-sans); font-weight:600; font-size:12px; display:flex;
  align-items:center; justify-content:center}
.post-body figure{margin:26px 0 28px}
.post-body img{max-width:100%; height:auto; border-radius:22px; display:block;
  box-shadow:0 18px 40px rgba(182,99,104,.16)}
.post-body figcaption{margin-top:10px; font-size:13px; color:var(--ink-soft); text-align:center}
.post-body hr{border:none; height:1px; background:var(--rose-300); margin:38px 0; opacity:.6}
.post-body blockquote{margin:26px 0; padding:20px 24px; background:#fff; border-left:4px solid var(--rose-700);
  border-radius:0 18px 18px 0; box-shadow:0 10px 26px rgba(182,99,104,.1)}
.post-body blockquote p:last-child{margin:0}
/* tablas: mismo lenguaje que las internas, con scroll propio en móvil */
.post-body .tabla{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:22px;
  box-shadow:0 10px 26px rgba(182,99,104,.12); margin:0 0 26px}
.post-body table{width:100%; border-collapse:collapse; background:#fff; min-width:520px}
.post-body th, .post-body td{padding:14px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid #f2dbdc}
.post-body thead th{background:var(--rose-800); color:#fff; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; border-bottom:none}
.post-body tbody tr:last-child td{border-bottom:none}
.post-body tbody tr:nth-child(even) td{background:#fdf5f5}
.post-body td:first-child{font-weight:600; color:var(--ink)}

/* ---------- columna lateral ---------- */
.post-side{position:sticky; top:130px; display:flex; flex-direction:column; gap:18px}
.side-card{background:#fff; border-radius:22px; padding:24px 22px; box-shadow:0 10px 26px rgba(182,99,104,.12)}
.side-card h3{font-family:var(--font-serif); font-weight:600; font-size:19px; color:var(--ink); margin:0 0 10px}
.side-card p{margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--ink-soft)}
.side-card .btn{width:100%; justify-content:center}
.side-card .price{font-family:var(--font-serif); font-size:24px; color:var(--rose-900); margin:0 0 4px}
.side-card .price small{display:block; font-family:var(--font-sans); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:700}
.side-links{list-style:none; margin:0; padding:0}
.side-links li{margin-bottom:9px}
.side-links a{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); line-height:1.4}
.side-links a:hover{color:var(--rose-900)}
.side-links svg{width:15px; height:15px; flex:0 0 auto; color:var(--rose-700)}

/* ---------- artículos relacionados / índice ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.blog-card{background:#fff; border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 10px 26px rgba(182,99,104,.12); transition:transform .22s ease, box-shadow .22s ease}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px rgba(182,99,104,.2)}
/* mismas proporciones del banner (1200x630) para no cortarle el texto */
.blog-card .foto{aspect-ratio:1.905; overflow:hidden; background:var(--rose-100)}
.blog-card .foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.blog-card:hover .foto img{transform:scale(1.06)}
.blog-card .txt{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.blog-card .cat{font-family:var(--font-sans); font-weight:600; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rose-800); margin:0 0 8px}
.blog-card h3{font-family:var(--font-serif); font-weight:600; font-size:18px; line-height:1.3;
  color:var(--ink); margin:0 0 8px}
.blog-card p{margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); flex:1}
.blog-card .mas{font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--rose-900);
  display:inline-flex; align-items:center; gap:7px}
.blog-card .mas svg{width:15px; height:15px; transition:transform .2s ease}
.blog-card:hover .mas svg{transform:translateX(4px)}

.post-rel{background:var(--blush-50); padding:56px 0 130px}   /* el festón del CTA monta aquí */
.post-rel .head-center{margin-bottom:30px}

/* ---------- índice del blog y categorías ---------- */
.blog-hero{background:#f9dedf; padding:152px 0 56px; text-align:center;
  border-radius:0 0 50% 50% / 0 0 90px 90px}
.blog-hero .crumbs{justify-content:center; margin-bottom:12px}
.blog-hero h1{font-family:var(--font-serif); font-weight:600; color:var(--ink);
  font-size:clamp(30px,3.8vw,48px); line-height:1.08; margin:0}
.blog-hero h1 .line2{display:block; font-family:var(--font-script); font-weight:600;
  font-size:1.32em; line-height:1; margin-top:-.06em; color:var(--rose-800)}
.blog-hero .lead{max-width:620px; margin:16px auto 0; color:var(--ink-soft); font-size:16px; line-height:1.66}
.blog-list{background:var(--cream); padding:52px 0 140px}     /* idem */
.cat-chips{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 34px}
.cat-chips a{background:#fff; color:var(--rose-900); font-family:var(--font-sans); font-weight:600;
  font-size:13px; padding:10px 18px; border-radius:999px; box-shadow:0 8px 20px rgba(182,99,104,.13);
  transition:transform .2s ease, box-shadow .2s ease}
.cat-chips a:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(182,99,104,.2)}
.cat-chips a.on{background:var(--rose-800); color:#fff}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .post-main .container{grid-template-columns:1fr; gap:34px}
  .post-side{position:static; flex-direction:row; flex-wrap:wrap}
  .side-card{flex:1 1 260px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .post-hero{border-radius:0 0 50% 50% / 0 0 46px 46px}
  .post-hero .wrap{padding:124px 0 34px}
  .post-hero .container{grid-template-columns:1fr; gap:26px}
  .post-hero h1{font-size:clamp(24px,6.6vw,34px); max-width:none}
  .post-hero .lead{font-size:14px; max-width:none}
  .post-blob{max-width:none; border-radius:20px}
  .post-art .dots span{width:18px; height:18px}
  .post-main{padding:36px 0 46px}
  .post-body{font-size:15.5px; line-height:1.75}
  .blog-hero{padding:126px 0 40px; border-radius:0 0 50% 50% / 0 0 40px 40px}
  .blog-list{padding:34px 0 46px}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .post-side{flex-direction:column}
}

/* el CTA va pegado a la sección anterior: el festón ya ocupa su espacio */
.cta-band{margin-top:0}