/* ============================================================
   GUZNEL FLOW — SISTEMA DE DISEÑO EDITORIAL (global)
   Estilo "Editorial Claro / Estudio". Reutilizable en toda la web.
   Prefijo: .ed-  ·  Contenedor raíz por página: .ed
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

/* ---- Contenedor raíz (papel + grano + tokens) ---- */
.ed{
    --paper:#f4f1e9;
    --paper-2:#eae5d8;
    --ink:#0a0a0a;
    --ink-soft:#3a3833;
    --sage:#8fa686;          /* acento de página (pastel tipo subrayador, se sobreescribe por página) */
    --rose:#c97b86;
    /* versión oscura del acento, legible como texto pequeño sobre papel (se deriva sola del pastel) */
    --ink-accent: color-mix(in srgb, var(--sage) 45%, #1a1611);
    background:var(--paper);
    color:var(--ink);
    font-family:'Outfit',sans-serif;
    position:relative;
    overflow:hidden;
}
.ed::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ed > *{position:relative;z-index:2;}

/* ---- Familias tipográficas ---- */
.ed-serif{font-family:'Fraunces',serif;}
.ed-display{font-family:'Archivo Black',sans-serif;}
.ed-mono{font-family:'Space Mono',monospace;}

/* ---- Detalles ---- */
.ed-rule{height:1px;background:var(--ink);opacity:.18;}
.ed-mark{background:linear-gradient(transparent 55%, var(--sage) 55%);padding:0 .08em;}

/* ---- Titulares de hero ---- */
.ed-h1{
    font-family:'Archivo Black',sans-serif;
    line-height:.92;
    letter-spacing:-.03em;
    text-transform:uppercase;
    font-size:clamp(2.6rem,7.5vw,6rem);
}
.ed-h1 .ital{font-family:'Fraunces',serif;font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.02em;}

/* ---- Reveal on scroll ----
   Solo se ocultan si el JS está activo (html.ed-anim, que añade el layout).
   Sin JS / si el observer no corre, el contenido se ve igualmente. */
.ed-anim .ed-reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);}
.ed-anim .ed-reveal-l{opacity:0;transform:translateX(-40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s);}
.ed-reveal.ed-in,.ed-reveal-l.ed-in{opacity:1 !important;transform:none !important;}

/* ---- Número editorial ---- */
.ed-num{font-family:'Fraunces',serif;font-style:italic;font-weight:300;line-height:.8;font-size:clamp(3rem,7vw,6rem);}

/* ---- Marquee ---- */
.ed-marquee{display:flex;overflow:hidden;user-select:none;}
.ed-marquee__track{display:flex;flex-shrink:0;gap:0;animation:ed-scroll 34s linear infinite;}
.ed-marquee:hover .ed-marquee__track{animation-play-state:paused;}
@keyframes ed-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.ed-marquee__item{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,4.5vw,3.5rem);letter-spacing:-.02em;white-space:nowrap;padding:0 1.2rem;display:flex;align-items:center;gap:1.4rem;}
.ed-marquee__star{color:var(--sage);font-size:.7em;}
.ed-marquee__item.is-out{-webkit-text-stroke:1.5px var(--ink);color:transparent;}

/* ---- Tarjeta editorial (borde + hover elevado) ---- */
.ed-card{border:1.5px solid var(--ink);background:var(--paper);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,background .5s,color .5s;}
@media (hover:hover){
    .ed-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink);}
}

/* ---- Fila editorial con hover de inversión ---- */
.ed-row{border-top:1px solid rgba(10,10,10,.18);transition:padding .45s cubic-bezier(.16,1,.3,1),background .45s,color .45s;}
@media (hover:hover){
    .ed-row:hover{padding-left:1.4rem;padding-right:1.4rem;background:var(--ink);color:var(--paper);}
}

/* ---- Enlace con subrayado animado ---- */
.ed-link{position:relative;}
.ed-link::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.ed-link:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---- Botones ---- */
.ed-btn{display:inline-flex;align-items:center;gap:.75rem;font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;padding:1.25rem 2rem;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.ed-btn--sage{background:var(--sage);color:#0a0a0a;box-shadow:6px 6px 0 var(--ink);}
.ed-btn--dark{background:var(--ink);color:var(--sage);box-shadow:6px 6px 0 var(--sage);}
@media (hover:hover){
    .ed-btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
    .ed-btn--dark:hover{box-shadow:9px 9px 0 var(--sage);}
}

/* ---- Acordeón FAQ (animación de altura vía main.js) ---- */
.ed-faq summary{list-style:none;cursor:pointer;}
.ed-faq summary::-webkit-details-marker{display:none;}
.ed-faq details.is-open .ed-faq__plus{transform:rotate(45deg);color:var(--rose);}
.ed-faq__plus{transition:transform .4s cubic-bezier(.16,1,.3,1);}
.ed-faq details{border-top:1px solid rgba(10,10,10,.18);}
.ed-faq details:last-child{border-bottom:1px solid rgba(10,10,10,.18);}
.ed-faq__body{overflow:hidden;transition:height .42s cubic-bezier(.16,1,.3,1);}

/* ---- Utilidad: que un titular no parta palabra y escale ---- */
.ed-fit{white-space:nowrap;}