/* =====================================================================
   LA SOCIEDAD DE LOS CURIOSOS — componentes de la web completa
   Amplía styles.css (usa sus variables :root). Modular y editable.
   ===================================================================== */

/* --- navegación con más entradas --- */
nav.menu{ flex-wrap:wrap; row-gap:10px; }

/* --- hero: línea breve + botones --- */
.hero .btns{ display:flex; gap:16px 22px; flex-wrap:wrap; align-items:center; }
.btn-text{ font-family:var(--label); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,242,231,.88); border-bottom:1px solid rgba(247,242,231,.4); padding-bottom:3px; }
.btn-text:hover{ color:#fff; border-color:#fff; }
.hero .microline{ font-family:var(--label); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,242,231,.72); margin-top:30px; }

/* --- marcador de contenido EDITABLE (precios, fechas, condiciones…) --- */
.ph{ border-bottom:1px dotted var(--leather-soft); color:var(--leather); font-style:italic; }
.editable-note{ font-family:var(--label); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leather-soft); }

/* --- principios (tarjetas tipo página de cuaderno) --- */
.principles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:26px; }
.principle{ background:rgba(247,242,231,.04); border:1px solid rgba(247,242,231,.16); border-radius:3px; padding:28px 26px; }
.principle .num{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--sea-soft); line-height:1; }
.principle p{ font-family:var(--display); font-size:21px; line-height:1.35; margin:12px 0 0; color:var(--paper); }

/* --- cómo funciona: pasos --- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:26px; }
.step-card{ background:var(--paper); border-top:2px solid var(--leather-soft); border-radius:0 0 3px 3px; padding:26px 24px; }
.step-card .n{ font-family:var(--display); font-style:italic; font-size:32px; color:var(--leather-soft); line-height:1; }
.step-card h3{ font-family:var(--display); font-size:24px; font-weight:500; margin:12px 0 8px; }
.step-card p{ font-size:15.5px; color:var(--ink-soft); margin:0; line-height:1.65; }
.practical{ margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.practical .row{ border-top:1px solid rgba(46,42,35,.12); padding-top:14px; font-size:15px; color:var(--ink-soft); }
.practical .row b{ display:block; font-family:var(--label); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px; }

/* --- ritual de apertura --- */
.ritual{ max-width:34rem; margin:0 auto; text-align:center; }
.ritual .steps-inline{ font-family:var(--display); font-style:italic; font-size:clamp(22px,2.4vw,30px);
  line-height:1.7; color:var(--paper); }

/* --- suscripción: plan --- */
.plan{ max-width:520px; margin:26px auto 0; background:var(--paper); border:1px solid var(--sand-deep);
  border-radius:4px; padding:40px 36px; text-align:center; box-shadow:0 22px 48px -28px rgba(46,42,35,.4); }
.plan .name{ font-family:var(--display); font-size:29px; }
.plan .price{ font-family:var(--display); font-size:42px; margin:6px 0 2px; color:var(--ink); }
.plan .price small{ font-family:var(--serif); font-size:16px; color:var(--ink-soft); font-style:italic; }
.plan .plan-list{ list-style:none; padding:0; margin:22px auto; text-align:left; display:inline-block; }
.plan .plan-list li{ padding:9px 0; color:var(--ink-soft); border-top:1px solid rgba(46,42,35,.08); font-size:15.5px; }
.plan .btn-primary{ width:100%; margin-top:8px; }
.soon{ font-family:var(--label); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--leather-soft); margin-top:14px; }
.soon-msg{ display:none; margin-top:14px; font-size:14.5px; color:var(--ink-soft); }
.soon-msg.show{ display:block; animation:fadeup .7s var(--ease); }

/* --- regalar --- */
.gift{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:26px auto 0; max-width:660px; }
.gift .opt{ background:var(--paper); border:1px solid var(--sand-deep); border-radius:3px; padding:22px 16px; text-align:center; }
.gift .opt .d{ font-family:var(--display); font-size:28px; color:var(--ink); }
.gift .opt .l{ font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

/* --- cartas de la Sociedad (correo) --- */
.cartas{ max-width:34rem; margin:0 auto; text-align:center; }

/* --- instagram --- */
.insta-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:24px; }
.insta-cell{ aspect-ratio:1; border-radius:2px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--sand),var(--sea-soft)); box-shadow:inset 0 0 60px rgba(20,34,40,.18); }
.insta-cell:nth-child(even){ background:linear-gradient(150deg,var(--paper-2),var(--olive-soft)); }
.insta-cell span{ position:absolute; left:10px; bottom:8px; font-family:var(--label); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(247,242,231,.85); }
.insta-cta{ text-align:center; margin-top:24px; }

/* --- pie ampliado --- */
.foot-links{ display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:center; margin-top:24px;
  font-family:var(--label); font-size:11.5px; letter-spacing:.08em; }
.foot-links a{ color:rgba(247,242,231,.62); }
.foot-links a:hover{ color:var(--sand-deep); }

/* --- utilidades --- */
.center-measure{ max-width:var(--measure); margin:0 auto; }
.section-head .lead.on-dark{ color:rgba(247,242,231,.86); }

/* --- páginas de documento (legales) --- */
.doc{ max-width:44rem; margin:0 auto; }
.doc h1{ font-family:var(--display); font-weight:300; font-size:clamp(32px,4.4vw,52px); line-height:1.1; }
.doc .updated{ font-family:var(--label); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:12px 0 30px; }
.doc h2{ font-family:var(--display); font-size:clamp(21px,2.2vw,27px); font-weight:500; margin:36px 0 10px; color:var(--ink); }
.doc p, .doc li{ color:var(--ink-soft); font-size:16.5px; line-height:1.75; }
.doc ul{ padding-left:1.2em; margin:0 0 1em; }
.doc a{ color:var(--sea-deep); text-decoration:underline; text-underline-offset:2px; }
.doc a:hover{ color:var(--leather); }
.doc .back{ display:inline-block; margin-top:40px; font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.doc .note-legal{ background:var(--paper-2); border:1px solid var(--sand-deep); border-radius:3px; padding:16px 18px; font-size:14.5px; color:var(--ink-soft); margin:22px 0; }
.doc .note-legal b{ color:var(--leather); }