/*
Theme Name:  V. Ramirez Asociados
Theme URI:   https://vramirezasociados.com.co
Author:      V. Ramirez Asociados y Abogados S.A.S
Description: Tema profesional para firma de abogados. Incluye páginas: Inicio, La Firma, Áreas de Práctica, Socios Clave y Contacto. Bilingüe ES/EN. WhatsApp flotante. Panel de opciones completo.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     Proprietary
Text Domain: vramirez
*/

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

:root {
  --navy:   #0b1826;
  --navy2:  #12253a;
  --gold:   #b8966e;
  --gold2:  #d4b896;
  --gold3:  #7a6145;
  --cream:  #f4ede0;
  --cream2: #faf7f2;
  --white:  #ffffff;
  --gray:   #6b7280;
  --dgray:  #374151;
  --lgray:  #f0ebe2;
  --border: #e5ddd0;
  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --ff-sans:  'Jost', system-ui, sans-serif;
  --shadow:  0 8px 40px rgba(11,24,38,.13);
  --shadow2: 0 2px 12px rgba(11,24,38,.08);
}

body { font-family: var(--ff-sans); color: var(--dgray); background: var(--white); overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--ff-sans); border: none; background: none; }

/* ═══════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════ */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.eyebrow     { font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); font-weight:500; display:flex; align-items:center; gap:.7rem; }
.eyebrow::before { content:''; display:inline-block; width:28px; height:1px; background:var(--gold); }
.section-title { font-family:var(--ff-serif); font-size:clamp(2rem,3.8vw,3.2rem); font-weight:300; line-height:1.15; color:var(--navy); margin-top:.6rem; }
.section-title em { font-style:italic; color:var(--gold); }
.btn { display:inline-block; padding:.8rem 2rem; font-size:.73rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transition:all .28s ease; cursor:pointer; }
.btn-primary  { background:var(--gold); color:var(--navy); border:1.5px solid var(--gold); }
.btn-primary:hover { background:var(--gold2); border-color:var(--gold2); transform:translateY(-2px); box-shadow:0 6px 20px rgba(184,150,110,.35); }
.btn-outline-light { background:transparent; color:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color:var(--gold2); color:var(--gold2); }
.btn-outline-dark { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-outline-dark:hover { background:var(--navy); color:var(--white); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:78px; display:flex; align-items:center; justify-content:space-between;
  padding:0 5%;
  background:rgba(11,24,38,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,150,110,.2);
  transition:height .3s;
}
.nav-logo-wrap { display:flex; flex-direction:row; align-items:center; gap:.75rem; line-height:1.1; }
.nav-logo-img  { width:36px; height:36px; object-fit:contain; filter:invert(1); flex-shrink:0; }
.nav-logo-text { display:flex; flex-direction:column; gap:1px; }
.nav-logo-main { font-family:var(--ff-serif); font-size:1.3rem; font-weight:600; color:var(--white); letter-spacing:.02em; }
.nav-logo-main span { color:var(--gold); }
.nav-logo-sub  { font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.35); font-weight:300; }
.nav-links { display:flex; list-style:none; gap:2rem; align-items:center; }
.nav-links a { font-size:.72rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:color .25s; position:relative; padding-bottom:3px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:width .3s; }
.nav-links a:hover, .nav-links a.current-menu-item { color:var(--gold2); }
.nav-links a:hover::after, .nav-links a.current-menu-item::after { width:100%; }
.lang-switch { display:flex; align-items:center; border:1px solid rgba(184,150,110,.3); overflow:hidden; margin-left:.5rem; }
.lang-btn { font-size:.66rem; letter-spacing:.12em; padding:.35rem .65rem; color:rgba(255,255,255,.45); font-weight:500; transition:all .2s; cursor:pointer; }
.lang-btn.active { background:var(--gold); color:var(--navy); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
.nav-hamburger span { width:24px; height:1.5px; background:var(--white); transition:all .3s; }
.mobile-nav { position:fixed; inset:0; background:rgba(11,24,38,.98); z-index:950; display:none; flex-direction:column; justify-content:center; align-items:center; gap:2rem; }
.mobile-nav.open { display:flex; }
.mobile-nav a { font-family:var(--ff-serif); font-size:2rem; font-weight:300; color:rgba(255,255,255,.75); transition:color .25s; }
.mobile-nav a:hover { color:var(--gold2); }
.mobile-close { position:absolute; top:1.8rem; right:1.8rem; font-size:1.8rem; color:rgba(255,255,255,.5); cursor:pointer; }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; background:var(--navy); padding-top:78px; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 25%; opacity:.18; animation:heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.04)} to{transform:scale(1.1)} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(11,24,38,.96) 50%,rgba(11,24,38,.55) 100%); }
.hero-content { position:relative; padding:4rem 5% 12rem; max-width:820px; animation:fadeUp .9s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow { font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:1.6rem; display:flex; align-items:center; gap:.8rem; }
.hero-eyebrow::before { content:''; display:inline-block; width:36px; height:1px; background:var(--gold); }
.hero h1 { font-family:var(--ff-serif); font-size:clamp(3rem,6vw,5.5rem); font-weight:300; line-height:1.05; color:var(--white); margin-bottom:.6rem; }
.hero h1 em { font-style:italic; color:var(--gold2); }
.hero-sub { font-size:1rem; font-weight:300; line-height:1.85; color:rgba(255,255,255,.55); max-width:540px; margin:1.4rem 0 2.6rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-stats { position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(184,150,110,.18); animation:fadeUp .9s .25s ease both; opacity:0; animation-fill-mode:forwards; }
.hero-stat { padding:1.8rem 5%; border-right:1px solid rgba(184,150,110,.18); text-align:center; }
.hero-stat:last-child { border-right:none; }
.hero-stat .num { font-family:var(--ff-serif); font-size:3rem; font-weight:300; color:var(--gold); line-height:1; display:block; }
.hero-stat .lbl { font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:.3rem; display:block; }

/* ═══════════════════════════════════════════════════
   VALUES
═══════════════════════════════════════════════════ */
.values { display:grid; grid-template-columns:repeat(3,1fr); background:var(--cream); }
.val-card { padding:4rem 6%; border-right:1px solid rgba(11,24,38,.08); position:relative; overflow:hidden; transition:background .3s; }
.val-card:last-child { border-right:none; }
.val-card:hover { background:var(--white); }
.val-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:0; background:var(--gold); transition:height .4s ease; }
.val-card:hover::before { height:100%; }
.val-icon { width:42px; height:42px; margin-bottom:1.4rem; opacity:.6; }
.val-card h3 { font-family:var(--ff-serif); font-size:1.6rem; font-weight:400; color:var(--navy); margin-bottom:.7rem; }
.val-card p  { font-size:.85rem; line-height:1.8; color:var(--gray); font-weight:300; }

/* ═══════════════════════════════════════════════════
   ABOUT SPLIT
═══════════════════════════════════════════════════ */
.about-split { display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
.about-img   { background-size:cover; background-position:center; position:relative; }
.about-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to right,transparent 60%,rgba(240,235,226,.12)); }
.about-text  { background:var(--lgray); padding:5.5rem 7%; display:flex; flex-direction:column; justify-content:center; }
.about-text p { font-size:.88rem; line-height:1.9; color:var(--gray); font-weight:300; margin-bottom:1rem; }
.founded-badge { display:inline-flex; align-items:center; gap:.8rem; margin-top:2rem; padding:.8rem 1.4rem; border:1px solid var(--border); background:var(--white); }
.founded-badge .yr { font-family:var(--ff-serif); font-size:2rem; color:var(--gold); font-weight:300; line-height:1; }
.founded-badge .yr-text { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gray); font-weight:400; }

/* ═══════════════════════════════════════════════════
   AREAS
═══════════════════════════════════════════════════ */
.areas-section { padding:7rem 5%; background:var(--navy); }
.areas-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(184,150,110,.12); max-width:800px; margin:0 auto; }
.area-card { background:rgba(11,24,38,.95); padding:2.6rem 2rem; transition:background .3s; position:relative; overflow:hidden; cursor:pointer; }
.area-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.area-card:hover { background:rgba(184,150,110,.07); }
.area-card:hover::after { transform:scaleX(1); }
.area-num { font-family:var(--ff-serif); font-size:2.8rem; color:rgba(184,150,110,.15); font-weight:300; line-height:1; margin-bottom:1rem; transition:color .3s; }
.area-card:hover .area-num { color:rgba(184,150,110,.4); }
.area-card h4 { font-family:var(--ff-serif); font-size:1.15rem; font-weight:400; color:var(--white); margin-bottom:.7rem; line-height:1.3; }
.area-card p  { font-size:.77rem; line-height:1.75; color:rgba(255,255,255,.38); font-weight:300; }
/* Full areas page */
.areas-full-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:900px; margin:3rem auto; padding:0 5%; }
.area-full-card { padding:2.5rem; border:1px solid var(--border); transition:all .3s; position:relative; overflow:hidden; }
.area-full-card:hover { border-color:var(--gold); box-shadow:var(--shadow2); transform:translateY(-3px); }
.area-full-card::before { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:var(--gold); transition:width .35s; }
.area-full-card:hover::before { width:100%; }
.area-full-num { font-family:var(--ff-serif); font-size:3rem; color:rgba(184,150,110,.2); font-weight:300; line-height:1; margin-bottom:.8rem; }
.area-full-card h3 { font-family:var(--ff-serif); font-size:1.3rem; font-weight:400; color:var(--navy); margin-bottom:.8rem; line-height:1.3; }
.area-full-card p  { font-size:.82rem; line-height:1.8; color:var(--gray); font-weight:300; }

/* ═══════════════════════════════════════════════════
   TEAM
═══════════════════════════════════════════════════ */
.team-section { padding:7rem 5%; background:var(--cream2); text-align:center; }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:960px; margin:0 auto; }
.team-member { text-align:center; cursor:pointer; }
.team-photo { width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 auto 1.1rem; border:2px solid rgba(184,150,110,.25); transition:border-color .3s, transform .3s; }
.team-member:hover .team-photo { border-color:var(--gold); transform:scale(1.04); }
.team-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(25%); transition:filter .35s; }
.team-member:hover img { filter:grayscale(0); }
.team-name { font-family:var(--ff-serif); font-size:1.1rem; font-weight:400; color:var(--navy); }
.team-role { font-size:.68rem; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; margin-top:.2rem; }
.divider-gold { display:flex; align-items:center; gap:.9rem; margin:.5rem 0 2.5rem; }
.divider-gold::before, .divider-gold::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.4; }
.divider-gold span { color:var(--gold); font-size:.8rem; opacity:.6; }

/* ═══════════════════════════════════════════════════
   FIRMA PAGE
═══════════════════════════════════════════════════ */
.inner-hero { background:var(--navy); padding:5rem 5% 4rem; position:relative; overflow:hidden; }
.inner-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.12; }
.inner-hero-content { position:relative; max-width:680px; }
.inner-hero .section-title { color:var(--white); margin-top:.5rem; }
.inner-hero p { font-size:.9rem; color:rgba(255,255,255,.5); max-width:540px; margin:.8rem 0 0; font-weight:300; line-height:1.8; }
.firma-body { padding:5rem 5%; max-width:1200px; margin:0 auto; }
.firma-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin:3rem 0; }
.firma-card { padding:2.5rem; background:var(--cream2); border-left:3px solid var(--gold); }
.firma-card h4 { font-family:var(--ff-serif); font-size:1.35rem; font-weight:400; color:var(--navy); margin-bottom:.8rem; }
.firma-card p  { font-size:.86rem; line-height:1.85; color:var(--gray); font-weight:300; }
.timeline { margin:2.5rem 0; border-left:2px solid var(--border); padding-left:2rem; }
.timeline-item { margin-bottom:2rem; position:relative; }
.timeline-item::before { content:''; position:absolute; left:-2.45rem; top:.25rem; width:10px; height:10px; border-radius:50%; background:var(--gold); }
.timeline-year { font-family:var(--ff-serif); font-size:1.1rem; color:var(--gold); font-weight:400; margin-bottom:.3rem; }
.timeline-text { font-size:.85rem; color:var(--gray); font-weight:300; line-height:1.7; }

/* ═══════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════ */
.contact-hero { background:var(--navy); padding:5rem 5% 4rem; text-align:center; }
.contact-hero .section-title { color:var(--white); }
.contact-hero p { font-size:.9rem; color:rgba(255,255,255,.5); max-width:500px; margin:.8rem auto 0; font-weight:300; line-height:1.8; }
.contact-body { display:grid; grid-template-columns:1.2fr 1fr; gap:0; max-width:1200px; margin:0 auto; padding:4rem 5%; }
.contact-form-wrap { padding-right:4rem; }
.contact-form-wrap h3 { font-family:var(--ff-serif); font-size:1.8rem; font-weight:300; color:var(--navy); margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { margin-bottom:1.4rem; }
.form-group label { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); font-weight:500; margin-bottom:.5rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:.85rem 1rem; border:1px solid var(--border); background:var(--cream2); font-family:var(--ff-sans); font-size:.88rem; color:var(--dgray); transition:border-color .25s, box-shadow .25s; outline:none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,150,110,.12); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-check { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:1.5rem; }
.form-check input { margin-top:3px; accent-color:var(--gold); width:auto; }
.form-check label { font-size:.78rem; color:var(--gray); font-weight:300; line-height:1.55; }
.form-success { display:none; padding:1.2rem 1.5rem; background:rgba(184,150,110,.1); border-left:3px solid var(--gold); margin-top:1rem; font-size:.85rem; color:var(--dgray); }
.contact-info-wrap { padding-left:1rem; }
.contact-info-wrap h3 { font-family:var(--ff-serif); font-size:1.8rem; font-weight:300; color:var(--navy); margin-bottom:2rem; }
.info-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.8rem; }
.info-icon { width:40px; height:40px; background:var(--lgray); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-icon svg { width:18px; height:18px; stroke:var(--gold); }
.info-label { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gray); margin-bottom:.25rem; }
.info-value { font-size:.88rem; color:var(--dgray); font-weight:300; line-height:1.6; }
.map-wrap { margin-top:2rem; border:1px solid var(--border); overflow:hidden; height:220px; }
.map-wrap iframe { width:100%; height:100%; border:0; }

/* ═══════════════════════════════════════════════════
   CTA BANNER & FOOTER
═══════════════════════════════════════════════════ */
.cta-banner { background:var(--navy); padding:5rem 5%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3rem; border-top:1px solid rgba(184,150,110,.15); }
.cta-banner h2 { font-family:var(--ff-serif); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300; color:var(--white); line-height:1.2; }
.cta-banner p  { font-size:.85rem; color:rgba(255,255,255,.45); font-weight:300; margin-top:.5rem; }
footer { background:#07111c; padding:4.5rem 5% 2rem; color:rgba(255,255,255,.38); }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem; }
.footer-brand p { font-size:.78rem; line-height:1.8; margin-top:1rem; color:rgba(255,255,255,.3); }
.footer-col h5 { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.55rem; }
.footer-col a  { font-size:.8rem; color:rgba(255,255,255,.32); transition:color .25s; }
.footer-col a:hover { color:var(--gold2); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:1.8rem; display:flex; justify-content:space-between; align-items:center; font-size:.7rem; flex-wrap:wrap; gap:.8rem; }

/* ═══════════════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════════════ */
.wa-float { position:fixed; bottom:2rem; right:2rem; z-index:800; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); transition:transform .3s, box-shadow .3s; cursor:pointer; }
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,.55); }
.wa-float svg { width:28px; height:28px; fill:white; }
.wa-tooltip { position:absolute; right:66px; top:50%; transform:translateY(-50%); background:var(--navy); color:var(--white); font-size:.72rem; white-space:nowrap; padding:.45rem .9rem; opacity:0; pointer-events:none; transition:opacity .25s; }
.wa-float:hover .wa-tooltip { opacity:1; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .areas-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; gap:2rem; }
}
@media(max-width:860px){
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .values { grid-template-columns:1fr; }
  .val-card { border-right:none; border-bottom:1px solid rgba(11,24,38,.08); }
  .about-split { grid-template-columns:1fr; }
  .about-img { min-height:280px; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .cta-banner { grid-template-columns:1fr; text-align:center; }
  .contact-body { grid-template-columns:1fr; padding:2rem 5%; }
  .contact-form-wrap { padding-right:0; margin-bottom:2rem; }
  .contact-info-wrap { padding-left:0; }
  .firma-grid { grid-template-columns:1fr; }
  .areas-full-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .hero h1 { font-size:2.6rem; }
  .hero-stats { grid-template-columns:1fr; }
  .hero-stat { border-right:none; border-top:1px solid rgba(184,150,110,.18); padding:1.2rem 5%; }
  .form-row { grid-template-columns:1fr; }
  .areas-grid { grid-template-columns:1fr; }
}