/* ============================================
   MENOS ES MÁS — estudio digital
   Blanco y negro, Montserrat, serifa itálica de acento.

   Todos los valores de acá están medidos sobre el HTML del sitio actual
   (menosesmasdigital.com.ar), no elegidos por gusto. Si algo hay que
   cambiar, primero se mide en ese archivo.
   ============================================ */

:root{
  --negro:#0D0D0D;
  --negro-suave:#1A1A1A;
  --gris:#5A5A6E;
  --gris-claro:#8A8A9A;
  --linea:#E2E2E6;
  --hueso:#F4F4F8;
  --blanco:#FFFFFF;

  --font-body:'Montserrat', system-ui, -apple-system, sans-serif;
  --font-serif:'Instrument Serif', Georgia, 'Times New Roman', serif;

  --space-xs:8px;
  --space-sm:16px;
  --space-md:28px;
  --space-lg:48px;
  --space-xl:80px;
  --space-2xl:120px;
  --seccion:clamp(64px, 8vw, 100px);   /* medido en su sitio: 100 escritorio, 72 celular */

  --ease:cubic-bezier(0.22,0.61,0.36,1);
  /* La curva del acordeón de servicios, tal cual la tiene el sitio */
  --ease-panel:cubic-bezier(0.4,0,0.2,1);

  /* Radios y sombras: los cinco valores que usa el sitio actual */
  --r-chico:10px;
  --r-medio:12px;
  --r-grande:16px;
  --r-tarjeta:20px;
  --r-pastilla:100px;
  --sombra:0 16px 40px rgba(0,0,0,0.08);
  --sombra-clara:0 8px 32px rgba(255,255,255,0.15);

  --ancho:1240px;
  --ancho-angosto:820px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--negro);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;line-height:1.05;font-weight:900;letter-spacing:-0.03em;}
p{margin:0 0 1em;}
ul,ol{margin:0;padding:0;list-style:none;}
[id]{scroll-margin-top:96px;}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--negro);color:var(--blanco);padding:12px 20px;
}
.saltar:focus{left:0;}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.contenedor-angosto{width:100%;max-width:var(--ancho-angosto);margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.contenedor-ancho{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  display:flex;align-items:center;gap:var(--space-lg);}

/* Acento en serifa itálica: es la firma que ya tenía la marca */
em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0;}

/* Volanta = la pastilla .section-eyebrow del sitio, con sus medidas exactas.
   No es texto suelto espaciado: tiene fondo y esquinas redondeadas. */
.volanta{
  display:inline-block;
  background:rgba(0,0,0,0.06);color:var(--negro);
  padding:5px 14px;border-radius:var(--r-pastilla);
  font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  margin:0 0 20px;
}
/* Sobre fondo oscuro se invierte el relleno */
.seccion .volanta,.intro .volanta,.hero .volanta,.seccion-oscura .volanta{
  background:rgba(255,255,255,0.12);color:var(--blanco);
}

/* ---------- Botones ----------
   Medidos sobre el HTML del sitio actual (.btn-primary y .btn-ghost-dark):
   pastilla de radio 100px, Montserrat 800, 0.85rem, padding 16px 32px,
   letter-spacing 0.02em y SIN mayúsculas. El hover baja medio tono y
   levanta el botón 2px. No es un borde cuadrado: es una pastilla llena. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:0.85rem;font-weight:800;
  letter-spacing:0.02em;
  padding:16px 32px;border:1px solid transparent;border-radius:100px;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}

/* Sobre fondo claro: pastilla negra */
.btn-lleno{background:var(--negro);color:var(--blanco);}
.btn-lleno:hover{background:#222;}

/* Sobre fondo claro, secundario: pastilla de contorno */
.btn-borde{background:transparent;color:var(--negro);border-color:rgba(13,13,13,0.18);}
.btn-borde:hover{border-color:var(--negro);}

.btn-ancho{width:100%;}

/* El enlace subrayado no es un botón: mantiene la línea inferior */
.enlace-sutil{
  font-size:0.82rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--gris);border-bottom:1px solid var(--linea);padding-bottom:4px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.enlace-sutil:hover{color:var(--negro);border-color:var(--negro);}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
}
.cabecera .contenedor-ancho{padding-top:18px;padding-bottom:18px;}
.marca{display:flex;flex-direction:column;line-height:1.1;}
.marca-nombre{
  font-family:var(--font-serif);font-size:1.15rem;letter-spacing:0.12em;
}
.marca-bajada{
  font-size:0.58rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gris-claro);
  margin-top:3px;
}
.nav{margin-left:auto;}
.nav ul{display:flex;gap:var(--space-md);}
.nav a{
  font-size:0.76rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav a:hover{border-color:var(--negro);}
/* ---------- CTA del header ----------
   Es la única acción del header y tiene que ganarle a cinco enlaces de menú.
   Tres recursos, ninguno de color: tamaño, una flecha que se mueve, y un
   anillo que late dos veces al cargar y después se queda quieto.
   El sitio actual lo tiene más chico (10px 22px, 0.72rem); acá se agranda
   a propósito porque es el objetivo de la página. */
.nav-cta{
  position:relative;
  padding:13px 28px;font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;
  gap:10px;
}
.nav-cta::after{
  content:'→';font-size:0.95em;line-height:1;
  transition:transform .3s var(--ease);
}
.nav-cta:hover::after{transform:translateX(4px);}

/* Anillo de atención: dos latidos y listo. Uno permanente cansa y se ignora. */
.nav-cta::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid currentColor;opacity:0;pointer-events:none;
  animation:latido 2s var(--ease) 1.4s 2;
}
@keyframes latido{
  0%{opacity:.6;transform:scale(1);}
  70%,100%{opacity:0;transform:scale(1.32);}
}
@media (prefers-reduced-motion: reduce){
  .nav-cta::before{animation:none;}
  .nav-cta:hover::after{transform:none;}
}
.menu-boton{
  display:none;margin-left:auto;background:none;border:none;cursor:pointer;
  width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.menu-boton span{display:block;width:22px;height:1.5px;background:var(--negro);
  transition:transform .3s var(--ease), opacity .3s ease;}
.menu-boton.abierto span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.menu-boton.abierto span:nth-child(2){opacity:0;}
.menu-boton.abierto span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ---------- Menú móvil ---------- */
.menu-movil{
  position:fixed;inset:0;z-index:95;
  background:var(--blanco);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 clamp(20px,6vw,40px) 40px;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.menu-movil.abierto{opacity:1;visibility:visible;transition:opacity .35s var(--ease);}
.menu-cabeza{display:flex;align-items:center;min-height:75px;margin-bottom:var(--space-md);}
.menu-link{
  display:block;font-size:clamp(1.6rem,7vw,2.1rem);font-weight:800;letter-spacing:-0.02em;
  padding:14px 0;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.menu-movil.abierto .menu-link{opacity:1;transform:none;}
.menu-movil.abierto .menu-link:nth-of-type(1){transition-delay:.05s;}
.menu-movil.abierto .menu-link:nth-of-type(2){transition-delay:.10s;}
.menu-movil.abierto .menu-link:nth-of-type(3){transition-delay:.15s;}
.menu-movil.abierto .menu-link:nth-of-type(4){transition-delay:.20s;}
.menu-movil.abierto .menu-link:nth-of-type(5){transition-delay:.25s;}
.menu-pie{margin-top:var(--space-lg);}
body.menu-abierto{overflow:hidden;}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(80px,13vw,170px) 0 clamp(60px,9vw,110px);
  border-bottom:1px solid var(--linea);
}
.hero h1{
  font-size:clamp(2.4rem,7vw,3.6rem);
  text-transform:uppercase;
  margin:0 0 var(--space-md);
}
.hero h1 em{text-transform:none;font-size:1.08em;}
.hero-bajada{
  max-width:46ch;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--gris);
  margin-bottom:var(--space-lg);
}
.hero-acciones{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;}

/* ---------- Franja ----------
   En blanco: queda como una línea de aire entre la portada y la intro, que
   son las dos oscuras. Además el corte marca dónde termina el hero. */
.franja{
  overflow:hidden;
  padding:18px 0;background:var(--blanco);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.franja-pista{
  display:flex;gap:var(--space-md);white-space:nowrap;width:max-content;
  animation:correr 38s linear infinite;
}
.franja-pista span{
  font-size:0.76rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gris);
}
@keyframes correr{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .franja-pista{animation:none;}
}

/* ---------- Bloques ----------
   El sitio es mayormente oscuro, con dos respiros claros.
   Ese ritmo es el que le da el carácter. */
/* ============================================
   ESTRATEGIA
   Bloque partido: argumento a la izquierda, cuatro criterios a la derecha.
   Las maquetas de cada tarjeta son divs con CSS — cero imágenes.
   ============================================ */
.intro{padding:var(--seccion) 0;background:var(--negro);color:var(--blanco);}
.intro em{color:var(--blanco);}
/* Antes iba align-items:center. El problema: las dos columnas no miden lo
   mismo, así que la más corta —las tarjetas— quedaba centrada y dejaba aire
   muerto arriba y abajo de ella. Ese aire, sumado al padding de la sección,
   era parte del vacío que se veía antes de Planes.
   Con stretch las tarjetas llenan el alto de la fila (y como la tarjeta es
   flex con la maqueta en margin-top:auto, la maqueta se apoya sola abajo).
   El texto se sigue centrando a mano, que es como estaba pensado. */
.intro-grilla{display:grid;grid-template-columns:1fr 1.18fr;gap:var(--space-xl);align-items:stretch;}
.intro-texto{align-self:center;}

.intro h2{
  font-size:clamp(2rem,3.6vw,3.2rem);
  text-transform:uppercase;margin-bottom:var(--space-md);
}
.intro h2 em{text-transform:none;font-size:0.82em;display:inline-block;margin-top:6px;}
/* Palabra en hueco: el contorno sin relleno. Es el recurso de la referencia,
   traducido a blanco y negro. */
.intro-hueco{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.75);
  paint-order:stroke fill;
}
.intro-bajada{
  font-size:clamp(0.98rem,1.4vw,1.08rem);line-height:1.75;
  color:rgba(255,255,255,0.72);max-width:46ch;margin-bottom:var(--space-lg);
}

/* Flujo de tres pasos, separados por flechas dibujadas con ::after */
.intro-flujo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);}
.intro-flujo li{
  display:flex;align-items:center;gap:var(--space-sm);
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.intro-flujo li:not(:last-child)::after{
  content:'';width:34px;height:1px;background:rgba(255,255,255,0.3);
}

.intro-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.intro-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-tarjeta);
  padding:var(--space-md);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease);
}
.intro-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.22);
}
.intro-card header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);}
.intro-etiqueta{
  background:rgba(255,255,255,0.12);color:var(--blanco);
  padding:4px 12px;border-radius:var(--r-pastilla);
  font-size:0.58rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
}
.intro-num{
  font-family:var(--font-serif);font-style:italic;
  font-size:1.9rem;line-height:1;color:rgba(255,255,255,0.38);
}
.intro-card h3{font-size:1.25rem;margin:var(--space-sm) 0 6px;}
.intro-card p{font-size:0.86rem;line-height:1.6;color:rgba(255,255,255,0.65);margin:0;}

/* ---------- Maquetas ---------- */
.intro-mock{
  margin-top:auto;padding-top:var(--space-md);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}

/* 01 · tres fichas encadenadas, la última resaltada */
.intro-chips span{
  padding:7px 12px;border-radius:var(--r-chico);
  border:1px solid rgba(255,255,255,0.18);
  font-size:0.62rem;font-weight:700;letter-spacing:0.04em;
  color:rgba(255,255,255,0.7);white-space:nowrap;
}
.intro-chips span.on{background:var(--blanco);color:var(--negro);border-color:var(--blanco);}
.intro-chips i{font-style:normal;color:rgba(255,255,255,0.35);font-size:0.8rem;}

/* 02 · barras; las dos resaltadas son "las que sirven para decidir" */
.intro-barras{align-items:flex-end;height:78px;gap:6px;}
.intro-barras i{
  flex:1;background:rgba(255,255,255,0.18);border-radius:3px 3px 0 0;min-width:8px;
}
.intro-barras i.on{background:var(--blanco);}
.intro-barras b{
  flex-basis:100%;font-size:0.56rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:8px;
}

/* 03 · muestra tipográfica y tres paños de color */
.intro-tipo{gap:14px;}
.intro-tipo em{
  font-family:var(--font-serif);font-style:italic;font-size:2.4rem;line-height:1;
  color:var(--blanco);
}
.intro-muestras{display:flex;gap:6px;}
.intro-muestras s{
  display:block;width:22px;height:22px;border-radius:var(--r-chico);text-decoration:none;
}
.intro-muestras s:nth-child(1){background:var(--blanco);}
.intro-muestras s:nth-child(2){background:rgba(255,255,255,0.4);}
.intro-muestras s:nth-child(3){background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);}

/* 04 · dos variantes, la ganadora resaltada */
.intro-ab div{
  flex:1;min-width:64px;padding:10px;border-radius:var(--r-chico);
  border:1px solid rgba(255,255,255,0.18);text-align:center;
}
.intro-ab div.on{border-color:var(--blanco);background:rgba(255,255,255,0.08);}
.intro-ab strong{display:block;font-size:1.05rem;}
.intro-ab span{
  font-size:0.54rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}
.intro-ab b{
  flex-basis:100%;font-size:0.56rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);
}

/* Oscuro es el fondo por defecto; lo claro es la excepción */
.seccion{padding:var(--seccion) 0;background:var(--negro);color:var(--blanco);}
.seccion .volanta{background:rgba(255,255,255,0.12);color:var(--blanco);}
.seccion-blanca{background:var(--blanco);color:var(--negro);border-top:1px solid var(--linea);}
.seccion-blanca .volanta{background:rgba(0,0,0,0.06);color:var(--negro);}
.seccion-clara{background:var(--hueso);color:var(--negro);border-top:none;}
.seccion-clara .volanta{background:rgba(0,0,0,0.06);color:var(--negro);}
.seccion-oscura{background:var(--negro);color:var(--blanco);border-top:none;}
.seccion-oscura .volanta{background:rgba(255,255,255,0.12);color:var(--blanco);}
.titulo-seccion{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:var(--space-lg);}

/* ---------- Corte entre secciones del mismo color ----------
   Estrategia, Planes y Trabajos van las tres sobre negro y sin línea entre
   ellas. Al no haber cambio de fondo, los 100px de abajo de una y los 100 de
   arriba de la siguiente no se leen como dos márgenes: se leen como un solo
   vacío de 200px, que es justo lo que se veía entre las tarjetas de
   Estrategia y la pastilla de Planes.

   Cuando el fondo no cambia alcanza con un espacio: se saca el de arriba y
   quedan 100px, que siguen siendo el doble del mayor espacio interno de una
   sección (los 48px entre título y contenido), así que la jerarquía se
   mantiene. Donde el fondo sí cambia —Trabajos → Método, que pasa a blanco y
   tiene línea— no se toca nada. */
#planes,
#trabajos{padding-top:0;}

/* ---------- Servicios ---------- */
.lista-servicios{display:flex;flex-direction:column;}
.servicio{
  display:grid;grid-template-columns:90px 1fr;gap:var(--space-lg);
  padding:var(--space-lg) 0;border-top:1px solid rgba(255,255,255,0.14);
}
.servicio:last-child{border-bottom:1px solid rgba(255,255,255,0.14);}
.servicio-num{
  font-family:var(--font-serif);font-size:1.5rem;color:var(--gris-claro);
  line-height:1;padding-top:6px;
}
.servicio h3{font-size:clamp(1.35rem,2.6vw,1.9rem);margin-bottom:var(--space-sm);}
.servicio p{color:rgba(255,255,255,0.7);max-width:52ch;}
.servicio-detalle{
  display:flex;flex-wrap:wrap;gap:8px var(--space-md);margin-top:var(--space-sm);
}
.servicio-detalle li{
  font-size:0.78rem;letter-spacing:0.06em;color:rgba(255,255,255,0.55);
  position:relative;padding-left:16px;
}
.servicio-detalle li::before{
  content:'';position:absolute;left:0;top:0.72em;
  width:7px;height:1px;background:rgba(255,255,255,0.4);
}

/* ---------- Trabajos ----------
   Sin miniaturas: lo que vende acá es qué incluyó cada proyecto,
   no una captura ilegible de 300px. */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--space-lg);}
/* Los filtros no existen en el sitio actual, pero comparten el lenguaje
   de los botones: pastilla, Montserrat 700, mayúsculas chicas. */
.filtro{
  font-family:var(--font-body);font-size:0.72rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:10px 22px;cursor:pointer;border-radius:100px;
  background:transparent;color:rgba(255,255,255,0.6);
  border:1px solid rgba(255,255,255,0.22);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.filtro:hover{color:var(--blanco);border-color:rgba(255,255,255,0.5);}
.filtro.activo{background:var(--blanco);color:var(--negro);border-color:var(--blanco);}

/* Tarjetas con el mismo lenguaje que los planes: translúcidas, borde fino,
   radio 20 y levantamiento al pasar el mouse. Antes estaban pegadas entre sí
   separadas por una línea de 1px, que no es como se ve su sitio. */
.trabajos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.trabajo{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-tarjeta);
  overflow:hidden;                       /* para que la portada respete el radio */
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), opacity .3s var(--ease);
}
.trabajo:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.2);
}
.trabajo-destacado{grid-column:1 / -1;}
.trabajo-cuerpo{padding:var(--space-lg);display:flex;flex-direction:column;height:100%;}
.trabajo-rubro{
  font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-bottom:var(--space-sm);
}
.trabajo h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:var(--space-sm);}
.trabajo-destacado h3{font-size:clamp(1.8rem,3.6vw,2.8rem);}
.trabajo p{color:rgba(255,255,255,0.72);max-width:62ch;}
.trabajo-lista{margin:var(--space-sm) 0 var(--space-md);}
.trabajo-lista li{
  position:relative;padding-left:18px;margin-bottom:7px;
  font-size:0.84rem;color:rgba(255,255,255,0.6);
}
.trabajo-lista li::before{
  content:'';position:absolute;left:0;top:0.66em;
  width:8px;height:1px;background:rgba(255,255,255,0.4);
}
.trabajo-tags{
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);margin-top:auto;
}
.trabajo-ir{
  display:inline-block;margin-top:12px;align-self:flex-start;
  font-size:0.78rem;font-weight:600;letter-spacing:0.08em;
  border-bottom:1px solid rgba(255,255,255,0.32);padding-bottom:3px;
  transition:border-color .3s var(--ease);
}
.trabajo-ir:hover{border-color:var(--blanco);}
.trabajo.oculto{display:none;}

/* ---------- Método ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}
.paso{border-top:1px solid var(--negro);padding-top:var(--space-md);}
.paso-num{
  display:block;font-family:var(--font-serif);font-size:2.2rem;
  color:var(--gris-claro);line-height:1;margin-bottom:var(--space-sm);
}
.paso h3{font-size:1.15rem;margin-bottom:var(--space-xs);}
.paso p{color:var(--gris);font-size:0.95rem;}
/* Acá iba .metodo-plazo, una línea de cierre abajo de los cuatro pasos.
   Se sacó: el plazo y lo que incluye ya están en Preguntas frecuentes, y
   repetirlo en gris grande abajo de la grilla la desbalanceaba. */

/* ---------- Razones ---------- */
.razones{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg) var(--space-xl);}
.razon h3{font-size:1.2rem;margin-bottom:var(--space-xs);}
.razon p{color:var(--gris);font-size:0.96rem;margin:0;}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--linea);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--space-md) 36px var(--space-md) 0;
  font-weight:600;font-size:1.02rem;position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--font-serif);font-size:1.5rem;color:var(--gris-claro);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details p{color:var(--gris);padding-bottom:var(--space-md);margin:0;max-width:66ch;}

/* ---------- Contacto ---------- */
.contacto-grilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start;}
.contacto-texto{color:rgba(255,255,255,0.72);max-width:42ch;}
/* ---------- Canales de contacto ----------
   Filas apiladas separadas por una línea, no tarjetas: el bloque tiene que
   leerse como una lista de opciones y no competir con el formulario de al lado. */
.canales{margin:var(--space-lg) 0 0;border-top:1px solid rgba(255,255,255,0.14);}
.canales li{border-bottom:1px solid rgba(255,255,255,0.14);}
.canal{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding:18px 2px;
  transition:padding-left .3s var(--ease), border-color .3s var(--ease);
}
.canal:hover{padding-left:10px;}
.canal-que{
  font-size:0.95rem;font-weight:800;letter-spacing:-0.01em;color:var(--blanco);
}
.canal-como{
  font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.55);
  text-align:right;
}
/* La llamada es la opción que queremos que elijan: va con la flecha */
.canal-destacado .canal-que::after{content:' ↗';font-weight:500;}

.contacto-datos{margin-top:var(--space-lg);}
.contacto-datos p{margin:0 0 12px;}
.contacto-datos a{
  border-bottom:1px solid rgba(255,255,255,0.25);padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.contacto-datos a:hover{border-color:var(--blanco);}

.formulario{display:flex;flex-direction:column;gap:var(--space-md);}
.campo{display:flex;flex-direction:column;gap:8px;}
.campo label{
  font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gris-claro);
}
.campo input,.campo select,.campo textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--blanco);
  background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.28);
  padding:10px 0;
  transition:border-color .3s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-bottom-color:var(--blanco);
}
.campo select option{background:var(--negro);color:var(--blanco);}
.campo textarea{resize:vertical;}
.formulario .btn-lleno{background:var(--blanco);color:var(--negro);border-color:var(--blanco);}
.formulario .btn-lleno:hover{background:transparent;color:var(--blanco);}
.form-nota{font-size:0.8rem;color:var(--gris-claro);margin:0;}
.form-error{color:#FF8A8A;font-size:0.88rem;margin:0;}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:var(--blanco);padding:var(--space-xl) 0 var(--space-md);
  border-top:1px solid rgba(255,255,255,0.12);}
.pie-grilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-lg);}
.pie-marca p{color:var(--gris-claro);font-size:0.92rem;margin-top:var(--space-sm);}
.pie-col h4{
  font-size:0.7rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gris-claro);margin-bottom:var(--space-sm);
}
.pie-col li{margin-bottom:10px;}
.pie-col a{font-size:0.92rem;color:rgba(255,255,255,0.82);
  transition:color .3s var(--ease);}
.pie-col a:hover{color:var(--blanco);}
.pie-abajo{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
  margin-top:var(--space-xl);padding-top:var(--space-md);
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.82rem;color:var(--gris-claro);
}

/* ============================================
   PORTFOLIO (portfolio.html) — prefijo pf-
   Grilla de capturas con el detalle que se despliega.
   ============================================ */

.pf-portada{
  background:var(--negro);color:var(--blanco);
  padding:clamp(112px,13vh,150px) 0 clamp(56px,6vw,80px);
  overflow:hidden;              /* las maquetas rotadas se salen del ancho */
}
/* Hero partido: texto a la izquierda, maquetas a la derecha */
.pf-portada-grilla{
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:var(--space-xl);align-items:center;
}
/* Más chico que el h1 general: la columna de texto mide unos 500px y con
   3.6rem el título se pasaba de ancho. Medido, no a ojo. */
.pf-portada h1{
  font-size:clamp(2rem,3.4vw,3rem);
  margin:0 0 var(--space-md);color:var(--blanco);
}
.pf-portada-bajada{
  font-size:0.95rem;line-height:1.75;max-width:500px;
  color:rgba(255,255,255,0.6);margin-bottom:var(--space-lg);
}

/* ---------- Maquetas de navegador ----------
   El marco está dibujado con CSS, no es una imagen de un marco: pesa cero,
   se ve nítido en cualquier pantalla y el dominio es texto de verdad.
   Las tres se posicionan en porcentajes sobre un contenedor con proporción
   fija, así el conjunto escala junto sin recalcular nada. */
.pf-maquetas{position:relative;aspect-ratio:1 / 0.86;}
.pf-maqueta{
  position:absolute;margin:0;
  background:var(--blanco);
  border-radius:var(--r-medio);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
  transition:transform .5s var(--ease);
}
.pf-maqueta img{width:100%;height:auto;display:block;}

/* Barra del navegador: tres puntos y el dominio. Los puntos van en gris y no
   en rojo-amarillo-verde: la marca es blanco y negro, y con el dominio al
   lado ya se entiende que es un navegador. */
.pf-barra{
  display:flex;align-items:center;gap:5px;
  padding:0 10px;height:26px;
  background:var(--hueso);border-bottom:1px solid var(--linea);
}
.pf-barra i{width:7px;height:7px;border-radius:50%;background:#C9C9D2;}
.pf-barra span{
  margin-left:10px;
  font-size:0.58rem;letter-spacing:0.02em;color:var(--gris-claro);
  font-family:ui-monospace,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Tres planos: la del fondo más grande, la del frente pisando a las otras */
.pf-maqueta-a{left:0;top:4%;width:70%;z-index:1;transform:rotate(-3deg);}
.pf-maqueta-b{right:0;top:0;width:62%;z-index:2;transform:rotate(2.2deg);}
.pf-maqueta-c{left:16%;bottom:0;width:68%;z-index:3;transform:rotate(-1deg);}

/* Al pasar el mouse por el conjunto, se separan un poco */
.pf-maquetas:hover .pf-maqueta-a{transform:rotate(-4.5deg) translate(-2%,-2%);}
.pf-maquetas:hover .pf-maqueta-b{transform:rotate(3.5deg) translate(2%,-2%);}
.pf-maquetas:hover .pf-maqueta-c{transform:rotate(-1deg) translateY(3%);}
@media (prefers-reduced-motion: reduce){
  .pf-maqueta,.pf-maquetas:hover .pf-maqueta-a,
  .pf-maquetas:hover .pf-maqueta-b,.pf-maquetas:hover .pf-maqueta-c{transition:none;}
}

.pf-grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.pf-item{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-tarjeta);
  overflow:hidden;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease);
}
.pf-item:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2);
}
/* Una tarjeta abierta no se levanta: se está leyendo, no explorando */
.pf-item.abierto{transform:none;background:rgba(255,255,255,0.09);}

/* Captura: proporción fija para que ninguna imagen agrande su tarjeta.
   Cuando el hueco está vacío muestra el dominio sobre una trama diagonal;
   es evidente que falta la captura y no parece un error de carga. */
.pf-captura{
  position:relative;aspect-ratio:16 / 9;overflow:hidden;
  background:var(--negro-suave);
}
/* Las capturas van en color: cada trabajo tiene su identidad y la paleta es
   parte de lo que se muestra. En blanco y negro, el rosa de Luci, el lila de
   Inalumara y el verde de Macarena quedaban todos iguales.
   El hover ya no cambia el color — solo acerca un poco la imagen. */
.pf-captura img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease);
}
.pf-item:hover .pf-captura img{transform:scale(1.03);}
.pf-sin-captura{
  display:flex;align-items:center;justify-content:center;
  background-color:var(--negro-suave);
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,0.04) 0 2px, transparent 2px 10px);
}
.pf-sin-captura::after{
  content:attr(data-dominio);
  font-size:0.72rem;font-weight:600;letter-spacing:0.06em;
  color:rgba(255,255,255,0.32);
  padding:0 var(--space-sm);text-align:center;
}

/* Cinta de cliente nuevo. Blanca sobre la captura, que siempre es oscura o
   en blanco y negro: es lo único de la grilla que tiene que saltar primero.
   z-index 4 para quedar sobre la preview en vivo si se carga. */
.pf-nuevo{
  position:absolute;top:12px;right:12px;z-index:4;
  background:var(--blanco);color:var(--negro);
  padding:4px 12px;border-radius:var(--r-pastilla);
  font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
/* Borde apenas más marcado en la tarjeta nueva, sin romper el conjunto */
.pf-item-nuevo{border-color:rgba(255,255,255,0.28);}

.pf-cuerpo{padding:var(--space-md);}
/* Etiqueta de tipo de trabajo: pastilla, como el resto del sistema */
.pf-tipo{
  display:inline-block;
  background:rgba(255,255,255,0.12);color:var(--blanco);
  padding:4px 12px;border-radius:var(--r-pastilla);
  font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:12px;
}
.pf-cuerpo h2{font-size:clamp(1.1rem,1.6vw,1.35rem);margin:0 0 6px;}
.pf-rubro{
  font-size:0.8rem;color:rgba(255,255,255,0.55);margin:0 0 var(--space-sm);
}

.pf-mas{
  font-family:var(--font-body);font-size:0.72rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  background:transparent;color:rgba(255,255,255,0.7);
  border:1px solid rgba(255,255,255,0.22);border-radius:var(--r-pastilla);
  padding:9px 18px;cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pf-mas:hover{color:var(--blanco);border-color:rgba(255,255,255,0.5);}
.pf-mas-texto::after{content:' +';font-weight:400;}
.pf-item.abierto .pf-mas-texto::after{content:' −';}

.pf-detalle{
  margin-top:var(--space-sm);
  padding-top:var(--space-sm);
  border-top:1px solid rgba(255,255,255,0.14);
}
.pf-detalle p{font-size:0.88rem;line-height:1.65;color:rgba(255,255,255,0.75);}
.pf-detalle ul{margin:0 0 var(--space-sm);}
.pf-detalle li{
  position:relative;padding-left:18px;margin-bottom:8px;
  font-size:0.85rem;color:rgba(255,255,255,0.7);
}
.pf-detalle li::before{
  content:'';position:absolute;left:0;top:0.62em;
  width:8px;height:1px;background:rgba(255,255,255,0.45);
}
.pf-ir{
  font-size:0.8rem;font-weight:700;color:var(--blanco);
  border-bottom:1px solid rgba(255,255,255,0.35);padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.pf-ir:hover{border-color:var(--blanco);}

.trabajos-pie{margin-top:var(--space-lg);}

.pf-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);}
.pf-vivo{
  font-family:var(--font-body);font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  background:transparent;color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.18);border-radius:var(--r-pastilla);
  padding:7px 14px;cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pf-vivo:hover{color:var(--blanco);border-color:rgba(255,255,255,0.45);}
.pf-vivo[disabled]{opacity:.5;cursor:default;}

/* ---------- Preview en vivo ----------
   El iframe se renderiza a 1440px de ancho y se reduce con transform: si se
   le diera el ancho de la tarjeta, el sitio mostraría su versión de celular
   y la miniatura parecería un teléfono.
   pointer-events:none para que no se quede el scroll de la página.

   Arranca invisible y aparece solo cuando el sitio cargó de verdad. Así la
   foto de abajo queda a la vista mientras carga, y si el sitio bloquea el
   embebido la tarjeta se queda con la foto en lugar de un rectángulo negro. */
.pf-marco{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;transition:opacity .5s var(--ease);
}
.pf-marco iframe{
  position:absolute;top:0;left:0;
  width:1440px;height:900px;border:0;
  transform-origin:top left;
  pointer-events:none;
}
.pf-marco.listo{opacity:1;}

/* Aviso chico sobre la foto: no tapa la imagen como haría una placa entera */
.pf-aviso{
  position:absolute;left:12px;bottom:12px;z-index:3;margin:0;
  background:rgba(13,13,13,0.82);color:rgba(255,255,255,0.85);
  padding:5px 12px;border-radius:var(--r-pastilla);
  font-size:0.66rem;font-weight:600;letter-spacing:0.04em;
}

.pf-vacio{color:rgba(255,255,255,0.55);margin-top:var(--space-lg);}

/* ============================================
   GRILLA SOBRE FONDO CLARO
   La sección de trabajos va en claro, como el ritmo del sitio: oscuro arriba,
   claro en el medio, oscuro al cierre. Todo lo que estaba pensado en blanco
   sobre negro se invierte acá — si no, queda texto blanco sobre blanco.
   ============================================ */
.seccion-clara .pf-item{
  background:var(--blanco);
  border-color:var(--linea);
  box-shadow:var(--sombra);
}
.seccion-clara .pf-item:hover,
.seccion-clara .pf-item.abierto{
  background:var(--blanco);
  border-color:rgba(13,13,13,0.22);
  box-shadow:0 22px 50px rgba(0,0,0,0.12);
}
.seccion-clara .pf-tipo{background:rgba(0,0,0,0.06);color:var(--negro);}
.seccion-clara .pf-cuerpo h2{color:var(--negro);}
.seccion-clara .pf-rubro{color:var(--gris);}

.seccion-clara .pf-mas{
  color:var(--gris);border-color:rgba(13,13,13,0.20);
}
.seccion-clara .pf-mas:hover{color:var(--negro);border-color:var(--negro);}

.seccion-clara .pf-detalle{border-top-color:var(--linea);}
.seccion-clara .pf-detalle p,
.seccion-clara .pf-detalle li{color:var(--gris);}
.seccion-clara .pf-detalle li::before{background:rgba(13,13,13,0.35);}
.seccion-clara .pf-ir{color:var(--negro);border-bottom-color:rgba(13,13,13,0.35);}
.seccion-clara .pf-ir:hover{border-bottom-color:var(--negro);}
.seccion-clara .pf-vivo{color:var(--gris);border-color:rgba(13,13,13,0.20);}
.seccion-clara .pf-vivo:hover{color:var(--negro);border-color:var(--negro);}

/* Los filtros eran claros sobre oscuro: se invierten */
.seccion-clara .filtro{
  color:var(--gris);border-color:rgba(13,13,13,0.20);
}
.seccion-clara .filtro:hover{color:var(--negro);border-color:var(--negro);}
.seccion-clara .filtro.activo{
  background:var(--negro);color:var(--blanco);border-color:var(--negro);
}

.seccion-clara .pf-vacio{color:var(--gris);}

/* El hueco sin captura mantiene su trama, pero en claro */
.seccion-clara .pf-sin-captura{
  background-color:var(--hueso);
  background-image:repeating-linear-gradient(135deg,
    rgba(13,13,13,0.05) 0 2px, transparent 2px 10px);
}
.seccion-clara .pf-sin-captura::after{color:rgba(13,13,13,0.35);}
/* Mientras carga la imagen: hueso y no negro, o parpadea oscuro en la tarjeta blanca */
.seccion-clara .pf-captura{background:var(--hueso);}
/* La cinta de nuevo se invierte: blanca sobre blanco no se veía */
.seccion-clara .pf-nuevo{background:var(--negro);color:var(--blanco);}
.pf-cierre h2{font-size:clamp(1.9rem,3.2vw,2.8rem);margin-bottom:var(--space-md);}
.pf-cierre-texto{color:rgba(255,255,255,0.7);max-width:52ch;margin-bottom:var(--space-lg);}

/* ============================================
   PÁGINA DE CASO (caso-gsi.html) — prefijo caso-
   ============================================ */
.caso-texto{font-size:1rem;line-height:1.75;color:var(--gris);max-width:62ch;}
/* Sobre fondo oscuro el gris de cuerpo no alcanza: 3.1:1 contra el negro */
.caso-texto-claro{color:rgba(255,255,255,0.72);}

.caso-claim{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;
  color:var(--blanco);margin:0 0 var(--space-sm);
}
.caso-claim em{font-style:italic;}

.caso-sub{
  font-size:0.72rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin:var(--space-xl) 0 var(--space-sm);
}
.seccion-clara .caso-sub{color:var(--gris-claro);}

/* Paleta: la muestra manda, el código va abajo en monoespaciada para poder
   copiarlo de un vistazo */
.caso-paleta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin:0 0 var(--space-md);}
.caso-paleta li{
  display:flex;flex-direction:column;gap:6px;
  font-size:0.72rem;color:rgba(255,255,255,0.6);
  font-family:ui-monospace,Consolas,monospace;
}
.caso-paleta li strong{
  font-family:var(--font-body);font-size:0.8rem;font-weight:700;
  color:var(--blanco);letter-spacing:-0.01em;
}
.caso-paleta span{
  display:block;width:104px;height:104px;border-radius:var(--r-medio);
  border:1px solid rgba(255,255,255,0.18);
}

.caso-tono{display:grid;gap:var(--space-sm);max-width:70ch;}
.caso-tono li{
  padding-left:18px;position:relative;
  font-size:0.95rem;line-height:1.7;color:rgba(255,255,255,0.72);
}
.caso-tono li::before{
  content:'';position:absolute;left:0;top:0.75em;
  width:9px;height:1px;background:rgba(255,255,255,0.45);
}
.caso-tono strong{color:var(--blanco);}

.caso-grilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-bottom:var(--space-lg);
}
.caso-grilla article{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-tarjeta);padding:var(--space-md);
  box-shadow:var(--sombra);
}
.caso-grilla-3{grid-template-columns:repeat(3,1fr);}
.caso-grilla h3{font-size:1rem;margin-bottom:10px;}
.caso-grilla p{font-size:0.88rem;line-height:1.6;color:var(--gris);margin:0;}

/* Línea de tiempo: la etiqueta arriba y el texto abajo, separados por una
   regla. Sin círculos ni conectores — la secuencia ya la da el orden. */
.caso-hitos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin:0 0 var(--space-lg);counter-reset:hito;
}
.caso-hitos li{border-top:1px solid var(--linea);padding-top:var(--space-sm);}
.caso-hitos span{
  display:block;
  font-size:0.68rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--negro);margin-bottom:8px;
}
.caso-hitos p{font-size:0.88rem;line-height:1.6;color:var(--gris);margin:0;}
.seccion .caso-hitos li{border-top-color:rgba(255,255,255,0.18);}
.seccion .caso-hitos span{color:var(--blanco);}
.seccion .caso-hitos p{color:rgba(255,255,255,0.7);}
.seccion-clara .caso-hitos li{border-top-color:var(--linea);}
.seccion-clara .caso-hitos span{color:var(--negro);}
.seccion-clara .caso-hitos p{color:var(--gris);}

/* La lista de atributos en dos columnas cuando hay muchos */
.caso-tono-ancho{grid-template-columns:1fr 1fr;max-width:none;gap:var(--space-sm) var(--space-lg);}
.caso-nunca{margin-top:var(--space-lg);}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  /* Redondo, para no ser el único elemento con esquinas rectas */
  border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
  transition:transform .3s var(--ease);
}
.wa-flotante:hover{transform:scale(1.06);}

/* ---------- Aparición al scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================
   HERO A SANGRE
   Medidas del original: 100svh, contenido centrado en los dos ejes,
   velo 0.15 / 0.02 al 35% / 0.75 al 100%, y un resplandor radial en la
   esquina inferior derecha. El parallax lo mueve el JS.
   ============================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;   /* centrado, como el original */
  overflow:hidden;
  background:var(--negro);                     /* respaldo si la foto falla */
  color:var(--blanco);
  border-bottom:none;
  padding:clamp(104px,12vh,150px) 0 clamp(56px,7vh,80px);
}
.hero-foto{
  position:absolute;inset:0;z-index:0;
  width:100%;
  /* 120% de alto y -10% arriba: le deja recorrido al parallax sin que
     aparezca una franja vacía al desplazarse. */
  height:120%;top:-10%;
  object-fit:cover;
  object-position:center 12%;
  filter:grayscale(1) contrast(1.04);
  will-change:transform;
}
.hero-velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(13,13,13,0.15) 0%,
    rgba(13,13,13,0.02) 35%,
    rgba(13,13,13,0.75) 100%);
}
/* Resplandor de la esquina, tal cual el ::after del original */
.hero::after{
  content:'';position:absolute;bottom:-10%;right:-10%;
  width:400px;height:400px;z-index:1;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
}
.hero-contenido{position:relative;z-index:2;text-align:center;}
.hero-contenido .volanta{background:rgba(255,255,255,0.12);color:var(--blanco);}
.hero h1{color:var(--blanco);}
.hero-bajada{
  color:rgba(255,255,255,0.85);
  max-width:46ch;margin-left:auto;margin-right:auto;
}
.hero-acciones{justify-content:center;}

/* Sobre fondo oscuro o foto: la pastilla blanca con resplandor.
   Es el botón principal del sitio actual, tal cual (.btn-primary). */
.btn-claro{
  background:var(--blanco);color:var(--negro);border-color:var(--blanco);
  box-shadow:0 8px 32px rgba(255,255,255,0.15);
}
.btn-claro:hover{
  background:#E5E5E5;border-color:#E5E5E5;
  box-shadow:0 14px 40px rgba(255,255,255,0.22);
}

/* Secundario sobre oscuro: pastilla de contorno tenue (.btn-ghost-dark) */
.btn-fantasma{
  background:transparent;color:rgba(255,255,255,0.65);
  border-color:rgba(255,255,255,0.15);
  font-size:0.82rem;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;
  padding:15px 28px;
}
.btn-fantasma:hover{color:var(--blanco);border-color:rgba(255,255,255,0.4);}

.enlace-claro{
  font-size:0.82rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  color:rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(255,255,255,0.4);padding-bottom:4px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.enlace-claro:hover{color:var(--blanco);border-color:var(--blanco);}

/* Header transparente sobre la foto, sólido al bajar */
.cabecera{
  position:fixed;left:0;right:0;top:0;
  background:transparent;border-bottom-color:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.cabecera .marca,.cabecera .nav a{color:var(--blanco);}
.cabecera .nav a:hover{border-color:var(--blanco);}
.cabecera .marca-bajada{color:rgba(255,255,255,0.6);}
/* Sobre la foto la pastilla va blanca; cuando el header se vuelve blanco
   se invierte a negra, si no desaparecería contra el fondo. */
/* Sobre la foto: pastilla blanca con el resplandor, para despegarla del fondo */
.cabecera .nav-cta{
  background:var(--blanco);color:var(--negro);border-color:var(--blanco);
  box-shadow:var(--sombra-clara);
}
.cabecera .nav-cta:hover{
  background:#E5E5E5;border-color:#E5E5E5;
  box-shadow:0 14px 40px rgba(255,255,255,0.28);
}
.cabecera .menu-boton span{background:var(--blanco);}

.cabecera.solida{background:var(--blanco);border-bottom-color:var(--linea);}
.cabecera.solida .marca,.cabecera.solida .nav a{color:var(--negro);}
.cabecera.solida .marca-bajada{color:var(--gris-claro);}
/* Header sólido: pastilla negra con sombra suave sobre el blanco */
.cabecera.solida .nav-cta{
  background:var(--negro);color:var(--blanco);border-color:var(--negro);
  box-shadow:0 8px 24px rgba(13,13,13,0.22);
}
.cabecera.solida .nav-cta:hover{
  background:#222;border-color:#222;
  box-shadow:0 14px 34px rgba(13,13,13,0.28);
}

/* La cabecera de estas páginas no va sobre una foto: arranca blanca.
   Poner el fondo blanco no alcanzaba — las reglas de .cabecera pintan la
   marca, los enlaces, el CTA y las barritas del menú en blanco porque ahí
   van sobre la foto del hero. Sobre fondo blanco quedaban invisibles hasta
   hacer scroll. Todo eso se invierte acá. */
.cabecera-fija{position:sticky;background:var(--blanco);border-bottom:1px solid var(--linea);}
.cabecera-fija .marca,.cabecera-fija .nav a{color:var(--negro);}
.cabecera-fija .marca-bajada{color:var(--gris-claro);}
.cabecera-fija .nav a:hover{border-color:var(--negro);}
.cabecera-fija .menu-boton span{background:var(--negro);}
.cabecera-fija .nav-cta{
  background:var(--negro);color:var(--blanco);border-color:var(--negro);
  box-shadow:0 8px 24px rgba(13,13,13,0.22);
}
.cabecera-fija .nav-cta:hover{
  background:#222;border-color:#222;
  box-shadow:0 14px 34px rgba(13,13,13,0.28);
}
.cabecera.solida .menu-boton span{background:var(--negro);}
body.menu-abierto .cabecera .menu-boton span{background:var(--negro);}

/* ---------- Trabajos con captura ---------- */
/* La portada va DENTRO de la tarjeta, no a sangre.
   Con margen negativo arriba se pegaba al borde superior y parecía pertenecer
   a la tarjeta anterior. Y con aspect-ratio fijo todas las portadas miden
   igual, así que ninguna captura puede agrandar su tarjeta. */
.trabajo-foto{
  overflow:hidden;
  aspect-ratio:16 / 9;
  margin:0;
  background:var(--negro-suave);   /* mientras carga, no salta el layout */
}
/* En color, igual que las del portfolio: el trabajo se muestra como es */
.trabajo-foto img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);}
.trabajo:hover .trabajo-foto img{transform:scale(1.03);}
/* El destacado va a dos columnas: foto a la izquierda, texto a la derecha.
   Acá sí la foto llega al borde de la tarjeta —los márgenes negativos anulan
   el padding— y eso funciona porque .trabajo tiene overflow:hidden, así que
   el radio de 20px la recorta. No se escapa a la tarjeta de al lado, que era
   el problema de antes. Sin aspect-ratio: la altura la da el texto. */
.trabajo-destacado{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-lg);align-items:center;}
.trabajo-destacado .trabajo-foto{
  margin:calc(var(--space-lg) * -1) 0 calc(var(--space-lg) * -1) calc(var(--space-lg) * -1);
  align-self:stretch;aspect-ratio:auto;
}
.trabajo-destacado .trabajo-foto img{height:100%;object-fit:cover;}
.trabajo-texto{display:flex;flex-direction:column;}

/* ---------- Por qué, con retrato ---------- */


/* Las secciones claras recuperan los bordes y grises del esquema original */
.seccion-blanca .paso{border-top-color:var(--negro);}
.seccion-blanca .paso p{color:var(--gris);}
.seccion-blanca .faq details{border-bottom-color:var(--linea);}
.seccion-blanca .faq details p{color:var(--gris);}
.seccion-blanca .servicio-detalle li{color:var(--gris);}
.intro em,.seccion em{color:inherit;}

/* ============================================
   SERVICIOS — ACORDEÓN
   Es la interacción firma del sitio: fila de cinco columnas iguales, y la
   que recibe el foco se expande al triple mientras las otras se comprimen.
   Valores medidos en el original: alto 540px, flex 1 → 3, curva 0.55s
   cubic-bezier(0.4,0,0.2,1), foto en grayscale con brightness 0.4 que BAJA
   a 0.3 al abrirse (la columna crece, así que el texto necesita más fondo).
   ============================================ */
.servicios{
  display:flex;
  height:540px;
  background:var(--negro);
  overflow:hidden;
}
.panel{
  position:relative;display:block;overflow:hidden;
  flex:1;min-width:0;                       /* min-width:0 o el texto impide comprimir */
  background:var(--negro);color:var(--blanco);
  border-right:1px solid rgba(255,255,255,0.07);
  transition:flex .55s var(--ease-panel);
  cursor:pointer;
}
.panel:last-child{border-right:none;}
/* :focus-visible además de :hover — con teclado también se abre */
.panel:hover,.panel:focus-visible{flex:3;}

.panel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(100%) contrast(1.15) brightness(0.4);
  transition:filter .55s ease, transform .55s ease;
}
.panel:hover img,.panel:focus-visible img{
  filter:grayscale(100%) contrast(1.2) brightness(0.3);
  transform:scale(1.04);
}
/* Velo de legibilidad, con las tres paradas del original */
.panel::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(13,13,13,0.95) 0%,
    rgba(13,13,13,0.25) 55%,
    rgba(13,13,13,0.35) 100%);
}

.panel-num{
  font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--blanco);margin-bottom:8px;display:block;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.panel:hover .panel-num,.panel:focus-visible .panel-num{opacity:1;transform:none;}

.panel-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:28px 24px;
}
.panel-pie h3{
  font-size:clamp(0.95rem,1.35vw,1.3rem);
  text-transform:uppercase;letter-spacing:-0.01em;line-height:1.15;
  transition:letter-spacing .55s var(--ease-panel);
}
.panel:hover .panel-pie h3,.panel:focus-visible .panel-pie h3{letter-spacing:0.02em;}
.panel-detalle{
  margin:10px 0 0;
  font-size:0.78rem;line-height:1.6;color:rgba(255,255,255,0.65);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease .1s;
}
.panel:hover .panel-detalle,
.panel:focus-visible .panel-detalle{max-height:120px;opacity:1;}

/* Hosting, aparte de los cinco paneles */
.hosting-grilla{display:grid;grid-template-columns:1fr 0.92fr;gap:var(--space-xl);align-items:center;}
.franja-hosting .hosting-texto{
  color:rgba(255,255,255,0.72);max-width:46ch;
  font-size:clamp(1rem,1.5vw,1.12rem);
}
.franja-hosting .titulo-seccion{margin-bottom:var(--space-md);}

/* Fichas de lo que incluye, debajo del texto */
.hosting-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-md);}
.hosting-chips li{
  padding:6px 14px;border-radius:var(--r-pastilla);
  border:1px solid rgba(255,255,255,0.18);
  font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}

/* ---------- Panel de estado ----------
   Una tarjeta que muestra el servicio funcionando. Los valores están en
   monoespaciada porque es lo que vuelve creíble un panel técnico. */
.hosting-panel{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-tarjeta);
  padding:var(--space-md);
}
.hosting-panel-cabeza{
  display:flex;align-items:center;gap:10px;
  padding-bottom:var(--space-sm);margin-bottom:var(--space-sm);
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.hosting-panel-cabeza b{
  font-family:ui-monospace,Consolas,monospace;font-size:0.82rem;font-weight:500;
  color:var(--blanco);
}
/* Punto de "en línea" con un halo que late despacio */
.hosting-punto{
  width:8px;height:8px;border-radius:50%;background:var(--blanco);
  box-shadow:0 0 0 0 rgba(255,255,255,0.5);
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0.45);}
  70%,100%{box-shadow:0 0 0 9px rgba(255,255,255,0);}
}
@media (prefers-reduced-motion: reduce){ .hosting-punto{animation:none;} }
.hosting-ssl{
  margin-left:auto;
  padding:3px 10px;border-radius:var(--r-pastilla);
  background:rgba(255,255,255,0.12);
  font-size:0.55rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--blanco);white-space:nowrap;
}

.hosting-filas div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.08);
}
.hosting-filas div:last-child{border-bottom:none;}
.hosting-filas dt{font-size:0.8rem;color:rgba(255,255,255,0.55);}
.hosting-filas dd{
  margin:0;font-family:ui-monospace,Consolas,monospace;
  font-size:0.76rem;color:rgba(255,255,255,0.9);text-align:right;
}
.hosting-pie{
  margin:var(--space-sm) 0 0;
  font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);   /* 3.8:1 era poco para texto chico */
}

/* ---------- Planes ----------
   Tarjetas, no columnas pegadas: fondo translúcido, borde fino, radio 20 y
   un levantamiento de 4px al pasar el mouse. Medidas del .plan-card
   del sitio actual: padding 40px 36px, gap 20px entre tarjetas. */
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.plan{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-tarjeta);
  padding:40px 36px;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease);
}
.plan:hover{transform:translateY(-4px);}
.plan-destacado{
  background:var(--blanco);border-color:var(--blanco);color:var(--negro);
}
/* Dentro del destacado se invierte todo lo que era blanco sobre oscuro */
.plan-destacado .plan-etiqueta{color:rgba(0,0,0,0.55);}
.plan-destacado .plan-bajada,
.plan-destacado .plan-lista li{color:rgba(0,0,0,0.75);}
.plan-destacado .plan-precio{
  color:rgba(0,0,0,0.55);
  border-top-color:rgba(0,0,0,0.14);border-bottom-color:rgba(0,0,0,0.14);
}
.plan-destacado .plan-precio strong{color:var(--negro);}
.plan-destacado .plan-lista li::before{background:rgba(0,0,0,0.45);}
.plan-destacado .btn-claro{
  background:var(--negro);color:var(--blanco);border-color:var(--negro);
  box-shadow:none;
}
.plan-destacado .btn-claro:hover{background:#222;border-color:#222;box-shadow:none;}
/* El .plan-cta del sitio actual es más chico y en mayúsculas que el botón general */
.plan .btn{font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;padding:13px 20px;}
/* Pastilla, igual que el .plan-badge del sitio: 4px 12px, radio 100px */
.plan-etiqueta{
  display:inline-block;
  background:rgba(0,0,0,0.85);color:var(--blanco);
  padding:4px 12px;border-radius:var(--r-pastilla);
  font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:var(--space-sm);
}
.plan-destacado .plan-etiqueta{background:var(--negro);color:var(--blanco);}
.plan h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:var(--space-sm);}
.plan-bajada{color:rgba(255,255,255,0.7);max-width:40ch;}
.plan-precio{
  margin:var(--space-md) 0;padding:var(--space-sm) 0;
  border-top:1px solid rgba(255,255,255,0.14);
  border-bottom:1px solid rgba(255,255,255,0.14);
  font-size:0.8rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.plan-precio strong{color:var(--blanco);font-weight:600;}
.plan-precio span{display:block;text-transform:none;letter-spacing:0;font-size:0.78rem;margin-top:4px;}
.plan-lista{margin-bottom:var(--space-lg);}
.plan-lista li{
  position:relative;padding-left:20px;margin-bottom:9px;
  font-size:0.9rem;color:rgba(255,255,255,0.8);
}
.plan-lista li::before{
  content:'';position:absolute;left:0;top:0.62em;
  width:9px;height:1px;background:rgba(255,255,255,0.45);
}
.plan .btn{margin-top:auto;}

/* ---------- Planes: tres niveles ---------- */
.planes-intro{color:rgba(255,255,255,0.72);max-width:60ch;margin-top:calc(var(--space-xl) * -0.6);
  margin-bottom:var(--space-lg);}
.planes{grid-template-columns:repeat(3,1fr);}
.plan{position:relative;}
.plan-cinta{
  position:absolute;top:16px;right:16px;
  background:var(--negro);color:var(--blanco);
  font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--r-pastilla);
}
.planes-nota{margin-top:var(--space-lg);color:rgba(255,255,255,0.5);font-size:0.88rem;max-width:64ch;}


/* ============================================
   EL ESTUDIO
   Foto a sangre contra el borde de la pantalla y razones en filas numeradas.
   Es la única sección con la imagen saliéndose del contenedor: las otras dos
   secciones partidas ya usan dos columnas adentro de la caja, y repetir esa
   maqueta una tercera vez aplanaba la página.
   ============================================ */
.estudio{
  display:grid;grid-template-columns:36% 1fr;
  background:var(--hueso);color:var(--negro);
  align-items:stretch;
}
.estudio-foto{overflow:hidden;background:var(--linea);}
/* La foto es 3:5 y la columna ronda 0.85:1, así que se recorta arriba y
   abajo. Como las dos figuras están centradas (del 21% al 81% del alto),
   centrar el encuadre las deja enteras: con el 20% de antes, a 1920px se
   les cortaban los pies. */
.estudio-foto img{width:100%;height:100%;object-fit:cover;object-position:center 50%;}

.estudio-texto{
  padding:var(--seccion) clamp(24px,5vw,72px);
  max-width:760px;
}

.estudio-razones{counter-reset:razon;}
.estudio-razones li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);
  padding:var(--space-md) 0;
  border-top:1px solid var(--linea);
}
.estudio-razones li:last-child{border-bottom:1px solid var(--linea);}
.estudio-razones span{
  font-family:var(--font-serif);font-style:italic;
  font-size:1.6rem;line-height:1;color:var(--gris-claro);
}
.estudio-razones h3{font-size:1.1rem;margin-bottom:6px;}
.estudio-razones p{
  margin:0;font-size:0.92rem;line-height:1.7;color:var(--gris);max-width:56ch;
}