:root {
  --gold:   #C9A84C;
  --gold-b: #DDB84E;
  --gold-v: #EEC96A;
  --gold-d: #7A5828;
  --white:  #EDE9E3;
  --wd:     rgba(237,233,227,0.52);
  --r: 20px; --rs: 12px;

  /* ── SINGLE GLASS SYSTEM ──
     Every surface: same fill, same border, same shadow.
     Border always gold. Fill always neutral frosted.
     Hover: fill brightens, glow appears. Border stays gold always. */
  --g-fill:   rgba(255,255,255,0.06);
  --g-fill-h: rgba(255,255,255,0.11);
  --g-border: rgba(201,168,76,0.32);       /* always-on gold border */
  --g-border-h: rgba(201,168,76,0.60);     /* hover gold border */
  --g-top:    linear-gradient(90deg, transparent, rgba(230,195,80,0.18), transparent);
  --g-sh:
    0 1px 0 rgba(230,195,80,0.12) inset,
    0 8px 32px rgba(0,0,0,0.38),
    0 0 0 0.5px rgba(201,168,76,0.08);
  --g-sh-h:
    0 1px 0 rgba(230,195,80,0.22) inset,
    0 12px 44px rgba(0,0,0,0.46),
    0 0 30px rgba(201,168,76,0.16),
    0 0 0 0.5px rgba(201,168,76,0.20);
  --blur: blur(28px) saturate(1.9);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
/* SEO: visible to crawlers, hidden to users */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html { scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }

body {
  /* Real texture image embedded — exact velvet black from reference */
  background-color: #0a0a0a;
  background-repeat: repeat;
  background-size: 520px auto;
  background-attachment: scroll;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* Micro grain overlay for extra depth */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:200px 200px; opacity:0.45; mix-blend-mode:screen;
}
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at 30% 20%, rgba(30,28,28,0.4) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 70%, rgba(20,18,18,0.5) 0%, transparent 55%);
  pointer-events:none;
}
/* html::before moved to #tex-grain div in body */
/* html::after moved to #tex-dust div in body */

/* Extra texture layers as real divs */
#tex-grain { display:none; }
#tex-dust  { display:none; }

/* Faint warmth orbs — barely visible */
.orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
.o1 { width:900px; height:900px; top:-350px; right:-180px; background:radial-gradient(circle,rgba(201,168,76,.04),transparent 65%); filter:blur(170px); }
.o2 { width:700px; height:700px; bottom:-100px; left:-200px; background:radial-gradient(circle,rgba(180,140,50,.03),transparent 65%); filter:blur(170px); }
.o3 { display:none; }

/* ── ANIMATIONS ── */
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }

/* ── GOLD SHIMMER TEXT ── */
.shimmer {
  background: linear-gradient(90deg, var(--gold-d) 0%, var(--gold-v) 30%, #FFF5CC 50%, var(--gold-v) 70%, var(--gold-d) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity .85s ease, transform .85s ease, filter .85s ease; }
.reveal.visible { opacity:1; transform:translateY(0); filter:blur(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ── SECTIONS ── */
section { position:relative; z-index:1; }
.wrap    { max-width:1200px; margin:0 auto; padding:110px 5vw; }
.wrap-sm { max-width:880px;  margin:0 auto; padding:110px 5vw; }

/* ── LABELS / TITLES ── */
.lbl {
  font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  background: linear-gradient(90deg, var(--gold-d), var(--gold-b), var(--gold-v), var(--gold-b), var(--gold-d));
  background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: shimmer 5s linear infinite; margin-bottom:16px; display:block;
}
.sec-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,4.5vw,3.5rem); font-weight:700; line-height:1.15; margin-bottom:46px; }
.sec-title em {
  font-style:italic;
  background: linear-gradient(135deg, var(--gold-v), #FFF5CC, var(--gold-b), var(--gold-v));
  background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: shimmer 4s linear infinite;
}

/* ── DIVIDERS ── */
.div { width:100%; height:1px; position:relative; z-index:1; background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent); box-shadow:0 0 8px rgba(201,168,76,.1); }
.div-dot::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:5px; height:5px; background:var(--gold-b); box-shadow:0 0 8px var(--gold),0 0 16px rgba(201,168,76,0.45); }

/* ════════════════════════════════════════
   ── GLASS CARD RULE (applied to every surface) ──
   Fill:    --g-fill  (neutral frosted, no gold)
   Border:  --g-border (gold, always on)
   Shadow:  --g-sh
   Top:     1px gold shimmer via ::before
   Blur:    --blur
   Hover:   fill → --g-fill-h, border → --g-border-h, shadow → --g-sh-h
   ════════════════════════════════════════ */

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; padding:16px 5vw;
  background: var(--g-fill);
  border-bottom: 1px solid var(--g-border);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--g-sh);
}
.nav-logo {
  font-family:'Playfair Display',serif; font-size:1.28rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background: linear-gradient(135deg, var(--gold-v), var(--gold-b), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; filter:drop-shadow(0 0 6px rgba(201,168,76,.22));
}
.nav-links { display:flex; gap:30px; list-style:none; }
.nav-links a { color:rgba(237,233,227,.42); text-decoration:none; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; transition:color .3s; cursor:pointer; }
.nav-links a:hover { color:rgba(237,220,150,.85); }
.nav-cta {
  background: var(--g-fill); color:rgba(220,185,100,.8);
  border: 1px solid var(--g-border);
  padding:10px 24px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:400; text-decoration:none; border-radius:50px;
  backdrop-filter: var(--blur); transition:all .3s; box-shadow: var(--g-sh);
}
.nav-cta:hover { background: var(--g-fill-h); border-color: var(--g-border-h); color:rgba(240,210,130,.95); box-shadow: var(--g-sh-h); }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-burger span { display:block; width:24px; height:1px; background:rgba(201,168,76,.55); }

/* ── PANELS ── */
.panel { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:#0a0a0a; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background-repeat:repeat; background-size:520px auto; background-attachment:scroll; z-index:200; overflow-y:auto; }
.panel.open { display:block; animation:fadeIn .35s ease; -webkit-transform:translateZ(0); transform:translateZ(0); }
.panel-nav {
  display:flex; align-items:center; justify-content:space-between; padding:15px 5vw;
  background: var(--g-fill); border-bottom: 1px solid var(--g-border);
  backdrop-filter: var(--blur); z-index:10; box-shadow: var(--g-sh);
  position:relative; overflow:hidden;
}
.panel-nav::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: var(--g-top); }
.panel-back {
  background: var(--g-fill); border: 1px solid var(--g-border); color:rgba(220,185,100,.72);
  padding:9px 20px; font-size:.69rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .3s; border-radius:50px;
  backdrop-filter: var(--blur); box-shadow: var(--g-sh);
}
.panel-back:hover { background: var(--g-fill-h); border-color: var(--g-border-h); color:rgba(240,210,130,.95); box-shadow: var(--g-sh-h); }
.panel-label { font-family:'Playfair Display',serif; font-size:.95rem; color:rgba(220,185,100,.72); }
.panel-content { max-width:1100px; margin:0 auto; padding:56px 5vw 110px; }

/* ── MODAL ── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(10,10,10,.65); z-index:300; align-items:center; justify-content:center; backdrop-filter:blur(22px); }
.modal-bg.open { display:flex; animation:fadeIn .3s ease; }
.modal {
  background: var(--g-fill); border: 1px solid var(--g-border);
  border-radius:24px; padding:44px 40px; max-width:480px; width:90%; position:relative; overflow:hidden;
  backdrop-filter:blur(40px) saturate(2); -webkit-backdrop-filter:blur(40px) saturate(2);
  box-shadow: var(--g-sh-h);
}
.modal::before { content:''; position:absolute; top:0; left:20%; right:20%; height:1px; background: var(--g-top); }
.modal-close { position:absolute; top:16px; right:18px; background:none; border:none; color:rgba(237,233,227,.3); font-size:1.1rem; cursor:pointer; transition:color .3s; }
.modal-close:hover { color:rgba(220,185,100,.85); }
.modal-title { font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:700; margin-bottom:6px; }
.modal-sub { font-size:.84rem; color:var(--wd); margin-bottom:26px; line-height:1.7; }
.modal-form { display:flex; flex-direction:column; gap:12px; }
.modal-input {
  background: var(--g-fill); border: 1px solid var(--g-border);
  border-radius:12px; padding:13px 16px; color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:300;
  outline:none; transition:all .3s; width:100%; backdrop-filter:blur(12px);
}
.modal-input::placeholder { color:rgba(237,233,227,.25); }
.modal-input:focus { border-color: var(--g-border-h); background: var(--g-fill-h); box-shadow:0 0 0 3px rgba(201,168,76,.1); }
.modal-select {
  background:rgba(10,10,10,0.85); border: 1px solid var(--g-border);
  border-radius:12px; padding:13px 16px; color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:.9rem;
  outline:none; transition:all .3s; width:100%; cursor:pointer; appearance:none;
}
.modal-select:focus { border-color: var(--g-border-h); }
.modal-select option { background:#2c2c2c; color:var(--white); }
.modal-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-modal {
  background: var(--g-fill); color:rgba(220,185,100,.88); border: 1px solid var(--g-border);
  padding:14px; font-size:.79rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; font-weight:400; cursor:pointer; border-radius:50px;
  transition:all .35s; margin-top:4px; backdrop-filter: var(--blur); box-shadow: var(--g-sh);
}
.btn-modal:hover { background: var(--g-fill-h); border-color: var(--g-border-h); box-shadow: var(--g-sh-h); transform:translateY(-1px); }
.modal-success { display:none; text-align:center; padding:20px 0; }
.modal-success h3 { font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:12px; color:var(--gold-b); }
.modal-success p { color:var(--wd); line-height:1.75; font-size:.9rem; margin-bottom:22px; }
.modal-calendly {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--g-fill); border: 1px solid var(--g-border); color:rgba(220,185,100,.8);
  padding:13px 32px; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; text-decoration:none; border-radius:50px;
  transition:all .35s; box-shadow: var(--g-sh);
}
.modal-calendly:hover { background: var(--g-fill-h); border-color: var(--g-border-h); box-shadow: var(--g-sh-h); }

/* ── HERO ── */
#hero { min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px 5vw 60px; overflow:hidden; }
.h-ring { position:absolute; border-radius:50%; border:1px solid rgba(201,168,76,0.07); pointer-events:none; }
.hr1 { width:560px; height:560px; top:50%; left:50%; transform:translate(-50%,-50%); }
.hr2 { width:850px; height:850px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:rgba(201,168,76,0.04); }
.hr3 { width:1140px; height:1140px; top:50%; left:50%; transform:translate(-50%,-50%); border-color:rgba(201,168,76,0.025); }
.h-eyebrow { font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(201,168,76,.62); margin-bottom:14px; opacity:0; animation:fadeUp 1s ease .2s forwards; }
.h-title-main { font-family:'Playfair Display',serif; font-size:clamp(3.2rem,8vw,7.5rem); font-weight:900; line-height:1.02; max-width:960px; margin:0 auto; opacity:0; animation:fadeUp 1s ease .35s forwards; }
.h-title-main em {
  font-style:italic;
  background:linear-gradient(135deg, var(--gold-v), #FFF5CC, var(--gold-b), var(--gold-v));
  background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmer 4s linear infinite; filter:drop-shadow(0 0 14px rgba(201,168,76,.22));
}
.h-title-sub { font-family:'Playfair Display',serif; font-size:clamp(.95rem,2.5vw,1.4rem); font-weight:400; font-style:italic; color:rgba(237,233,227,.36); max-width:580px; margin:12px auto 32px; opacity:0; animation:fadeUp 1s ease .5s forwards; line-height:1.65; }
.h-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp 1s ease .65s forwards; }

/* ── ALL INTERACTIVE SURFACES — same glass rule ── */

/* Primary button */
.btn-p {
  background: var(--g-fill); color:rgba(220,185,100,.88); border: 1px solid var(--g-border);
  padding:15px 38px; font-size:.79rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; font-weight:400; cursor:pointer; text-decoration:none; display:inline-block; border-radius:50px;
  backdrop-filter: var(--blur); transition:all .35s; box-shadow: var(--g-sh); position:relative; overflow:hidden;
}
.btn-p::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background: var(--g-top); }
.btn-p:hover { background: var(--g-fill-h); border-color: var(--g-border-h); color:rgba(240,215,130,.98); box-shadow: var(--g-sh-h); transform:translateY(-2px); }

/* Outline / secondary button */
.btn-o {
  background: transparent; color:rgba(237,233,227,.4); border: 1px solid var(--g-border);
  padding:15px 38px; font-size:.79rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; text-decoration:none; display:inline-block; border-radius:50px;
  backdrop-filter: var(--blur); transition:all .35s;
}
.btn-o:hover { background: var(--g-fill); border-color: var(--g-border-h); color:rgba(220,185,100,.85); box-shadow: var(--g-sh); }

/* Agenda button */
.btn-agenda {
  display:inline-flex; align-items:center; gap:12px;
  background: var(--g-fill); border: 1px solid var(--g-border); color:rgba(220,185,100,.85);
  padding:15px 44px; font-size:.77rem; letter-spacing:.18em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; font-weight:400; cursor:pointer; text-decoration:none; border-radius:50px;
  backdrop-filter: var(--blur); transition:all .35s; box-shadow: var(--g-sh); position:relative; overflow:hidden;
}
.btn-agenda::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background: var(--g-top); }
.btn-agenda:hover { background: var(--g-fill-h); border-color: var(--g-border-h); color:rgba(240,215,130,.98); box-shadow: var(--g-sh-h); transform:translateY(-2px); }
.diamond { display:inline-block; width:4px; height:4px; background:var(--gold-b); transform:rotate(45deg); box-shadow:0 0 6px rgba(201,168,76,.65); }

/* ── VIDEO ── */
.video-wrap {
  width:100%; aspect-ratio:16/9;
  background: var(--g-fill); border: 1px solid var(--g-border); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:32px; position:relative;
  backdrop-filter:blur(16px); box-shadow: var(--g-sh);
}
.video-wrap::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background: var(--g-top); }
.vc { position:absolute; width:20px; height:20px; border-color:rgba(201,168,76,0.38); border-style:solid; }
.vc.tl { top:14px; left:14px; border-width:1px 0 0 1px; border-radius:4px 0 0 0; }
.vc.tr { top:14px; right:14px; border-width:1px 1px 0 0; border-radius:0 4px 0 0; }
.vc.bl { bottom:14px; left:14px; border-width:0 0 1px 1px; border-radius:0 0 0 4px; }
.vc.br { bottom:14px; right:14px; border-width:0 1px 1px 0; border-radius:0 0 4px 0; }



/* ── CAMINOS TABS ── */
.caminos-header { text-align:center; }
.caminos-q { font-size:.95rem; color:var(--wd); margin-bottom:32px; }
.cam-tabs { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cam-tab {
  background: var(--g-fill); border: 1px solid var(--g-border); color:rgba(220,185,100,.6);
  padding:14px 38px; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .35s; border-radius:50px;
  backdrop-filter: var(--blur); box-shadow: var(--g-sh); position:relative; overflow:hidden;
}
.cam-tab::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background: var(--g-top); }
.cam-tab:hover { background: var(--g-fill-h); border-color: var(--g-border-h); color:rgba(240,215,130,.95); box-shadow: var(--g-sh-h); }
.cam-hint { text-align:center; margin-top:20px; font-size:.74rem; color:rgba(237,233,227,.22); letter-spacing:.08em; }

/* ── CAMINO CARDS ── */
.c-hero { margin-bottom:44px; }
.c-hero h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.4rem); font-weight:700; margin-bottom:12px; }
.c-hero p { color:var(--wd); font-size:.92rem; max-width:100%; line-height:1.75; }
.cg { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; margin-bottom:12px; }
.cc {
  padding:34px 30px;
  background: var(--g-fill); border: 1px solid var(--g-border);
  border-radius:var(--r); position:relative; overflow:hidden;
  backdrop-filter: var(--blur); transition:all .35s; box-shadow: var(--g-sh);
}
.cc::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background: var(--g-top); }
.cc:hover { background: var(--g-fill-h); border-color: var(--g-border-h); box-shadow: var(--g-sh-h); transform:translateY(-3px); }
.cc.hl { background:rgba(201,168,76,0.1); }
.cc.full { grid-column:1/-1; }
.c-badge { font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(201,168,76,.68); margin-bottom:12px; display:block; }
.c-name { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; margin-bottom:8px; }
.c-price {
  font-family:'Playfair Display',serif; font-size:clamp(1.5rem,5vw,1.85rem); font-weight:900; line-height:1.1; margin-bottom:20px;
  background:linear-gradient(135deg, var(--gold-v), #FFF5CC, var(--gold-b));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.c-price span { font-size:.79rem; font-family:'DM Sans',sans-serif; font-weight:300; color:var(--wd); -webkit-text-fill-color:var(--wd); }
.c-ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.c-ul li { display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color:var(--wd); line-height:1.62; }
.c-ul li::before { content:'—'; color:rgba(201,168,76,.52); flex-shrink:0; margin-top:1px; }
.c-proc {
  padding:24px 18px; border:1px solid var(--g-border); background: var(--g-fill);
  border-radius:var(--r); margin-top:12px; backdrop-filter: var(--blur); box-shadow: var(--g-sh);
  position:relative; overflow:hidden;
}
.c-proc::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background: var(--g-top); }
.c-proc-lbl { font-size:.61rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(201,168,76,.58); margin-bottom:22px; }
.c-steps { display:flex; flex-wrap:wrap; }
.c-st { flex:1; min-width:120px; padding:14px 18px; border-right:1px solid var(--g-border); }
.c-st:last-child { border-right:none; }
.c-sn { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:900; color:rgba(201,168,76,0.2); line-height:1; margin-bottom:7px; }
.c-st p { font-size:.77rem; color:var(--wd); line-height:1.6; }
.c-services { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.c-svc {
  padding:14px 16px; background: var(--g-fill); border: 1px solid var(--g-border);
  border-radius:12px; transition:all .3s; backdrop-filter: var(--blur);
  box-shadow: var(--g-sh); position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
}
.c-svc::before { content:''; position:absolute; top:0; left:5%; right:5%; height:1px; background: var(--g-top); }
.c-svc:hover { background: var(--g-fill-h); border-color: var(--g-border-h); box-shadow: var(--g-sh-h); transform:translateY(-2px); }
.c-svc-ico { width:32px; height:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.22); border-radius:8px;
  color:rgba(201,168,76,0.8); }
.c-svc span { font-size:.78rem; color:rgba(237,233,227,.75); letter-spacing:.03em; font-weight:400; }
.cta-row { text-align:center; margin-top:36px; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:8px; }
.faq-item {
  border: 1px solid var(--g-border); background: var(--g-fill);
  border-radius:var(--r); overflow:hidden; transition:all .3s;
  backdrop-filter: var(--blur); box-shadow: var(--g-sh); position:relative;
}
.faq-item::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background: var(--g-top); }
.faq-item.open { background: var(--g-fill-h); border-color: var(--g-border-h); box-shadow: var(--g-sh-h); }
.faq-q { width:100%; background:none; border:none; color:rgba(237,233,227,.72); font-family:'DM Sans',sans-serif; font-size:.9rem; text-align:left; padding:22px 26px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; transition:color .3s; }
.faq-q:hover, .faq-item.open .faq-q { color:rgba(220,185,100,.92); }
.faq-arr {
  width:20px; height:20px; background: var(--g-fill); border: 1px solid var(--g-border);
  border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all .4s; box-shadow: var(--g-sh);
}
.faq-item.open .faq-arr { background: var(--g-fill-h); border-color: var(--g-border-h); transform:rotate(45deg); box-shadow: var(--g-sh-h); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .5s ease; }
.faq-a-in { padding:0 26px 22px; font-size:.87rem; color:var(--wd); line-height:1.82; }
.faq-item.open .faq-a { max-height:400px; }

/* ── BLOG ── */
/* Blog button in main page (teaser only) */
.blog-open-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--g-fill); border:1px solid var(--g-border); color:rgba(220,185,100,.7);
  padding:13px 34px; font-size:.73rem; letter-spacing:.18em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; text-decoration:none; border-radius:50px;
  transition:all .3s; backdrop-filter:var(--blur); box-shadow:var(--g-sh); position:relative; overflow:hidden;
}
.blog-open-btn::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:var(--g-top); }
.blog-open-btn:hover { background:var(--g-fill-h); border-color:var(--g-border-h); color:rgba(220,185,100,.95); box-shadow:var(--g-sh-h); }

/* Blog panel category pills */
.blog-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.bcat { background:var(--g-fill); border:1px solid rgba(201,168,76,.2); color:rgba(220,185,100,.45);
  padding:8px 20px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif; border-radius:50px; transition:all .3s; backdrop-filter:var(--blur); }
.bcat:hover,.bcat.act { background:var(--g-fill-h); border-color:var(--g-border-h); color:rgba(220,185,100,.95); box-shadow:var(--g-sh); }

/* Blog cards grid */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.blog-card {
  background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); cursor:pointer; backdrop-filter:var(--blur);
  box-shadow:var(--g-sh); transition:all .35s; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.blog-card::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--g-top); }
.blog-card:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); transform:translateY(-4px); }
.bc-body { padding:32px 26px 26px; display:flex; flex-direction:column; gap:14px; flex:1; min-height:200px; }
.bc-cat { font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(201,168,76,.65); }
.bc-title { font-family:'Playfair Display',serif; font-size:1.06rem; font-weight:700; line-height:1.4; color:var(--white); flex:1; }
.bc-meta { font-size:.67rem; color:var(--wd); }
.bc-btn {
  align-self:flex-start; background:transparent; border:1px solid var(--g-border);
  color:rgba(201,168,76,.75); padding:8px 20px; font-size:.69rem; letter-spacing:.15em;
  text-transform:uppercase; font-family:'DM Sans',sans-serif; cursor:pointer;
  border-radius:50px; transition:all .3s;
}
.bc-btn:hover { border-color:var(--g-border-h); color:rgba(201,168,76,1); }

/* Article reader panel */
.art-panel { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:350; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background-color:#0a0a0a; }
.art-panel.open { display:block; animation:fadeIn .3s ease; -webkit-transform:translateZ(0); transform:translateZ(0); }
.art-nav {
  display:flex; align-items:center; justify-content:space-between; padding:14px 5vw;
  background:var(--g-fill); border-bottom:1px solid var(--g-border);
  backdrop-filter:var(--blur); z-index:10; box-shadow:var(--g-sh);
}
.art-back {
  background:var(--g-fill); border:1px solid var(--g-border); color:rgba(220,185,100,.72);
  padding:8px 18px; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .3s; border-radius:50px; backdrop-filter:var(--blur);
}
.art-back:hover { background:var(--g-fill-h); border-color:var(--g-border-h); }
.art-content { max-width:740px; margin:0 auto; padding:56px 5vw 100px; }
.art-cat-label { font-size:.6rem; letter-spacing:.38em; text-transform:uppercase; color:rgba(201,168,76,.65); display:block; margin-bottom:16px; }
.art-h1 { font-family:'Playfair Display',serif; font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:700; line-height:1.2; margin-bottom:16px; }
.art-meta { font-size:.74rem; color:var(--wd); padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--g-border); }
.art-content h2 { font-family:'Playfair Display',serif; font-size:1.28rem; font-weight:700; margin:34px 0 13px; }
.art-content p { font-size:.92rem; color:rgba(237,233,227,.7); line-height:1.9; margin-bottom:16px; }
.art-content ul { list-style:none; margin-bottom:18px; display:flex; flex-direction:column; gap:9px; }
.art-content ul li { display:flex; gap:10px; font-size:.9rem; color:rgba(237,233,227,.67); line-height:1.72; }
.art-content ul li::before { content:'—'; color:rgba(201,168,76,.55); flex-shrink:0; }
.art-quote { border-left:2px solid rgba(201,168,76,.5); padding:14px 22px; margin:26px 0; background:rgba(201,168,76,.05); border-radius:0 8px 8px 0; font-style:italic; color:rgba(237,233,227,.72); font-size:.92rem; line-height:1.78; }
.art-cta { margin-top:44px; padding:32px 28px; background:var(--g-fill); border:1px solid var(--g-border); border-radius:var(--r); text-align:center; backdrop-filter:var(--blur); box-shadow:var(--g-sh); position:relative; overflow:hidden; }
.art-cta::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:var(--g-top); }
.art-cta h3 { font-family:'Playfair Display',serif; font-size:1.25rem; margin-bottom:9px; }
.art-cta p { color:var(--wd); font-size:.86rem; margin-bottom:20px; }

@media(max-width:768px){
  .blog-grid { grid-template-columns:1fr; }
  .art-content { padding:40px 4vw 80px; }
}
@media(max-width:480px){
  .blog-grid { grid-template-columns:1fr; }
}

/* ── FOOTER ── */
/* ── FOOTER ── */
footer { padding:72px 5vw 32px; border-top:1px solid var(--g-border); position:relative; z-index:1; }
.ft { max-width:1200px; margin:0 auto; }
.ft-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:44px; margin-bottom:46px; }
.ft-logo { margin-bottom:4px; }
.ft-tag { font-size:.81rem; color:rgba(237,233,227,.3); line-height:1.72; max-width:260px; }
.ft-col h5 { font-size:.59rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(201,168,76,.5); margin-bottom:15px; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.ft-col ul a { color:rgba(237,233,227,.3); text-decoration:none; font-size:.82rem; transition:color .3s; cursor:pointer; }
.ft-col ul a:hover { color:rgba(220,185,100,.75); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--g-border); }
.ft-copy { font-size:.69rem; color:rgba(237,233,227,.2); }

/* ── MOBILE ── */



@media(max-width:768px){
  /* Nav */
  .nav-links{display:none} .nav-burger{display:flex}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:61px;left:0;right:0;background:rgba(8,8,8,.98);backdrop-filter:blur(20px);padding:26px 5vw;gap:20px;border-bottom:1px solid var(--g-border)}
  /* Layout */
  .wrap,.wrap-sm{padding:60px 4vw}
  .panel-content{padding:28px 4vw 80px}
  /* Hero */
  .h-title-main{font-size:clamp(2rem,7vw,3rem)}
  .h-title-sub{font-size:.86rem;margin-bottom:20px}
  /* Steps */
  .steps{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:14px}
  .step{padding:12px 10px;border-radius:10px;gap:5px}
  .step-ico{font-size:.7rem}
  .step-txt h3{font-size:.62rem;margin-bottom:2px}
  .step-txt p{display:none}
  .steps-cta{padding-top:14px}
  .btn-agenda{padding:13px 24px;font-size:.7rem;letter-spacing:.12em}
  /* Caminos cards */
  .cam-preview-grid{grid-template-columns:1fr;max-width:100%}
  .cam-preview-card{padding:24px 22px}
  /* Camino panels */
  .cg{grid-template-columns:1fr} .cc{padding:22px 18px}
  .c-steps{display:grid;grid-template-columns:repeat(2,1fr)}
  .c-st{border-right:none;border-bottom:1px solid var(--g-border);padding:12px 14px}
  .c-st:nth-child(odd){border-right:1px solid var(--g-border)}
  .c-st:nth-last-child(-n+2){border-bottom:none}
  .c-sn{font-size:1.3rem}
  .c-st p{font-size:.72rem}
  .c-services{grid-template-columns:1fr 1fr;gap:6px}
  /* Blog */
  .blog-grid{grid-template-columns:1fr}
  .art-content{padding:32px 4vw 80px}
  /* Footer */
  .ft-top{flex-direction:column;gap:24px}
  /* Modal */
  .modal-row{grid-template-columns:1fr} .modal{padding:28px 20px}
  /* Contact */
  .contact-layout{grid-template-columns:1fr}
  .cform-row{grid-template-columns:1fr}
  /* Typography */
  .sec-title{font-size:clamp(1.7rem,5.5vw,2.4rem);margin-bottom:28px}
  .div-dot::after{display:none}
  /* Cookie */
  #cookieBanner{width:calc(100vw - 24px);padding:26px 20px}
}
@media(max-width:430px){
  .nav-cta{display:none}
  .h-actions{flex-direction:column;align-items:stretch;gap:10px}
  .h-actions .btn-p,.h-actions .btn-o{text-align:center;justify-content:center;padding:13px 20px}
  .steps{gap:4px} .step{padding:10px 8px;border-radius:8px}
  .step-ico{font-size:.64rem} .step-txt h3{font-size:.56rem}
  .btn-agenda{width:100%;justify-content:center;padding:12px 16px;font-size:.66rem}
  .c-services{grid-template-columns:1fr 1fr}
  .vc{display:none}
  /* Cards narrower on very small */
  .cam-preview-card{padding:20px 16px}
  /* Cookie full width on small */
  #cookieBanner{width:calc(100vw - 16px);padding:22px 16px}
}

/* ── CONTACT PAGE ── */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:32px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:16px; }
.contact-card {
  padding:24px 22px; background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); backdrop-filter:var(--blur); box-shadow:var(--g-sh);
  position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:16px;
  transition:all .3s;
}
.contact-card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:var(--g-top); }
.contact-card:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); }
.contact-card-icon {
  width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.28); border-radius:12px;
  color:rgba(201,168,76,0.85);
}
.contact-card-body h4 { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,76,.7); margin-bottom:6px; }
.contact-card-body p, .contact-card-body a { font-size:.92rem; color:rgba(237,233,227,.72); text-decoration:none; line-height:1.6; }
.contact-card-body a:hover { color:rgba(201,168,76,.85); }
.contact-form-wrap {
  padding:32px 28px; background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); backdrop-filter:var(--blur); box-shadow:var(--g-sh);
  position:relative; overflow:hidden;
}
.contact-form-wrap::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:var(--g-top); }
.contact-form-wrap h3 { font-family:'Playfair Display',serif; font-size:1.35rem; font-weight:700; margin-bottom:6px; }
.contact-form-wrap p { font-size:.84rem; color:var(--wd); margin-bottom:22px; line-height:1.65; }
.cform { display:flex; flex-direction:column; gap:11px; }
.cform-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.cform-input {
  background:rgba(255,255,255,0.05); border:1px solid var(--g-border); border-radius:11px;
  padding:12px 15px; color:var(--white); font-family:'DM Sans',sans-serif; font-size:.88rem;
  font-weight:300; outline:none; transition:all .3s; width:100%; resize:none;
}
.cform-input::placeholder { color:rgba(237,233,227,.25); }
.cform-input:focus { border-color:var(--g-border-h); background:rgba(255,255,255,0.08); box-shadow:0 0 0 3px rgba(201,168,76,.09); }
.cform-btn {
  background:var(--g-fill); border:1px solid var(--g-border); color:rgba(220,185,100,.88);
  padding:13px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; font-weight:400; cursor:pointer; border-radius:50px;
  backdrop-filter:var(--blur); box-shadow:var(--g-sh); transition:all .35s; position:relative; overflow:hidden;
}
.cform-btn::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:var(--g-top); }
.cform-btn:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); transform:translateY(-1px); }
.cform-success { display:none; text-align:center; padding:20px 0; }
.cform-success h4 { font-family:'Playfair Display',serif; font-size:1.3rem; margin-bottom:10px; color:var(--gold-b); }
.cform-success p { color:var(--wd); font-size:.88rem; line-height:1.7; }

/* ── BLOG PAGE IMPROVEMENTS ── */
.blog-article-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.blog-article {
  background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); overflow:hidden; transition:all .35s;
  cursor:pointer; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  backdrop-filter:var(--blur); box-shadow:var(--g-sh); position:relative;
}
.blog-article::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--g-top); z-index:1; }
.blog-article:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); transform:translateY(-4px); }
.ba-img {
  aspect-ratio:16/9; position:relative; overflow:hidden;
  background:rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center;
}
.ba-img-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55)); }
.ba-tag {
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--g-fill); border:1px solid var(--g-border); backdrop-filter:blur(12px);
  padding:4px 12px; border-radius:50px; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(201,168,76,.78);
}
.ba-icon-wrap {
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.22); border-radius:50%;
  color:rgba(201,168,76,0.7);
}
.ba-body { padding:22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.ba-meta { font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,76,.52); margin-bottom:10px; }
.ba-title { font-family:'Playfair Display',serif; font-size:1.12rem; font-weight:700; margin-bottom:10px; line-height:1.38; }
.ba-excerpt { font-size:.82rem; color:var(--wd); line-height:1.72; flex:1; margin-bottom:18px; }
.ba-read {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,76,.65);
  transition:color .3s;
}
.ba-read svg { transition:transform .3s; }
.blog-article:hover .ba-read { color:rgba(201,168,76,.95); }
.blog-article:hover .ba-read svg { transform:translateX(4px); }

/* Mobile contact */
@media(max-width:768px){
  .contact-layout { grid-template-columns:1fr; }
  .cform-row { grid-template-columns:1fr; }
  .blog-article-grid { grid-template-columns:1fr; }
}

.panel,.art-panel{;background-repeat:repeat;background-size:520px auto;background-attachment:scroll}

.panel{background-image:url("<?php echo get_template_directory_uri(); ?>/bg-texture.jpg");background-repeat:repeat;background-size:520px auto;background-attachment:scroll}
.art-panel{background-image:url("<?php echo get_template_directory_uri(); ?>/bg-texture.jpg");background-repeat:repeat;background-size:520px auto;background-attachment:scroll}

/* ── CAMINOS PREVIEW CARDS ── */
.cam-preview-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  max-width:620px; margin:0 auto;
}
.cam-preview-card {
  background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); padding:32px 36px; cursor:pointer;
  backdrop-filter:var(--blur); box-shadow:var(--g-sh);
  transition:all .35s; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cam-preview-card::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--g-top); }
.cam-preview-card:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); transform:translateY(-4px); }
.cpc-num {
  font-family:'Playfair Display',serif; font-size:3rem; font-weight:900; line-height:1;
  color:rgba(201,168,76,0.15); flex-shrink:0; width:52px;
}
.cpc-body { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.cpc-label { font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(201,168,76,.65); }
.cpc-name { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:var(--white); }
.cpc-sub { font-size:.72rem; letter-spacing:.06em; color:rgba(201,168,76,.72); }
.cpc-cta {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(237,233,227,.7); transition:all .3s;
}
.cam-preview-card:hover .cpc-cta { color:rgba(201,168,76,1); gap:11px; }

/* ── COOKIE BANNER ── */
/* Cookie overlay blocker */
#cookieOverlay {
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(6px);
}
#cookieBanner {
  display:none;
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:9999; width:min(500px, calc(100vw - 32px));
  background:rgba(12,11,10,0.98); border:1px solid var(--g-border);
  border-radius:24px; padding:36px 32px;
  backdrop-filter:blur(40px) saturate(1.8); box-shadow:var(--g-sh-h);
  flex-direction:column; gap:22px;
}
#cookieBanner::before { content:''; position:absolute; top:0; left:15%; right:15%; height:1px; background:var(--g-top); border-radius:1px; }
.cookie-text { width:100%; }
.cookie-text p { font-size:.82rem; color:rgba(237,233,227,.6); line-height:1.7; }
.cookie-text p a { color:rgba(201,168,76,.7); text-decoration:none; }
.cookie-text p a:hover { color:rgba(201,168,76,1); }
.cookie-text strong { color:rgba(237,233,227,.85); font-weight:500; }
.cookie-btns { display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.cookie-btn-all, .cookie-btn-min { flex:1; text-align:center; justify-content:center; }
.cookie-btn-all {
  background:var(--g-fill-h); border:1px solid var(--g-border-h); color:rgba(220,185,100,.9);
  padding:10px 22px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; border-radius:50px; transition:all .3s;
  box-shadow:var(--g-sh); white-space:nowrap;
}
.cookie-btn-all:hover { box-shadow:var(--g-sh-h); transform:translateY(-1px); }
.cookie-btn-min {
  background:transparent; border:1px solid rgba(201,168,76,.2); color:rgba(237,233,227,.38);
  padding:10px 22px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  font-family:'DM Sans',sans-serif; cursor:pointer; border-radius:50px; transition:all .3s;
  white-space:nowrap;
}
.cookie-btn-min:hover { border-color:rgba(201,168,76,.35); color:rgba(237,233,227,.65); }

@media(max-width:600px){
  .cam-preview-grid { grid-template-columns:1fr; }
  .cam-preview-card { padding:26px 22px; }
  #cookieBanner { width:calc(100vw - 32px); padding:28px 22px; }
}

/* ── EJEMPLOS SECTION ── */
.ej-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px;
}
.ej-card {
  background:var(--g-fill); border:1px solid var(--g-border);
  border-radius:var(--r); padding:28px 24px; cursor:pointer;
  backdrop-filter:var(--blur); box-shadow:var(--g-sh);
  transition:all .35s; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:18px;
}
.ej-card::before { content:''; position:absolute; top:0; left:12%; right:12%; height:1px; background:var(--g-top); }
.ej-card:hover { background:var(--g-fill-h); border-color:var(--g-border-h); box-shadow:var(--g-sh-h); transform:translateY(-4px); }
.ej-icon {
  width:56px; height:56px; flex-shrink:0;
  color:rgba(237,233,227,0.55);
}
.ej-icon svg { width:100%; height:100%; }
.ej-card:hover .ej-icon { color:rgba(237,233,227,0.8); }
.ej-title { font-family:'Playfair Display',serif; font-size:.98rem; font-weight:700; margin-bottom:7px; line-height:1.35; }
.ej-desc { font-size:.8rem; color:var(--wd); line-height:1.75; }

@media(max-width:768px){ .ej-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .ej-grid{grid-template-columns:1fr} }

/* ── Performance & fluidity improvements ── */
html { scroll-behavior: smooth; }
.panel { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.orb { will-change: transform; }
img { content-visibility: auto; }
* { -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE FIXES — versión corregida
   ═══════════════════════════════════════════════════════ */

/* ── Video: el cover no debe bloquear touches después de play ── */
#videoCover {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Asegurar que el video tenga z-index correcto y no esté oculto por el cover */
#heroVideo {
  -webkit-playsinline: '';
  playsinline: '';
}

/* ── Panel: fix overflow y scroll en iOS ───────────────── */
.panel, .art-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Implementación post-diagnóstico grid — colapsar en móvil ── */
@media (max-width: 640px) {
  /* El grid inline de Fase 1 / Fase 2 dentro del panel */
  .cc.full [style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ── Panel nav label: truncar en móvil pequeño ─────────── */
@media (max-width: 480px) {
  .panel-label {
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
  }
  .panel-nav {
    gap: 8px;
  }
}

/* ── c-services: mínimo 2 col en todos los móviles ─────── */
@media (max-width: 380px) {
  .c-services { grid-template-columns: 1fr 1fr; }
}

/* ── Steps proceso: 3 col → 2 col → 1 col ──────────────── */
@media (max-width: 540px) {
  .c-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .c-st {
    border-right: none;
    border-bottom: 1px solid var(--g-border);
    padding: 12px 14px;
  }
  .c-st:nth-child(odd)  { border-right: 1px solid var(--g-border); }
  .c-st:last-child,
  .c-st:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ── Modal: botones en columna en móvil muy pequeño ─────── */
@media (max-width: 360px) {
  .modal { padding: 22px 14px; }
  .modal-row { grid-template-columns: 1fr; }
}

/* ── Hero buttons: full-width en muy pequeño ────────────── */
@media (max-width: 360px) {
  .h-actions { flex-direction: column; align-items: stretch; }
  .h-actions .btn-p,
  .h-actions .btn-o { text-align: center; padding: 13px 16px; }
}

/* ── cam-preview-grid: 1 col en 480px (ya tenía 600px) ──── */
@media (max-width: 480px) {
  .cam-preview-grid { grid-template-columns: 1fr; }
  .cam-preview-card { padding: 24px 20px; }
}

/* ── Footer: columna completa en móvil ─────────────────── */
@media (max-width: 600px) {
  .ft-top { flex-direction: column; gap: 28px; }
  .ft-bot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Wrap padding: mínimo en móvil pequeño ──────────────── */
@media (max-width: 380px) {
  .wrap, .wrap-sm { padding: 48px 16px; }
  .panel-content  { padding: 20px 16px 80px; }
}

/* ── Blog grid: siempre 1 col en móvil ─────────────────── */
@media (max-width: 600px) {
  .blog-grid, .blog-article-grid { grid-template-columns: 1fr; }
}

/* ── Ejemplos grid: 1 col en muy pequeño ───────────────── */
@media (max-width: 380px) {
  .ej-grid { grid-template-columns: 1fr; }
}

/* ── Cookie banner: full-width en muy pequeño ───────────── */
@media (max-width: 380px) {
  #cookieBanner {
    width: calc(100vw - 16px);
    padding: 20px 14px;
    border-radius: 16px;
  }
  .cookie-btns { flex-direction: column; }
  .cookie-btn-all, .cookie-btn-min { flex: none; width: 100%; }
}

/* ── backdrop-filter fallback para Android antiguo ──────── */
@supports not (backdrop-filter: blur(1px)) {
  .panel, .art-panel {
    background-color: rgba(10,10,10,0.98) !important;
  }
  nav {
    background-color: rgba(10,10,10,0.97) !important;
  }
}