/* ============================================================
   Brinddi · "Momentos" — sistema editorial del blog.
   Se carga JUNTO a site.css (reusa nav/footer/tokens/glows).
   Personalidad: revista premium oscura. Serif editorial (Fraunces)
   para titulares, Bricolage para la marca, Jakarta para lectura.
   ============================================================ */
:root{
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ink:#ECEAF3; --ink-soft:#B9B7C8; --read:64ch;
  --paper:rgba(255,255,255,.028);
}

/* ============================================================
   PORTADA DEL BLOG — foto a sangre, como la tapa de una revista.
   Rompe con el "encabezado centrado + grilla de tarjetas" que hace
   que todos los blogs se vean iguales.
   ============================================================ */
.cover-page{position:relative;z-index:4;min-height:min(88vh,760px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;padding:clamp(28px,6vw,64px) 0 clamp(22px,4vw,38px)}
/* El texto de la portada alinea con el resto del sitio (mismo ancho y padding que .wrap) */
.cover-in,.cover-foot{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:clamp(18px,5vw,48px);padding-right:clamp(18px,5vw,48px)}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Velo: la foto es cálida y clara arriba, así que el texto necesita piso oscuro abajo. */
.cover-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,15,.34) 0%,rgba(10,10,15,.06) 26%,rgba(10,10,15,.72) 68%,#0A0A0F 100%)}
.cover-in{position:relative;z-index:2}
.cover-in h1,.cover-in .sub,.cover-in .kicker{max-width:24ch}
.cover-in .kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cover-in h1{font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:-.025em;
  font-size:clamp(3.4rem,13vw,8rem);line-height:.88;margin:12px 0 0;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.45)}
.cover-in h1 .d{color:var(--gold);font-style:normal}
.cover-in .sub{font-family:var(--sans);color:#E7E4F0;font-size:clamp(1rem,2.3vw,1.2rem);
  max-width:34ch;margin:18px 0 0;line-height:1.5;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.cover-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:clamp(26px,5vw,44px);padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.66);font-size:.82rem;letter-spacing:.02em}
/* Flecha de "seguí bajando" — pura CSS, sin icono */
.cover-scroll{width:22px;height:34px;border:1px solid rgba(255,255,255,.34);border-radius:12px;position:relative;flex:none}
.cover-scroll::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:var(--gold);transform:translateX(-50%);animation:coverdot 1.9s ease-in-out infinite}
@keyframes coverdot{0%,100%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0;transform:translate(-50%,11px)}}
@media(prefers-reduced-motion:reduce){.cover-scroll::after{animation:none;opacity:.85}}

/* ============================================================
   SUMARIO — índice numerado de revista. La foto NO ocupa lugar:
   aparece flotando junto al cursor (desktop). En celular, inline.
   ============================================================ */
.index{position:relative;z-index:4;padding:clamp(40px,7vw,88px) 0 clamp(50px,9vw,100px)}
.ix-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.ix-head h2{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.ix-count{color:var(--faint);font-size:.82rem;letter-spacing:.02em}

.ix-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n cat min" "t t t" "img img img";
  gap:6px 16px;align-items:center;padding:clamp(20px,3vw,30px) 0;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .34s cubic-bezier(.2,.8,.2,1)}
.ix-n{grid-area:n;font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--gold);letter-spacing:.06em}
.ix-cat{grid-area:cat;font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);transition:color .2s}
.ix-min{grid-area:min;color:var(--faint);font-size:.8rem;white-space:nowrap}
.ix-t{grid-area:t;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(1.75rem,5.6vw,2.9rem);color:var(--ink);transition:color .2s;
  /* subrayado que crece del centro al pasar */
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 1px;transition:background-size .42s cubic-bezier(.2,.8,.2,1),color .2s}
/* Foto inline: la única forma de ver la imagen donde no hay cursor (celular/tablet). */
.ix-thumb{grid-area:img;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;
  margin-top:14px;display:block;border:1px solid var(--line)}

/* La fila de una sola línea + foto flotante pide DOS cosas: un cursor (para apuntar) y
   ancho de sobra (el título vive en su propia columna). Una ventana angosta con mouse
   cae al layout apilado con la foto inline — si no, el título queda aplastado. */
@media(hover:hover) and (pointer:fine) and (min-width:900px){
  /* Columnas de ancho FIJO para el número y la categoría: si fueran 'auto', cada fila
     arrancaría su título en otra x según lo largo de su categoría ("Guía" vs
     "Planificación") y el sumario perdería la alineación, que es lo que lo hace verse
     impreso. El título toma el resto; los minutos van al margen derecho. */
  .ix-row{grid-template-columns:2.2ch 13ch 1fr auto;grid-template-areas:"n cat t min";gap:0 clamp(18px,3vw,38px)}
  .ix-thumb{display:none}                 /* con cursor, la foto flota (no ocupa lugar) */
  .ix-row:hover{padding-left:18px}
  .ix-row:hover .ix-t{color:#fff;background-size:100% 1px}
  .ix-row:hover .ix-cat{color:var(--gold)}
  /* las filas que NO se están mirando se apagan: guía la vista a una sola */
  .ix-list:hover .ix-row:not(:hover) .ix-t{color:var(--faint)}
  .ix-t{background-position:0 100%}
}

/* La foto que sigue al cursor */
.ix-float{position:fixed;left:0;top:0;z-index:60;width:min(30vw,340px);aspect-ratio:16/11;
  pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0);
  transition:opacity .26s ease, scale .34s cubic-bezier(.2,.8,.2,1);scale:.94;
  border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.14);margin:0}
.ix-float.on{opacity:1;scale:1}
.ix-float img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:none),(pointer:coarse),(max-width:899px){.ix-float{display:none}}
@media(prefers-reduced-motion:reduce){
  .ix-float{transition:opacity .2s}
  .ix-row,.ix-t{transition:none}
}

/* ---------- MASTHEAD (cabecera del blog) ---------- */
.mast{position:relative;z-index:4;text-align:center;padding:clamp(40px,8vw,84px) 0 clamp(20px,4vw,38px)}
.mast .kicker{font-family:var(--sans);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:700}
.mast h1{font-family:var(--serif);font-weight:600;font-style:italic;letter-spacing:-.02em;
  font-size:clamp(3.2rem,11vw,6.6rem);line-height:.92;margin:10px 0 0}
.mast h1 .d{color:var(--gold);font-style:normal}
.mast .sub{font-family:var(--sans);color:var(--muted);font-size:clamp(1rem,2.4vw,1.22rem);max-width:40ch;margin:20px auto 0;line-height:1.5}
.mast .byl{margin-top:14px;color:var(--faint);font-size:.85rem;letter-spacing:.02em}

/* ---------- CHIP de categoría ---------- */
.cat{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(233,185,73,.4);border-radius:999px;padding:5px 12px;background:rgba(233,185,73,.05)}

/* ---------- ÍNDICE: destacado + grilla ---------- */
.feed{position:relative;z-index:4;padding-bottom:clamp(50px,9vw,100px)}
.lead-post{display:grid;gap:clamp(20px,4vw,44px);align-items:center;margin:12px 0 clamp(40px,7vw,72px)}
@media(min-width:900px){.lead-post{grid-template-columns:1.15fr 1fr}}
.lead-post .cover{aspect-ratio:16/11}
.lead-post h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.03;letter-spacing:-.02em;margin:16px 0 0}
.lead-post .dek{color:var(--ink-soft);font-size:1.12rem;line-height:1.55;margin-top:14px;max-width:46ch}
.lead-post .meta{margin-top:18px;color:var(--faint);font-size:.86rem;display:flex;gap:14px;align-items:center}

.grid{display:grid;gap:clamp(24px,4vw,40px)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;gap:14px;group:card}
.card .cover{aspect-ratio:3/2}
.card h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.12;letter-spacing:-.01em;transition:color .18s}
.card:hover h3{color:var(--gold)}
.card .dek{color:var(--muted);font-size:.98rem;line-height:1.5}
.card .meta{margin-top:auto;color:var(--faint);font-size:.8rem;display:flex;gap:12px;align-items:center;padding-top:6px}
.card .meta::before{content:"";display:block;height:1px;flex:0 0 24px;background:var(--gold);opacity:.6}

/* ---------- COVER (imagen o placeholder elegante) ---------- */
.cover{position:relative;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(233,185,73,.14), transparent 55%),
    linear-gradient(140deg,#171422,#0c0b12);}
.cover .ph::after{content:"";width:38px;height:38px;border-radius:50%;border:2px solid rgba(233,185,73,.5);
  box-shadow:0 0 0 6px rgba(233,185,73,.08)}
.cover .tag{position:absolute;left:14px;top:14px;z-index:2}

/* ---------- ARTÍCULO ---------- */
.article{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,48px)}
.art-head{max-width:760px;margin:clamp(28px,6vw,60px) auto clamp(20px,4vw,34px);text-align:center}
.art-head .cat{margin-bottom:18px}
.art-head h1{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.2rem,5.6vw,3.9rem)}
.art-head .dek{font-family:var(--sans);color:var(--ink-soft);font-size:clamp(1.1rem,2.6vw,1.35rem);
  line-height:1.5;margin:20px auto 0;max-width:52ch}
.art-head .byline{margin-top:24px;display:flex;gap:14px;align-items:center;justify-content:center;color:var(--faint);font-size:.9rem}
.art-head .byline b{color:var(--muted);font-weight:600}
.art-head .byline .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}

.art-hero{max-width:1080px;margin:0 auto clamp(28px,5vw,48px)}
.art-hero .cover{aspect-ratio:16/9;border-radius:22px}
.art-hero figcaption,.bfig figcaption{color:var(--faint);font-size:.82rem;text-align:center;margin-top:10px;font-style:italic;font-family:var(--serif)}

/* cuerpo — medida cómoda, lectura larga */
.prose{max-width:var(--read);margin:0 auto;font-size:1.16rem;line-height:1.78;color:var(--ink)}
.prose > p{margin:0 0 1.3em}
.prose > p:first-of-type{font-size:1.28rem;line-height:1.7;color:var(--ink)}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.3rem);letter-spacing:-.015em;
  line-height:1.1;margin:2em 0 .55em}
.prose h3{font-family:var(--display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;margin:1.7em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.3em;display:flex;flex-direction:column;gap:.5em}
.prose li{padding-left:.2em}
.prose li::marker{color:var(--gold)}
.prose strong{color:#fff;font-weight:700}
.prose em{color:var(--ink)}
.prose blockquote.pull{margin:1.7em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.28;color:#fff}

/* figura inline */
.bfig{margin:2em 0}
.bfig .cover{aspect-ratio:3/2;border-radius:16px}

/* caja "lo esencial" */
.essence{max-width:var(--read);margin:0 auto clamp(28px,5vw,42px);background:var(--card-hi);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:16px;padding:22px 26px}
.essence b{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.essence ul{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.essence li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.essence li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}

/* ============================================================
   PUBLICIDAD DE BRINDDI — variantes (se ven como anuncios,
   con estilos distintos para dar variedad). Base + modificadores.
   ============================================================ */
.adx{position:relative;overflow:hidden;border-radius:20px;margin:2.6em auto;max-width:var(--read)}
.adx .ad-flag{position:absolute;top:12px;right:14px;font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);z-index:3}
.adx .b{font-family:var(--display);font-weight:800;letter-spacing:-.035em}
.adx .b i{width:.32em;height:.32em;border-radius:50%;background:var(--gold);display:inline-block;margin-left:.05em;vertical-align:baseline}
.adx .ad-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.95rem;
  background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:11px 22px;margin-top:4px}

/* 1) HERO — banner display, oscuro con destello dorado */
.adx--hero{padding:clamp(30px,5vw,46px);text-align:center;
  background:radial-gradient(120% 160% at 50% -20%, #241d10, #0d0b12 60%);
  border:1px solid rgba(233,185,73,.28)}
.adx--hero .b{font-size:2rem;margin-bottom:10px}
.adx--hero .line{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,4vw,2.1rem);
  line-height:1.15;color:#fff;max-width:20ch;margin:0 auto 20px}
.adx--hero .sub{color:var(--muted);margin:-8px auto 20px;max-width:34ch;font-size:.98rem}

/* 2) STRIP — cinta mínima, elegante, tipo cintillo */
.adx--strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;justify-content:space-between;
  padding:18px 24px;background:var(--bg-soft);border:1px solid var(--line);
  border-top:2px solid var(--gold)}
.adx--strip .b{font-size:1.35rem}
.adx--strip .txt{color:var(--ink-soft);font-size:1rem;flex:1;min-width:180px}
.adx--strip .txt b{color:#fff}

/* 3) PHOTO — parece una foto de invitado con etiqueta Brinddi */
.adx--photo{display:grid;gap:0;background:#0c0b12;border:1px solid var(--line)}
@media(min-width:620px){.adx--photo{grid-template-columns:1fr 1fr}}
.adx--photo .shot{position:relative;min-height:200px;
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(233,185,73,.18), transparent 60%),
    linear-gradient(150deg,#3a2a4d,#8a5a2b);}
.adx--photo .shot::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 60%, rgba(0,0,0,.15), rgba(0,0,0,.5))}
.adx--photo .shot .stamp{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--display);font-weight:800;
  color:#fff;font-size:1rem;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.adx--photo .say{padding:clamp(22px,4vw,34px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.adx--photo .say .b{font-size:1.5rem}
.adx--photo .say p{color:var(--ink-soft);font-size:1.02rem;line-height:1.5}

/* 4) QUOTE — declaración aspiracional grande */
.adx--quote{padding:clamp(30px,5vw,48px);text-align:center;background:linear-gradient(180deg,#12101a,#0b0a11);
  border:1px solid var(--line)}
.adx--quote .say{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.7rem,4.6vw,2.6rem);
  line-height:1.12;color:#fff;max-width:18ch;margin:0 auto 8px}
.adx--quote .say .gold{color:var(--gold);font-style:normal}
.adx--quote .foot{margin-top:18px;color:var(--muted);font-size:.95rem}
.adx--quote .foot .b{font-size:1.05rem;color:#fff}

/* RAIL — cintillo lateral sticky (solo desktop ancho) */
.adrail{display:none}
@media(min-width:1280px){
  .adrail{display:block;position:fixed;right:26px;bottom:26px;z-index:40;width:230px;
    background:radial-gradient(120% 140% at 50% -10%, #241d10, #0d0b12 65%);
    border:1px solid rgba(233,185,73,.3);border-radius:18px;padding:20px 18px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
  .adrail .ad-flag{position:static;display:block;margin-bottom:8px}
  .adrail .b{font-size:1.35rem;margin-bottom:8px;display:block}
  .adrail .line{font-family:var(--serif);font-style:italic;color:#fff;font-size:1.12rem;line-height:1.2;margin-bottom:14px}
  .adrail .ad-cta{font-size:.85rem;padding:9px 16px}
  .adrail .x{position:absolute;top:8px;right:11px;color:var(--faint);font-size:1rem;cursor:pointer;background:none;border:0}
  .adrail.hide{display:none}
}

/* ---------- SUSCRIPCIÓN (newsletter opt-in) ---------- */
.subscribe{position:relative;z-index:4;max-width:640px;margin:clamp(40px,7vw,80px) auto clamp(20px,4vw,40px);
  text-align:center;background:var(--card-hi);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,5vw,44px)}
.subscribe h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.06}
.subscribe p{color:var(--muted);margin:12px auto 22px;max-width:40ch;line-height:1.5}
.sub-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:440px;margin:0 auto}
.sub-form input{flex:1;min-width:200px;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  color:#fff;font-family:var(--sans);font-size:1rem;padding:14px 20px}
.sub-form input:focus{outline:none;border-color:var(--gold)}
.sub-form button{white-space:nowrap}
.sub-note{color:var(--faint);font-size:.82rem;margin-top:14px;line-height:1.5}
.sub-msg{margin-top:14px;font-size:.95rem;min-height:1.2em}
.sub-msg.ok{color:#5eead4}.sub-msg.err{color:#FB7185}

/* ---------- RELACIONADOS + volver ---------- */
.more{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,48px) clamp(50px,9vw,90px)}
.more h4{font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.back-blog{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:.92rem;margin:8px 0 30px}
.back-blog:hover{color:#fff}