/*
Theme Name:  Peña de la Rosa — Bilingual
Theme URI:   https://www.penadelarosa.com
Author:      Antonio Peña de la Rosa
Author URI:  https://www.penadelarosa.com
Description: Tema ejecutivo premium bilingüe (EN/ES) para Global CIO/CISO. Diseño oscuro, elegante, orientado a headhunters, CEOs y consejos de administración.
Version:     2.0
License:     Private
Text Domain: penadelarosa
*/



/* ── RESET ─────────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}

/* ── TOKENS ────────────────────────────────────────────────── */
:root{
  --void:   #050608;
  --ink:    #080b0f;
  --deep:   #0c1018;
  --panel:  #101620;
  --rail:   #18232e;
  --line:   #1d2b38;
  --text:   #c8d4de;
  --dim:    #6b7d8c;
  --chalk:  #eef2f6;
  --gold:   #c5893a;
  --gold2:  #e8b86a;
  --gold3:  #fad28e;
  --white:  #ffffff;
  --black:  #020304;
}

/* ── BASE ──────────────────────────────────────────────────── */
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--void);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grain overlay */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:0.028;
}

/* ── NAV ───────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3.5rem;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:rgba(5,6,8,0.88);
  backdrop-filter:blur(20px);
}
.nav-logo{
  font-family:'Playfair Display',serif;
  font-size:0.95rem;letter-spacing:0.04em;
  color:var(--chalk);text-decoration:none;
}
.nav-logo b{color:var(--gold);font-weight:400}
.nav-right{display:flex;align-items:center;gap:1.5rem}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{
  font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;transition:color 0.2s;font-weight:500;
}
.nav-links a:hover{color:var(--chalk)}
.nav-cta{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;
  color:var(--black);background:var(--gold);
  padding:0.45rem 1.2rem;
  border:none;cursor:pointer;
  font-family:'Instrument Sans',sans-serif;
  text-decoration:none;display:inline-block;
  transition:background 0.2s;
}
.nav-cta:hover{background:var(--gold2);color:var(--black)}

/* ── S1: HERO ──────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr 38%;
  padding-top:52px;
  position:relative;
}

/* Ambient light */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 68% 42%, rgba(197,137,58,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 10% 80%, rgba(197,137,58,0.04) 0%, transparent 60%);
}

.hero-left{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 4rem 5rem 3.5rem;
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:0.9rem;
  font-size:10px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--gold2);font-weight:600;
  margin-bottom:2.2rem;
  opacity:0;animation:fadeUp 0.7s 0.1s ease forwards;
}
.eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--gold)}

/* H1 — the hook */
.hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.2rem,5.5vw,5.8rem);
  line-height:0.95;
  letter-spacing:-0.03em;
  color:var(--white);
  font-weight:400;
  margin-bottom:2rem;
  max-width:760px;
  opacity:0;animation:fadeUp 0.8s 0.2s ease forwards;
}
.hero-h1 em{font-style:italic;color:var(--gold2)}
.hero-h1 .ruled{
  display:block;
  border-top:1px solid rgba(197,137,58,0.25);
  padding-top:0.6rem;
  margin-top:0.3rem;
}

/* Lead */
.hero-lead{
  font-size:1.05rem;color:var(--dim);line-height:1.7;
  max-width:560px;margin-bottom:2.5rem;font-weight:300;
  opacity:0;animation:fadeUp 0.8s 0.35s ease forwards;
}
.hero-lead strong{color:var(--text);font-weight:500}

/* Actions */
.hero-actions{
  display:flex;gap:0.75rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.7s 0.5s ease forwards;
}
.btn-p{
  display:inline-flex;align-items:center;
  background:var(--gold);color:var(--black);
  padding:0.8rem 2rem;border:none;
  font-family:'Instrument Sans',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;cursor:pointer;
  text-decoration:none;transition:background 0.2s;
}
.btn-p:hover{background:var(--gold2)}
.btn-g{
  display:inline-flex;align-items:center;
  background:transparent;color:var(--dim);
  padding:0.8rem 2rem;
  border:1px solid var(--line);
  font-family:'Instrument Sans',sans-serif;
  font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;cursor:pointer;
  text-decoration:none;transition:all 0.2s;
}
.btn-g:hover{border-color:var(--gold);color:var(--gold)}

/* ── METRICS TICKER ────────────────────────────────────────── */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin-top:3.5rem;
  border:1px solid var(--line);
  background:var(--line);
  opacity:0;animation:fadeUp 0.7s 0.65s ease forwards;
}
.metric{
  background:var(--deep);
  padding:1.4rem 1.25rem;
  position:relative;
  transition:background 0.2s;
}
.metric:hover{background:var(--panel)}
.metric::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:transparent;transition:background 0.25s;
}
.metric:hover::before{background:var(--gold)}
.metric-val{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,2.8vw,2.8rem);
  color:var(--white);line-height:1;
  letter-spacing:-0.02em;
}
.metric-val sup{font-size:0.5em;color:var(--gold);vertical-align:super;margin-left:1px}
.metric-lbl{
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--dim);margin-top:0.4rem;font-weight:500;
}

/* Photo column */
.hero-right{
  position:relative;overflow:hidden;
  background:var(--deep);
}
.hero-right::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:160px;
  background:linear-gradient(to right,var(--void),transparent);
  z-index:2;
}
.hero-right::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:220px;
  background:linear-gradient(to top,var(--void),transparent);
  z-index:2;
}
.hero-photo{
  width:100%;height:100%;object-fit:cover;
  object-position:center top;display:block;
  filter:grayscale(22%) contrast(1.07) brightness(0.9);
}

/* ── S2: THREE MANDATES ────────────────────────────────────── */
.mandates{
  padding:7rem 3.5rem;
  background:var(--ink);
  border-top:1px solid var(--line);
}
.mandates .wrap{max-width:1120px;margin:0 auto}
.section-tag{
  font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:1rem;
  display:flex;align-items:center;gap:0.75rem;
}
.section-tag::before{content:'';display:block;width:22px;height:1px;background:var(--gold)}
.section-h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,4vw,3.8rem);
  color:var(--white);line-height:1.05;
  font-weight:400;letter-spacing:-0.03em;
  margin-bottom:0.75rem;
}
.section-sub{font-size:0.95rem;color:var(--dim);line-height:1.75;max-width:580px;font-weight:300}

.mandate-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  margin-top:3.5rem;
  border:1px solid var(--line);
}
.mcard{
  background:var(--ink);padding:2.5rem 2rem;
  position:relative;overflow:hidden;
  transition:background 0.2s;
  cursor:default;
}
.mcard:hover{background:var(--panel)}
.mcard-n{
  font-family:'Playfair Display',serif;
  font-size:5rem;color:rgba(30,42,55,1);
  line-height:1;margin-bottom:1.5rem;
  transition:color 0.25s;font-weight:700;
  letter-spacing:-0.04em;
}
.mcard:hover .mcard-n{color:rgba(197,137,58,0.1)}
.mcard-title{
  font-size:1rem;font-weight:600;color:var(--white);
  margin-bottom:0.75rem;line-height:1.3;
}
.mcard-body{font-size:13px;color:var(--dim);line-height:1.7;font-weight:300}
.mcard-tag{
  display:inline-block;margin-top:1.25rem;
  font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid rgba(197,137,58,0.2);
  color:rgba(232,184,106,0.6);padding:3px 10px;
}

/* ── S3: SIGNAL TABLE ──────────────────────────────────────── */
.signal{
  padding:7rem 3.5rem;
  background:var(--void);
}
.signal .wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.signal-left{}
.signal-quote{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3vw,2.8rem);
  color:var(--white);line-height:1.2;
  font-style:italic;font-weight:400;
  margin:2rem 0;max-width:480px;
}
.signal-quote em{font-style:normal;color:var(--gold2)}
.signal-attr{font-size:12px;color:var(--dim);letter-spacing:0.08em}
.signal-table{margin-top:3.5rem}
.signal-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.signal-row:first-child{border-top:1px solid var(--line)}
.signal-key{font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0.02em}
.signal-val{
  font-size:13px;color:var(--chalk);font-weight:600;
  text-align:right;letter-spacing:0.01em;
}
.signal-val.accent{color:var(--gold2)}

/* ── S4: 90-DAY ────────────────────────────────────────────── */
.plan{
  padding:7rem 3.5rem;
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.plan .wrap{max-width:1120px;margin:0 auto}
.plan-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;margin-top:3.5rem;align-items:start;
}
.steps{}
.step{
  display:flex;gap:1.75rem;
  padding:1.75rem 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none}
.step-n{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;color:rgba(197,137,58,0.35);
  line-height:1;flex-shrink:0;width:1.8rem;
  text-align:right;margin-top:2px;
  font-weight:400;
}
.step-title{font-size:0.9rem;font-weight:600;color:var(--white);margin-bottom:0.35rem}
.step-body{font-size:12.5px;color:var(--dim);line-height:1.65;font-weight:300}
.plan-aside{padding-top:0.5rem}
.aside-headline{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;color:var(--white);
  line-height:1.35;font-style:italic;
  margin-bottom:1.5rem;font-weight:400;
}
.aside-headline em{font-style:normal;color:var(--gold2)}
.aside-body{font-size:13px;color:var(--dim);line-height:1.7;font-weight:300;margin-bottom:2rem}
.tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.tag-chip{
  font-size:10px;padding:0.3rem 0.75rem;letter-spacing:0.06em;
  background:rgba(197,137,58,0.07);
  border:1px solid rgba(197,137,58,0.2);
  color:var(--gold2);font-weight:500;
}
.tag-chip.dark{
  background:transparent;
  border-color:var(--line);
  color:var(--dim);
}

/* ── S5: CONTACT ───────────────────────────────────────────── */
.contact{
  padding:8rem 3.5rem;
  background:var(--void);
  position:relative;overflow:hidden;
}
.contact::before{
  content:'';position:absolute;
  inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(197,137,58,0.07) 0%, transparent 65%);
}
.contact .wrap{
  max-width:1120px;margin:0 auto;position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto;
  gap:5rem;align-items:start;
}
.contact-headline{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  color:var(--white);line-height:1;
  font-weight:400;letter-spacing:-0.035em;
  margin-bottom:1.5rem;
}
.contact-headline em{font-style:italic;color:var(--gold2)}
.contact-sub{
  font-size:1rem;color:var(--dim);line-height:1.75;
  font-weight:300;max-width:520px;margin-bottom:3rem;
}
.contact-actions{display:flex;gap:0.75rem;flex-wrap:wrap}
.contact-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:2.5rem 2rem;
  min-width:300px;
  position:relative;
}
.contact-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--gold),transparent);
}
.card-photo-row{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.5rem;
}
.card-photo{
  width:56px;height:56px;border-radius:50%;
  object-fit:cover;object-position:center top;
  border:1.5px solid var(--gold);
  filter:grayscale(20%);flex-shrink:0;
}
.card-name{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;color:var(--white);
  margin-bottom:2px;font-weight:400;
}
.card-role{
  font-size:10px;color:var(--gold);
  text-transform:uppercase;letter-spacing:0.12em;font-weight:600;
}
.card-creds{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:1.5rem}
.card-cred{
  font-size:10px;padding:2px 8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);color:var(--dim);
}
.card-cred.gold{border-color:rgba(197,137,58,0.3);color:var(--gold2);background:rgba(197,137,58,0.06)}
.card-note{font-size:11.5px;color:var(--dim);line-height:1.6;font-weight:300}

/* ── FOOTER ────────────────────────────────────────────────── */
footer{
  padding:1.25rem 3.5rem;
  border-top:1px solid var(--line);
  background:var(--void);
  display:flex;align-items:center;justify-content:space-between;
}
.footer-logo{font-family:'Playfair Display',serif;color:var(--chalk);font-size:0.9rem}
.footer-logo b{color:var(--gold);font-weight:400}
.footer-copy{font-size:11px;color:var(--dim);letter-spacing:0.06em}

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-right{height:460px;order:-1}
  .hero-right::before{width:0}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .mandate-grid{grid-template-columns:1fr}
  .signal .wrap{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .contact .wrap{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav{padding:0 1.5rem}
  .hero-left,.mandates,.signal,.plan,.contact{padding-left:1.5rem;padding-right:1.5rem}
  footer{padding:1.25rem 1.5rem;flex-direction:column;gap:0.4rem;text-align:center}
}
@media(max-width:540px){
  .hero-left{padding-top:3rem;padding-bottom:3rem}
  .metrics{grid-template-columns:1fr 1fr}
  .mandate-grid{grid-template-columns:1fr}
  .hero-h1{letter-spacing:-0.02em}
  .contact-card{min-width:auto}
}


/* ── LANG SWITCHER ─────────────────────────────────────────── */
.lang-switcher {
  display:flex;align-items:center;gap:0.3rem;
  margin-left:0.5rem;
}
.lang-btn {
  font-family:'Instrument Sans',sans-serif;
  font-size:10px;letter-spacing:0.14em;font-weight:700;
  padding:0.3rem 0.6rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--dim);
  cursor:pointer;
  transition:all 0.2s;
  text-transform:uppercase;
  line-height:1;
}
.lang-btn:hover {
  border-color:var(--gold);
  color:var(--gold);
}
.lang-btn.active {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--black);
}
.lang-divider {
  width:1px;height:12px;
  background:var(--line);
  display:block;
}


/* ── WORDPRESS ADMIN BAR ─────────────────────────────────── */
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nav { top: 46px; } }