/* ============================================================
   TRIGRAMA - Joyeria Celeste
   Tema oscuro con CELESTE dominante. Paleta ESTRICTA (5 colores):
     Celestial Light #E1F2FE  (dominante: texto, titulos, glifo, acentos)
     Carbon Black    #1A1A1A  (fondo oscuro base)
     Blue Charcoal   #3E444E  (superficies / gris de contraste)
     Old Gold        #CCB050  (SOLO acento puntual)
     Ivory Mist      #F5F0E0  (texto/superficie clara ocasional)
   Los tonos "tenues" son el mismo celeste con opacidad (misma paleta).
   Fuentes: Cinzel / Cormorant Garamond / Spectral / IBM Plex Mono.
   ============================================================ */

:root{
  --celeste:#E1F2FE;
  --carbon:#1A1A1A;
  --charcoal:#3E444E;
  --gold:#CCB050;
  --ivory:#F5F0E0;

  /* celeste con opacidad = texto y lineas (misma paleta) */
  --text:rgba(225,242,254,.88);
  --muted:rgba(225,242,254,.56);
  --faint:rgba(225,242,254,.34);
  --line:rgba(225,242,254,.14);
  --line-2:rgba(225,242,254,.26);
  --gold-line:rgba(204,176,80,.5);

  --glow:0 0 0 1px rgba(225,242,254,.06), 0 30px 70px rgba(26,26,26,.55);
  --glow-gold:0 0 24px rgba(204,176,80,.25);

  --logo:"Cinzel","Trajan Pro",Georgia,serif;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Spectral",Georgia,serif;
  --mono:"Jost","Century Gothic",system-ui,sans-serif;

  --maxw:1320px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--carbon);color:var(--text);
  line-height:1.75;font-size:1.06rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(225,242,254,.22)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{padding:clamp(60px,9vw,116px) 0;position:relative}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;color:var(--celeste);letter-spacing:.005em}
h2{font-size:clamp(2rem,5vw,3.2rem)}
h3{font-size:clamp(1.4rem,3vw,1.9rem)}
p{max-width:64ch}
strong,b{color:var(--celeste);font-weight:600}
.muted{color:var(--muted)}
.center{text-align:center}

/* secciones */
.alt{background:var(--charcoal)}
.deep{background:#1A1A1A}                /* carbon un punto mas hondo, dentro de la familia carbon */
.light{background:var(--celeste);color:var(--carbon)}
.light h1,.light h2,.light h3{color:var(--carbon)}
.light p{color:#1A1A1A}
.light .kicker{color:#CCB050}
.light strong{color:var(--carbon)}

.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:inline-block;margin-bottom:1.2rem}
.lead{font-size:clamp(1.12rem,2.4vw,1.4rem);color:rgba(225,242,254,.72);font-style:italic;font-weight:400}

/* ---------- Campo estelar decorativo ---------- */
.starfield::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(225,242,254,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(225,242,254,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 14%, rgba(204,176,80,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 52%, rgba(225,242,254,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(225,242,254,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 74%, rgba(225,242,254,.4), transparent 60%),
    radial-gradient(1.3px 1.3px at 38% 88%, rgba(204,176,80,.4), transparent 60%),
    radial-gradient(1px 1px at 6% 82%, rgba(225,242,254,.4), transparent 60%),
    radial-gradient(1px 1px at 70% 90%, rgba(225,242,254,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 92% 12%, rgba(225,242,254,.5), transparent 60%);}
.starfield>*{position:relative;z-index:1}

/* ---------- Divisor ornamental ---------- */
.ornament{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto;color:var(--gold)}
.ornament::before,.ornament::after{content:"";height:1px;width:min(180px,26vw);
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.ornament .d{font-size:.7rem;letter-spacing:.3em;transform:rotate(45deg)}

/* ---------- Botones ---------- */
.tbtn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border:1px solid var(--celeste);background:var(--celeste);color:var(--carbon);
  text-decoration:none;cursor:pointer;transition:.25s ease}
.tbtn:hover{background:transparent;color:var(--celeste);box-shadow:var(--glow-gold)}
.tbtn.ghost{background:transparent;color:var(--celeste)}
.tbtn.ghost:hover{background:var(--celeste);color:var(--carbon)}
.tbtn.gold{border-color:var(--gold);background:var(--gold);color:var(--carbon)}
.tbtn.gold:hover{background:transparent;color:var(--gold)}
.tbtn.on-light{border-color:var(--carbon);background:var(--carbon);color:var(--celeste)}
.tbtn.on-light:hover{background:transparent;color:var(--carbon)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(26,26,26,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--celeste)}
.brand img{height:32px;width:auto;filter:drop-shadow(0 0 10px rgba(225,242,254,.28))}
.brand .wm{font-family:var(--logo);font-weight:600;font-size:1.14rem;letter-spacing:.22em;padding-left:.22em;margin-right:24px}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--text);opacity:.72;transition:.2s;position:relative;padding:6px 0}
.nav-links a:hover{opacity:1;color:var(--celeste)}
.nav-links a[aria-current="page"]{opacity:1;color:var(--celeste)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--celeste)}

/* ---------- Hero (decorativo, sin foto) ---------- */
.hero{position:relative;overflow:hidden;text-align:center;
  min-height:clamp(600px,94vh,900px);display:flex;align-items:center;
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(225,242,254,.10), transparent 62%),
    radial-gradient(40% 40% at 50% 30%, rgba(204,176,80,.08), transparent 70%),
    var(--carbon)}
.hero .wrap{position:relative;z-index:2;padding:70px 26px}
.hero .mark{height:clamp(76px,13vw,120px);margin:0 auto 1.6rem;width:auto;
  filter:drop-shadow(0 0 34px rgba(225,242,254,.4))}
.hero h1{font-family:var(--logo);font-weight:600;letter-spacing:.26em;
  font-size:clamp(2.4rem,7.4vw,5rem);color:var(--celeste);margin:.2rem 0 .1rem;padding-left:.26em;
  text-shadow:0 0 40px rgba(225,242,254,.25)}
.hero .celeste-sub{display:block;font-family:var(--display);font-style:italic;font-weight:500;
  letter-spacing:.04em;font-size:clamp(1.3rem,3.6vw,2.1rem);color:var(--gold);margin-top:.55rem}
.hero .tag{max-width:46ch;margin:1.8rem auto 0;font-size:clamp(1.12rem,2.5vw,1.4rem);color:var(--text)}
.hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
.hero .scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:8px;animation:bob 2.4s ease-in-out infinite}
.hero .scroll span{width:1px;height:34px;background:linear-gradient(var(--gold),transparent)}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ---------- Subhero (paginas internas) ---------- */
.subhero{position:relative;overflow:hidden;padding:clamp(76px,11vw,132px) 0 clamp(44px,6vw,74px);text-align:center;
  background:radial-gradient(64% 100% at 50% -10%, rgba(225,242,254,.12), transparent 62%), var(--carbon)}
.subhero .mark{display:block !important;height:clamp(54px,6vw,72px);margin:0 auto 1.2rem !important;filter:drop-shadow(0 0 22px rgba(225,242,254,.42))}
.subhero .kicker{display:block;font-size:clamp(.86rem,1.5vw,1rem);letter-spacing:.42em;font-weight:600;color:var(--gold);margin:0 auto 1rem;padding-left:.42em}
.subhero h1{font-family:var(--display);font-size:clamp(3.1rem,8.4vw,5.6rem);color:var(--celeste);
  font-weight:600;line-height:1.02;letter-spacing:.005em;margin:.2rem auto 0;max-width:18ch;
  text-shadow:0 0 46px rgba(225,242,254,.3)}
.subhero .tag{max-width:56ch;margin:1.5rem auto 0;font-size:clamp(1.05rem,2vw,1.28rem);color:rgba(225,242,254,.82)}

/* ---------- Feature strip (confianza) ---------- */
.features{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat{background:var(--carbon);padding:30px 26px;text-align:center}
.feat .g{font-family:var(--logo);font-size:1.5rem;color:var(--gold);letter-spacing:.1em}
.feat b{display:block;font-family:var(--display);color:var(--celeste);font-size:1.25rem;margin:.5rem 0 .2rem;font-weight:600}
.feat span{color:var(--muted);font-size:.92rem}

/* ---------- Encabezado centrado ---------- */
.center-head{text-align:center;max-width:62ch;margin:0 auto clamp(38px,6vw,60px)}
.center-head p{margin:1rem auto 0}

/* ---------- Historia ---------- */
.story{max-width:78ch;margin:0 auto}
.story p{max-width:none;margin-bottom:1.2rem;font-size:1.12rem}
.pull{font-family:var(--display);font-style:italic;font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.3;
  color:var(--celeste);text-align:center;max-width:24ch;margin:0 auto}
.pull b{font-style:normal;color:var(--gold)}
.sig{margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- Disciplinas ---------- */
.disciplines{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.disc{background:var(--carbon);padding:32px 28px;transition:.35s;position:relative}
.disc:hover{background:var(--charcoal)}
.disc .n{font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.2em}
.disc h3{margin:.5rem 0 .5rem;font-size:1.4rem}
.disc p{color:var(--muted);font-size:.98rem}

/* ---------- Proceso (timeline decorativa) ---------- */
.timeline{display:grid;grid-template-columns:1fr;gap:0;max-width:820px;margin:0 auto}
.tstep{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:22px 0;position:relative}
.tstep .num{font-family:var(--logo);color:var(--gold);font-size:1.1rem;width:52px;height:52px;flex:0 0 auto;
  border:1px solid var(--gold-line);border-radius:50%;display:grid;place-items:center;background:var(--carbon);position:relative;z-index:1}
.tstep:not(:last-child)::before{content:"";position:absolute;left:26px;top:52px;bottom:-22px;width:1px;background:var(--line-2)}
.tstep h4{font-size:1.3rem;margin-bottom:.2rem}
.tstep p{color:var(--muted)}

/* ---------- Pilares ---------- */
.pillars{display:grid;grid-template-columns:1fr;gap:24px}
.pillar{border:1px solid var(--line);background:var(--charcoal);padding:36px 30px;display:flex;flex-direction:column;transition:.3s}
.pillar:hover{border-color:var(--gold-line);box-shadow:var(--glow);transform:translateY(-4px)}
.pillar .sym{font-family:var(--logo);font-size:1.7rem;color:var(--gold);letter-spacing:.2em;margin-bottom:1rem}
.pillar h3{margin-bottom:.6rem}
.pillar p{color:var(--muted);font-size:1rem;flex:1}
.pillar a.more{margin-top:1.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--celeste);border-bottom:1px solid var(--gold);padding-bottom:3px;align-self:flex-start;transition:.2s}
.pillar a.more:hover{color:var(--gold);gap:10px}

/* ---------- Productos ---------- */
.products{display:grid;grid-template-columns:1fr;gap:26px}
.product{background:var(--charcoal);border:1px solid var(--line);overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.product:hover{border-color:var(--gold-line);box-shadow:var(--glow);transform:translateY(-5px)}
.product .ph{aspect-ratio:1/1;overflow:hidden;background:#1A1A1A;position:relative}
.product .ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.product:hover .ph img{transform:scale(1.06)}
.product .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(26,26,26,.4));opacity:0;transition:.35s}
.product:hover .ph::after{opacity:1}
.product .body{padding:24px 24px 28px}
.product .tagline{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.product h3{font-size:1.5rem;margin:.5rem 0 .5rem}
.product p{color:var(--muted);font-size:.96rem}
.product a.ask{display:inline-block;margin-top:1.3rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--celeste);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:.2s}
.product a.ask:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Simbolos (glosario decorativo) ---------- */
.symbols{display:grid;grid-template-columns:1fr;gap:22px}
.symbol{display:flex;gap:20px;align-items:flex-start;padding:24px;border:1px solid var(--line);background:var(--carbon);transition:.3s}
.symbol:hover{border-color:var(--gold-line)}
.symbol .mk{font-family:var(--logo);font-size:2rem;color:var(--gold);line-height:1;flex:0 0 auto;width:48px;text-align:center}
.symbol h4{font-size:1.3rem;margin-bottom:.3rem}
.symbol p{color:var(--muted);font-size:.96rem}

/* ---------- Biblioteca ---------- */
.cats{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.cat{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);color:rgba(225,242,254,.8);padding:10px 16px;transition:.25s}
.cat:hover{border-color:var(--gold-line)}
.cat b{color:var(--gold);margin-left:.5rem}
.lib-search{width:100%;max-width:520px;margin:0 auto 40px;display:block;background:var(--charcoal);
  border:1px solid var(--line-2);color:var(--celeste);font-family:var(--mono);font-size:.85rem;
  letter-spacing:.06em;padding:14px 18px;outline:none}
.lib-search::placeholder{color:var(--muted)}
.lib-search:focus{border-color:var(--celeste)}
.shelf{border-top:1px solid var(--line)}
.shelf summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:26px 4px;font-family:var(--display);font-size:clamp(1.3rem,3vw,1.8rem);color:var(--celeste);transition:.2s}
.shelf summary:hover{color:var(--gold)}
.shelf summary::-webkit-details-marker{display:none}
.shelf summary .count{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.shelf summary .chev{color:var(--muted);transition:.2s;font-size:1.2rem}
.shelf[open] summary .chev{transform:rotate(90deg);color:var(--celeste)}
.books{list-style:none;columns:2;column-gap:34px;padding:6px 4px 30px}
.books li{break-inside:avoid;margin-bottom:12px}
.books a{text-decoration:none;color:var(--text);font-size:.98rem;line-height:1.4;display:block;
  border-left:1px solid transparent;transition:.2s}
.books a:hover{color:var(--celeste);border-left-color:var(--gold);padding-left:12px}
.books a .fmt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--faint);margin-left:.4rem}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);background:var(--carbon);margin-bottom:12px;padding:2px 22px;transition:.25s}
.faq details[open]{border-color:var(--gold-line)}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--celeste);cursor:pointer;
  padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--muted);padding:0 0 20px}

/* ---------- Contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,6vw,60px)}
.field{display:block;margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--charcoal);border:1px solid var(--line-2);color:var(--celeste);
  font-family:var(--body);font-size:1rem;padding:13px 16px;outline:none;transition:.2s}
.field input:focus,.field textarea:focus{border-color:var(--celeste)}
.field textarea{min-height:150px;resize:vertical}
.contact-info{border-left:1px solid var(--line);padding-left:clamp(20px,4vw,40px)}
.contact-info h4{font-size:1.3rem;margin-bottom:.4rem}
.contact-info .row{margin-bottom:22px}
.contact-info .row span{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:5px}
.contact-info a{color:var(--celeste);text-decoration:none;border-bottom:1px solid var(--line-2);transition:.2s}
.contact-info a:hover{border-color:var(--gold)}

.grid-2{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px)}

/* ---------- Footer ---------- */
footer{background:#1A1A1A;color:var(--muted);padding:66px 0 40px;border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1fr;gap:36px}
footer .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
footer .fbrand img{height:30px;filter:drop-shadow(0 0 10px rgba(225,242,254,.25))}
footer .fbrand .wm{font-family:var(--logo);color:var(--celeste);font-size:1.14rem;letter-spacing:.24em}
footer h5{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
footer ul{list-style:none;display:grid;gap:10px}
footer a{font-family:var(--body);text-decoration:none;color:var(--muted);transition:.2s;font-size:.98rem}
footer a:hover{color:var(--celeste)}
footer .base{border-top:1px solid var(--line);margin-top:46px;padding-top:26px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- Scroll reveal (solo si JS activo; visible sin JS y al imprimir) ---------- */
.reveal-on .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal-on .reveal.in{opacity:1;transform:none}
@media print{.reveal{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.reveal-on .reveal{opacity:1;transform:none;transition:none}.hero .scroll{animation:none}}

/* ============ Responsive ============ */
@media(min-width:720px){
  .features{grid-template-columns:repeat(4,1fr)}
  .disciplines{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .symbols{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1.2fr .8fr}
  footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
}
@media(min-width:1000px){ .products{grid-template-columns:repeat(4,1fr)} }
@media(max-width:719px){
  .books{columns:1}
  .symbols .symbol{padding:20px}
  .nav-links{position:fixed;inset:76px 0 auto 0;background:var(--charcoal);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 26px 20px;transform:translateY(-160%);transition:.3s;box-shadow:var(--glow)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:.8rem}
  .nav-toggle{display:block}
  .contact-info{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:30px}
}

/* Nota legal (enlace discreto a privacidad desde Nosotros) */
.legal-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--faint);text-transform:none}
.legal-note a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line)}
.legal-note a:hover{color:var(--celeste);border-color:var(--celeste)}

/* Documento legal (privacidad) */
.legal-doc h3{margin:2.2rem 0 .6rem;color:var(--celeste)}
.legal-doc p{color:var(--text)}
.legal-doc .legal-list{margin:.4rem 0 1rem 1.1rem;color:var(--text)}
.legal-doc .legal-list li{margin:.4rem 0}
.legal-doc a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-line)}
.legal-doc a:hover{color:var(--celeste);border-color:var(--celeste)}