/* IA Reflexiones — editorial library. Not a tech brand. */

:root{
  --ink:#14110E;
  --ink-soft:#2C2620;
  --muted:#6F655C;
  --paper:#F3EBE0;
  --paper-deep:#E8DCCE;
  --cream:#FAF6F0;
  --ember:#C45C32;
  --ember-deep:#9E3F1F;
  --gold:#C9A36A;
  --olive:#5C6B4A;
  --candle:#E8C9A0;
  --line:rgba(20,17,14,.12);
  --max:1120px;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Figtree", "Avenir Next", "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,.7,.3,1);
  --radius:22px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.05rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%; height:auto; display:block;}
a{color:inherit;}
::selection{background:var(--ember); color:var(--cream);}

.wrap{width:min(var(--max), calc(100% - 2rem)); margin-inline:auto;}
@media (min-width:720px){
  .wrap{width:min(var(--max), calc(100% - 4rem));}
}

h1,h2,h3,.wordmark__name{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0;
}
h1{font-size:clamp(2.4rem, 8vw, 5.4rem); font-optical-sizing:auto;}
h2{font-size:clamp(1.8rem, 4vw, 3rem);}
h3{font-size:1.35rem;}
h1 em{font-style:italic; font-weight:400; color:var(--ember-deep);}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  background:var(--ink); color:var(--cream); padding:.7rem 1rem;
  text-decoration:none; border-radius:8px;
}
.skip-link:focus{top:1rem;}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}

.icon{display:inline-block; vertical-align:-.2em; flex:none;}

/* grain */
.grain{
  pointer-events:none; position:fixed; inset:0; z-index:50; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>");
  mix-blend-mode:multiply;
}

/* header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:4.4rem;
}
.wordmark{text-decoration:none; display:grid; line-height:1.05;}
.wordmark__ia{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ember); font-weight:600;
}
.wordmark__name{font-size:1.45rem;}
.wordmark__handle{
  font-size:.72rem; color:var(--muted); letter-spacing:.04em;
}
.site-nav{display:none; gap:1.4rem; align-items:center;}
.site-nav a{text-decoration:none; font-weight:500; font-size:.95rem;}
.site-nav a[aria-current="page"]{color:var(--ember-deep);}
.nav-cta{
  border:1px solid var(--ink); padding:.4rem .85rem; border-radius:999px;
}
.nav-toggle{
  border:0; background:transparent; padding:.4rem; color:var(--ink); cursor:pointer;
}
@media (min-width:840px){
  .nav-toggle{display:none;}
  .site-nav{display:flex;}
}
@media (max-width:839px){
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--cream); flex-direction:column; padding:1.2rem 1.4rem 1.6rem;
    border-bottom:1px solid var(--line); gap:.8rem;
  }
  .site-nav.is-open{display:flex;}
}

.eyebrow, .kicker, .section-num{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ember-deep); font-weight:600; margin:0 0 .7rem;
}
.kicker a{text-decoration:none;}
.lede{font-size:1.15rem; color:var(--ink-soft); max-width:36rem;}

.btn-ember, .btn-text, .btn-ghost, .search-form button{
  font-family:var(--sans); cursor:pointer;
}
.btn-ember{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ember); color:var(--cream); text-decoration:none;
  padding:.85rem 1.25rem; border-radius:999px; border:0; font-weight:600;
  transition:transform .25s var(--ease), background .2s;
}
.btn-ember:hover{background:var(--ember-deep); transform:translateY(-1px);}
.btn-text{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; font-weight:600; border-bottom:1px solid var(--ember);
  padding-bottom:.15rem;
}
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:.7rem 1rem; border-radius:999px;
}

/* hero */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:92svh; display:grid; align-items:end;
  padding:3rem 0 4rem; background:#1A1410; color:var(--cream);
}
.hero-atmosphere{position:absolute; inset:0; z-index:-1;}
.hero-wash{
  position:absolute; inset:-10%;
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(196,92,50,.45), transparent 50%),
    radial-gradient(90% 70% at 10% 90%, rgba(201,163,106,.28), transparent 45%),
    linear-gradient(180deg, #241C16 0%, #14110E 55%, #1E1814 100%);
  animation:drift 22s var(--ease) infinite alternate;
}
.hero-window{
  position:absolute; right:8%; top:12%; width:min(38vw, 280px); aspect-ratio:9/16;
  background:linear-gradient(180deg, #E8C9A0, #C45C32 60%, #3A241C);
  opacity:.22; filter:blur(8px); border-radius:40% 40% 12px 12px;
}
.hero-motes{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(243,235,224,.35) 1px, transparent 1.6px);
  background-size:120px 140px; opacity:.35; animation:motes 28s linear infinite;
}
@keyframes drift{to{transform:scale(1.06) translate(-2%, 1%);}}
@keyframes motes{to{background-position:80px 120px;}}
.hero-grid{
  display:grid; gap:2.5rem; align-items:end;
}
.hero-copy h1{max-width:12ch;}
.hero-sub{color:#E8DCCE; max-width:32rem; font-size:1.12rem;}
.hero .btn-ember{margin-top:1.4rem;}
.hero-frame{justify-self:center;}
.frame-9x16{
  display:block; width:min(72vw, 280px); aspect-ratio:9/16; overflow:hidden;
  border-radius:28px; position:relative; box-shadow:0 30px 60px rgba(0,0,0,.35);
  text-decoration:none; color:inherit;
}
.frame-9x16 img, .frame-9x16 video{
  width:100%; height:100%; object-fit:cover;
}
.frame-9x16--soft{box-shadow:0 18px 40px rgba(20,17,14,.18);}
.frame-9x16--player video{background:#000;}
.frame-9x16__label{
  position:absolute; left:1rem; bottom:1rem; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
@media (min-width:900px){
  .hero{align-items:center; padding:5rem 0;}
  .hero-grid{grid-template-columns:1.2fr .8fr; gap:4rem;}
  .frame-9x16{width:min(32vw, 320px);}
}

/* sections */
.section{padding:4.5rem 0;}
.section-head{display:grid; gap:.4rem; margin-bottom:2rem;}
.section-head .btn-text{justify-self:start; margin-top:.4rem;}
.section-num{font-family:var(--serif); font-style:italic; letter-spacing:.08em; text-transform:none; font-size:1rem;}

.moment-card{
  display:grid; gap:2rem; align-items:center;
  background:var(--cream); border-radius:var(--radius); padding:1.2rem;
}
.moment-card .frame-9x16{width:min(70vw, 240px); margin:0 auto;}
.single-quote, .moment-card blockquote, .quote-stage blockquote, .modal__quote{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem, 3.4vw, 2.15rem); line-height:1.25;
}
.moment-card__desc{color:var(--ink-soft);}
@media (min-width:880px){
  .moment-card{grid-template-columns:280px 1fr; padding:2rem;}
}

/* category cards */
.cat-grid{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:960px){.cat-grid{grid-template-columns:repeat(3, 1fr);}}
.cat-card{
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:220px; padding:1.3rem 1.25rem 1.2rem;
  border-radius:20px; text-decoration:none; color:var(--cream);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease);
}
.cat-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 10%, rgba(20,17,14,.55) 100%);
}
.cat-card:hover{transform:translateY(-4px);}
.cat-card__count{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85;}
.cat-card__name{font-family:var(--serif); font-size:1.55rem; margin:.4rem 0 .35rem; font-weight:500;}
.cat-card__line{font-size:.95rem; opacity:.92; max-width:22ch;}
.cat-card--dusk{background:linear-gradient(160deg, #5A322C, #1E1412 70%);}
.cat-card--dawn{background:linear-gradient(160deg, #E8B989, #C45C32 80%); color:#2A1810;}
.cat-card--dawn::after{background:linear-gradient(180deg, transparent, rgba(42,24,16,.25));}
.cat-card--ember{background:linear-gradient(160deg, #9E3F1F, #241410);}
.cat-card--candle{background:linear-gradient(160deg, #3A2A1C, #14110E); box-shadow:inset 0 0 80px rgba(212,160,90,.25);}
.cat-card--forest{background:linear-gradient(160deg, #3E5648, #1C2A24);}
.cat-card--paper{background:linear-gradient(160deg, #C9B8A0, #6F5844); color:#1A1410;}
.cat-card--paper::after{background:linear-gradient(180deg, transparent, rgba(26,20,16,.2));}

.page-hero--dusk{background:linear-gradient(180deg, #5A322C22, transparent);}
.page-hero--dawn{background:linear-gradient(180deg, #E8B98933, transparent);}
.page-hero--ember{background:linear-gradient(180deg, #C45C3222, transparent);}
.page-hero--candle{background:linear-gradient(180deg, #E8C9A033, transparent);}
.page-hero--forest{background:linear-gradient(180deg, #3E564822, transparent);}
.page-hero--paper{background:linear-gradient(180deg, #E8DCCE, transparent);}

/* cards */
.ref-grid{
  display:grid; gap:1.4rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){.ref-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.ref-grid--list,.ref-grid{grid-template-columns:repeat(3, 1fr);}}
.card-ref{
  background:var(--cream); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-ref:hover{transform:translateY(-5px); box-shadow:0 16px 40px rgba(20,17,14,.1);}
.card-ref__media{
  display:block; aspect-ratio:9/16; overflow:hidden; position:relative; background:var(--paper-deep);
}
.card-ref__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.card-ref:hover .card-ref__media img{transform:scale(1.05);}
.card-ref__dur{
  position:absolute; right:.7rem; bottom:.7rem;
  background:rgba(20,17,14,.7); color:var(--cream);
  font-size:.72rem; padding:.15rem .45rem; border-radius:6px;
}
.card-ref__body{padding:1rem 1.05rem 1.2rem;}
.card-ref__title{margin:.15rem 0 .4rem;}
.card-ref__title a,.card-ref__media{text-decoration:none;}
.card-ref__phrase{
  font-family:var(--serif); font-style:italic; color:var(--ink-soft);
  margin:.2rem 0 .6rem; font-size:1.05rem;
}
.card-ref__meta{font-size:.82rem; color:var(--muted); margin:0;}

.quote-stage{
  background:var(--cream); border-radius:var(--radius); padding:2.2rem 1.5rem;
  text-align:left; position:relative;
}
.quote-stage .icon{color:var(--ember); margin-bottom:1rem;}
.quote-stage figcaption{margin-top:1.2rem; color:var(--muted); font-size:.9rem;}
.quote-stage figcaption a{color:var(--ember-deep);}
.quote-stage--dusk{background:linear-gradient(180deg, #F7E6DC, #F3EBE0);}
.quote-stage--dawn{background:linear-gradient(180deg, #F8E6D0, #F3EBE0);}
.quote-stage--ember{background:linear-gradient(180deg, #F4D8CC, #F3EBE0);}
.quote-stage--candle{background:linear-gradient(180deg, #F3E6D0, #F3EBE0);}
.quote-stage--forest{background:linear-gradient(180deg, #E4EADF, #F3EBE0);}
.quote-stage--paper{background:var(--cream);}

.popular-list{list-style:none; margin:0; padding:0; display:grid; gap:.4rem;}
.popular-list a{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem;
  text-decoration:none; padding:1rem 0; border-top:1px solid var(--line);
}
.popular-list__n{grid-row:span 2; font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--ember);}
.popular-list__t{font-weight:600;}
.popular-list__p{font-family:var(--serif); font-style:italic; color:var(--muted);}

.cta-panel{
  text-align:center; padding:3rem 1.2rem; background:var(--ink); color:var(--cream);
  border-radius:var(--radius);
}
.cta-panel .eyebrow{color:var(--gold);}
.cta-panel p{color:#E8DCCE;}
.cta-panel .btn-ember{margin-top:.6rem;}

.redes-inner{text-align:center;}
.social-row{
  list-style:none; display:flex; flex-wrap:wrap; gap:.8rem 1.2rem;
  padding:0; margin:1.2rem 0 0; justify-content:center;
}
.social-row a{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; font-weight:500;
}
.social-row--footer{justify-content:flex-start;}

/* listing */
.page-hero{padding:3.2rem 0 1rem;}
.search-form{
  display:flex; align-items:center; gap:.5rem;
  background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:.35rem .4rem .35rem 1rem; margin:1.4rem 0 1rem;
  max-width:36rem;
}
.search-form input{
  flex:1; border:0; background:transparent; font:inherit; min-width:0; padding:.5rem 0;
}
.search-form button{
  border:0; background:var(--ink); color:var(--cream);
  border-radius:999px; padding:.55rem 1rem; font-weight:600;
}
.chips{display:flex; flex-wrap:wrap; gap:.45rem;}
.chip{
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:.35rem .8rem; font-size:.88rem; background:transparent;
}
.chip.is-on{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.result-count{color:var(--muted); font-size:.9rem;}
.empty{font-size:1.1rem;}

/* single */
.single-hero{padding:2.5rem 0 1rem;}
.single-meta{color:var(--muted);}
.single-stage{
  display:grid; gap:2rem; padding-bottom:2rem;
}
@media (min-width:880px){
  .single-stage{grid-template-columns:300px 1fr; align-items:start; gap:3rem;}
}
.single-video .frame-9x16{width:min(72vw, 300px);}
.play-link{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem; text-align:center;
  color:var(--cream); text-decoration:none; background:rgba(20,17,14,.28);
  padding:1rem;
}
.play-link__btn{
  width:64px; height:64px; border-radius:50%;
  background:var(--ember); display:grid; place-items:center;
}
.play-link small{opacity:.85;}
.single-body p{font-size:1.12rem; max-width:38rem;}
.tag-list{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0;}
.tag-list a{text-decoration:none; color:var(--ember-deep);}
.share-bar{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem;}
.share-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--line); background:var(--cream); color:var(--ink);
  text-decoration:none; padding:.5rem .8rem; border-radius:999px; font:inherit; cursor:pointer;
}

/* frases */
.frase-grid{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){.frase-grid{grid-template-columns:1fr 1fr;}}
.frase-card{
  text-align:left; border:0; border-radius:18px; padding:1.4rem 1.2rem 1.1rem;
  min-height:200px; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .3s var(--ease);
}
.frase-card:hover{transform:translateY(-4px);}
.frase-card p{
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  line-height:1.3; margin:0; flex:1;
}
.frase-card span{font-size:.8rem; color:var(--muted);}
.frase-card--dusk{background:#F3D8D0;}
.frase-card--dawn{background:#F3DFC8;}
.frase-card--ember{background:#EBC9B8;}
.frase-card--candle{background:#EFE0C4;}
.frase-card--forest{background:#D9E3D4;}
.frase-card--paper{background:var(--cream);}

.modal[hidden]{display:none;}
.modal{position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:1rem;}
.modal__backdrop{position:absolute; inset:0; background:rgba(20,17,14,.55);}
.modal__panel{
  position:relative; background:var(--paper); width:min(32rem, 100%);
  padding:2rem 1.4rem 1.5rem; border-radius:22px; z-index:1;
}
.modal__close{
  position:absolute; top:.7rem; right:.7rem; border:0; background:transparent; cursor:pointer; color:var(--ink);
}
.modal__handle{color:var(--muted);}
.modal__actions{display:flex; flex-wrap:wrap; gap:.5rem;}

/* about */
.about{padding:3rem 0 4.5rem; max-width:40rem;}
.about-prose p{font-size:1.12rem;}
.about-sign{font-family:var(--serif); font-style:italic; color:var(--ember-deep);}

/* footer */
.site-footer{
  border-top:1px solid var(--line); padding:2.5rem 0 3rem; color:var(--ink-soft);
}
.footer-inner{display:grid; gap:1.4rem;}
.footer-mark{font-family:var(--serif); font-size:1.4rem; margin:0; color:var(--ink);}
.footer-handle,.footer-note,.footer-copy{margin:.2rem 0; font-size:.92rem;}
.footer-handle a{text-decoration:none;}
.footer-nav{display:flex; gap:1rem; flex-wrap:wrap;}
.footer-nav a{text-decoration:none;}
@media (min-width:800px){
  .footer-inner{grid-template-columns:1.4fr 1fr; align-items:start;}
  .social-row--footer{grid-column:1 / -1;}
}

/* admin */
.page-admin{background:var(--paper);}
.admin{padding:2.5rem 0 4rem; max-width:720px;}
.admin-head h1{font-size:2.4rem;}
.admin-msg{background:#E4EADF; padding:.8rem 1rem; border-radius:10px;}
.admin-msg--err{background:#F3D8D0;}
.admin-login,.admin-form{
  display:grid; gap:1rem; background:var(--cream);
  padding:1.4rem; border-radius:18px; margin-top:1rem;
}
.admin-form label, .admin-login label{display:grid; gap:.35rem; font-weight:600; font-size:.92rem;}
.admin-form input, .admin-form textarea, .admin-form select, .admin-login input{
  font:inherit; padding:.65rem .7rem; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); width:100%;
}
.admin-row{display:grid; gap:1rem;}
@media (min-width:640px){.admin-row{grid-template-columns:repeat(3, 1fr);}}
.check{font-weight:500; display:flex !important; flex-direction:row; align-items:center; gap:.5rem;}
.check input{width:auto;}
.admin-list ul{padding-left:1rem;}
.admin-list li{margin:.35rem 0;}
.hint{color:var(--muted); font-weight:400; font-size:.88rem;}
.admin-actions{display:flex; gap:.8rem; flex-wrap:wrap;}

/* FAQ / GEO */
.faq-list{display:grid; gap:.85rem; max-width:42rem;}
.faq-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  padding:0;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display, Fraunces, Georgia, serif);
  font-size:1.08rem;
  font-weight:600;
  padding:1rem 1.15rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item[open] summary{border-bottom:1px solid var(--line);}
.faq-item p{
  margin:0;
  padding:1rem 1.15rem 1.15rem;
  color:var(--muted);
  line-height:1.55;
}
.about-faq{margin:2.5rem 0 1rem;}
.about-faq h2{margin-bottom:1rem;}

/* reveals */
.reveal{animation:rise .8s var(--ease) both;}
@keyframes rise{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation:none !important; transition:none !important;
  }
  .reveal{opacity:1; transform:none;}
}