/* ============================================================
   SIGNIFICARTE · estilos compartidos (agendar.html y gracias.html)
   Paleta The Meaning Learning Company
   ============================================================ */
:root{
  --navy:#3A4861;
  --navy-2:#2F3B51;
  --navy-3:#243044;
  --gold:#CAA149;
  --gold-2:#B88F3A;
  --gold-soft:#E4CF9C;
  --wine:#8B0000;
  --mist:#EEEDEF;
  --ink:#3A4861;
  --ink-soft:#5F6878;
  --muted:#8F8F8F;
  --line:#E2E2E2;
  --wa:#25D366;
  --serif:'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--mist);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}

/* Barra superior */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar .in{max-width:1080px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,32px)}
.topbar .tm{height:64px;width:auto;max-width:none}
.topbar .sg{height:66px;width:auto;max-width:none}
.topbar .div{width:1px;height:48px;background:var(--line)}
@media (max-width:420px){.topbar .tm{height:50px}.topbar .sg{height:50px}.topbar .div{height:38px}}

/* Hero azul */
.hero{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(120,140,175,.45) 0%, rgba(120,140,175,0) 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(36,48,68,.8) 0%, rgba(36,48,68,0) 70%),
    linear-gradient(160deg,#4A5A78 0%, #3A4861 45%, #2B364B 100%);
  padding:clamp(2rem,5vw,3rem) 16px clamp(7rem,16vw,8.5rem);
}
.hero .feather{position:absolute;pointer-events:none;opacity:.14;filter:brightness(0) invert(1)}
.hero .feather.f1{height:140%;left:-6%;top:-20%;transform:rotate(-18deg)}
.hero .feather.f2{height:95%;right:-4%;top:0;transform:rotate(22deg) scaleX(-1);opacity:.09}
@media (max-width:700px){.hero .feather.f1{height:100%;left:-22%}.hero .feather.f2{height:70%;right:-16%}}
.hero .in{position:relative;z-index:1;max-width:720px;margin:0 auto}
.step{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .95rem;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(202,161,73,.45);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold-soft);margin-bottom:1.1rem}
.step .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,3.3rem);line-height:1.06;color:#fff;max-width:20ch;margin:0 auto;text-wrap:balance}
h1 em{font-style:italic;color:var(--gold-soft)}
.sub{margin:1rem auto 0;max-width:50ch;font-size:clamp(.92rem,2vw,1.02rem);line-height:1.7;color:#DCE1EA;font-weight:300}
.sub b{color:#fff;font-weight:500}

/* Contenido */
.stage{position:relative;padding:0 16px 3rem;text-align:center}
.panel{position:relative;z-index:2;max-width:760px;margin:calc(-1 * clamp(5.5rem,13vw,7rem)) auto 0;background:#fff;border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(36,48,68,.55);border-top:3px solid var(--gold);overflow:hidden}
.panel .ph{padding:1.1rem 1.2rem .4rem;display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-2)}
.panel .ph svg{width:16px;height:16px;fill:var(--gold-2)}

.alts{max-width:760px;margin:1.6rem auto 0}
.alts .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.alts .or::before,.alts .or::after{content:"";flex:1;height:1px;background:#D8D6D2}
.alts .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.alts .grid{grid-template-columns:1fr}}

.opt{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.3rem 1.1rem;border-radius:12px;background:#fff;
  box-shadow:0 14px 30px -22px rgba(36,48,68,.5);text-align:center}
.opt h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.15;color:var(--ink)}
.opt p{font-size:.78rem;line-height:1.55;color:var(--ink-soft)}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  margin-top:.5rem;padding:.95rem 1.2rem;border-radius:100px;text-decoration:none;border:0;cursor:pointer;
  background:var(--gold);color:#fff;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 14px 30px -12px rgba(202,161,73,.85);transition:background .2s ease, transform .2s ease}
.btn:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn svg{width:17px;height:17px;fill:#fff;flex:0 0 17px}
.btn.navy{background:var(--navy);box-shadow:0 14px 30px -14px rgba(36,48,68,.8)}
.btn.navy:hover{background:var(--navy-3)}
.btn.wa{background:var(--wa);box-shadow:0 14px 30px -14px rgba(37,211,102,.7)}
.btn.wa:hover{background:#1EBE5A}
.note{font-size:.68rem;color:var(--muted);margin-top:.2rem}

/* Placeholder cuando falta configurar algo */
.ph-empty{padding:3rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--ink-soft);font-size:.85rem;line-height:1.6}
.ph-empty b{color:var(--ink)}
.ph-empty .ic{width:56px;height:56px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center}
.ph-empty .ic svg{width:26px;height:26px;fill:var(--gold-2)}

/* Fecha + lugar */
.ev{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left;
  padding:14px;border-radius:14px;background:linear-gradient(135deg,#F8F6F1,#F1EEE6);border:1px solid #EAE3D2}
.ev + .ev{margin-top:10px}
.cal{width:66px;border-radius:12px;overflow:hidden;background:#fff;text-align:center;box-shadow:0 8px 18px -10px rgba(36,48,68,.45);border:1px solid #E6E1D6}
.cal .m{background:var(--wine);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.18em;padding:4px 0}
.cal .d{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--ink);line-height:1;padding:7px 0 2px}
.cal .y{font-size:.55rem;color:var(--muted);padding-bottom:6px;letter-spacing:.1em}
.pin{width:66px;height:66px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--navy);box-shadow:0 8px 18px -10px rgba(36,48,68,.6)}
.pin svg{width:28px;height:28px;fill:var(--gold)}
.ev .t{font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.3;text-wrap:balance}
.ev .t.w{color:var(--wine)}
.ev .s{font-size:.74rem;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.ev a{color:var(--gold-2);font-weight:600;text-decoration:none;font-size:.72rem;display:inline-flex;align-items:center;gap:4px;margin-top:4px}
.ev a:hover{text-decoration:underline}

/* Cards: Antonio + Meaning Making */
.info{max-width:880px;margin:1.6rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
@media (max-width:760px){.info{grid-template-columns:1fr;max-width:440px}}
.icard{background:#fff;border-radius:6px;padding:1.5rem 1.35rem;box-shadow:0 18px 40px -26px rgba(36,48,68,.45);border-top:3px solid var(--gold)}
.icard.dark{background:var(--navy);color:#DCE1EA;border-top-color:var(--gold)}
.icard .head{display:flex;align-items:center;gap:12px;margin-bottom:.9rem}
.icard .mono{width:52px;height:52px;border-radius:50%;flex:0 0 52px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.35rem;font-weight:600;color:#fff;background:var(--navy);border:2px solid var(--gold)}
.icard .mono img{width:30px;height:auto;filter:brightness(0) invert(1)}
.icard.dark .mono{background:rgba(255,255,255,.08)}
.icard .lbl{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold-2)}
.icard.dark .lbl{color:var(--gold-soft)}
.icard h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.1;color:var(--ink)}
.icard.dark h3{color:#fff}
.icard p{font-size:.84rem;line-height:1.65;color:var(--ink-soft)}
.icard.dark p{color:#DCE1EA}
.icard p + p{margin-top:.6rem}
.icard p b{color:var(--ink);font-weight:600}
.icard.dark p b{color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.stats div{text-align:center}
.stats strong{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--gold-2);line-height:1}
.stats span{display:block;font-size:.6rem;color:var(--muted);margin-top:4px;line-height:1.3}
.flow{display:flex;flex-direction:column;gap:8px;margin-top:1rem}
.flow div{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(202,161,73,.25)}
.flow b{font-family:var(--serif);font-size:1.05rem;color:var(--gold-soft);font-weight:600;min-width:84px}
.flow span{font-size:.76rem;line-height:1.45;color:#DCE1EA}
.quote{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.35;color:#fff;margin-top:1rem;padding-left:12px;border-left:2px solid var(--gold)}

/* Footer */
footer{background:var(--navy);color:#C9CFDA;text-align:center;padding:2.2rem 16px 2.6rem;font-size:.72rem;line-height:1.8}
footer img{height:96px;width:auto;margin:0 auto .9rem;opacity:.95}
footer a{color:var(--gold-soft);text-decoration:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}