/*
Theme Name:  Estudio Rosetta
Description: Tema standalone de Estudio Rosetta. Sin dependencias externas.
Author:      Estudio Rosetta
Version:     1.0.0
Template:    
Text Domain: rosetta
*/


/* ══════════════════════════════
   TOKENS — Manual de Identidad
   ══════════════════════════════ */
:root {
  --mg:       #BF1055;
  --mg-dark:  #8C0A3D;
  --mg-light: #F2A8C5;
  --mg-pale:  #FCE8F0;
  --or:       #F7941D;
  --teal:     #1A8C7D;
  --teal-l:   #4DB8A8;
  --navy:     #1C2B4A;
  --gold:     #C9A84C;
  --ink:      #1C1C1C;
  --ink2:     #111111;
  --white:    #FFFFFF;
  --off:      #F8F7F6;
  --gray:     #888888;
  --border:   #E8E5E0;
  --g1:  linear-gradient(135deg, #F7941D 0%, #BF1055 100%);
  --g-v: linear-gradient(180deg,  #F7941D 0%, #BF1055 100%);
  --g-h: linear-gradient(90deg,   #F7941D 0%, #BF1055 100%);
  --radius: 3px;
  --nav-h: 66px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--off);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ══════════════════════════════
   UTILIDADES
   ══════════════════════════════ */
.container { max-width:1120px; margin:0 auto; }
.sec-label {
  font-family:'Space Mono', monospace;
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:3px; color:var(--mg); margin-bottom:14px;
}
.sec-label--light { color:var(--mg-light); }
.sec-label--teal  { color:var(--teal-l); }

.divider-bar {
  width:44px; height:4px; border-radius:2px;
  background:var(--g1); margin-bottom:24px;
}
.dots-row {
  display:flex; gap:5px; margin-bottom:22px;
}
.dot { width:6px; height:6px; border-radius:50%; background:var(--ink); flex-shrink:0; }
.dot--light { background:rgba(255,255,255,0.18); }

.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  padding:14px 28px; border-radius:var(--radius);
  transition: opacity .2s, transform .2s;
  cursor:pointer;
}
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn--primary { background:var(--g1); color:#fff; }
.btn--ghost-light {
  color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.2);
  padding:13px 27px;
}
.btn--ghost-light:hover { color:#fff; border-color:rgba(255,255,255,.5); opacity:1; }
.btn--dark {
  background:var(--ink); color:#fff;
}
.btn--outline {
  border:1px solid var(--mg); color:var(--mg);
}
.btn--outline:hover { background:var(--mg); color:#fff; opacity:1; }

.tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--g1); color:#fff;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:5px 12px; border-radius:2px;
}

/* ══════════════════════════════
   NAV
   ══════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:rgba(20,20,20,.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center;
  padding:0 48px;
  gap:36px;
}
.nav__brand {
  display:flex; align-items:center; gap:12px;
  flex-shrink:0; margin-right:auto;
}
.nav__logo {
  width:36px; height:36px; border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
}
.nav__name {
  font-size:14px; font-weight:900; letter-spacing:-.2px;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav__name span { font-style:italic; }
.nav__links {
  display:flex; align-items:center; gap:28px;
}
.nav__links a {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:rgba(255,255,255,.45);
  transition:color .2s;
}
.nav__links a:hover,
.nav__links a.active { color:#fff; }
.nav__cta {
  background:var(--g1); color:#fff !important;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  padding:9px 20px; border-radius:var(--radius);
  flex-shrink:0;
  transition:opacity .2s;
}
.nav__cta:hover { opacity:.85; }
.nav__burger { display:none; color:#fff; padding:4px; }

@media(max-width:900px){
  .nav { padding:0 24px; gap:0; }
  .nav__links { display:none; }
  .nav__burger { display:flex; align-items:center; margin-left:auto; margin-right:12px; }
  .nav__links.open {
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(18,18,18,.98);
    padding:16px 24px 24px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav__links.open a { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); width:100%; }
}

/* ══════════════════════════════
   HERO
   ══════════════════════════════ */
.hero {
  min-height:100svh;
  background:var(--ink2);
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 60px) 48px 80px;
  position:relative; overflow:hidden;
}
/* sidebar degradada — elemento gráfico del manual */
.hero__sidebar {
  position:absolute; left:0; top:0; bottom:0;
  width:5px; background:var(--g-v); flex-shrink:0;
}
/* trama de puntos */
.hero__dots {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
/* destellos de color de fondo */
.hero__glow-1 {
  position:absolute; top:-80px; right:-60px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(191,16,85,.22) 0%, transparent 70%);
  pointer-events:none;
}
.hero__glow-2 {
  position:absolute; bottom:-100px; left:200px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(247,148,29,.12) 0%, transparent 70%);
  pointer-events:none;
}
/* watermark tipográfico del manual */
.hero__wm {
  position:absolute; bottom:-30px; right:-20px;
  font-size:clamp(120px,18vw,220px); font-weight:900; line-height:1;
  color:#fff; opacity:.022; pointer-events:none; user-select:none;
  white-space:nowrap;
}

.hero__content { position:relative; z-index:2; max-width:680px; }

.hero__eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(191,16,85,.3);
  background:rgba(191,16,85,.1);
  padding:6px 14px; border-radius:2px; margin-bottom:32px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px;
  color:var(--mg-light);
}
.hero__eyebrow::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--mg);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.4; transform:scale(.75); }
}

.hero h1 {
  font-size:clamp(44px,7.5vw,96px);
  font-weight:900; color:#fff; line-height:.95;
  letter-spacing:-2.5px; margin-bottom:12px;
}
.hero h1 em {
  font-style:normal;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__sub {
  font-size:16px; font-weight:300; color:rgba(255,255,255,.5);
  line-height:1.7; max-width:460px; margin-bottom:44px;
}
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; }

/* stats flotantes */
.hero__stats {
  position:absolute; right:80px; bottom:80px; z-index:2;
  display:flex; flex-direction:column; gap:28px; align-items:flex-end;
}
.hero__stat-n {
  font-size:40px; font-weight:900; line-height:1;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__stat-l {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:rgba(255,255,255,.28); margin-top:3px;
}

/* scroll indicator */
.hero__scroll {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  z-index:2; animation:bounce 2.5s ease-in-out infinite;
}
.hero__scroll span {
  font-size:8px; font-weight:700; text-transform:uppercase;
  letter-spacing:2.5px; color:rgba(255,255,255,.22);
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%    {transform:translateX(-50%) translateY(7px);}
}

@media(max-width:900px){
  .hero { padding:calc(var(--nav-h) + 40px) 24px 100px; }
  .hero__stats { position:static; flex-direction:row; margin-top:48px; align-items:flex-start; }
  .hero__stat-l { text-align:left; }
}

/* ══════════════════════════════
   ACENTO DEGRADADO (separador)
   ══════════════════════════════ */
.strip { height:5px; background:var(--g1); }

/* ══════════════════════════════
   SECCIONES BASE
   ══════════════════════════════ */
.sec { padding:96px 48px; }
.sec--off   { background:var(--off); }
.sec--white { background:var(--white); }
.sec--dark  { background:var(--ink2); }
.sec--navy  { background:var(--navy); }

.sec__head { margin-bottom:56px; }
.sec__title {
  font-size:clamp(30px,4vw,52px);
  font-weight:900; line-height:1.02; letter-spacing:-1.5px;
  margin-bottom:18px;
}
.sec__title--white { color:#fff; }
.sec__intro {
  font-size:16px; line-height:1.8; color:#555;
  max-width:560px;
}
.sec__intro--light { color:rgba(255,255,255,.45); }

@media(max-width:768px){ .sec { padding:64px 24px; } }

/* ══════════════════════════════
   SERVICIOS
   ══════════════════════════════ */
.services__grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:3px;
}
@media(max-width:960px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .services__grid{ grid-template-columns:1fr; } }

.svc {
  background:var(--white); padding:44px 36px;
  position:relative; overflow:hidden;
  transition:transform .3s ease;
}
.svc:hover { transform:translateY(-5px); z-index:1; }

/* barra de acento superior */
.svc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--g1); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.svc:hover::before { transform:scaleX(1); }

.svc--featured { background:var(--ink); }
.svc--featured::before { transform:scaleX(1); }

.svc__num {
  font-family:'Space Mono',monospace;
  font-size:10px; font-weight:700; color:var(--mg); margin-bottom:20px;
}
.svc--featured .svc__num { color:var(--mg-light); }

.svc__icon { font-size:28px; margin-bottom:18px; }

.svc h3 {
  font-size:18px; font-weight:900; letter-spacing:-.3px;
  line-height:1.2; margin-bottom:13px;
}
.svc--featured h3 { color:#fff; }
.svc p {
  font-size:13.5px; line-height:1.78; color:#666; margin-bottom:22px;
}
.svc--featured p { color:rgba(255,255,255,.58); }

.svc__tags { display:flex; flex-wrap:wrap; gap:6px; }
.svc__tag {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  padding:5px 10px; border-radius:2px;
  background:var(--off); color:#999;
}
.svc--featured .svc__tag { background:rgba(255,255,255,.08); color:rgba(255,255,255,.45); }

.svc__link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--mg); margin-top:10px;
  transition:gap .2s;
}
.svc__link:hover { gap:10px; }

/* ══════════════════════════════
   PORTAFOLIO
   ══════════════════════════════ */
.pf__filters {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px;
}
.pf__btn {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.42);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  padding:8px 18px; border-radius:2px;
  transition:all .2s;
}
.pf__btn:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.pf__btn.active { background:var(--g1); border-color:transparent; color:#fff; }

.pf__grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
@media(max-width:960px){ .pf__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pf__grid{ grid-template-columns:1fr; } }

.pf__item {
  position:relative; overflow:hidden;
  aspect-ratio:4/3; background:#0e0e0e;
  cursor:pointer;
}
.pf__item.wide { grid-column:span 2; aspect-ratio:16/7; }
@media(max-width:520px){ .pf__item.wide{ grid-column:span 1; aspect-ratio:4/3; } }

.pf__item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.pf__item:hover img { transform:scale(1.07); }

/* overlay hover */
.pf__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,18,18,.93) 0%, rgba(18,18,18,.15) 55%, transparent 100%);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px;
}
.pf__item:hover .pf__overlay { opacity:1; }

.pf__cat {
  display:inline-flex; align-items:center;
  background:var(--g1); color:#fff;
  font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:4px 10px; border-radius:2px; width:fit-content; margin-bottom:8px;
}
.pf__overlay h4 { font-size:15px; font-weight:900; color:#fff; line-height:1.2; margin-bottom:3px; }
.pf__overlay p  { font-size:12px; color:rgba(255,255,255,.5); line-height:1.5; }

.pf__zoom {
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; transition:opacity .3s;
}
.pf__item:hover .pf__zoom { opacity:1; }

/* video play badge */
.pf__play {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; pointer-events:none;
}
.pf__play-circle {
  width:54px; height:54px; border-radius:50%;
  background:rgba(191,16,85,.85);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s;
}
.pf__item:hover .pf__play-circle { transform:scale(1.1); }

/* placeholder cuando no hay imagen */
.pf__placeholder {
  width:100%; height:100%; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
}
.pf__placeholder-icon { font-size:26px; opacity:.25; }
.pf__placeholder-text {
  font-size:9px; font-weight:700; color:rgba(255,255,255,.2);
  text-transform:uppercase; letter-spacing:1.5px;
}
.pf__item.no-img .pf__placeholder { display:flex; }
.pf__item.no-img img           { display:none; }
.pf__item.hidden               { display:none; }

/* pf cta */
.pf__foot {
  text-align:center; margin-top:48px;
}
.pf__foot p {
  font-size:13px; color:rgba(255,255,255,.28);
  margin-bottom:20px;
}

/* ══════════════════════════════
   LIGHTBOX
   ══════════════════════════════ */
.lb {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.lb.open { opacity:1; pointer-events:all; }

.lb__inner {
  position:relative; max-width:92vw; max-height:92vh;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lb__img {
  max-width:90vw; max-height:80vh; object-fit:contain;
  border-radius:2px; box-shadow:0 40px 100px rgba(0,0,0,.8);
}
.lb__video {
  width:min(820px,90vw); aspect-ratio:16/9;
  border-radius:2px; display:none;
}
.lb__caption { text-align:center; }
.lb__caption h4 { font-size:16px; font-weight:800; color:#fff; margin-bottom:4px; }
.lb__caption p  { font-size:12px; color:rgba(255,255,255,.38); }

.lb__close {
  position:fixed; top:22px; right:26px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lb__close:hover { background:rgba(255,255,255,.2); }
.lb__prev,.lb__next {
  position:fixed; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lb__prev:hover,.lb__next:hover { background:rgba(255,255,255,.18); }
.lb__prev { left:16px; } .lb__next { right:16px; }
.lb__counter {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  color:rgba(255,255,255,.28); letter-spacing:2px;
}

/* ══════════════════════════════
   NOSOTROS / ACERCA
   ══════════════════════════════ */
.about__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
@media(max-width:860px){ .about__grid{ grid-template-columns:1fr; gap:48px; } }

.about__card {
  background:var(--ink); border-radius:4px;
  padding:48px; position:relative; overflow:hidden;
}
.about__card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:220px; height:220px; border-radius:50%;
  background:var(--mg); opacity:.06; pointer-events:none;
}
.about__card::after {
  content:''; position:absolute; bottom:-40px; left:-40px;
  width:160px; height:160px; border-radius:50%;
  background:var(--or); opacity:.06; pointer-events:none;
}
.about__badge {
  position:absolute; top:-15px; left:40px;
  background:var(--g1); color:#fff;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:5px 14px; border-radius:2px;
}
.about__quote {
  font-size:17px; font-style:italic; line-height:1.65;
  color:rgba(255,255,255,.88); margin-bottom:28px; position:relative; z-index:1;
}
.about__quote strong { font-style:normal; color:var(--mg-light); }
.about__author {
  display:flex; align-items:center; gap:12px; position:relative; z-index:1;
}
.about__author-dot { width:8px; height:8px; border-radius:50%; background:var(--mg); }
.about__author-text {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.32);
}
.about__nums {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:32px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  position:relative; z-index:1;
}
.about__num-n {
  font-family:'Space Mono',monospace; font-size:30px; font-weight:700;
  line-height:1; margin-bottom:4px;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.about__num-l {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:rgba(255,255,255,.3);
}

.story-quote {
  border-left:4px solid var(--mg);
  padding:18px 22px;
  background:var(--mg-pale);
  border-radius:0 4px 4px 0;
  margin:28px 0;
  font-size:15px; font-style:italic; line-height:1.75;
  color:var(--mg-dark);
}
.story-quote strong { font-style:normal; color:var(--mg); }

.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:24px; }
.val-chip {
  background:var(--off); border-radius:3px; padding:11px 15px;
  border-left:3px solid var(--mg);
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
}

.pilares { display:flex; flex-direction:column; gap:0; margin-top:24px; }
.pilar {
  display:grid; grid-template-columns:48px 1fr; gap:18px;
  align-items:start; padding:20px 0;
  border-bottom:1px solid var(--border);
}
.pilar:last-child { border-bottom:none; }
.pilar__n {
  font-family:'Space Mono',monospace;
  font-size:11px; font-weight:700; color:var(--mg); margin-top:3px;
}
.pilar h4 { font-size:14px; font-weight:800; margin-bottom:5px; }
.pilar p  { font-size:13px; color:#666; line-height:1.7; }

/* ══════════════════════════════
   PROCESO
   ══════════════════════════════ */
.proceso__steps {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
}
@media(max-width:860px){ .proceso__steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .proceso__steps{ grid-template-columns:1fr; } }

.paso {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  padding:36px 28px; transition:background .3s;
}
.paso:hover { background:rgba(255,255,255,.08); }
.paso__n {
  font-family:'Space Mono',monospace;
  font-size:38px; font-weight:700; line-height:1; margin-bottom:22px;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.paso h4 {
  font-size:13px; font-weight:800; color:#fff;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}
.paso p { font-size:13px; line-height:1.7; color:rgba(255,255,255,.42); }

/* ══════════════════════════════
   TESTIMONIO / CLIENTES
   ══════════════════════════════ */
.testimonials {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:860px){ .testimonials{ grid-template-columns:1fr; } }

.testi {
  background:var(--white); border-radius:4px; padding:32px;
  position:relative;
}
.testi::before {
  content:'"'; position:absolute; top:14px; right:22px;
  font-size:80px; font-weight:900; line-height:1;
  color:var(--mg); opacity:.10;
}
.testi--featured {
  background:var(--ink);
  border:1px solid rgba(191,16,85,.25);
  grid-column:span 1;
}
.testi p {
  font-size:14px; line-height:1.8; color:#555;
  font-style:italic; margin-bottom:24px;
}
.testi--featured p { color:rgba(255,255,255,.65); }
.testi__author { display:flex; align-items:center; gap:12px; }
.testi__avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  object-fit:cover;
}
.testi__avatar--initials {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--g1); display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:900; color:#fff;
}
.testi__name  { font-size:13px; font-weight:800; color:var(--ink); display:block; }
.testi--featured .testi__name { color:#fff; }
.testi__role  { font-size:10px; color:#aaa; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.testi--featured .testi__role { color:rgba(255,255,255,.3); }

/* ══════════════════════════════
   BLOG PREVIEW
   ══════════════════════════════ */
.blog__grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:860px){ .blog__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .blog__grid{ grid-template-columns:1fr; } }

.post {
  background:var(--white); border-radius:4px; overflow:hidden;
  transition:transform .3s;
  border:1px solid var(--border);
}
.post:hover { transform:translateY(-4px); }
.post__img {
  aspect-ratio:16/9; overflow:hidden; background:var(--off);
  position:relative;
}
.post__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.post:hover .post__img img { transform:scale(1.05); }
.post__img-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:var(--off); min-height:160px;
}
.post__img-placeholder span { font-size:24px; opacity:.3; }
.post__img-placeholder p   { font-size:10px; font-weight:700; color:#bbb; text-transform:uppercase; letter-spacing:1px; }

.post__cat {
  position:absolute; top:12px; left:12px;
  background:var(--g1); color:#fff;
  font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:4px 10px; border-radius:2px;
}
.post__body { padding:24px; }
.post__date {
  font-family:'Space Mono',monospace;
  font-size:10px; color:var(--mg); font-weight:700; margin-bottom:10px;
}
.post h3 {
  font-size:16px; font-weight:800; line-height:1.3;
  margin-bottom:10px; color:var(--ink);
}
.post p {
  font-size:13px; color:#666; line-height:1.7; margin-bottom:16px;
}
.post__link {
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:1px; color:var(--mg);
  display:inline-flex; align-items:center; gap:5px;
  transition:gap .2s;
}
.post__link:hover { gap:9px; }

.blog__coming {
  background:var(--white); border-radius:4px;
  border:2px dashed var(--border);
  padding:48px; text-align:center;
  grid-column:1 / -1;
}
.blog__coming .icon { font-size:32px; margin-bottom:12px; opacity:.4; }
.blog__coming p { font-size:14px; color:#999; line-height:1.7; }

/* ══════════════════════════════
   CONTACTO
   ══════════════════════════════ */
.contact__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
@media(max-width:860px){ .contact__grid{ grid-template-columns:1fr; gap:48px; } }

.contact__form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group label {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:rgba(255,255,255,.38);
}
.form-group input,
.form-group textarea,
.form-group select {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  padding:14px 18px; color:#fff;
  font-family:'Montserrat',sans-serif; font-size:14px;
  outline:none; transition:border-color .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,.2); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color:var(--mg); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-group select { cursor:pointer; }
.form-group select option { background:var(--ink); }

.contact__info { display:flex; flex-direction:column; gap:20px; }
.cinfo {
  padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  transition:border-color .3s, background .3s;
}
.cinfo:hover { border-color:rgba(191,16,85,.35); background:rgba(191,16,85,.04); }
.cinfo__label {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:var(--mg); margin-bottom:7px;
}
.cinfo__val { font-size:15px; font-weight:700; color:#fff; }
.cinfo__sub { font-size:11px; color:rgba(255,255,255,.28); margin-top:3px; }

.rrss-row { display:flex; gap:10px; margin-top:4px; flex-wrap:wrap; }
.rrss-pill {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:2px; padding:8px 14px;
  font-size:11px; font-weight:700; color:rgba(255,255,255,.55);
  transition:color .2s, background .2s;
}
.rrss-pill:hover { color:#fff; background:rgba(255,255,255,.1); }

/* ══════════════════════════════
   FOOTER
   ══════════════════════════════ */
footer {
  background:#0a0a0a; padding:56px 48px 32px;
  border-top:1px solid rgba(255,255,255,.05);
}
@media(max-width:768px){ footer{ padding:48px 24px 28px; } }

.footer__top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:48px; flex-wrap:wrap; gap:36px;
}
.footer__brand h2 {
  font-size:22px; font-weight:900; color:#fff; line-height:1; margin-bottom:8px;
}
.footer__brand h2 em {
  font-style:normal;
  background:var(--g1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.footer__brand p { font-size:12px; color:rgba(255,255,255,.22); max-width:240px; line-height:1.65; }

.footer__cols { display:flex; gap:48px; flex-wrap:wrap; }
.footer__col h5 {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; color:rgba(255,255,255,.28); margin-bottom:14px;
}
.footer__col a {
  display:block; font-size:13px; color:rgba(255,255,255,.45);
  margin-bottom:10px; transition:color .2s;
}
.footer__col a:hover { color:#fff; }

.footer__bottom {
  border-top:1px solid rgba(255,255,255,.05); padding-top:22px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
}
.footer__copy {
  font-family:'Space Mono',monospace;
  font-size:10px; color:rgba(255,255,255,.18);
}
.footer__loc {
  font-size:11px; color:rgba(255,255,255,.18);
  display:flex; align-items:center; gap:5px;
}

/* ══════════════════════════════
   WHATSAPP FLOTANTE
   ══════════════════════════════ */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:190;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:13px 20px; border-radius:40px;
  font-size:13px; font-weight:700;
  box-shadow:0 8px 30px rgba(37,211,102,.35);
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,211,102,.45); }
.wa-float span { white-space:nowrap; }

@media(max-width:560px){
  .wa-float span { display:none; }
  .wa-float { padding:14px; border-radius:50%; }
}