/* =========================================================
   Comunicales Theme (main.css)
   Sistema de colores: #0066CC, #FF6B35, #2D3748
   ========================================================= */

:root{
  --c-blue:#0066CC;
  --c-orange:#FF6B35;
  --c-slate:#2D3748;

  --c-bg:#070B14;
  --c-bg-2:#0B1220;
  --c-surface:rgba(255,255,255,.06);
  --c-surface-2:rgba(255,255,255,.08);
  --c-stroke:rgba(255,255,255,.12);

  --c-text:rgba(255,255,255,.92);
  --c-muted:rgba(255,255,255,.72);
  --c-muted-2:rgba(255,255,255,.56);

  --grad-brand:linear-gradient(90deg,var(--c-blue),var(--c-orange));
  --grad-hero:
    radial-gradient(1000px 700px at 18% 10%, rgba(0,102,204,.18), transparent 55%),
    radial-gradient(900px 650px at 82% 18%, rgba(255,107,53,.14), transparent 55%),
    radial-gradient(1000px 700px at 55% 88%, rgba(45,55,72,.18), transparent 55%);

  --container:1160px;
  --radius-xl:28px;
  --radius-lg:18px;
  --radius-md:14px;

  --shadow-lg:0 18px 60px rgba(0,0,0,.38);
  --shadow-md:0 14px 44px rgba(0,0,0,.28);

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:140ms;
  --t-med:220ms;
  --t-slow:420ms;

  --ring:0 0 0 6px rgba(0,102,204,.18);
}

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

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--c-text);
  background:var(--grad-hero), linear-gradient(180deg,var(--c-bg-2),var(--c-bg) 72%);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
p{ margin:0 0 14px 0; color:var(--c-muted); line-height:1.65; }
h1,h2,h3{ margin:0 0 12px 0; line-height:1.06; }
strong{ color:var(--c-text); }

.container{ width:min(var(--container), calc(100% - 40px)); margin:0 auto; }
.section{ padding:92px 0; position:relative; }
.grid{ display:grid; gap:18px; }
.split{ display:flex; justify-content:space-between; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.h2{ font-size:clamp(26px, 3vw, 38px); letter-spacing:-.6px; }
.muted{ color:var(--c-muted); }
.lead{ font-size:18px; color:var(--c-muted); }

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--c-stroke);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--c-muted);
  font-size:13px;
  letter-spacing:.3px;
  backdrop-filter: blur(8px);
}
.dot{ width:10px; height:10px; border-radius:999px; background:var(--grad-brand); box-shadow:0 0 0 6px rgba(255,255,255,.05); }

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--c-stroke);
  background:rgba(255,255,255,.04);
  color:var(--c-muted);
  font-size:13px;
}

.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  appearance:none; border:0; cursor:pointer;
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  letter-spacing:.2px;
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ color:#07101F; background:var(--grad-brand); box-shadow:0 18px 52px rgba(0,102,204,.18); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 22px 70px rgba(0,102,204,.24); }
.btn-ghost{ background:rgba(255,255,255,.05); border:1px solid var(--c-stroke); color:var(--c-text); }
.btn-ghost:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.btn-small{ padding:10px 14px; font-size:14px; }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:14px; }

.card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-xl);
  padding:22px;
  box-shadow:var(--shadow-md);
  backdrop-filter: blur(10px);
}

/* NAV */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter: blur(12px); background: rgba(7,11,20,.60); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:220px; }
.brand img{ width:160px; height:auto; filter: drop-shadow(0 12px 35px rgba(0,0,0,.25)); transform-origin:left center; transition:transform var(--t-med) var(--ease); }
.brand:hover img{ transform:scale(1.02); }
.nav-links{ display:flex; gap:18px; align-items:center; color:var(--c-muted); font-weight:650; font-size:14px; }
.nav-links a{ padding:10px 10px; border-radius:12px; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.nav-links a:hover{ background:rgba(255,255,255,.06); color:var(--c-text); transform:translateY(-1px); }
.nav-cta{ display:flex; gap:10px; align-items:center; }

.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--c-stroke); background:rgba(255,255,255,.04); color:var(--c-text); cursor:pointer; align-items:center; justify-content:center; transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.burger:hover{ background:rgba(255,255,255,.07); transform:translateY(-1px); }
.burger span{ width:18px; height:2px; background:var(--c-text); display:block; position:relative; }
.burger span:before,.burger span:after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--c-text); }
.burger span:before{ top:-6px; }
.burger span:after{ top:6px; }

.drawer{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; }
.drawer-panel{ position:absolute; right:0; top:0; width:min(92vw, 420px); height:100%; background:rgba(11,18,32,.92); backdrop-filter: blur(14px); border-left:1px solid rgba(255,255,255,.10); padding:18px; transform:translateX(110%); transition:transform var(--t-med) var(--ease); }
.drawer.open{ display:block; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:12px; }
.drawer a{ display:block; padding:12px 10px; border-radius:14px; color:var(--c-text); border:1px solid transparent; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.drawer a:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); }
.drawer-cta{ display:flex; gap:10px; flex-wrap:wrap; padding-top:10px; }

/* HERO */
.hero{ padding:42px 0 78px 0; }
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:22px; align-items:stretch; }
.hero-copy{ padding:38px 0; animation:fadeUp var(--t-slow) var(--ease) both; }
.hero h1{ font-size:clamp(34px, 4.2vw, 58px); letter-spacing:-.9px; }
.trust-row{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px 0; }
.hero-art{ position:relative; border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); min-height:420px; background:#111; isolation:isolate; transform:translateZ(0); animation:fadeIn var(--t-slow) var(--ease) both; }
.hero-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,11,20,.88) 0%, rgba(7,11,20,.60) 34%, rgba(7,11,20,.18) 64%, rgba(7,11,20,.08) 100%); pointer-events:none; z-index:2; }
.hero-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transform:scale(1.02); transition:transform var(--t-slow) var(--ease); }
.hero-art:hover img{ transform:scale(1.06); }
.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
.stat{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:var(--radius-lg); padding:14px; transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.stat:hover{ transform:translateY(-2px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.stat b{ display:block; font-size:18px; letter-spacing:-.2px; }
.stat span{ color:var(--c-muted-2); font-size:12.5px; }
.brandline{ height:2px; width:100%; background:linear-gradient(90deg, transparent, rgba(0,102,204,.9), rgba(255,107,53,.9), transparent); opacity:.8; margin:14px 0 0 0; }

/* Servicios */
.services-grid{ grid-template-columns:1fr 1fr; align-items:stretch; }
.services-visual{ border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); min-height:420px; background:rgba(255,255,255,.02); }
.services-visual img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform var(--t-slow) var(--ease); }
.services-visual:hover img{ transform:scale(1.06); }
.service-list{ display:grid; gap:12px; margin-top:14px; }
.service-item{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); padding:14px; border-radius:var(--radius-lg); transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.service-item:hover{ transform:translateY(-2px); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
.service-item h3{ font-size:16px; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.service-item p{ margin:0; font-size:14px; color:var(--c-muted); }
.mini-icon{ width:12px; height:12px; border-radius:999px; background:var(--grad-brand); box-shadow:0 0 0 6px rgba(255,255,255,.05); flex:0 0 auto; }

/* Equipo */
.team-wrap{ border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); position:relative; background:#0b1220; }
.team-bg{ position:absolute; inset:0; z-index:0; }
.team-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.team-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,11,20,.74), rgba(7,11,20,.86)); z-index:1; }
.team-inner{ position:relative; z-index:2; padding:34px; }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.member{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); border-radius:var(--radius-xl); padding:18px; display:flex; gap:14px; align-items:center; transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.member:hover{ transform:translateY(-2px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.avatar{ width:74px; height:74px; border-radius:999px; overflow:hidden; flex:0 0 auto; border:2px solid rgba(255,255,255,.18); box-shadow:0 16px 40px rgba(0,0,0,.30); background:rgba(255,255,255,.06); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.member b{ display:block; font-size:15px; margin-bottom:3px; }
.member span{ color:var(--c-muted); font-size:13.5px; }

/* Testimonios */
.testimonials-grid{ margin-top:16px; grid-template-columns:repeat(3,1fr); }
.testimonial{ min-height:220px; }

/* Contacto */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:stretch; }
.contact-visual{ border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); min-height:420px; position:relative; background:rgba(255,255,255,.02); }
.contact-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.contact-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,11,20,.82), rgba(7,11,20,.35)); pointer-events:none; }
form{ display:grid; gap:12px; margin-top:14px; }
label{ font-size:13px; color:var(--c-muted); }
.field{ display:grid; gap:6px; }
input, textarea, select{ width:100%; padding:12px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--c-text); outline:none; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
textarea{ min-height:112px; resize:vertical; }
input:focus, textarea:focus, select:focus{ border-color:rgba(0,102,204,.62); background:rgba(255,255,255,.06); }
.contact-cards{ display:grid; gap:10px; margin-top:12px; }
.contact-card{ display:flex; gap:10px; align-items:flex-start; padding:14px; border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.contact-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.18); }
.contact-card b{ display:block; margin-bottom:2px; }
.contact-card small{ color:var(--c-muted); }

/* Quote */
.quote{ margin-top:18px; padding:18px; border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--c-muted); }

/* Footer */
footer{ padding:26px 0 44px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--c-muted); }
.footer-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{ opacity:0; filter:blur(3px);} to{ opacity:1; filter:blur(0);} }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .brand img{ width:150px; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ min-height:360px; }
  .hero-copy{ padding:26px 0 4px 0; }
  .hero-stats{ grid-template-columns:1fr; }

  .services-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .testimonials-grid{ grid-template-columns:1fr 1fr; }

  .contact-grid{ grid-template-columns:1fr; }
  .contact-visual{ min-height:360px; }
}

@media (max-width: 560px){
  .section{ padding:74px 0; }
  .card{ padding:18px; }
  .team-inner{ padding:20px; }
  .testimonials-grid{ grid-template-columns:1fr; }
}

/* WordPress helpers */
.wp-block{ max-width:100%; }
.alignwide{ width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.alignfull{ width:100%; margin-left:0; margin-right:0; }
.screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }