/* =========================================================
   Cofra 66
   Hoja de estilos unica. Antes vivia copiada dentro de cada
   pagina; ahora se edita aqui y aplica a todo el sitio.
   ========================================================= */

/* ---------- Base, navegacion, portada ---------- */
:root {
    --ink: #080B14;
    --surface: #0E1526;
    --raised: #141D33;
    --parchment: #E9E1CC;
    --parchment-dim: rgba(233,225,204,0.66);
    --muted: #96917F;
    --gold: #C9A24B;
    --gold-soft: rgba(201,162,75,0.32);
    --gold-faint: rgba(201,162,75,0.13);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--ink); color: var(--parchment);
    font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 1.7;
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
  }
  a { color: var(--gold); text-decoration: none; }
  ::selection { background: var(--gold); color: var(--ink); }
  img { max-width: 100%; display: block; }

  #progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), #E2C280); z-index: 300; transition: width .08s linear; }

  /* ---------- NAV ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px,4vw,52px); height: 78px;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background .35s, border-color .35s;
  }
  .nav.solid { background: rgba(8,11,20,.9); backdrop-filter: blur(12px); border-bottom-color: var(--gold-faint); }
  .nav-brand { display: flex; align-items: center; gap: 13px; }
  .nav-seal { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; border: 1px solid var(--gold-soft); background: #0B1220; }
  .nav-seal img { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; }
  .nav-name { font-size: 13.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--parchment); font-weight: 600; }
  .nav-name em { font-family: 'EB Garamond', serif; color: var(--gold); font-style: italic; letter-spacing: 1px; text-transform: none; font-size: 15px; }
  .nav-links { display: flex; gap: clamp(16px,2.4vw,34px); font-size: 13.5px; letter-spacing: .6px; }
  .nav-links a { color: var(--parchment-dim); padding: 8px 0; position: relative; transition: color .25s; }
  .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--gold); transition: right .3s ease; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--parchment); }
  .nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
  .nav-links a.cta { color: var(--gold); border: 1px solid var(--gold-soft); padding: 9px 20px; transition: background .25s, color .25s; }
  .nav-links a.cta::after { content: none; }
  .nav-links a.cta:hover { background: var(--gold); color: var(--ink); }
  .burger { display: none; width: 46px; height: 46px; background: transparent; border: 1px solid var(--gold-soft); border-radius: 3px; color: var(--gold); font-size: 21px; cursor: pointer; line-height: 1; }
  .mobile-menu { display: none; position: fixed; top: 78px; left: 0; right: 0; z-index: 190; background: rgba(8,11,20,.97); backdrop-filter: blur(12px); flex-direction: column; border-bottom: 1px solid var(--gold-faint); }
  .mobile-menu a { color: var(--parchment); padding: 17px clamp(24px,6vw,52px); font-size: 15.5px; border-bottom: 1px solid rgba(201,162,75,.08); }
  .mobile-menu.open { display: flex; }
  @media (max-width: 980px) { .nav-links { display: none; } .burger { display: block; } }

  /* ---------- HERO con foto ---------- */
  .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 130px clamp(20px,5vw,48px) 100px; }
  .hero-bg { position: absolute; inset: -6% 0 0; background: url('/assets/fotos/templo-masonico-cofra66-noche.webp') center 38%/cover no-repeat; will-change: transform; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,11,20,.72) 0%, rgba(8,11,20,.55) 42%, rgba(8,11,20,.94) 100%); }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 260px 90px rgba(8,11,20,.85); pointer-events: none; }
  .hero-inner { position: relative; z-index: 3; max-width: 900px; }
  .hero-sello {
    width: clamp(104px, 13vw, 148px); aspect-ratio: 1/1; margin: 0 auto 30px;
    border-radius: 50%; overflow: hidden; position: relative;
    border: 1px solid var(--gold-soft);
    box-shadow: 0 0 0 7px rgba(201,162,75,.06), 0 20px 55px rgba(0,0,0,.6);
    opacity: 0; animation: sello 1.1s cubic-bezier(.2,.8,.2,1) .05s forwards;
  }
  .hero-sello img { position: absolute; top: -3%; left: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; }
  @keyframes sello { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
  .hero-eyebrow { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold); opacity: 0; animation: rise .9s ease .15s forwards; }
  .hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--gold-soft); }
  .hero h1 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(42px,8vw,98px); line-height: 1.03; margin: 0; color: #F6F1E4; text-wrap: balance; letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0,0,0,.6); opacity: 0; animation: rise .9s ease .3s forwards; }
  .hero h1 .n66 { display: block; font-style: italic; font-weight: 500; font-size: clamp(23px,3.2vw,40px); color: var(--gold); margin-top: 16px; letter-spacing: .04em; }
  .hero-sub { max-width: 580px; margin: 28px auto 42px; font-size: clamp(15.5px,1.6vw,18px); color: rgba(233,225,204,.82); line-height: 1.75; opacity: 0; animation: rise .9s ease .5s forwards; }
  .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: rise .9s ease .68s forwards; }
  .btn-solid, .btn-ghost { display: inline-block; padding: 16px 36px; font-size: 14.5px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s, transform .3s; }
  .btn-solid { background: var(--gold); color: var(--ink); border: 1px solid var(--gold); }
  .btn-solid:hover { background: transparent; color: var(--gold); transform: translateY(-2px); }
  .btn-ghost { background: rgba(8,11,20,.35); color: var(--parchment); border: 1px solid rgba(233,225,204,.3); backdrop-filter: blur(4px); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
  .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(233,225,204,.5); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; animation: bob 2.6s ease-in-out infinite; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

  /* ---------- ESTRUCTURA ---------- */
  .section { padding: clamp(84px,11vw,150px) clamp(22px,5.5vw,64px); position: relative; }
  .section.alt { background: var(--surface); border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); }
  .wrap { max-width: 1120px; margin: 0 auto; }
  .sec-head { margin-bottom: clamp(40px,5vw,64px); }
  .sec-eyebrow { display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
  .sec-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); flex: none; }
  .sec-head h2 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(30px,4.4vw,52px); line-height: 1.12; margin: 0; color: var(--parchment); text-wrap: balance; max-width: 18ch; }
  .sec-head.center { text-align: center; }
  .sec-head.center .sec-eyebrow { justify-content: center; }
  .sec-head.center .sec-eyebrow::before { display: none; }
  .sec-head.center h2 { margin: 0 auto; }
  .lead { font-family: 'EB Garamond', serif; font-size: clamp(19px,2.1vw,24px); font-style: italic; line-height: 1.6; color: var(--parchment); max-width: 58ch; }
  p.body-copy { color: var(--parchment-dim); max-width: 62ch; margin: 0 0 20px; }

  .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-d="1"] { transition-delay: .12s; }
  .reveal[data-d="2"] { transition-delay: .24s; }
  .reveal[data-d="3"] { transition-delay: .36s; }

  /* ---------- BANDA DE FOTO REAL ---------- */
  .banda { position: relative; min-height: clamp(340px,52vh,560px); display: flex; align-items: flex-end; overflow: hidden; border-top: 1px solid var(--gold-faint); border-bottom: 1px solid var(--gold-faint); }
  .banda-img { position: absolute; inset: -8% 0 0; background-position: center 42%; background-size: cover; background-repeat: no-repeat; will-change: transform; }
  .banda::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,20,.35) 0%, rgba(8,11,20,.5) 50%, rgba(8,11,20,.95) 100%); }
  .banda-cap { position: relative; z-index: 2; padding: clamp(28px,4vw,52px) clamp(22px,5.5vw,64px); max-width: 900px; }
  .banda-cap .k { font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; }
  .banda-cap p { font-family: 'EB Garamond', serif; font-style: italic; font-size: clamp(19px,2.4vw,28px); color: #F4EFE2; margin: 0; line-height: 1.45; text-wrap: pretty; }

  /* ---------- EL TALLER ---------- */
  .taller-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(36px,5vw,72px); align-items: start; }
  @media (max-width: 880px) { .taller-grid { grid-template-columns: 1fr; } }
  .taller-aside { border-left: 1px solid var(--gold-soft); padding-left: clamp(22px,3vw,36px); display: flex; flex-direction: column; gap: 26px; }
  .aside-item .k { font-family: 'EB Garamond', serif; font-style: italic; font-size: 19px; color: var(--gold); display: block; margin-bottom: 5px; }
  .aside-item .v { font-size: 14.5px; color: var(--parchment-dim); line-height: 1.65; }

  /* ---------- CIFRAS ---------- */
  .cifras { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); margin-top: clamp(44px,6vw,72px); }
  .cifra { background: var(--ink); padding: 30px 24px; text-align: center; }
  .section.alt .cifra { background: var(--surface); }
  .cifra .n { font-family: 'EB Garamond', serif; font-size: clamp(34px,4.4vw,50px); color: var(--gold); line-height: 1; display: block; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
  .cifra .l { font-size: 12.5px; letter-spacing: 1.4px; color: var(--parchment-dim); }

  /* ---------- MOMENTOS ---------- */
  .momentos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); }
  @media (max-width: 880px) { .momentos { grid-template-columns: 1fr; } }
  .momento { background: var(--surface); padding: clamp(28px,3.4vw,44px); position: relative; overflow: hidden; transition: background .35s; }
  .section.alt .momento { background: var(--raised); }
  .momento:hover { background: #182342; }
  .momento .num { font-family: 'EB Garamond', serif; font-style: italic; font-size: 15px; color: var(--gold); letter-spacing: 2px; display: block; margin-bottom: 18px; }
  .momento h3 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 23px; margin: 0 0 12px; color: var(--parchment); }
  .momento p { font-size: 15px; color: var(--parchment-dim); margin: 0; line-height: 1.7; }
  .momento::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width .45s ease; }
  .momento:hover::after { width: 100%; }

  /* ---------- PRINCIPIOS con imagen ---------- */
  .principios-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(32px,4.5vw,64px); align-items: center; }
  @media (max-width: 900px) { .principios-grid { grid-template-columns: 1fr; } }
  .pr-foto { position: relative; overflow: hidden; border: 1px solid var(--gold-faint); }
  .pr-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
  .pr-foto:hover img { transform: scale(1.05); }
  .pr-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,11,20,.55) 100%); pointer-events: none; }
  .principios { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
  .principio { position: relative; background: var(--surface); border: 1px solid var(--gold-faint); padding: 28px 24px; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .section.alt .principio { background: var(--raised); }
  .principio:hover { transform: translateY(-6px); border-color: var(--gold-soft); box-shadow: 0 22px 48px rgba(0,0,0,.45); }
  .principio .glyph { font-family: 'EB Garamond', serif; font-style: italic; font-size: 28px; color: var(--gold); display: block; margin-bottom: 14px; line-height: 1; }
  .principio h3 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 20px; margin: 0 0 9px; color: var(--parchment); }
  .principio p { font-size: 14.5px; color: var(--parchment-dim); margin: 0; line-height: 1.65; }

  /* ---------- CAMINO ---------- */
  .camino-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(36px,5vw,72px); align-items: center; }
  @media (max-width: 900px) { .camino-grid { grid-template-columns: 1fr; } .camino-foto { order: -1; } }
  .camino-foto { position: relative; overflow: hidden; border: 1px solid var(--gold-faint); }
  .camino-foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
  .camino-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,20,.15), rgba(8,11,20,.6)); pointer-events: none; }
  .camino { position: relative; }
  .camino::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold-soft), var(--gold-faint)); }
  .paso { position: relative; padding: 0 0 40px 52px; }
  .paso:last-child { padding-bottom: 0; }
  .paso::before { content: ""; position: absolute; left: 5px; top: 7px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--gold); background: var(--ink); transition: background .3s, box-shadow .3s; }
  .paso:hover::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(201,162,75,.15); }
  .paso .plabel { font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
  .paso h3 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 22px; margin: 0 0 8px; color: var(--parchment); }
  .paso p { font-size: 15px; color: var(--parchment-dim); margin: 0; max-width: 52ch; }
  .camino-nota { text-align: center; margin-top: 48px; font-size: 15px; color: var(--parchment-dim); }
  .camino-nota a { border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }

  /* ---------- FAQ ---------- */
  .faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--gold-faint); }
  .faq-item { border-bottom: 1px solid var(--gold-faint); }
  .faq-q { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; color: var(--parchment); font-family: 'EB Garamond', serif; font-size: clamp(18px,2vw,22px); font-weight: 600; line-height: 1.35; transition: color .25s; }
  .faq-q:hover, .faq-q:focus-visible { color: var(--gold); }
  .faq-q .mark { font-family: 'Inter', sans-serif; font-size: 20px; color: var(--gold); flex-shrink: 0; transition: transform .35s ease; font-weight: 400; }
  .faq-item.open .faq-q .mark { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
  .faq-a p { padding: 0 4px 26px; margin: 0; font-size: 15.5px; color: var(--parchment-dim); max-width: 64ch; }
  .faq-a a { border-bottom: 1px solid var(--gold-soft); }

  /* ---------- REDES ---------- */
  .redes { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; max-width: 760px; margin: 0 auto; }
  .red-card { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--gold-faint); padding: 26px 28px; transition: transform .3s, border-color .3s; }
  .section.alt .red-card { background: var(--raised); }
  .red-card:hover { transform: translateY(-4px); border-color: var(--gold-soft); }
  .red-icon { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-soft); display: flex; align-items: center; justify-content: center; color: var(--gold); font-family: 'EB Garamond', serif; font-style: italic; font-size: 17px; flex-shrink: 0; }
  .red-card .rt { font-size: 15.5px; font-weight: 600; color: var(--parchment); display: block; }
  .red-card .rs { font-size: 13.5px; color: var(--muted); }

  /* ---------- CTA FINAL con foto ---------- */
  .final { position: relative; text-align: center; padding: clamp(110px,14vw,190px) clamp(22px,5vw,48px); overflow: hidden; border-top: 1px solid var(--gold-faint); }
  .final-bg { position: absolute; inset: 0; background: url('/assets/fotos/puerta-columnas-templo-masonico.webp') center 30%/cover no-repeat; }
  .final::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,20,.9) 0%, rgba(8,11,20,.72) 45%, rgba(8,11,20,.95) 100%); }
  .final-inner { position: relative; z-index: 2; }
  .final .orn { font-size: 26px; color: var(--gold); display: block; margin-bottom: 18px; }
  .final h2 { font-family: 'EB Garamond', serif; font-weight: 500; font-style: italic; font-size: clamp(26px,3.6vw,44px); line-height: 1.3; color: #F4EFE2; margin: 0 auto 40px; max-width: 22ch; text-wrap: balance; text-shadow: 0 4px 30px rgba(0,0,0,.5); }

  /* ---------- FOOTER ---------- */
  footer { background: #05070E; padding: 46px clamp(22px,5vw,64px); border-top: 1px solid var(--gold-faint); }
  .foot-grid { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
  .foot-left p { font-size: 13px; color: var(--muted); max-width: 480px; margin: 10px 0 0; line-height: 1.7; }
  .foot-nav { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
  .foot-nav a { color: var(--parchment-dim); transition: color .25s; }
  .foot-nav a:hover { color: var(--gold); }
  .foot-title { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }

  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
    .hero-sello, .hero-eyebrow, .hero h1, .hero-sub, .hero-actions { opacity: 1; }
  }

/* ---------- Formulario de contacto ---------- */
--err: #D98A7A;
--ok: #7FC0A0;
/* NAV (idéntico al del inicio para continuidad) */
padding: 0 clamp(20px, 4vw, 52px); height: 78px;
background: rgba(8,11,20,0.86); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gold-faint);
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 38px); font-size: 13.5px; letter-spacing: 0.6px; }
.nav-links a { color: var(--parchment-dim); padding: 8px 0; position: relative; transition: color 0.25s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--gold); transition: right 0.3s ease; }
.nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links a[aria-current="page"]::after { right: 0; }
.mobile-menu { display: none; position: fixed; top: 78px; left: 0; right: 0; z-index: 190; background: rgba(8,11,20,0.97); backdrop-filter: blur(12px); flex-direction: column; border-bottom: 1px solid var(--gold-faint); }
.mobile-menu a { color: var(--parchment); padding: 17px clamp(24px,6vw,52px); font-size: 15.5px; border-bottom: 1px solid rgba(201,162,75,0.08); }
@media (max-width: 940px) { .nav-links { display: none; } .burger { display: block; } }
/* HERO */
.hero { position: relative; padding: 150px clamp(22px,5.5vw,64px) 70px; overflow: hidden; background: radial-gradient(ellipse at 50% -20%, rgba(201,162,75,0.13), transparent 62%), var(--surface); border-bottom: 1px solid var(--gold-faint); }
.hero-inner { max-width: 760px; margin: 0 auto; animation: rise 0.85s ease both; }
.hero-eyebrow { display: flex; align-items: center; gap: 15px; font-size: 12px; letter-spacing: 3.2px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.hero-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.hero h1 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(34px, 5.6vw, 62px); line-height: 1.1; margin: 0 0 22px; color: var(--parchment); text-wrap: balance; }
.hero p { font-size: clamp(16px,1.7vw,18.5px); color: var(--parchment-dim); margin: 0; max-width: 56ch; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* CUERPO */
.shell { max-width: 760px; margin: 0 auto; padding: clamp(56px,7vw,88px) clamp(22px,5.5vw,48px) clamp(70px,8vw,110px); }
.antes { margin-bottom: 52px; }
.antes .tag { display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.antes .tag::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.antes h2 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(25px,3vw,34px); line-height: 1.22; margin: 0 0 18px; color: var(--parchment); text-wrap: balance; }
.antes p { color: var(--parchment-dim); margin: 0 0 18px; }
.antes p:last-child { margin-bottom: 0; }
.aviso { border: 1px solid var(--gold-soft); border-left-width: 2px; background: rgba(201,162,75,0.05); padding: 22px 26px; margin-bottom: 48px; }
.aviso p { margin: 0; font-size: 15.5px; color: var(--parchment-dim); }
.aviso strong { color: var(--gold); font-weight: 600; }
/* FORM */
form { display: grid; gap: 30px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; gap: 30px; } }
.field { display: grid; gap: 9px; position: relative; }
label { font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
label .req { color: var(--parchment-dim); margin-left: 5px; font-weight: 400; }
input, textarea, select {
width: 100%; background: var(--surface); border: 1px solid rgba(201,162,75,0.18);
color: var(--parchment); font-family: 'Inter', sans-serif; font-size: 16px;
padding: 14px 16px; border-radius: 2px; line-height: 1.5;
transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
input:hover, textarea:hover, select:hover { border-color: rgba(201,162,75,0.34); }
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--gold); background: var(--raised);
box-shadow: 0 0 0 3px rgba(201,162,75,0.12);
textarea { min-height: 168px; resize: vertical; }
.help { font-size: 13px; color: var(--muted); line-height: 1.6; }
.counter { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.counter.ok { color: var(--ok); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
select option { background: var(--surface); color: var(--parchment); }
.consent { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border: 1px solid var(--gold-faint); background: rgba(201,162,75,0.03); }
.consent input { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; accent-color: var(--gold); padding: 0; }
.consent label { text-transform: none; letter-spacing: 0.1px; font-size: 14.5px; color: var(--parchment-dim); font-weight: 400; line-height: 1.65; }
.submit-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
button[type="submit"] {
background: var(--gold); color: var(--ink); border: 1px solid var(--gold);
font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 600;
letter-spacing: 1.2px; text-transform: uppercase; padding: 17px 40px;
cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.3s;
button[type="submit"]:hover:not(:disabled) { background: transparent; color: var(--gold); transform: translateY(-2px); }
button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
.submit-hint { font-size: 13px; color: var(--muted); }
.status { display: none; padding: 24px 28px; border: 1px solid; font-size: 15.5px; line-height: 1.7; }
.status.show { display: block; animation: rise 0.5s ease both; }
.status.success { border-color: rgba(127,192,160,0.42); background: rgba(127,192,160,0.07); color: var(--parchment); }
.status.success strong { color: var(--ok); display: block; font-family: 'EB Garamond', serif; font-size: 21px; margin-bottom: 8px; font-weight: 600; }
.status.error { border-color: rgba(217,138,122,0.45); background: rgba(217,138,122,0.07); color: var(--err); }
/* FOOTER */
.foot-nav a { color: var(--parchment-dim); transition: color 0.25s; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

/* ---------- Indice del blog ---------- */
/* NAV */
background: rgba(8,11,20,.9); backdrop-filter: blur(12px);
.nav-links { display: flex; gap: clamp(14px,2.1vw,30px); font-size: 13.5px; letter-spacing: .6px; }
.hero { position: relative; padding: 150px clamp(22px,5.5vw,64px) 70px; overflow: hidden; background: radial-gradient(ellipse at 50% -20%, rgba(201,162,75,.13), transparent 62%), var(--surface); border-bottom: 1px solid var(--gold-faint); }
.hero-inner { max-width: 780px; margin: 0 auto; animation: rise .85s ease both; }
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--gold); }
.breadcrumb .actual { color: var(--parchment-dim); }
.hero-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); flex: none; }
.hero h1 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(34px,5.6vw,62px); line-height: 1.1; margin: 0 0 22px; color: var(--parchment); text-wrap: balance; }
.hero p { font-size: clamp(16px,1.7vw,18.5px); color: var(--parchment-dim); margin: 0; max-width: 58ch; }
.shell { max-width: 900px; margin: 0 auto; padding: clamp(56px,7vw,90px) clamp(22px,5.5vw,48px) clamp(70px,8vw,110px); }
.temas { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1px; background: var(--gold-faint); border: 1px solid var(--gold-faint); margin-bottom: clamp(40px,5vw,60px); }
.tema { background: var(--surface); padding: 30px 28px; }
.tema .k { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; color: var(--gold); display: block; margin-bottom: 8px; }
.tema p { margin: 0; font-size: 14.5px; color: var(--parchment-dim); line-height: 1.65; }
.vacio { border: 1px dashed var(--gold-soft); padding: clamp(32px,5vw,52px) clamp(24px,4vw,44px); text-align: center; background: rgba(201,162,75,.03); }
.vacio .orn { display: block; font-size: 20px; color: var(--gold); margin-bottom: 14px; }
.vacio h2 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: clamp(21px,2.6vw,27px); color: var(--parchment); margin: 0 0 12px; }
.vacio p { margin: 0 auto; max-width: 52ch; font-size: 15.5px; color: var(--parchment-dim); }
.vacio .link { display: inline-block; margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--gold); border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }
/* CTA */
.final { background: linear-gradient(160deg, var(--surface) 0%, var(--ink) 100%); border-top: 1px solid var(--gold-faint); padding: clamp(64px,8vw,110px) clamp(22px,5vw,48px); text-align: center; }
.final .orn { font-size: 24px; color: var(--gold); display: block; margin-bottom: 16px; }
.final h2 { font-family: 'EB Garamond', serif; font-weight: 500; font-style: italic; font-size: clamp(23px,3vw,36px); line-height: 1.35; color: var(--parchment); margin: 0 auto 34px; max-width: 24ch; text-wrap: balance; }
.btn-solid { display: inline-block; background: var(--gold); color: var(--ink); border: 1px solid var(--gold); padding: 16px 36px; font-size: 14.5px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }