/* ============================================
   almu corral — estilos
   Tipografías: Playfair Display (títulos) + Open Sans (navegación)
   ============================================ */

:root{
  --negro:#0d0d0d;
  --blanco:#ffffff;
  --hueso:#f4f3f1;
  --gris:#8a8a88;
  --gris-claro:#d8d6d3;
  --max:1400px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--negro);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- LOGO ---------- */
.logo img{height:46px;width:auto;transition:opacity .3s ease}
.logo:hover img{opacity:.65}
.pie .logo img{height:42px;filter:invert(1)}  /* en el pie, sobre negro, va en blanco */

/* ---------- CABECERA ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* tres columnas iguales: así el menú queda centrado de verdad
     en la página, sin que lo desplace el ancho del logo */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 40px;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav > .logo{justify-self:start}
.nav > .burger{justify-self:end}
.nav.solida{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);padding:14px 40px;box-shadow:0 1px 0 rgba(0,0,0,.08)}

.nav-links{display:flex;justify-content:center;gap:38px;font-family:'Open Sans',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.6,0,.2,1);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.activo{font-weight:600}
.nav-links a.activo::after{transform:scaleX(1)}

/* botón hamburguesa (móvil) */
.burger{display:none;background:none;border:0;cursor:pointer;width:28px;height:20px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--negro);transition:.35s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:9px}
.burger span:nth-child(3){top:18px}
.burger.abierta span:nth-child(1){top:9px;transform:rotate(45deg)}
.burger.abierta span:nth-child(2){opacity:0}
.burger.abierta span:nth-child(3){top:9px;transform:rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;height:78vh;min-height:520px;overflow:hidden;background:var(--hueso)}
.hero img,.hero video{width:100%;height:100%;object-fit:cover}

/* franja de disciplinas */
.franja{
  position:relative;z-index:1;
  border-top:1px solid var(--gris-claro);border-bottom:1px solid var(--gris-claro);
  background:var(--hueso);
  text-align:center;padding:16px 20px;
  font-family:'Playfair Display',Georgia,serif;
  text-transform:uppercase;
  font-size:14px;letter-spacing:.1em;
}

/* ---------- UTILIDADES ---------- */
.contenedor{max-width:var(--max);margin:0 auto;padding:0 40px}
.it{font-style:italic}

/* ---------- INTRO (texto a dos columnas) ---------- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:82px 0 86px;align-items:start}
.intro h2{text-align:left;font-size:clamp(34px,4vw,54px);line-height:1.14;font-weight:400}
.intro .cuerpo{display:flex;flex-direction:column;gap:26px;max-width:520px;padding-top:10px;justify-self:start}
.intro p{font-size:17px;line-height:1.6}

/* ---------- BLOQUE PARTIDO (imagen + texto en negro) ---------- */
/* altura fija: si no, la foto vertical estira la sección
   muchísimo y tardas una eternidad en llegar a los clientes */
.partido{
  display:grid;grid-template-columns:1fr 1fr;
  height:clamp(340px, 48vh, 490px);
  background:var(--blanco);
}
.partido .media{background:var(--negro);overflow:hidden}
.partido .media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.partido:hover .media img{transform:scale(1.04)}
.partido .texto{
  background:none;color:var(--negro);
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 60px 0 0;
  /* el texto se mete un poco sobre la foto: la primera letra
     de cada línea cae encima del papel */
  margin-left:max(-40px, -2.3vw);
  position:relative;z-index:3;
}
.partido h2{
  font-size:clamp(32px,3.6vw,52px);line-height:1.15;font-weight:400;
  /* filo blanco alrededor de las letras, para que se lean
     igual de bien sobre la foto que sobre el fondo */
  /* filo blanco fino: solo lo justo para que la primera letra
     se lea sobre la foto, sin que parezca un contorno grueso */
  text-shadow:
     1px 0 0 #fff, -1px 0 0 #fff,
     0 1px 0 #fff,  0 -1px 0 #fff,
     .7px .7px 0 #fff, -.7px .7px 0 #fff,
     .7px -.7px 0 #fff, -.7px -.7px 0 #fff;
}

/* ---------- PILARES (3 columnas con foto de fondo) ---------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr)}
.pilar{
  position:relative;min-height:62vh;padding:60px 44px;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--blanco);overflow:hidden;background:var(--negro);
}
.pilar .fondo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1),filter .6s ease;
  filter:grayscale(100%) brightness(.52);
}
.pilar:hover .fondo{transform:scale(1.09);filter:grayscale(100%) brightness(.4)}
.pilar .dentro{position:relative;z-index:2;max-width:330px}
.pilar h3{font-size:29px;font-style:italic;font-weight:400;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.5);margin-bottom:24px}
.pilar p{font-size:15px;line-height:1.6;margin-bottom:18px}

/* ---------- PROYECTOS (tarjetas que giran) ---------- */
.proyectos{display:grid;grid-template-columns:repeat(2,1fr);gap:46px;padding:110px 0}

.tarjeta{perspective:1600px;aspect-ratio:4/3;cursor:pointer}
.tarjeta-interior{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.45,.05,.2,1);
}
.tarjeta:hover .tarjeta-interior,
.tarjeta:focus-within .tarjeta-interior,
.tarjeta.girada .tarjeta-interior{transform:rotateY(180deg)}

.cara{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.cara img{width:100%;height:100%;object-fit:cover}

.cara-atras{
  transform:rotateY(180deg);
  background:var(--negro);color:var(--blanco);
  display:flex;flex-direction:column;justify-content:center;
  padding:52px 48px;
}
.cara-atras h3{font-size:clamp(22px,2vw,30px);line-height:1.24;font-weight:400;margin-bottom:22px}
.cara-atras ul{list-style:none;margin-bottom:22px}
.cara-atras li{font-size:16px;line-height:1.9;padding-left:18px;position:relative}
.cara-atras li::before{content:'•';position:absolute;left:0}
.cara-atras .datos{border-top:1px solid rgba(255,255,255,.45);padding-top:18px;font-size:14px;line-height:1.8}

/* ---------- LLAMADA FINAL ---------- */
/* el cierre va sobre el mismo crema que "con quién he trabajado":
   sin él, la frase de la foto y este bloque se quedaban flotando
   sobre el mismo blanco y el corte se notaba raro */
.bloque-cierre{background:#f6f4f1;margin-top:0}
.cta{padding:96px 0 110px;max-width:760px;margin:0 auto;text-align:left}
.cta h2{font-size:clamp(34px,4.2vw,58px);line-height:1.16;font-weight:400;margin-bottom:40px}
.cta h2 .sangrada{padding-left:clamp(24px,7vw,110px)}
.cta-texto{padding-left:clamp(24px,13vw,210px)}
.cta h3{font-size:clamp(24px,2.4vw,34px);font-weight:400;margin-bottom:30px}
.cta p{font-size:17px;line-height:1.65;max-width:430px;margin:0 0 20px}
@media(max-width:640px){
  .cta{padding:64px 0 90px}
  .cta h2 .sangrada{padding-left:18px}
  .cta-texto{padding-left:18px}
}

.boton{
  display:inline-block;margin-top:34px;
  font-family:'Open Sans',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 42px;border:1px solid var(--negro);color:var(--negro);
  position:relative;overflow:hidden;z-index:1;
}
.boton::before{
  content:'';position:absolute;inset:0;background:var(--negro);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.6,0,.2,1);
}
/* El relleno negro solo donde hay ratón de verdad. En una pantalla
   táctil el navegador daba por "hover" el botón al tocarlo o al pasar
   por encima al hacer scroll: el texto se volvía blanco pero el fondo
   negro no llegaba a pintarse, y quedaba blanco sobre blanco. */
@media (hover:hover){
  .boton:hover{color:var(--blanco)}
  .boton:hover::before{transform:scaleY(1);transform-origin:top}
}
@media (hover:none){
  .boton:active{color:var(--blanco)}
  .boton:active::before{transform:scaleY(1);transform-origin:top}
}

/* ---------- PIE ---------- */
.pie{
  background:var(--negro);color:var(--blanco);
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 40px;
}
.redes{display:flex;gap:30px}
.redes a{
  display:flex;align-items:center;justify-content:center;
  opacity:.85;
  transition:opacity .35s ease,transform .35s ease;
}
.redes a:hover{opacity:1;transform:translateY(-3px)}
.redes svg{width:24px;height:24px}
.pie .sitio{font-size:14px}

/* ============================================
   ANIMACIONES AL HACER SCROLL
   ============================================ */
/* Solo se esconde si hay JavaScript para volver a enseñarlo.
   Sin esto, la página entera queda invisible hasta que arranca el script. */
.js .sube{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.js .sube.visible{opacity:1;transform:none}

/* líneas de titular que suben una detrás de otra */
.linea{display:block;overflow:hidden}
.linea > span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.visible .linea > span{transform:none}
.visible .linea:nth-child(2) > span{transition-delay:.09s}
.visible .linea:nth-child(3) > span{transition-delay:.18s}
.visible .linea:nth-child(4) > span{transition-delay:.27s}

/* retrasos escalonados */
.d1{transition-delay:.1s}
.d2{transition-delay:.2s}
.d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .sube{opacity:1;transform:none}
  .linea > span{transform:none}
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1000px){
  .intro{grid-template-columns:1fr;gap:34px;padding:80px 0 90px}
  .partido{grid-template-columns:1fr}
  .partido .media{height:34vh}
  .partido{height:auto}
  .partido .texto{padding:54px 34px;margin-left:0}
  .partido h2{text-shadow:none}
  .pilares{grid-template-columns:1fr}
  .pilar{min-height:auto;padding:60px 34px}
  .proyectos{grid-template-columns:1fr;gap:30px;padding:80px 0}
}

@media (max-width:760px){
  .contenedor{padding:0 22px}
  .nav{padding:16px 22px;grid-template-columns:1fr auto}
  /* OJO: backdrop-filter convierte la cabecera en el marco de referencia
     de todo lo que lleve position:fixed dentro. Con él, el panel del menú
     se encogía a la altura de la barra en cuanto la cabecera se volvía
     sólida al bajar. En móvil va con fondo opaco y sin desenfoque. */
  .nav.solida{padding:12px 22px;backdrop-filter:none;background:rgba(255,255,255,.98)}
  body.cabecera-solida .nav:hover,
  body.cabecera-solida .nav:focus-within{backdrop-filter:none}
  .burger{display:block}
  /* el menú entra como un panel por la derecha */
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(78vw,330px);
    background:var(--blanco);
    box-shadow:-18px 0 44px rgba(0,0,0,.16);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:clamp(16px,3.2vh,28px);
    padding:76px 34px 40px;
    font-size:15px;
    overflow-y:auto;
    transform:translateX(100%);
    /* "visibility" es lo que evita que el panel, aunque esté fuera
       de la pantalla, ensanche la página y asome por la derecha */
    visibility:hidden;
    transition:transform .5s cubic-bezier(.3,.7,.2,1), visibility .5s;
  }
  .nav-links.abierto{transform:translateX(0);visibility:visible}

  /* el fondo se oscurece detrás del panel */
  .velo-menu{
    position:fixed;inset:0;z-index:90;
    background:rgba(13,13,13,.38);
    opacity:0;visibility:hidden;
    transition:opacity .45s ease,visibility .45s ease;
  }
  .velo-menu.visible{opacity:1;visibility:visible}

  body.negro .nav-links{background:#141414}
  .hero{height:62vh;min-height:400px}
  .franja{font-size:11px;letter-spacing:.04em}

  /* en móvil la banda es mucho más estrecha: si la portada se ve "entera"
     queda una foto pequeña flotando en un rectángulo. Mejor que llene. */
  .caso.centrada .cara-frente img:not(.sello){object-fit:cover;transform:none}
  .portada-banda{height:clamp(300px,52vh,420px)}
  .portada-banda img{object-fit:cover;transform:none}
  .cara-atras{padding:34px 28px}
  .cara-atras li{font-size:14px;line-height:1.7}
  .pie{flex-direction:column;gap:24px;text-align:center;padding:36px 22px}
}

/* ============================================
   PÁGINA DE PROYECTOS
   ============================================ */

/* la cabecera de esta página es más baja que la de la home */
.hero-corto{height:46vh;min-height:330px}

/* ---------- BANDA DE CASO (gira al pasar el ratón) ---------- */
.casos{display:flex;flex-direction:column}

.caso{
  display:block;color:inherit;text-decoration:none;
  perspective:2400px;height:78vh;min-height:560px;
}
.caso:focus-visible{outline:2px solid var(--negro);outline-offset:-4px}
.caso-interior{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.45,.05,.2,1);
}
.caso:hover .caso-interior,
.caso:focus-within .caso-interior,
.caso.girada .caso-interior{transform:rotateY(180deg)}

.caso .cara{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.caso .cara-atras{overflow:hidden}
/* por defecto la portada llena la banda de lado a lado */
.caso .cara-frente img{width:100%;height:100%;object-fit:cover;object-position:center}

/* la que lleva "centrada" se ve entera, centrada, con fondo blanco
   a los lados: es lo que pide el diseño de Bellapierre */
.caso.centrada .cara-frente{background:#f7f3f3}   /* el mismo fondo que la foto */
.caso.centrada .cara-frente img:not(.sello){
  object-fit:contain;object-position:center;
  /* un poco ampliada: así los bordes laterales de la foto
     quedan fuera de la banda y no se ve el corte del hombro */
  transform:scale(1.12);
}

/* el reverso: la ficha del caso de estudio */
.caso .cara-atras{
  transform:rotateY(180deg);
  background:var(--hueso);color:var(--negro);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:40px;padding:60px 70px;
}
.caso .cara-atras.invertida > .ficha{order:2}
.caso .cara-atras.invertida > .ilustracion{order:1}

.ficha{position:relative;max-width:540px;justify-self:center;align-self:center}
.ficha .etiqueta{
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;position:relative;z-index:2;
}
/* el número gigante que va detrás del texto */
.ficha .numero{
  font-family:'Bodoni Moda',Didot,'Playfair Display',serif;
  position:absolute;top:-38px;left:-10px;z-index:1;
  font-size:210px;line-height:1;color:rgba(13,13,13,.09);
  pointer-events:none;user-select:none;
}
.ficha h2{
  position:relative;z-index:2;
  font-size:clamp(28px,2.8vw,42px);line-height:1.2;font-weight:400;
}
.ficha ul{position:relative;z-index:2;list-style:none;margin-top:18px;font-size:17px;line-height:1.55}
.ficha hr{border:0;border-top:1px solid var(--negro);margin:28px 0 22px;position:relative;z-index:2}

.enlace-caso{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:16px;
  font-size:15px;letter-spacing:.1em;text-transform:uppercase;
}
.enlace-caso .flecha{
  display:block;width:52px;height:1px;background:currentColor;position:relative;
  transition:width .45s cubic-bezier(.6,0,.2,1);
}
.enlace-caso .flecha::after{
  content:'';position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.enlace-caso:hover .flecha{width:78px}

/* la ilustración sale ENTERA y flotando sobre la tarjeta:
   nunca se recorta, y puede desbordar un poco hacia arriba */
.caso .cara-atras{overflow:visible}
/* "stretch" le da a la columna una altura real; sin eso, la imagen
   crecía sola, estiraba la fila y descentraba el texto de al lado */
.ilustracion{
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;min-height:0;position:relative;
}
.ilustracion img{
  max-height:none;max-width:100%;width:auto;
  object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.13));
}
/* los pintalabios, verticales: se les da altura y aire */
.ilustracion.alto img{max-height:99%;max-width:96%;width:auto}
/* el avión, apaisado: manda el ancho */
.ilustracion.ancho img{width:90%;height:auto;max-height:70%;object-fit:contain}

/* el logo detrás y el avión delante, pisándolo un poco */
.ilustracion.conjunto{flex-direction:column;justify-content:center;position:relative}
.ilustracion.conjunto .logo-detras{
  width:min(230px,44%);height:auto;
  filter:none;margin-bottom:-9%;
}
.ilustracion.conjunto .avion{
  position:relative;z-index:2;
  width:min(420px,80%);height:auto;
}
/* el logo del archivo, más pequeño y centrado */
.ilustracion.logo-grande img{
  width:min(300px,62%);height:auto;max-height:70%;filter:none;
}

/* marca del cliente, arriba del todo en el reverso */
.caso .cara-frente img.sello{
  /* sin esto, el logo blanco se sigue viendo mientras gira la tarjeta */
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(210px,19%);height:auto;object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.35));
  transition:transform .9s cubic-bezier(.2,.6,.2,1), opacity .2s ease;
}
/* en cuanto empieza el giro se apaga; si solo confiamos en backface-visibility
   el navegador lo mantiene pintado hasta bien pasada la mitad de la vuelta */
.caso:hover .cara-frente img.sello,
.caso:focus-within .cara-frente img.sello,
.caso.girada .cara-frente img.sello{opacity:0}

/* la marca del cliente, arriba del reverso */
.caso .marca{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  width:auto;height:78px;opacity:.92;z-index:3;
}

@media (max-width:1000px){
  /* en pantalla pequeña la banda sigue girando, pero sola:
     se enseña la portada un momento y se da la vuelta al entrar en pantalla */
  .caso{height:72vh;min-height:470px}
  .caso .cara-atras{
    grid-template-columns:1fr;gap:20px;padding:48px 26px;
    align-content:center;
  }
  .caso .cara-atras.invertida > .ficha,
  .caso .cara-atras.invertida > .ilustracion{order:initial}
  .ficha{max-width:none}
  .ficha .numero{font-size:150px;top:-26px}
  .ilustracion img{max-height:180px}
  .ilustracion.logo-grande img{max-height:90px}
  .caso .marca{height:52px;top:18px}
}

@media (max-width:620px){
  .caso{height:76vh;min-height:430px}
  .ilustracion img{max-height:130px}
  .ficha .numero{font-size:120px;top:-18px}
}

/* ============================================
   PÁGINA DE UN PROYECTO (caso completo)
   ============================================ */

.caso-completo{padding-top:96px}   /* hueco para la cabecera fija */

/* portada del proyecto: imagen centrada, no a todo el ancho */
.portada-proyecto{display:flex;justify-content:center;padding:0 40px}
.portada-proyecto img{width:min(430px,58vw);height:auto}

/* portada en banda, con el mismo corte que en la página de Proyectos */
.portada-banda{
  height:clamp(360px,62vh,620px);
  background:#f7f3f3;overflow:hidden;
}
.portada-banda img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  transform:scale(1.12);
}

/* la foto de "Mi rol": sobre blanco y a la altura del texto de al lado */
.rol img{
  width:100%;height:auto;max-height:none;
  object-fit:contain;background:#fff;
}

/* "Explora el proyecto" mientras no haya imágenes */
.cuatro-columnas.sin-fotos article{
  border-top:1px solid var(--gris-claro);padding-top:18px;
}
.cuatro-columnas.sin-fotos h3{margin-bottom:0}

/* ---------- bloque numerado ---------- */
.bloque{padding:58px 0;position:relative}
/* el primer bloque necesita hueco extra: si no, el número gigante
   de fondo se sube por encima de la línea de cliente */
.bloque.primero{padding-top:104px}

.titulo-bloque{position:relative;margin-bottom:38px}
.titulo-bloque .num{
  font-family:'Bodoni Moda',Didot,serif;
  position:absolute;top:-74px;left:-14px;z-index:1;
  font-size:170px;line-height:1;color:rgba(13,13,13,.08);
  pointer-events:none;user-select:none;
}
.titulo-bloque h2{
  position:relative;z-index:2;
  font-size:clamp(30px,3.4vw,46px);font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;line-height:1.1;
}
/* variante con el número y el título alineados a la derecha */
.titulo-bloque.derecha{text-align:right}
.titulo-bloque.derecha .num{left:auto;right:-14px}

/* ---------- 01 · el reto ---------- */
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pregunta{font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:400}
.parrafos{display:flex;flex-direction:column;gap:22px;font-size:17px;line-height:1.65;max-width:520px}

/* ---------- 02 · mi rol ---------- */
/* la columna del texto se queda con el ancho justo de sus palabras
   y la foto se come todo el resto: así llega hasta el "02" de Mi rol */
.rol{display:grid;grid-template-columns:1fr auto;gap:0;align-items:center}
.rol > div:last-child{padding-left:34px}
.rol ul{list-style:none;text-align:right;font-size:19px;line-height:2}

/* ---------- 03 · la estrategia ---------- */
.tres-columnas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,9vw,130px);
  /* se reparten por el ancho, pero cada pieza sigue siendo pequeña:
     el espacio extra se lo lleva el hueco entre ellas */
  max-width:1120px;margin:0 auto;
}
.tres-columnas img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:20px}

/* la pieza de "Educar" se encuadra desde arriba: así el logo de
   Bellapierre se ve entero y lo que se corta es la frase del pie */
.tres-columnas img.desde-arriba{object-position:center top}
.tres-columnas h3{
  font-size:25px;font-weight:400;
  padding-bottom:14px;border-bottom:1px solid var(--negro);margin-bottom:18px;
}
.tres-columnas p{font-size:16px;line-height:1.6}

/* ---------- 04 · dirección creativa ---------- */
/* el moodboard va recortado, sin caja: como si el tablero estuviese
   apoyado directamente sobre la página */
.ancho-completo{max-width:880px;margin:0 auto}
.ancho-completo img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.11));
}

/* ---------- 05 · campañas ---------- */
.campana{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-bottom:58px}
.campana:last-child{margin-bottom:0}
.campana .etiqueta{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
.campana .rotulo{font-size:clamp(22px,2.2vw,30px);font-style:italic;margin-bottom:20px;line-height:1.3}
.campana p{font-size:16px;line-height:1.65;margin-bottom:18px;max-width:480px}
.piezas{display:flex;align-items:flex-end;gap:26px}
/* el lema de la campaña, entrecomillado, entre las dos campañas */
.campana .a-mano.lema-campana{
  margin:26px 0 0;line-height:1.24;color:#2b2422;
}

/* ---------- 05 · San Valentín ----------
   silueta pequeña a la izquierda, el móvil pisándole la gabardina,
   la frase arriba a su derecha y el texto pegado al móvil. */
.campana-sv{grid-template-columns:1.02fr 1fr;gap:30px;align-items:start}

.piezas{position:relative;display:flex;align-items:stretch;gap:0;padding-top:14px}
.piezas img,.piezas video{height:auto;display:block}
/* la silueta arranca justo bajo el rótulo: el ramo queda a la altura del lema */
/* la silueta ocupa el 60 %: su alto (x1,5) es 0,90 del ancho de la columna,
   justo lo que suman el lema y el móvil de al lado */
.piezas > img{
  width:60%;flex-shrink:0;align-self:flex-start;position:relative;z-index:1;
  /* ligeramente inclinada, con los pies hacia el móvil */
  transform-origin:50% 0;
  animation:entrar-figura-sv 1.25s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes entrar-figura-sv{
  from{opacity:0;transform:translateX(-70px) rotate(-5deg)}
  to  {opacity:1;transform:rotate(-5deg)}
}
@media (prefers-reduced-motion:reduce){ .piezas > img{animation:none} }
/* el móvil, más pequeño, empieza por debajo del lema y algo más a la derecha */
/* el lema y el móvil, en la misma columna: el lema siempre encima,
   sin pisar la silueta */
.col-movil{
  /* crece hacia la izquierda: se queda donde estaba y se mete
     un poco más sobre la silueta */
  width:46%;flex-shrink:0;margin-left:-6%;
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
}
/* el lema arriba, a la altura del rótulo, y el móvil empujado
   hasta abajo para acabar a la altura de los pies de la silueta */
.piezas .movil{
  width:100%;margin-top:auto;
  /* el mockup trae 4,7 % de blanco a cada lado y esquinas cuadradas:
     se recorta con un rectángulo redondeado y desaparece el pegote */
  clip-path:inset(0 5% 0 4.7% round 9%);
}

/* el lema de la campaña, debajo del párrafo y alineado con él */
.campana .a-mano.concepto-campana{
  margin:26px 0 0;line-height:1.22;white-space:nowrap;color:#2b2422;
}
/* la columna de la derecha arranca a ras de esa frase */
.campana-sv > div:last-child{padding-top:42px}
.campana-sv .titulo-bloque{margin-bottom:34px}

/* ---------- 05 · aniversario ----------
   texto arriba a la izquierda, la revista debajo y algo desplazada,
   y el móvil a la derecha pisándole la esquina. */
.campana-aniversario{
  position:relative;
  grid-template-columns:1fr;gap:0;
}
.campana-aniversario .texto-aniversario{max-width:54%}
.campana-aniversario .movil-aniversario{
  position:absolute;z-index:3;right:13%;top:-26px;width:25%;
}
.movil-aniversario .movil{
  width:100%;height:auto;display:block;
  transform:rotate(5deg);
  clip-path:inset(0 5% 0 4.7% round 9%);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.14));
}
.campana-aniversario .revista-aniversario{
  position:relative;z-index:1;
  width:56%;margin:30px 0 0 8%;
}
.revista-aniversario img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.14));
}

/* ---------- 06 · resultados ---------- */
.resultados{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.cifras{display:grid;gap:2px;background:var(--gris-claro);border:1px solid var(--gris-claro)}
.cifra{background:var(--hueso);padding:26px 34px}
.cifra .dato{font-size:clamp(36px,4vw,54px);line-height:1}
.cifra .que{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;color:#5c5c5a}

/* ---------- explora el proyecto ---------- */
/* el bloque de "explora" va más pegado a los resultados */
.bloque.explora{padding-top:26px;padding-bottom:20px}
.explora h2{
  font-size:clamp(26px,2.8vw,38px);font-weight:400;text-transform:uppercase;
  margin-bottom:32px;max-width:420px;line-height:1.15;
}
.cuatro-columnas{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cuatro-columnas h3{font-size:22px;font-weight:400;margin-bottom:16px}
.cuatro-columnas a{display:block}
.cuatro-columnas img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.6,.2,1),opacity .4s ease;
}
.cuatro-columnas a:hover img{transform:scale(1.04);opacity:.88}

/* ---------- siguiente proyecto ---------- */
.siguiente{
  display:flex;justify-content:flex-end;
  padding:44px 0 72px;
}

@media (max-width:1000px){
  .dos-columnas,.rol,.campana,.resultados{grid-template-columns:1fr;gap:34px}
  /* en una sola columna, cada pieza del aniversario en su fila */
  /* ---- Bellapierre 05 en móvil: otro orden de lectura ----
     Con display:contents los hijos de cada columna pasan a ser piezas
     de la misma rejilla, así el título puede ir antes que las imágenes. */
  .campana-sv > div{display:contents}
  .campana-sv .titulo-bloque{order:1;margin-bottom:22px}
  .campana-sv .etiqueta{order:2}
  .campana-sv .piezas{order:3;margin-bottom:26px}
  .campana-sv p{order:4}
  .campana-sv > div:last-child{padding-top:0}

  .campana-aniversario .texto-aniversario{max-width:none}
  /* la revista sube y el móvil cae encima, pisándole el código de barras */
  .campana-aniversario{display:grid;grid-template-columns:1fr}
  .campana-aniversario .revista-aniversario{order:2;width:92%;margin:22px auto 0}
  .campana-aniversario .movil-aniversario{
    order:3;position:relative;right:auto;top:auto;
    width:34%;margin:-20% 6% 0 0;justify-self:end;
  }

  /* el móvil, del mismo alto que la silueta: de los pies al tope */
  .piezas{padding-top:10px}
  .piezas > img{width:52%}
  .col-movil{width:44%;margin-left:-4%}
  .rol > div:last-child{padding-left:0}
  .rol ul{text-align:left}
  .titulo-bloque.derecha{text-align:left}
  .titulo-bloque.derecha .num{left:-10px;right:auto}
  .tres-columnas{grid-template-columns:1fr;gap:46px}
  .cuatro-columnas{grid-template-columns:1fr 1fr;gap:30px}
  .bloque{padding:46px 0}
  .siguiente{justify-content:flex-start}

  /* el número deja de montarse encima del título:
     se va más arriba y baja de tamaño */
  .titulo-bloque{margin-bottom:38px}
  .titulo-bloque .num{font-size:96px;top:-72px;left:-6px}

  /* ninguna imagen ocupa más de media pantalla de alto */
  .caso-completo img{max-height:46vh;width:100%;object-fit:cover}
  .tres-columnas img{aspect-ratio:3/2;margin-bottom:20px}
  .piezas{gap:16px}
  .piezas > img{width:50%}
  .piezas .movil{width:36%;margin-left:-8%}
  .campana{margin-bottom:64px}
  .cifra{padding:20px 24px}
}

@media (max-width:620px){
  .cuatro-columnas{grid-template-columns:1fr 1fr;gap:20px}
  .cuatro-columnas h3{font-size:18px;margin-bottom:10px}
  .portada-proyecto img{width:64vw}
  .titulo-bloque .num{font-size:78px;top:-60px}
  .caso-completo img{max-height:38vh}
}

/* ---------- ficha del proyecto (debajo de la portada) ---------- */
.ficha-proyecto{
margin-top:26px;
  border-top:1px solid var(--gris-claro);
  border-bottom:1px solid var(--gris-claro);
  padding:20px 0 22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}
.ficha-proyecto dl{display:flex;gap:52px;flex-wrap:wrap}
.ficha-proyecto dt{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:6px;
}
.ficha-proyecto dd{font-size:16px}
.ficha-proyecto .destacado{font-size:16px;text-align:right}
.ficha-proyecto .destacado strong{
  font-weight:400;font-size:26px;letter-spacing:-.01em;
}

@media (max-width:900px){
  .ficha-proyecto{flex-direction:column;align-items:flex-start;gap:20px;margin-top:22px}
  .ficha-proyecto dl{gap:22px 34px}
  .ficha-proyecto .destacado{text-align:left}
}

/* ============================================
   SUPER LIFE TRIP (piezas propias de este caso)
   ============================================ */

/* portada a todo el ancho */
.portada-ancha{margin-top:-96px}
.portada-ancha img,.portada-ancha video{width:100%;height:56vh;min-height:340px;object-fit:cover}

/* 01 · texto a la izquierda, tres fotos apiladas a la derecha */
/* el texto va más estrecho y las fotos más pequeñas y apaisadas */
/* Las medidas del origen viven aquí, en un solo sitio.
   El bloque del concepto usa exactamente las mismas, así los dos
   quedan alineados: el 02 debajo del texto y la lista debajo de las fotos. */
.caso-completo{
  --col-texto:340px;
  --col-fotos:430px;
  --hueco-columnas:clamp(80px,17vw,250px);
}

.origen{
  display:grid;grid-template-columns:var(--col-texto) var(--col-fotos);
  justify-content:center;gap:var(--hueco-columnas);align-items:start;
}
.origen .parrafos,.origen .pregunta{max-width:none}

/* el concepto, calcado al origen */
.dos-columnas.alineado{
  display:grid;grid-template-columns:var(--col-texto) var(--col-fotos);
  justify-content:center;gap:var(--hueco-columnas);align-items:start;
}
/* las fotos ocupan menos: si no, dejan un hueco enorme antes del 02 */
.origen .fotos{
  display:flex;flex-direction:column;gap:16px;padding-top:4px;
}
.origen .fotos img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* lista alineada a la derecha (el concepto) */
.lista-derecha{list-style:none;text-align:right;font-size:19px;line-height:2.05}

/* mosaico de piezas creativas */
/* tres arriba, dos abajo y la frase ocupando el hueco de la derecha */
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;max-width:1040px;margin-left:auto;margin-right:auto}
.mosaico img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.cita-lateral{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 10px 0 26px;
  font-size:clamp(19px,1.9vw,27px);line-height:1.35;
}

/* frase suelta centrada */
.cita{
  text-align:center;padding:70px 0;
  font-size:clamp(22px,2.3vw,32px);line-height:1.35;
}

/* 03 · rejilla de la narrativa */
.narrativa{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 40px}
.narrativa h3{
  font-size:23px;font-style:italic;font-weight:400;
  padding-bottom:12px;border-bottom:1px solid var(--negro);margin-bottom:14px;
}
.narrativa p{font-size:15px;line-height:1.6}
.narrativa .celda-titulo{display:flex;align-items:center;justify-content:flex-end}

/* cifras en fila (resultados) */
.cifras-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.cifras-fila .dato{font-size:clamp(34px,3.6vw,48px);line-height:1.05}
.cifras-fila .que{font-size:17px;margin-bottom:14px}
.cifras-fila .detalle{
  font-size:14px;color:#5c5c5a;
  border-top:1px solid var(--gris-claro);padding-top:10px;
}
.cifras-fila .canal{font-size:14px;color:#5c5c5a;margin-top:6px}

/* dos columnas finales */
.dos-enlaces{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.dos-enlaces h3{
  font-size:21px;font-weight:400;text-align:center;
  padding-bottom:14px;border-bottom:1px solid var(--gris-claro);margin-bottom:22px;
}
.dos-enlaces img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1),opacity .4s ease}
.dos-enlaces a:hover img{transform:scale(1.04);opacity:.88}

@media (max-width:1000px){
  .portada-ancha img,.portada-ancha video{height:40vh;min-height:250px}
  .origen{grid-template-columns:1fr;gap:30px}
  .origen .parrafos,.origen .pregunta{max-width:none}
  .origen .fotos{width:auto;max-width:none}
  .origen,.dos-columnas.alineado{grid-template-columns:1fr;justify-content:stretch;gap:24px}
  .lista-derecha{text-align:left}
  .mosaico{grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
  /* la frase ocupa el hueco que deja la última pieza, no una fila entera */
  .cita-lateral{
    grid-column:auto;padding:0;text-align:left;
    display:flex;align-items:center;
  }
  .narrativa{grid-template-columns:1fr 1fr;gap:36px 28px}
  /* el 03 y el título van primero: son los que presentan las piezas */
  .narrativa .celda-titulo{grid-column:span 2;justify-content:flex-start;order:-1}
  .cifras-fila{grid-template-columns:1fr;gap:30px;margin-top:44px}
  .cita{padding:48px 0}
}

@media (max-width:620px){
  /* las piezas narrativas, de dos en dos: ocupan la mitad de alto */
  .narrativa{grid-template-columns:1fr 1fr;gap:24px 20px}
  .narrativa .celda-titulo{grid-column:span 2}
  .narrativa h3{font-size:18px;padding-bottom:7px;margin-bottom:8px}
  .narrativa p{font-size:13.5px;line-height:1.45}
  /* la última, "Guías", centrada debajo */
  .narrativa article:last-of-type{
    grid-column:span 2;justify-self:center;text-align:center;
    max-width:64%;
  }
  .cita-lateral{grid-column:span 1;padding-top:6px}
  .dos-enlaces{grid-template-columns:1fr;gap:34px}
}

/* ============================================
   GALERÍA CON AMPLIACIÓN AL PINCHAR
   ============================================ */

/* la galería se sale del contenedor y llega a los dos bordes */
.galeria{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(190px,24vh);
  gap:10px;margin-top:56px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.galeria .alta{grid-row:span 2}

.galeria button{
  display:block;padding:0;border:0;background:var(--hueso);
  cursor:pointer;overflow:hidden;position:relative;
  width:100%;height:100%;min-height:168px;
}
.galeria img,
.galeria video{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.6,.2,1),filter .5s ease;
}
.galeria button:hover img,
.galeria button:hover video,
.galeria button:focus-visible img{transform:scale(1.06);filter:brightness(.92)}
.galeria button:focus-visible{outline:2px solid var(--negro);outline-offset:3px}

/* triangulito de "play" en las piezas que son vídeo */
.galeria .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.88);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.2,.6,.2,1),background .3s ease;
  pointer-events:none;
}
.galeria button:hover .play{transform:translate(-50%,-50%) scale(1.12);background:#fff}
.galeria .play::after{
  content:'';margin-left:4px;
  border-left:15px solid var(--negro);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}

/* ---------- la ventana de ampliación ---------- */
.visor{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,10,10,.94);
  display:flex;align-items:stretch;justify-content:center;
  padding:64px 72px;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.visor.abierto{opacity:1;visibility:visible}

.visor .contenido-visor{
  flex:1;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
}

/* pieza con explicación al lado */
.pieza-visor{
  display:flex;align-items:stretch;gap:48px;
  width:100%;height:100%;
}
.pieza-visor .medio{
  flex:1 1 auto;min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
}
.pieza-visor .info{
  flex:0 0 290px;align-self:center;color:#fff;
  border-left:1px solid rgba(255,255,255,.28);padding-left:34px;
}
.pieza-visor .info .tipo{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:12px;
}
.pieza-visor .info h3{font-size:26px;font-weight:400;line-height:1.25;margin-bottom:16px}
.pieza-visor .info p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.82)}

/* ---------- la microficha del archivo ----------
   Nombre en serif, disciplinas y año en sans pequeña, y mucho aire
   entre las tres cosas. Sin cajas, sin fondos, sin botones. */
.ficha-pieza h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(24px,2.2vw,30px);line-height:1.2;margin-bottom:18px;
}
.ficha-pieza .disciplinas{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  line-height:2;color:rgba(255,255,255,.6);
  padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.ficha-pieza .resumen{font-size:15px;line-height:1.7;color:rgba(255,255,255,.85)}
.ficha-pieza .anio{
  margin-top:26px;
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.45);
}
.visor img,.visor video{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  transform:scale(.96);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.visor.abierto img,.visor.abierto video{transform:scale(1)}

.visor button{
  position:absolute;background:none;border:0;cursor:pointer;
  color:#fff;padding:14px;line-height:0;
  transition:opacity .3s ease;opacity:.75;
}
.visor button:hover{opacity:1}
.visor .cerrar{top:16px;right:20px;font-size:34px;font-family:'Open Sans',sans-serif;line-height:.7}
.visor .anterior{left:12px;top:50%;transform:translateY(-50%)}
.visor .siguiente{right:12px;top:50%;transform:translateY(-50%)}
.visor .anterior svg,.visor .siguiente svg{width:34px;height:34px}

.visor .pie-visor{
  position:absolute;bottom:22px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.75);font-size:14px;
}

@media (max-width:1000px){
  .galeria{grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
  .galeria .alta{grid-row:span 1}
  .galeria button{min-height:150px}
  .visor{padding:56px 14px}
  .visor .anterior,.visor .siguiente{padding:8px}
  .visor .anterior svg,.visor .siguiente svg{width:26px;height:26px}
}

/* ============================================
   PÁGINA DE ARCHIVO
   ============================================ */

/* mosaico a todo el ancho, con piezas de distinto tamaño */
/* Mosaico del archivo: colocación FIJA para que quede un rectángulo
   perfecto, sin huecos ni piezas que sobresalgan.
   Está calculado para EXACTAMENTE 10 piezas en 4 columnas y 5 filas.
   Si algún día quitas o añades alguna, avísame y recalculo el encaje. */
/* El archivo va en columnas al estilo tablero: cada pieza conserva su
   propia proporción, no hay huecos vacíos y añadir una más es solo
   pegar otro botón, sin tocar la retícula. */
.mosaico-archivo{
  column-count:3;column-gap:6px;
}
.mosaico-archivo > *{
  break-inside:avoid;
  margin-bottom:6px;
  display:block;width:100%;
}

.mosaico-archivo button{
  display:block;padding:0;border:0;background:var(--hueso);
  cursor:pointer;overflow:hidden;position:relative;width:100%;
}
.mosaico-archivo img{
  width:100%;height:auto;display:block;
  transition:transform .9s cubic-bezier(.2,.6,.2,1),filter .5s ease;
}
.mosaico-archivo button:hover img,
.mosaico-archivo button:focus-visible img{transform:scale(1.03);filter:brightness(.95)}
.mosaico-archivo button:focus-visible{outline:2px solid var(--negro);outline-offset:-3px}

/* el título y las disciplinas asoman al pasar el ratón */
.mosaico-archivo .rotulo b{
  display:block;font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:16px;line-height:1.25;letter-spacing:0;text-transform:none;
}
.mosaico-archivo .rotulo i{
  display:block;margin-top:6px;font-style:normal;
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;
}
.mosaico-archivo .rotulo{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 20px 18px;text-align:left;color:#fff;
  /* velo muy suave, solo lo justo para que el texto se lea */
  background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,.14) 55%,transparent);
  font-size:15px;line-height:1.3;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.6,.2,1);
  pointer-events:none;
}
.mosaico-archivo button:hover .rotulo,
.mosaico-archivo button:focus-visible .rotulo{opacity:1;transform:none}

/* frase de cierre: dos líneas escalonadas, un poco a la izquierda.
   La segunda arranca justo debajo de la "m" de "mejores" — el truco
   es un "Las " invisible delante que ocupa exactamente ese hueco. */
.cierre{
  display:flex;flex-direction:column;align-items:flex-start;
  width:fit-content;margin:0 auto;
  padding:120px 24px 130px;
  transform:translateX(-7%);
  font-size:clamp(32px,4.6vw,62px);line-height:1.2;font-weight:400;
}
/* ojo: no usar la clase .linea aquí, que ya la usa la animación
   de titulares de la home y convierte los <span> en bloques */
.cierre .reng{display:block;white-space:nowrap}
.cierre .sangria{display:inline;visibility:hidden}

@media (max-width:1000px){
  /* en pantalla mediana: dos columnas, y cada pieza busca su hueco */
  .mosaico-archivo{column-count:2;column-gap:4px}
  .mosaico-archivo > *{margin-bottom:4px}
  .cierre{transform:none}
  .cierre{padding:80px 22px 90px}
  .pieza-visor{flex-direction:column;gap:20px;overflow-y:auto}
  .pieza-visor .info{
    flex:0 0 auto;border-left:0;padding-left:0;
    border-top:1px solid rgba(255,255,255,.28);padding-top:18px;
    text-align:center;max-width:520px;
  }
  .pieza-visor .info h3{font-size:21px;margin-bottom:10px}
  .pieza-visor .info p{font-size:14px}
}

@media (max-width:620px){
  /* en móvil se quedan en dos columnas: piezas pequeñas, poco scroll,
     y el mismo orden que en escritorio. Se pulsa para verlas grandes. */
  .mosaico-archivo{column-count:2;column-gap:4px}
  .mosaico-archivo > *{margin-bottom:4px}
  .mosaico-archivo .rotulo{padding:14px 10px 10px}
  .mosaico-archivo .rotulo b{font-size:12px}
  .mosaico-archivo .rotulo i{font-size:7.5px;letter-spacing:.12em;margin-top:4px}
  .cierre .reng{white-space:normal}
  .cierre .sangria{display:none}
}

/* ============================================
   PÁGINA DE SERVICIOS — las carpetas
   ============================================ */

/* la figura baja hasta pisar la franja: sin hueco por debajo */
.intro-servicios{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  padding:40px 0 0;
}
.intro-servicios .foto{
  display:flex;justify-content:center;align-items:flex-end;
  align-self:end;
  /* la figura se mete media franja por debajo y pasa por delante */
  margin-bottom:-25px;
  position:relative;z-index:3;
  pointer-events:none;
}
/* la silueta recortada: manda la altura, no el ancho, porque
   la foto es muy alta y estrecha. Va grande y apoyada abajo,
   de forma que el zapato queda justo sobre la franja. */
.intro-servicios .foto img{
  display:block;
  width:auto;max-width:100%;
  height:auto;max-height:clamp(440px,72vh,720px);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.10));
  /* entra desde la izquierda al abrir la página */
  animation:entrar-figura 1.25s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes entrar-figura{
  from{opacity:0;transform:translateX(-70px)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .intro-servicios .foto img{animation:none}
}
.intro-servicios h1{
  font-size:clamp(30px,3.6vw,50px);font-weight:400;line-height:1.18;margin-bottom:30px;
}
.intro-servicios p{font-size:clamp(19px,1.9vw,26px);line-height:1.35}

/* ---------- las carpetas, apiladas como en un archivador ----------
   Son las fotos tal cual, recortadas. Cada una tapa casi toda la
   anterior y solo deja asomar su pestaña, donde va el rótulo. */
.carpetas{
  max-width:820px;margin:0 auto;padding:56px 0 0;
  display:block;
}

.carpeta{
  position:relative;display:block;width:100%;
  border:0;padding:0;background:none;cursor:pointer;
  font-family:inherit;color:inherit;line-height:0;
  margin-top:-58%;                 /* solo asoma la pestaña y una franja */
  transition:transform .5s cubic-bezier(.3,.7,.2,1), filter .4s ease;
  filter:drop-shadow(0 -5px 12px rgba(0,0,0,.16));
}
.carpeta:first-child{margin-top:0}
.carpeta img{width:100%;height:auto;display:block}

.carpeta:hover,
.carpeta:focus-visible{
  transform:translateY(-22px);
  filter:drop-shadow(0 -8px 20px rgba(0,0,0,.24));
}
.carpeta.abierta{transform:translateY(-32px)}
.carpeta:focus-visible{outline:2px solid var(--negro);outline-offset:-2px}

/* el rótulo va dentro de la pestaña de cada carpeta.
   Cada una tiene su tamaño de pestaña, escrito en la propia página. */
.etiqueta-carpeta{
  position:absolute;top:0;left:0;
  width:var(--pest-ancho);height:var(--pest-alto);
  display:flex;align-items:center;justify-content:center;
  padding:0 4%;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(12px,1.35vw,18px);line-height:1.2;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--rotulo);text-align:center;
  transform:translateX(var(--pest-x,0));
  z-index:1;
}
.etiqueta-carpeta.fuerte{
  font-weight:700;
  text-shadow:0 1px 3px rgba(96,50,62,.45);
}
.etiqueta-carpeta.fuerte b{
  font-weight:700;
  padding:.32em .85em;
  border-radius:999px;
  background:rgba(163,104,120,.42);
  backdrop-filter:blur(1px);
}
@media(max-width:760px){
  /* la pestaña es proporcionalmente más pequeña: hay que entrar más
     y la pastilla necesita más cuerpo para que el blanco se lea */
  .carpeta:first-child{--pest-x:34% !important}
  .etiqueta-carpeta.fuerte b{
    background:rgba(150,88,105,.66);
    padding:.3em .7em;
  }
}

@media (max-width:760px){
  .carpetas{max-width:none;padding-top:34px}
  .carpeta{margin-top:-56%}
  .etiqueta-carpeta{font-size:11px;letter-spacing:.03em}
}

/* ---------- la hoja que sale ---------- */
.hoja{
  overflow:hidden;max-height:0;
  transition:max-height .7s cubic-bezier(.3,.7,.2,1);
}
.hoja.desplegada{max-height:900px}

.hoja-dentro{
  background:#fdfcfa;border:1px solid var(--gris-claro);
  padding:56px 62px;margin-top:44px;
  box-shadow:0 18px 44px rgba(0,0,0,.07);
  display:grid;grid-template-columns:1fr 1fr;gap:52px;
  opacity:0;transform:translateY(-26px);
  transition:opacity .6s ease .12s,transform .7s cubic-bezier(.3,.7,.2,1) .12s;
}
.hoja.desplegada .hoja-dentro{opacity:1;transform:none}

.hoja h2{font-size:clamp(26px,2.6vw,36px);font-weight:400;margin-bottom:18px}
.hoja .sumario{font-size:17px;line-height:1.6;font-style:italic;color:#3a3a38}
.hoja h3{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-family:'Open Sans',sans-serif;color:var(--gris);margin-bottom:16px;
}
.hoja ul{list-style:none}
.hoja li{
  font-size:16px;line-height:1.5;padding:11px 0 11px 22px;position:relative;
  border-bottom:1px solid #eceae6;
}
.hoja li:last-child{border-bottom:0}
.hoja li::before{content:'—';position:absolute;left:0;color:var(--gris)}

.cerrar-hoja{
  background:none;border:0;cursor:pointer;font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  margin-top:30px;padding:0;
}
.cerrar-hoja:hover{color:var(--negro)}

/* ---------- el bloque del presupuesto ---------- */
.presupuesto{
  background:var(--negro);color:var(--blanco);
  padding:96px 0;margin-top:110px;
}
.presupuesto .dentro{
  max-width:var(--max);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
}
.presupuesto h2{font-size:clamp(30px,3.4vw,46px);font-weight:400;line-height:1.18}
.presupuesto p{font-size:17px;line-height:1.65;margin-bottom:20px;color:rgba(255,255,255,.86)}
.presupuesto .boton{border-color:#fff;color:#fff;margin-top:14px}
.presupuesto .boton::before{background:#fff}
@media (hover:hover){ .presupuesto .boton:hover{color:var(--negro)} }
@media (hover:none){ .presupuesto .boton:active{color:var(--negro)} }

@media (max-width:1000px){
  .intro-servicios{grid-template-columns:1fr;gap:34px;padding:20px 0 0}
  .intro-servicios .foto{order:2}
  .intro-servicios .foto img{max-height:46vh}
  .intro-servicios .foto{margin-bottom:-18px}
  .carpetas{grid-template-columns:repeat(3,1fr);gap:34px 22px;padding-top:50px}
  .hoja-dentro{grid-template-columns:1fr;gap:30px;padding:40px 30px;margin-top:32px}
  .presupuesto .dentro{grid-template-columns:1fr;gap:34px}
  .presupuesto{padding:70px 0;margin-top:80px}
}

@media (max-width:620px){
  .carpetas{grid-template-columns:1fr 1fr;gap:26px 16px}
  .carpeta .nombre{font-size:17px}
  .dibujo .indice{font-size:24px}
}

/* ============================================
   CADA CARPETA ABRE UN DOCUMENTO DISTINTO
   ============================================ */

.hoja.desplegada{max-height:1600px}

/* la hoja "en blanco" para los documentos a medida */
.hoja-doc{
  background:#fdfcfa;border:1px solid var(--gris-claro);
  padding:52px 58px;margin-top:44px;
  box-shadow:0 18px 44px rgba(0,0,0,.07);
  opacity:0;transform:translateY(-26px);
  transition:opacity .6s ease .12s,transform .7s cubic-bezier(.3,.7,.2,1) .12s;
}
.hoja.desplegada .hoja-doc{opacity:1;transform:none}

/* cabecera común de los documentos */
.doc-cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  border-bottom:2px solid var(--negro);padding-bottom:14px;margin-bottom:34px;
}
.doc-cabecera .rotulo{
  font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  margin-bottom:6px;
}
.doc-cabecera h2{font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1.1}
.doc-cabecera .sello{
  font-family:'Open Sans',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);text-align:right;line-height:1.9;
}

/* ---------- 01 · hoja de briefing ---------- */
.briefing{display:grid;grid-template-columns:1fr 1fr;gap:14px 46px}
.campo{border-bottom:1px dashed #cfccc6;padding:16px 0 12px}
.campo .pregunta{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px;
}
.campo .respuesta{font-size:16px;line-height:1.5}
.campo.ancho{grid-column:span 2}

.briefing-pie{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--gris-claro);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.briefing-pie p{font-size:15px;line-height:1.6;font-style:italic;color:#4a4a48;max-width:540px}

/* pasar de un documento a otro sin volver a las carpetas */
.nav-hojas{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 2px 0;flex-shrink:0;
}
.nav-hojas .pasar{
  background:none;border:0;cursor:pointer;padding:6px 2px;
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.7);
  transition:color .3s ease;
}
.nav-hojas .pasar:hover,.nav-hojas .pasar:focus-visible{color:#fff}
.nav-hojas .flecha-doc{font-size:15px;line-height:1;transition:transform .3s ease}
.nav-hojas .siguiente:hover .flecha-doc{transform:translateX(5px)}
.nav-hojas .anterior:hover .flecha-doc{transform:translateX(-5px)}
.nav-hojas .texto{display:flex;flex-direction:column;gap:3px;text-align:left}
.nav-hojas .siguiente .texto{text-align:right}
.nav-hojas .pasar i{
  font-style:normal;font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.nav-hojas .pasar b{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:14px;letter-spacing:0;line-height:1.2;
}
.marco.cambiando .hoja-doc{opacity:0}

@media(max-width:620px){
  .nav-hojas .pasar b{font-size:12px}
  .nav-hojas{gap:12px}
}

/* ---------- mi kit de trabajo ---------- */
.kit{max-width:1000px;margin:0 auto;padding:78px 20px 0;text-align:center}
.kit .rotulo{
  font-family:'Open Sans',sans-serif;font-weight:400;
  font-size:clamp(9px,.72vw,11px);letter-spacing:.3em;text-transform:uppercase;
  color:#9b9892;margin-bottom:38px;
}
.kit ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(30px,6vw,78px);flex-wrap:wrap;
}
.kit li{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:150px}
.icono-kit{height:34px;display:flex;align-items:center;justify-content:center}
.icono-kit img{
  height:34px;width:auto;max-width:112px;object-fit:contain;display:block;
}
.icono-kit svg{
  width:30px;height:30px;display:block;
  fill:none;stroke:#14120f;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.icono-kit text{
  font-family:'Playfair Display',Georgia,serif;font-size:11px;
  fill:#14120f;stroke:none;letter-spacing:-.02em;
}
.icono-kit text.script{font-style:italic;font-size:13px}
.kit .nombre{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(14px,1.5vw,20px);line-height:1.25;letter-spacing:-.005em;color:#14120f;
}
.kit .que{
  font-family:'Open Sans',sans-serif;font-weight:400;
  font-size:clamp(8px,.66vw,10px);letter-spacing:.24em;text-transform:uppercase;
  color:#9b9892;
}
@media(max-width:700px){
  .kit{padding-top:56px}
  .kit ul{gap:26px 22px}
  .kit li{max-width:110px}
  .kit .que{display:none}
}

/* ---------- 01 · expediente de estrategia ---------- */
.doc-expediente{background:#fdfcf8;padding:64px 70px 48px}
.expediente-cabecera{align-items:flex-start;border-bottom-width:1px;padding-bottom:20px;margin-bottom:0}
.expediente-cabecera h2{font-size:clamp(26px,3vw,40px);line-height:1.22}
.expediente-cabecera{align-items:center}
.doc-cabecera .marca-doc{width:92px;height:auto;opacity:.75;flex-shrink:0;align-self:center}

.expediente-entrada{
  max-width:62ch;margin:30px 0 52px;
  font-size:16px;line-height:1.75;color:#3d3b37;
}

.expediente{
  display:grid;grid-template-columns:1fr 1fr;
  gap:46px 64px;
  padding-top:44px;border-top:1px solid #e3e0d9;
}
.punto.ancho{grid-column:span 2;max-width:62ch}
.punto .indice{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#8d8a83;margin-bottom:14px;
}
.punto .cuestion{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(18px,1.7vw,22px);line-height:1.35;font-weight:400;
  margin-bottom:12px;
}
.punto .apunte{font-size:14.5px;line-height:1.7;color:#6b6862;max-width:46ch}

.expediente-salida{
  margin-top:64px;padding-top:34px;border-top:1px solid var(--negro);
  max-width:66ch;
}
.expediente-salida .indice{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--negro);margin-bottom:16px;
}
.expediente-salida .sintesis{font-size:16px;line-height:1.75;color:#3d3b37}
.expediente-salida .nota{
  margin-top:26px;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#1a1714;
}

.expediente-pie{
  margin-top:56px;padding-top:20px;border-top:1px solid #e3e0d9;
  display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap;
}
.cta-doc{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#6b6862;border-bottom:1px solid transparent;padding-bottom:3px;
  transition:color .3s ease,border-color .3s ease;
}
.cta-doc span{display:inline-block;transition:transform .3s ease;margin-left:4px}
.cta-doc:hover{color:var(--negro);border-bottom-color:var(--negro)}
.cta-doc:hover span{transform:translateX(5px)}

@media(max-width:760px){
  .doc-expediente{padding:38px 26px 32px}
  .expediente{grid-template-columns:1fr;gap:34px;padding-top:32px}
  .punto.ancho{grid-column:span 1}
  .expediente-entrada{margin:24px 0 36px}
  .expediente-salida{margin-top:44px}
}

/* ---------- 04 · portada editorial ----------
   Sigue el registro de las portadas de Almu: fondo negro, la palabra
   repetida en cascada en serif blanco y la figura por delante. */
.doc-portada{padding:30px 0 0;background:#0b0b0a;border-color:#0b0b0a;overflow:hidden}

.cartel-ed{
  position:relative;
  /* formato portada: vertical de verdad, centrada dentro del documento */
  aspect-ratio:2/3;height:min(72vh,800px);width:auto;max-width:100%;
  margin:0 auto;
  overflow:hidden;container-type:inline-size;
  background:#0b0b0a;color:#fff;
}

/* filete superior con el kicker, como en la portada */
.filete-ed{
  position:absolute;z-index:5;top:9%;left:0;right:0;
  display:flex;align-items:center;
}
.filete-ed::before,.filete-ed::after{content:'';height:1px;background:rgba(255,255,255,.55);flex:1}
.filete-ed::before{flex:0 0 7%}
.filete-ed .kicker{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(11px,1.9cqw,19px);letter-spacing:.06em;text-transform:uppercase;
  padding:0 16px;white-space:nowrap;
}
.fecha-ed{
  position:absolute;z-index:5;top:13.5%;left:5%;
  transform-origin:top left;transform:rotate(-90deg) translateX(-100%);
  font-family:'Open Sans',sans-serif;
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);
}

/* --- la cascada de la palabra --- */
.cascada{position:absolute;z-index:1;inset:12% 0 0 0}
.cascada .eco{
  position:absolute;white-space:nowrap;display:block;
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:15.5cqw;line-height:.86;letter-spacing:-.005em;
  color:rgba(255,255,255,.12);
}
.cascada .e1{top:0;    left:16%}
.cascada .e2{top:11.5%;left:21%}
.cascada .e3{top:23%;  left:27%}
.cascada .e4{top:34.5%;left:24%}
.cascada .e5{top:46%;  left:19%}
.cascada .e6{top:57.5%;left:13%}

/* --- la figura, por encima de la tipografía --- */
.figura-cartel{
  position:absolute;z-index:2;margin:0;
  /* desplazada a la derecha para dejar libre la columna de los coverlines */
  right:-2%;left:auto;transform:none;
  top:17%;bottom:0;width:62%;
}
.figura-cartel img{
  width:100%;height:100%;object-fit:contain;object-position:bottom;
  display:block;filter:grayscale(100%) contrast(1.1);
}

/* --- rótulos --- */
.cartel-ed .esquina-ai{
  position:absolute;z-index:5;top:22px;left:22px;
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.cabecera-ed{
  position:absolute;z-index:5;top:20px;right:22px;text-align:right;
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.9);line-height:2;
}
.cabecera-ed span{color:rgba(255,255,255,.45)}
.cartel-ed .marca-ed{position:absolute;z-index:5;bottom:22px;right:22px;width:54px;opacity:.6}

/* los coverlines, sueltos sobre la composición */
.cartel-ed .coverline{
  position:absolute;z-index:5;max-width:clamp(120px,27cqw,210px);
  font-family:'Open Sans',sans-serif;
  font-size:9.5px;line-height:1.75;letter-spacing:.04em;color:rgba(255,255,255,.62);
}
.cartel-ed .coverline b{
  display:block;font-weight:400;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:3px;
}
.cartel-ed .coverline.c-a{top:27%;left:22px}
.cartel-ed .coverline.c-b{top:41%;left:22px}
.cartel-ed .coverline.c-c{top:55%;left:22px}
.cartel-ed .coverline.c-d{top:69%;left:22px}

/* el titular, abajo y siempre legible */
.titular-cartel{
  position:absolute;z-index:6;left:22px;right:22px;bottom:22px;
  max-width:clamp(250px,46cqw,460px);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.45);
}
.titular-cartel h2{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(22px,4cqw,38px);line-height:1.08;color:#fff;margin-bottom:10px;
}
.titular-cartel p{
  font-family:'Open Sans',sans-serif;
  font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.66);
}

/* --- pie, ya fuera de la portada --- */
.pie-ed{
  padding:20px 0 26px;margin:26px auto 0;background:#0b0b0a;
  border-top:1px solid rgba(255,255,255,.35);
  width:min(calc(72vh * 2 / 3), 100%);max-width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.pie-ed .flujo{
  font-family:'Open Sans',sans-serif;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.pie-ed .flujo i{font-style:normal;margin:0 3px;color:rgba(255,255,255,.25)}
.pie-ed .nota{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);max-width:52ch;text-align:left;
}

@media(max-width:860px){
  .cartel-ed{aspect-ratio:2/3;height:auto;width:100%}
  .pie-ed{width:100%;padding:18px 0 22px}
  .cascada .eco{font-size:21cqw}
  .figura-cartel{width:76%;top:22%;right:-4%}
  .cartel-ed .coverline{display:none}
  .cartel-ed .esquina-ai{top:18px;left:18px}
  .cabecera-ed{top:16px;right:18px}
  .titular-cartel{left:18px;right:18px;max-width:none}
  .cartel-ed .marca-ed{display:none}
  .pie-ed{padding:18px;flex-direction:column;gap:12px}
  .pie-ed .nota{text-align:left}
}

/* ---------- 03 · calendario editorial ---------- */
/* este documento va algo más compacto para caber sin scroll en escritorio */
.doc-redes{padding:44px 52px 36px}
.doc-redes .expediente-entrada{margin:20px 0 26px;font-size:15px}

.resumen-mes{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  padding:18px 0;border-top:1px solid #e3e0d9;border-bottom:1px solid #e3e0d9;
  margin-bottom:26px;
}
.resumen-mes .indice{
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#a5a29c;margin-bottom:7px;
}
.resumen-mes .valor{
  font-family:'Playfair Display',Georgia,serif;
  font-size:14.5px;line-height:1.35;color:#1a1714;
}

.doc-redes .calendario-cabecera{margin-bottom:12px}
.calendario-cabecera .canales-mes{margin-left:auto;display:flex;gap:9px}
.calendario-cabecera .canales-mes i{
  font-family:'Open Sans',sans-serif;font-style:normal;
  font-size:8.5px;letter-spacing:.1em;color:#a5a29c;
  border:1px solid #e0ddd6;border-radius:2px;padding:2px 5px;
}

/* las piezas del calendario: canal, pilar y estado */
.doc-redes .dia{min-height:66px;padding:6px 6px 7px;gap:4px}
.doc-redes .numero-dia{font-size:10px}
.pieza-cal b{
  display:block;font-family:'Open Sans',sans-serif;font-weight:400;
  font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(0,0,0,.52);margin-bottom:2px;
}
.doc-redes .pieza-cal{
  font-family:'Playfair Display',Georgia,serif;
  font-size:10px;letter-spacing:0;text-transform:none;line-height:1.3;
  padding:5px 6px;
}
.pieza-cal .estado{
  display:block;margin-top:4px;
  font-family:'Open Sans',sans-serif;font-style:normal;
  font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.45);
}
.pieza-cal .estado::before{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  margin-right:4px;vertical-align:1px;background:currentColor;
}
.pieza-cal .estado.aprobado::before{background:#7d9b7d}
.pieza-cal .estado.revision::before{background:#c98b90}
.pieza-cal .estado.programado::before{background:#9aa9b4}

/* el color dice el pilar de contenido, no el formato */
.pieza-cal.producto{background:#f0d5d5}
.pieza-cal.educacion{background:#dfe6ea}
.pieza-cal.editorial{background:#e8e4d8}
.pieza-cal.comunidad{background:#dcd9d6}

.leyenda.pilares{margin-top:16px;gap:24px;font-size:9.5px}
.leyenda.pilares i.producto{background:#f0d5d5}
.leyenda.pilares i.educacion{background:#dfe6ea}
.leyenda.pilares i.editorial{background:#e8e4d8}
.leyenda.pilares i.comunidad{background:#dcd9d6}

.doc-redes .expediente-salida{margin-top:28px;padding-top:22px}
.doc-redes .expediente-salida .nota{margin-top:12px;font-size:16px}
.doc-redes .expediente-salida .flujo{margin-top:18px}

@media(max-width:760px){
  .doc-redes{padding:34px 22px 28px}
  .resumen-mes{grid-template-columns:1fr 1fr;gap:18px}
}

/* ---------- 03 · calendario ---------- */
.calendario-cabecera{
  display:flex;align-items:baseline;gap:16px;margin-bottom:18px;
}
.calendario-cabecera .mes{font-size:26px}
.calendario-cabecera .anio{font-size:15px;color:var(--gris)}

.calendario{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:1px;background:var(--gris-claro);border:1px solid var(--gris-claro);
}
.calendario .dia-semana{
  background:#f6f4f1;padding:9px 6px;text-align:center;
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
}
.calendario .dia{
  background:#fdfcfa;min-height:86px;padding:8px 8px 10px;
  display:flex;flex-direction:column;gap:5px;
}
.calendario .dia.vacio{background:#faf9f7}
.calendario .numero-dia{font-size:12px;color:var(--gris)}

.pieza-cal{
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 6px;border-radius:2px;line-height:1.3;
  background:#e9e6e1;color:#3a3a38;
}
.pieza-cal.reel{background:#f0d5d5}
.pieza-cal.carrusel{background:#dfe6ea}
.pieza-cal.story{background:#e8e4d8}
.pieza-cal.tiktok{background:#dcd9d6}

.leyenda{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:20px;
  font-family:'Open Sans',sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gris);
}
.leyenda span{display:flex;align-items:center;gap:7px}
.leyenda i{width:11px;height:11px;border-radius:2px;display:block}

@media (max-width:1000px){
  .hoja-doc{padding:34px 26px;margin-top:32px}
  .briefing{grid-template-columns:1fr;gap:0}
  .campo.ancho{grid-column:span 1}
  .calendario .dia{min-height:64px;padding:6px 5px 8px}
  .pieza-cal{font-size:8px;padding:3px 4px}
}

@media (max-width:620px){
  /* en móvil el calendario se lee mejor en lista que en cuadrícula */
  .calendario{grid-template-columns:1fr;gap:0;border:0;background:none}
  .calendario .dia-semana{display:none}
  .calendario .dia{
    min-height:0;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;
    border-bottom:1px solid var(--gris-claro);padding:11px 2px;
  }
  .calendario .dia.vacio{display:none}
  .calendario .numero-dia{flex:0 0 26px;font-size:13px}
  /* en el calendario editorial, en móvil solo listamos los días con contenido */
  .doc-redes .calendario .dia:not(:has(.pieza-cal)){display:none}
  .doc-redes .calendario .dia{align-items:flex-start;min-height:0}
  .doc-redes .pieza-cal{flex:1;font-size:13px}
  .doc-redes .pieza-cal b{font-size:8.5px}
  .doc-redes .numero-dia{padding-top:3px}
}

/* ============================================
   LA HOJA SALE DE LA CARPETA (ventana flotante)
   ============================================ */

.documentos{display:none}          /* los documentos viven aquí hasta que se abren */

.escritorio{
  position:fixed;inset:0;z-index:210;
  background:rgba(18,17,15,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:52px 40px;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.escritorio.abierto{opacity:1;visibility:visible}

.marco:has(.doc-portada){width:auto}
.marco{
  position:relative;
  width:min(1020px,100%);max-height:100%;
  display:flex;flex-direction:column;
  /* de dónde sale: lo calcula el navegador al pinchar la carpeta */
  transform:translate(var(--dx,0px), var(--dy,140px)) scale(var(--esc,.28));
  opacity:0;
  transition:transform .72s cubic-bezier(.22,.72,.24,1), opacity .4s ease;
}
.escritorio.abierto .marco{transform:none;opacity:1}

.marco .hoja-doc{
  margin:0;overflow-y:auto;
  transition:opacity .2s ease;
  opacity:1;transform:none;            /* la animación la lleva el marco */
  max-height:calc(100vh - 150px);
}

.cerrar-escritorio{
  position:absolute;top:-42px;right:0;
  background:none;border:0;cursor:pointer;color:#fff;
  font-family:'Open Sans',sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 2px;opacity:.8;
}
.cerrar-escritorio:hover{opacity:1}

@media (max-width:1000px){
  .escritorio{padding:44px 16px 20px}
  .marco .hoja-doc{max-height:calc(100vh - 80px)}
  .cerrar-escritorio{top:-34px}
}

/* ============================================
   02 · LÍNEA DE TIEMPO DE EDITOR
   ============================================ */
.editor{border:1px solid var(--gris-claro);background:#f6f5f3}
.editor-barra{
  display:flex;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid var(--gris-claro);background:#eeece9;
}
.editor-barra .bolas{display:flex;gap:6px}
.editor-barra .bolas i{width:9px;height:9px;border-radius:50%;background:#cfccc6;display:block}
.editor-barra .archivo{
  font-family:'Open Sans',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--gris);
}
.editor-barra .tiempo{
  margin-left:auto;font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.1em;color:var(--gris);
}

.regla{
  display:flex;border-bottom:1px solid var(--gris-claro);
  padding-left:96px;background:#f1efec;
}
.regla span{
  flex:1;padding:5px 0 5px 6px;border-left:1px solid #ddd9d3;
  font-family:'Open Sans',sans-serif;font-size:9px;color:#a5a29c;
}

.pista{display:flex;align-items:stretch;border-bottom:1px solid #e6e3de;min-height:58px}
.pista:last-child{border-bottom:0}
.pista .etiqueta{
  flex:0 0 96px;padding:14px 12px;background:#f1efec;
  border-right:1px solid var(--gris-claro);
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
}
.pista .carril{flex:1;display:flex;gap:3px;padding:9px 8px;position:relative}

.clip{
  border-radius:2px;padding:8px 11px;display:flex;align-items:center;
  font-size:12px;line-height:1.25;color:#33322f;
  border:1px solid rgba(0,0,0,.06);
}
.clip.c1{background:#d9cfc4}
.clip.c2{background:#f0d5d5}
.clip.c3{background:#dfe6ea}
.clip.c4{background:#e3e0da}
.clip.c5{background:#ece7dd}

/* la barra de mandos, muy discreta */
.editor-barra .mandos{display:flex;align-items:center;gap:9px}
.editor-barra .mandos svg{
  width:11px;height:11px;fill:none;stroke:#a5a29c;stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;
}
.editor-barra .mandos svg.play{fill:#8d8a83;stroke:none;width:12px;height:12px}

/* el playhead recorre todas las pistas, no solo una */
.editor-pistas{position:relative}
.playhead{
  position:absolute;top:0;bottom:0;left:calc(96px + (100% - 96px) * .42);
  width:1px;background:#c98b90;z-index:3;
}
.playhead::before{
  content:'';position:absolute;top:-1px;left:-4px;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:7px solid #c98b90;
}
/* los clips de audio llevan su ondita */
.clip.onda{
  position:relative;
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.14) 0 1px, transparent 1px 4px);
  background-size:100% 42%;background-position:0 78%;background-repeat:no-repeat;
}

/* ---------- export / adaptations ---------- */
.exportaciones{margin-top:46px;padding-top:30px;border-top:1px solid #e3e0d9}
.export-cabecera{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:26px;
}
.export-cabecera .indice{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--negro);
}
.export-cabecera .master{
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#a5a29c;
}
.export-cabecera .master span{color:#6b6862}

.rejilla-export{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.grupo-export .formato{
  display:flex;align-items:center;gap:9px;
  font-family:'Open Sans',sans-serif;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8d8a83;
  padding-bottom:10px;border-bottom:1px solid #e3e0d9;margin-bottom:14px;
}
.marco-ratio{display:block;border:1px solid #b9b5ad;flex-shrink:0}
.marco-ratio.r916{width:8px;height:14px}
.marco-ratio.r45{width:11px;height:14px}
.marco-ratio.r11{width:13px;height:13px}

.grupo-export ul{list-style:none;margin:0;padding:0}
.grupo-export li{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;color:#3d3b37;
}
.grupo-export .ico-caja{display:flex;color:#6b6862;flex-shrink:0}
.grupo-export .ico{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;
}
.grupo-export .canal{font-size:14px;line-height:1.3}
.grupo-export .ratio{
  margin-left:auto;font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.12em;color:#b0aca4;
}

/* el flujo, muy discreto, al final */
.expediente-salida .flujo{
  margin-top:26px;font-family:'Open Sans',sans-serif;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#a5a29c;
}
.expediente-salida .flujo i{font-style:normal;margin:0 3px;color:#cbc7bf}

@media(max-width:760px){
  .rejilla-export{grid-template-columns:1fr;gap:26px}
  .exportaciones{margin-top:34px}

  /* La timeline no se puede encoger sin dejar de leerse: mantiene su
     tamaño y se desliza en horizontal, como en un editor de verdad. */
  .editor{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .editor > *{min-width:600px}
  .editor::-webkit-scrollbar{height:4px}
  .editor::-webkit-scrollbar-thumb{background:#cfccc6;border-radius:2px}
  .doc-editor .aviso-desliza{display:block}
}

/* pista de que la timeline se desliza; solo aparece en móvil */
.aviso-desliza{
  display:none;margin-top:8px;
  font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#a5a29c;
}

/* el cursor de reproducción */
.cursor{
  position:absolute;top:0;bottom:0;left:38%;width:1px;background:#c0392b;z-index:3;
}
.cursor::before{
  content:'';position:absolute;top:-4px;left:-4px;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:7px solid #c0392b;
}

/* ============================================
   04 · PÁGINA DE REVISTA
   ============================================ */
.revista{background:#fbfaf8;padding:8px 0 0}
.revista .cintillo{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--negro);padding-bottom:8px;margin-bottom:30px;
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
}
.revista h2{
  font-size:clamp(30px,4vw,54px);font-weight:400;line-height:1.06;
  text-align:center;margin-bottom:14px;
}
.revista .entradilla{
  text-align:center;font-style:italic;font-size:18px;line-height:1.5;
  max-width:620px;margin:0 auto 36px;color:#45443f;
}
.revista .columnas{column-count:2;column-gap:44px;column-rule:1px solid #e6e3de;font-size:15.5px;line-height:1.72}
.revista .columnas p{margin-bottom:15px}
.revista .columnas p:first-child::first-letter{
  float:left;font-size:66px;line-height:.82;padding:5px 9px 0 0;font-weight:500;
}
.revista .destacado{
  break-inside:avoid;margin:22px 0;padding:18px 0;
  border-top:1px solid var(--negro);border-bottom:1px solid var(--negro);
  font-size:21px;line-height:1.3;font-style:italic;text-align:center;
}
.revista .folio{
  display:flex;justify-content:space-between;
  margin-top:32px;padding-top:12px;border-top:1px solid var(--gris-claro);
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);
}

/* ============================================
   05 · INFORME DE RESULTADOS
   ============================================ */
/* ---------- 05 · informe mensual ---------- */
.doc-informe{padding:48px 56px 40px}
.doc-informe .expediente-entrada{margin:22px 0 28px;font-size:15px;max-width:74ch}
.doc-informe .resumen-mes{margin-bottom:34px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:40px}
.kpi{border-top:1px solid var(--negro);padding-top:14px}
.kpi .valor{font-size:clamp(30px,3.4vw,44px);line-height:1}
.kpi .nombre{
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-top:8px;
}
.kpi .cambio{font-size:13px;color:#4a4a48;margin-top:6px}
.kpi .cambio.sube-dato{
  font-family:'Open Sans',sans-serif;font-size:10.5px;letter-spacing:.06em;color:#6b6862;
}
.kpi .cambio.sube-dato::before{content:'\2191';margin-right:5px;color:#7d9b7d}

.grafica-cabecera{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px;
}
.grafica-cabecera .titulo-grafica{margin-bottom:0}
.grafica-cabecera .anotacion{
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#b08d90;
}

/* lo que mejor funcionó */
.mejores{margin-bottom:40px}
.rejilla-mejores{gap:34px}
.mejores .indice,
.lectura .indice{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8d8a83;margin-bottom:14px;
}
.rejilla-mejores{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rejilla-mejores figure{margin:0}
.rejilla-mejores figure{border-top:1px solid var(--negro);padding-top:12px}
.rejilla-mejores figcaption{padding-top:0}
.rejilla-mejores .ref{
  display:block;font-family:'Open Sans',sans-serif;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8d8a83;margin-bottom:5px;
}
.rejilla-mejores .que{
  display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:17px;line-height:1.3;color:#1a1714;
}
.rejilla-mejores .dato{
  display:block;margin-top:7px;font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.06em;color:#6b6862;
}

/* la tercera columna: los ajustes del mes siguiente */
.lectura.tres{grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.lectura h3{
  font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:17px;line-height:1.3;margin-bottom:12px;
}
.lectura.tres p{font-size:14px;line-height:1.7;color:#5c5952}
.ajustes ul{list-style:none;margin:0;padding:0}
.ajustes li{
  display:flex;gap:9px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid #eae7e1;
  font-size:13.5px;line-height:1.45;color:#3d3b37;
}
.ajustes li:last-child{border-bottom:0}
.ajustes li i{font-style:normal;font-size:12px;width:11px;flex-shrink:0}
.ajustes li.mas i{color:#7d9b7d}
.ajustes li.igual i{color:#9aa9b4}
.ajustes li.menos i{color:#c98b90}

.doc-informe .expediente-salida{margin-top:44px;padding-top:26px}
.doc-informe .expediente-salida .nota{margin-top:12px}

@media(max-width:860px){
  .doc-informe{padding:34px 22px 30px}
  .kpis{grid-template-columns:1fr 1fr;gap:20px}
  .rejilla-mejores{grid-template-columns:1fr;gap:20px}
  .lectura.tres{grid-template-columns:1fr;gap:26px}
}

.grafica{margin-bottom:34px}
.grafica .titulo-grafica{
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:18px;
}
.barras{display:flex;align-items:flex-end;gap:14px;height:132px;border-bottom:1px solid var(--negro);padding-bottom:0}
.barras .barra{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.barras .relleno{
  width:100%;background:#d9cfc4;border-radius:2px 2px 0 0;
  transition:height .9s cubic-bezier(.2,.7,.2,1);
}
.barras .barra:last-child .relleno{background:#f0d5d5}
.barras .cifra-barra{font-size:12px;color:#5c5c5a;margin-bottom:6px}
.meses{display:flex;gap:14px;margin-top:9px}
.meses span{
  flex:1;text-align:center;
  font-family:'Open Sans',sans-serif;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
}

.lectura{display:grid;grid-template-columns:1fr 1fr;gap:34px;font-size:15px;line-height:1.65}

@media (max-width:1000px){
  .pista .etiqueta{flex:0 0 68px;padding:10px 8px;font-size:8px}
  .regla{padding-left:68px}
  .clip{font-size:10px;padding:6px 7px}
  .revista .columnas{column-count:1}
  .kpis{grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}
  .lectura{grid-template-columns:1fr;gap:22px}
  .barras{height:104px;gap:8px}
  .meses{gap:8px}
}

/* ============================================
   MANIFIESTO — pantalla negra, una sola vista
   ============================================ */

body.negro{
  background:var(--negro);
  /* así el manifiesto ocupa justo lo que queda libre y el pie
     cae dentro de la primera pantalla: se ve todo sin bajar */
  min-height:100vh;display:flex;flex-direction:column;
}
body.negro > .manifiesto{flex:1}

.manifiesto{
  position:relative;min-height:0;
  background:var(--negro);color:var(--blanco);
  display:flex;flex-direction:column;justify-content:center;
  padding:104px 40px 48px;overflow:hidden;
}

/* la silueta, detrás de todo */
.silueta{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-48%);
  height:82vh;width:auto;z-index:0;
  opacity:.17;filter:grayscale(100%) contrast(1.15);
  pointer-events:none;user-select:none;
}

.manifiesto > *{position:relative;z-index:2}
/* la silueta es la excepción: va detrás y fuera del flujo */
.manifiesto > .silueta{position:absolute;z-index:0}

/* ---------- la frase en ola ---------- */
.ola{width:100%;max-width:1180px;margin:0 auto 8px;display:block}
.ola text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:52px;fill:#fff;
}
.ola .curva{font-style:italic}

/* la ola se mece muy despacio */
@keyframes mecer{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-9px)}
}
.ola{animation:mecer 9s ease-in-out infinite}

.antetitulo{
  text-align:center;
  font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:26px;
}

/* ---------- los cinco principios ---------- */
.principios{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;max-width:1180px;margin:48px auto 0;
}
.principio{
  padding:0 32px;border-left:1px solid rgba(255,255,255,.22);
}
.principio:first-child{border-left:0;padding-left:0}
.principio:last-child{padding-right:0}

.principio .num{
  font-family:'Bodoni Moda',Didot,serif;
  font-size:52px;line-height:1;color:rgba(255,255,255,.34);
  margin-bottom:18px;display:block;
}
.principio h3{
  font-size:24px;font-weight:400;line-height:1.22;margin-bottom:16px;
}
.principio p{
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);
}

/* aparecen una detrás de otra al cargar */
.principio{opacity:0;transform:translateY(24px);animation:entrar .9s cubic-bezier(.2,.7,.2,1) forwards}
.principio:nth-child(1){animation-delay:.35s}
.principio:nth-child(2){animation-delay:.5s}
.principio:nth-child(3){animation-delay:.65s}
.principio:nth-child(4){animation-delay:.8s}
@keyframes entrar{to{opacity:1;transform:none}}

/* ---------- cierre ---------- */
.firma-manifiesto{
  text-align:center;margin-top:42px;
  font-size:15px;color:rgba(255,255,255,.5);
}
.firma-manifiesto a{
  color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
  transition:border-color .3s ease;
}
.firma-manifiesto a:hover{border-color:#fff}

/* la cabecera, sobre negro */
body.negro .nav .logo img{filter:invert(1)}
body.negro .nav-links{color:#fff}
body.negro .nav.solida{background:rgba(13,13,13,.9);box-shadow:0 1px 0 rgba(255,255,255,.12)}
body.negro .burger span{background:#fff}

@media (max-width:1000px){
  .manifiesto{padding:100px 24px 50px;min-height:auto}
  .ola text{font-size:66px}
  .principios{grid-template-columns:repeat(2,1fr);gap:40px 0;margin-top:44px}
  .principio{padding:0 20px}
  .principio:first-child{padding-left:20px;border-left:1px solid rgba(255,255,255,.22)}
  .principio:nth-child(odd){border-left:0;padding-left:0}
  .silueta{height:60vh;opacity:.12}
}

@media (max-width:620px){
  .principios{grid-template-columns:1fr;gap:30px}
  .principio{padding:0 0 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:22px}
  .principio:first-child{border-left:0;border-top:0;padding-top:0}
  .principio .num{font-size:34px;margin-bottom:12px}
  .ola text{font-size:84px}
}

/* ============================================
   PÁGINA DE CONTACTO
   ============================================ */

.contacto{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}

/* ---------- el lado del teléfono ---------- */
.contacto .lado-foto{
  background:var(--hueso);
  display:flex;align-items:center;justify-content:center;
  padding:130px 50px 90px;overflow:hidden;
}

.contacto .telefono{
  width:min(420px,90%);height:auto;
  filter:grayscale(100%) contrast(1.05)
         drop-shadow(0 26px 34px rgba(0,0,0,.16));
  /* entra desde la izquierda, se posa y suena una vez */
  animation:posar 1.25s cubic-bezier(.18,.82,.24,1) both,
            sonar  .55s ease-in-out 1.85s 2;
}

/* la variante del auricular colgando: manda el alto, no el ancho */
.contacto .lado-foto:has(.colgado){padding:0 40px 70px;align-items:flex-start}
.contacto .lado-foto:has(.colgado){overflow:visible}
/* La foto va partida en dos: el auricular colgando y la base.
   Solo se mueve el auricular; la base no se toca. */
.contacto .telefono.colgado{
  position:relative;
  width:min(430px,92%);max-width:100%;
  aspect-ratio:616/1400;          /* la proporción del original */
  margin-right:clamp(40px,7vw,100px);
  filter:grayscale(100%) contrast(1.05);
  animation:posar-colgado 1.35s cubic-bezier(.18,.82,.24,1) both;
}
.contacto .telefono.colgado img{position:absolute;display:block}

/* el auricular: cuelga del cable, así que pivota desde arriba */
.contacto .telefono .auricular{
  left:53.41%;top:0;width:32.79%;height:61.43%;
  transform-origin:50% 0;
  animation:balanceo 3.8s ease-in-out 1.9s infinite;
}
/* la base, quieta en su sitio */
.contacto .telefono .base-tel{
  left:0;top:73.43%;width:100%;height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.08));
}

@keyframes posar-colgado{
  from{opacity:0;transform:translateX(-110px)}
  to  {opacity:1;transform:none}
}
/* se mece muy poco, como un auricular que acaba de quedarse colgando */
@keyframes balanceo{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}
}
@media (prefers-reduced-motion:reduce){
  .contacto .telefono.colgado,
  .contacto .telefono .auricular{animation:none}
}

@keyframes posar{
  from{opacity:0;transform:translateX(-90px) rotate(-7deg) scale(.94)}
  to  {opacity:1;transform:none}
}

/* un temblorcito, como cuando suena de verdad */
@keyframes sonar{
  0%,100%{transform:none}
  20%    {transform:translateX(-2.5px) rotate(-.7deg)}
  45%    {transform:translateX(2.5px)  rotate(.7deg)}
  70%    {transform:translateX(-1.5px) rotate(-.35deg)}
}

@media (prefers-reduced-motion:reduce){
  .contacto .telefono{animation:none}
}

/* ---------- el lado del formulario ---------- */
.contacto .lado-form{
  background:var(--blanco);
  display:flex;flex-direction:column;justify-content:center;
  padding:130px 76px 90px;
}
.contacto h1{
  font-size:clamp(36px,4vw,56px);font-weight:400;line-height:1.1;margin-bottom:18px;
}
.contacto .bajada{
  font-size:17px;line-height:1.6;color:#4a4a48;max-width:440px;margin-bottom:46px;
}

/* ---------- el formulario ---------- */
form{width:100%;max-width:520px}
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:26px}

.campo-form{position:relative;margin-bottom:30px}
.campo-form label{
  display:block;
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:9px;
}
.campo-form input,
.campo-form textarea,
.campo-form select{
  width:100%;border:0;border-bottom:1px solid var(--gris-claro);
  background:none;padding:8px 0 11px;
  font-family:'Playfair Display',Georgia,serif;font-size:17px;color:var(--negro);
  transition:border-color .35s ease;
}
.campo-form textarea{resize:vertical;min-height:96px;line-height:1.55}
/* mientras no se elige nada, el selector se ve como una indicación */
.campo-form select:invalid{color:var(--gris)}
.campo-form input:focus,
.campo-form textarea:focus,
.campo-form select:focus{outline:0;border-bottom-color:var(--negro)}
.campo-form input::placeholder,
.campo-form textarea::placeholder{color:#b8b5af}

/* la trampa para robots: invisible para las personas */
.trampa{position:absolute;left:-9999px;opacity:0;pointer-events:none}

form .boton{border:1px solid var(--negro);color:var(--negro);cursor:pointer;background:none;margin-top:6px;-webkit-appearance:none;appearance:none}

.aviso{font-size:12.5px;line-height:1.55;color:var(--gris);margin-top:24px;max-width:440px}

/* mensajes de resultado */
.resultado{
  max-width:520px;
  padding:18px 22px;margin-bottom:32px;font-size:15.5px;line-height:1.55;
  border-left:2px solid var(--negro);background:var(--hueso);
}
.resultado.mal{border-left-color:#a33;background:#f7efee}

/* ---------- la banda de abajo ---------- */
.otras-vias{
  background:var(--negro);color:var(--blanco);
  padding:64px 40px;
}
.otras-vias .dentro{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
}
.via .que{
  font-family:'Open Sans',sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:12px;
}
.via .dato{font-size:20px;line-height:1.4}
.via .dato a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .3s ease}
.via .dato a:hover{border-color:#fff}
.via .nota{font-size:14px;color:rgba(255,255,255,.6);margin-top:8px}

@media (max-width:1000px){
  .contacto{grid-template-columns:1fr}
  .contacto .lado-foto{padding:110px 30px 50px}
  .contacto .telefono{width:min(330px,74%)}
  .contacto .telefono.colgado{width:min(300px,78%);margin-right:clamp(16px,6vw,48px)}
  .contacto .lado-form{padding:56px 26px 72px}
  .otras-vias{padding:52px 26px}
  .otras-vias .dentro{grid-template-columns:1fr;gap:32px}
}

@media (max-width:620px){
  .pareja{grid-template-columns:1fr;gap:0}
  .contacto .telefono{width:min(280px,82%)}
  .contacto .telefono.colgado{width:min(250px,76%)}
}

/* ============================================
   CON QUIÉN HE TRABAJADO (home)
   ============================================ */

.clientes{
  background:#f6f4f1;
  padding:52px 0 58px;
}
.clientes .dentro{max-width:1320px;margin:0 auto;padding:0 40px}

/* el rótulo, centrado arriba */
.clientes .rotulo{
  text-align:center;
  font-family:'Open Sans',sans-serif;
  font-weight:400;
  font-size:clamp(9px,.72vw,11px);letter-spacing:.3em;text-transform:uppercase;
  color:#9b9892;
  margin-bottom:34px;
}

/* dos filas: los nombres arriba, las descripciones debajo,
   repartidos a lo ancho y cada uno centrado en su columna */
.clientes ul{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  row-gap:12px;
}
.clientes li{display:contents}
.clientes .nombre,
.clientes .que,
.clientes .labor,
.clientes .logro{text-align:center}

.clientes .nombre{
  grid-row:1;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  /* en una sola línea, como en el diseño: el tamaño se ajusta
     solo para que el nombre más largo nunca parta */
  white-space:nowrap;
  font-size:clamp(14px,1.5vw,21px);line-height:1.25;
  letter-spacing:-.005em;color:#14120f;
}
.clientes .que{
  grid-row:2;
  font-family:'Open Sans',sans-serif;
  font-weight:400;
  font-size:clamp(8px,.66vw,10px);letter-spacing:.24em;text-transform:uppercase;
  color:#9b9892;white-space:nowrap;
}

/* qué hice para cada marca, y el resultado, más discreto */
.clientes .labor{
  grid-row:3;
  max-width:30ch;margin:16px auto 0;
  font-size:clamp(13px,.95vw,15px);line-height:1.6;color:#4a4744;text-align:center;
}
.clientes .logro{
  grid-row:4;
  max-width:30ch;margin:10px auto 0;
  font-family:'Open Sans',sans-serif;
  font-size:clamp(10px,.72vw,11.5px);letter-spacing:.04em;line-height:1.5;
  color:#8e8b85;text-align:center;
}
.clientes .logro:empty{margin:0}

@media (max-width:1000px){
  .clientes{padding:60px 0 66px}
  .clientes .dentro{padding:0 22px}
  .clientes .rotulo{margin-bottom:38px}
  .clientes ul{grid-template-columns:1fr;row-gap:8px}
  .clientes li{display:block;text-align:center;margin-bottom:26px}
  .clientes .nombre,.clientes .que{white-space:normal}
  .clientes .nombre{font-size:20px}
  .clientes .que{font-size:11px}
  .clientes li:last-child{margin-bottom:0}
  .clientes .nombre,.clientes .que{display:block}
  .clientes li{margin-bottom:34px}
  .clientes .labor{margin-top:12px;font-size:14px;max-width:34ch}
  .clientes .logro{margin-top:8px;font-size:11px;max-width:34ch}
}
}

/* el aviso de "ver el caso completo" en el reverso de la tarjeta */
.cara-atras .entrar{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:22px;
  font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.cara-atras .entrar .flecha{
  display:block;width:34px;height:1px;background:currentColor;position:relative;
  transition:width .45s cubic-bezier(.6,0,.2,1);
}
.cara-atras .entrar .flecha::after{
  content:'';position:absolute;right:0;top:-3px;
  width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.tarjeta:hover .entrar .flecha{width:56px}
.tarjeta:focus-visible{outline:2px solid var(--negro);outline-offset:4px}

/* ---------- explora el proyecto: iconos en vez de capturas ---------- */
.enlaces-icono{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--gris-claro);
  border-bottom:1px solid var(--gris-claro);
}
.enlaces-icono a{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:26px 24px;
  transition:padding-left .4s cubic-bezier(.6,0,.2,1);
}

.enlaces-icono svg{width:26px;height:26px;flex-shrink:0;stroke-width:1.4}
.enlaces-icono .nombre-red{font-size:19px;line-height:1.2}
.enlaces-icono .nombre-red{
  position:relative;padding-bottom:3px;
}
/* el subrayado se dibuja al pasar el ratón: indica que se pincha */
.enlaces-icono .nombre-red::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.6,0,.2,1);
}
.enlaces-icono a:hover .nombre-red::after{transform:scaleX(1);transform-origin:left}
.enlaces-icono svg{transition:transform .45s cubic-bezier(.6,0,.2,1)}
.enlaces-icono a:hover svg{transform:scale(1.1)}

@media (max-width:1000px){
  .enlaces-icono{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .enlaces-icono{grid-template-columns:1fr}
  .enlaces-icono a{padding:20px 10px 20px 0}
}

/* ============================================
   FRASES ESCRITAS A MANO
   (Brittany es de Canva y no tiene licencia web:
    uso Sacramento, la alternativa gratuita más parecida)
   ============================================ */
.a-mano,
.campana .a-mano{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(24px,2.5vw,34px);line-height:1.25;
  color:var(--negro);
  margin-bottom:18px;max-width:none;
}

/* la de San Valentín va encima de la creatividad y descolocada */
.piezas{position:relative}
/* el concepto de la campaña: arriba a la derecha, al lado de la silueta
   y por encima del móvil, como en el mockup */
.campana .a-mano.concepto-campana{
  position:absolute;z-index:3;top:0;left:40%;
  margin:0;line-height:1.2;white-space:nowrap;color:#2b2422;
}



/* el móvil del aniversario: algo más pequeño y torcido a la derecha */
.movil-aniversario{
  width:46%;height:auto;display:block;margin:0 auto;
  transform:rotate(6deg);
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.16));
}

@media (max-width:620px){
  .campana .a-mano.concepto-campana{position:static;font-size:21px;margin-bottom:14px}
}

/* el sello blanco sobre la portada de Super Life Trip */
.portada-ancha{position:relative}
.portada-ancha .sello-portada{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(230px,20%);
  /* el logo NO es la foto de fondo: hay que deshacerle la altura
     mínima y el recorte que lleva la portada, o sale cortado */
  height:auto;min-height:0;object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.35));
}
/* la versión de dos columnas de los enlaces con icono */
.enlaces-icono.dos{grid-template-columns:repeat(2,1fr);margin-top:14px}
.explora .enlaces-icono.dos a{justify-content:center;padding-right:0}
.bloque.explora.holgada{padding-top:70px;padding-bottom:56px}
@media (max-width:620px){ .enlaces-icono.dos{grid-template-columns:1fr} }

/* la frase de cierre va escalonada: la primera línea tira a la
   izquierda y la segunda a la derecha, una debajo de la otra */
.cita.escalonada{display:flex;flex-direction:column;align-items:center;gap:2px}
.cita.escalonada span{display:block}
.cita.escalonada .linea-izq{transform:translateX(-20%)}
.cita.escalonada .linea-der{transform:translateX(9%)}

@media (max-width:620px){
  .cita.escalonada .linea-izq{transform:translateX(-3%)}
  .cita.escalonada .linea-der{transform:translateX(3%)}
}

/* ---------- "Conoce la historia completa" en una sola línea ----------
   TikTok a la izquierda, Instagram en el centro y el título a la derecha,
   sin líneas y con el título pequeño                                    */
.fila-historia{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  align-items:center;gap:24px;
  /* las dos líneas, como en Bellapierre */
  border-top:1px solid var(--gris-claro);
  border-bottom:1px solid var(--gris-claro);
  padding:22px 0;
}
.fila-historia h2{
  justify-self:start;text-align:left;
  font-size:clamp(15px,1.35vw,19px);font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.25;
  max-width:none;margin:0;
}
.fila-historia .enlace-red{
  display:flex;align-items:center;gap:12px;
}
.fila-historia .enlace-red.centrado{justify-self:center}
.fila-historia svg{width:21px;height:21px;stroke-width:1.4;flex-shrink:0;
  transition:transform .45s cubic-bezier(.6,0,.2,1)}
.fila-historia .enlace-red:hover svg{transform:scale(1.1)}
.fila-historia .nombre-red{font-size:17px;position:relative;padding-bottom:3px}
.fila-historia .nombre-red::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.6,0,.2,1);
}
.fila-historia .enlace-red:hover .nombre-red::after{transform:scaleX(1);transform-origin:left}

@media (max-width:760px){
  .fila-historia{grid-template-columns:1fr;gap:18px;text-align:center;padding:20px 0}
  .fila-historia h2{justify-self:center;text-align:center}
  .fila-historia .enlace-red,.fila-historia .enlace-red.centrado{justify-self:center}
}

/* ---------- cabecera en vídeo de Super Life Trip ---------- */
.portada-video{background:#0d0d0d;overflow:hidden}
.portada-video video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* arranca un poco ampliado y se va alejando: da sensación
     de que el dron se separa al abrir la página */
  animation:alejarse 9s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes alejarse{
  from{transform:scale(1.18)}
  to  {transform:scale(1)}
}

/* el sello entra después, cuando el vuelo ya se ha abierto */
.portada-video .sello-portada{
  opacity:0;
  animation:entrar-sello 1.6s cubic-bezier(.2,.7,.2,1) 1.1s forwards;
}
@keyframes entrar-sello{
  from{opacity:0;transform:translate(-50%,-50%) scale(.88)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .portada-video video{animation:none}
  .portada-video .sello-portada{animation:none;opacity:1}
}

/* ============================================
   SUBMENÚ DE PROYECTOS
   Solo aparece cuando estás dentro de un proyecto, y lista
   los otros dos, para poder saltar sin volver atrás.
   ============================================ */

.con-submenu{position:relative;display:inline-block}

.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  list-style:none;margin:0;padding:16px 22px 18px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.1);
  border:1px solid var(--gris-claro);
  min-width:210px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility .3s;
}
/* un puente invisible para que no se cierre al bajar el ratón */
.con-submenu::after{
  content:'';position:absolute;top:100%;left:0;right:0;height:16px;
}
.con-submenu:hover .submenu,
.con-submenu:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

.submenu li{margin:0}
.submenu li + li{margin-top:12px}
.submenu a{
  display:block;white-space:nowrap;
  /* misma tipografía que el menú de arriba, solo que más pequeña */
  font-family:'Open Sans',sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--negro);
}
.submenu a::after{background:currentColor}

/* sobre el manifiesto, que va en negro */
body.negro .submenu{background:rgba(20,20,20,.97);border-color:rgba(255,255,255,.18)}
body.negro .submenu a{color:#fff}

@media (max-width:760px){
  /* en el menú de móvil no hay ratón: los otros proyectos
     se ven directamente, indentados debajo de "Proyectos" */
  .con-submenu{display:block;text-align:left;width:100%}
  .submenu{
    position:static;transform:none;opacity:1;visibility:visible;
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    padding:14px 0 0;min-width:0;
  }
  .submenu a{font-size:11px;color:var(--gris);letter-spacing:.14em}
  .con-submenu::after{display:none}
}

/* ---------- cabecera de Proyectos: figura recortada ----------
   Va apoyada abajo y se mete media franja, igual que en Servicios. */
.hero.hero-figura{
  height:auto;min-height:0;
  background:var(--blanco);
  /* a la izquierda: si va centrada, el zapato cae justo encima
     del texto de la franja y lo tapa */
  display:flex;justify-content:flex-start;align-items:flex-end;
  padding:104px 40px 0 clamp(0px,2vw,40px);
  margin-bottom:-26px;
  position:relative;z-index:3;
  pointer-events:none;
  overflow:visible;
}
.hero.hero-figura img{
  width:auto;height:auto;
  max-width:min(760px,88%);
  max-height:clamp(360px,62vh,620px);
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.10));
  animation:entrar-figura 1.25s cubic-bezier(.2,.75,.25,1) both;
}

@media (max-width:760px){
  .hero.hero-figura{padding:92px 20px 0;margin-bottom:-16px}
  .hero.hero-figura img{max-height:38vh}
}

/* ---------- variante del Archivo ----------
   Va centrada, más grande, y la franja pasa POR DELANTE:
   le recorta la parte de abajo y el pie asoma por encima. */
.hero.hero-figura.centrada-detras{
  justify-content:center;
  /* un pelín a la derecha, para que la zapatilla caiga al lado
     de "EXPERIMENTACIÓN" y no encima */
  padding-left:calc(40px + 3vw);padding-right:40px;
  /* solo se solapa un poco, y la figura va POR DELANTE:
     así la zapatilla y el bolso se apoyan sobre la franja
     en vez de quedar cortados */
  margin-bottom:-16px;
  z-index:5;
}
.hero.hero-figura.centrada-detras img{
  max-width:min(900px,94%);
  max-height:clamp(400px,70vh,700px);
}
/* la franja, por delante de la figura */
.hero.hero-figura.centrada-detras + .franja{
  position:relative;z-index:1;
  background:var(--hueso);
}

@media (max-width:760px){
  .hero.hero-figura.centrada-detras{margin-bottom:-12px;padding-left:16px;padding-right:16px}
  .hero.hero-figura.centrada-detras img{max-height:38vh}
}

/* ---------- cabecera del Archivo ----------
   Figura recortada, apoyada en la franja: el sillón, el pie y el
   bolso la pisan un poco. La frase pasa por detrás. */
.hero.hero-figura.apoyada{
  height:auto;min-height:0;
  display:flex;justify-content:center;align-items:flex-end;
  background:var(--blanco);
  /* más hueco arriba: separa la cabeza de la frase.
     Abajo NO se solapa: el rectángulo de texto se ve entero,
     con su línea de arriba, y la figura se apoya encima. */
  /* más corto, para que al abrir la página ya asome el mosaico;
     y la figura se apoya pisando un poco la franja de texto */
  padding:82px 40px 0 calc(40px + 3vw);
  /* el que pisa la franja es el pie, no la caja: si se sube la sección
     entera, su fondo blanco tapa el borde del rectángulo de texto */
  margin-bottom:0;
  /* La textura arranca en el borde de arriba de la página: se come el
     relleno que deja <main> para la cabecera fija, así el logotipo y el
     menú caen sobre ella y no queda una banda blanca de corte. */
  margin-top:-96px;padding-top:178px;
  background-color:var(--blanco);
  background-image:
    linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)),
    url('../img/textura-archivo.jpg');
  background-size:auto, 620px auto;
  background-repeat:no-repeat, repeat;
  overflow:visible;position:relative;z-index:5;
  pointer-events:none;
}
.hero.hero-figura.apoyada img{
  width:auto;height:auto;
  max-width:min(900px,94%);
  max-height:clamp(330px,52vh,560px);
  object-fit:contain;display:block;
  margin-bottom:-22px;
  animation:acercar-archivo 10s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes acercar-archivo{
  from{transform:scale(1.06)}
  to  {transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero.hero-foto img{animation:none}
}
@media (max-width:760px){

}

/* ---------- la frase en ola, por detrás de la figura ----------
   Con la silueta recortada solo le tapa la cabeza, así que se lee. */
.hero.con-ola .ola-archivo{
  position:absolute;left:0;right:0;top:0;
  width:100%;height:auto;z-index:0;
  pointer-events:none;
  animation:none;              /* aquí no se mece, solo entra */
}
.hero.con-ola .ola-archivo text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:52px;fill:#cdc7be;   /* pequeña y suave, que acompañe */
  transition:fill .8s ease;
}
/* mientras está por delante se ve un poco más, para que se lea
   entera antes de irse hacia atrás */
.hero.con-ola .ola-archivo.delante{z-index:6}
.hero.con-ola .ola-archivo.delante text{fill:#b8b1a7}
.hero.con-ola .ola-archivo .curva{font-style:italic}
/* la sección se sube 96 px para que la textura llegue al borde de la
   página; la frase se baja lo mismo para quedarse donde estaba */
.hero.hero-figura.apoyada .ola-archivo{top:96px}
.hero.con-ola img{position:relative;z-index:2}

.ola-archivo .dos-lineas{display:none}

@media (max-width:1000px){
  .hero.con-ola .ola-archivo text{font-size:66px}
  .hero.hero-figura.apoyada{padding:162px 20px 0;margin-top:-96px;margin-bottom:0}
  .hero.hero-figura.apoyada img{max-height:36vh;margin-bottom:-14px}
}
@media (max-width:760px){
  /* a esta anchura la frase entera no cabe en una sola onda:
     se parte en dos, la segunda cae junto a la cabeza */
  .ola-archivo .una-linea{display:none}
  .ola-archivo .dos-lineas{display:block}
  .hero.con-ola .ola-archivo text{font-size:84px}
  .ola-archivo .dos-lineas:last-of-type{font-size:84px}
}

/* ---------- cabecera de Proyectos en vídeo ----------
   De lado a lado, ampliado solo lo justo para que la marca de agua
   de la esquina de arriba quede fuera de cuadro. Siempre sin sonido. */
.hero.hero-video-proyectos{
  height:clamp(300px,46vh,450px);min-height:0;
  background:var(--blanco);
  overflow:hidden;padding:0;
}
.hero.hero-video-proyectos video{
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  display:block;
}

/* En esta página el vídeo llega hasta arriba. El menú se queda
   transparente para no taparlo, y solo cuando acercas el ratón
   aparece un velo blanco, lo justo para leer las letras. */
body.cabecera-solida .nav{
  background:transparent;
  transition:background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
body.cabecera-solida .nav:hover,
body.cabecera-solida .nav:focus-within{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(7px);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
/* al bajar, el menú ya lleva su fondo sólido de siempre */
body.cabecera-solida .nav.solida{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
}

/* En móvil y tablet no hay ratón que acercar: ahí el velo se
   queda puesto, o el menú sería invisible sobre el vídeo. */
@media (hover:none){
  body.cabecera-solida .nav{
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(7px);
  }
}
@media (max-width:760px){
  .hero.hero-video-proyectos{height:28vh}
}


/* ============================================
   AJUSTES FINALES DE MÓVIL
   Van aquí, al final, porque corrigen reglas que se declaran
   más abajo en la hoja y si no, no llegarían a aplicarse.
   ============================================ */
@media (max-width:760px){
  /* Las bandas toman la proporción de las propias fotos (1,41:1).
     Así la de Bellapierre encaja clavada: ni se recorta el logotipo
     ni queda hueco alrededor. */
  .caso{height:auto;min-height:0;aspect-ratio:1.41}

  /* Bellapierre se ve entera, sin comerse la "V" ni el "cosmetics".
     El fondo es el mismo tono del propio fondo de la foto, así que
     no se ve ningún rectángulo alrededor. */
  .caso.centrada .cara-frente{background:#f5efec}
  .caso.centrada .cara-frente img:not(.sello){
    object-fit:contain !important;transform:none !important;
  }

  /* dentro de la página del proyecto, igual */
  .portada-banda{height:auto;aspect-ratio:1.41;background:#f5efec}
  .portada-banda img{
    object-fit:contain !important;transform:none !important;display:block;
  }

  /* el sello de Super Life Trip, proporcionado a la banda pequeña */
  .caso .cara-frente img.sello{width:min(170px,44%)}
}


/* ============================================
   PROYECTOS EN MÓVIL
   Un toque gira la tarjeta; el proyecto solo se abre
   desde el botón del reverso.
   ============================================ */
@media (max-width:760px){
  .casos{gap:18px;padding:0 16px}
  .caso{aspect-ratio:1/1.04;min-height:0}

  /* el reverso: una sola columna, sin la ilustración decorativa */
  .caso .cara-atras{
    grid-template-columns:1fr;align-content:center;
    gap:0;padding:30px 26px;overflow:hidden;
  }
  .caso .cara-atras .ilustracion{display:none}
  .caso .cara-atras.invertida > .ficha{order:1}

  .ficha{max-width:none}
  .ficha .numero{font-size:120px;top:-26px;left:-4px}
  .ficha .etiqueta{font-size:11px;letter-spacing:.18em;margin-bottom:10px}
  .ficha h2{font-size:clamp(21px,5.6vw,27px);line-height:1.22}
  .ficha ul{font-size:14px;line-height:1.5;margin-top:12px}
  .ficha hr{margin:18px 0 16px}
  .cara-atras .datos{font-size:12.5px;line-height:1.6;padding-top:12px}

  /* el botón, con aspecto de botón para que se vea que ahí se pulsa */
  .enlace-caso{
    margin-top:4px;
    border:1px solid currentColor;padding:11px 18px;
    font-size:11px;letter-spacing:.14em;gap:12px;
  }
  .enlace-caso .flecha{width:26px}

  /* pista de que la tarjeta se toca.
     Va sobre la tarjeta, no sobre la cara frontal: dentro de una cara
     con backface-visibility el navegador la sigue pintando al girar. */
  .caso{position:relative}
  .caso::after{
    content:'Toca para ver el proyecto';
    position:absolute;z-index:4;left:0;right:0;bottom:12px;
    font-family:'Open Sans',sans-serif;
    font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    text-align:center;color:#8e8b85;
    text-shadow:0 1px 6px rgba(255,255,255,.55);
    pointer-events:none;transition:opacity .25s ease;
  }
  /* display:none, no opacidad: dentro de una tarjeta en 3D el navegador
     se empeña en seguir pintando el pseudoelemento medio transparente */
  .caso.girada::after{display:none}

  /* Bellapierre: ampliada hasta casi llenar la tarjeta, recortando por
     la derecha (hombro y mano) para no tocar ni el logotipo ni la cara */
  .caso.centrada .cara-frente img:not(.sello){
    /* 1,48 deja la foto justo del alto de la tarjeta (sin franjas) y el
       recorte se reparte por igual a los dos lados: así el logotipo y la
       cara quedan centrados y solo se pierde hombro y mano. */
    transform:scale(1.48) !important;
    transform-origin:50% 50%;
  }
}


/* ============================================
   EL PANEL DEL MENÚ, SIEMPRE A PANTALLA COMPLETA
   Va al final a propósito: más arriba hay reglas de Proyectos y
   Archivo que vuelven a poner backdrop-filter en la cabecera, y ese
   filtro hace que el panel (position:fixed) mida la barra en vez de
   la pantalla. Aquí se anula para todo el móvil.
   ============================================ */
@media (max-width:760px){
  .nav,
  .nav.solida,
  body.cabecera-solida .nav,
  body.cabecera-solida .nav.solida,
  body.cabecera-solida .nav:hover,
  body.cabecera-solida .nav:focus-within{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav.solida,
  body.cabecera-solida .nav.solida{background:rgba(255,255,255,.98)}
  body.cabecera-solida .nav{background:rgba(255,255,255,.82)}

  /* el panel ocupa media pantalla y se ve entero, sin scroll */
  .nav-links{
    width:min(72vw,320px);
    padding:70px 30px 34px;
    justify-content:center;
    gap:clamp(14px,2.8vh,26px);
  }
}


/* ============================================
   SERVICIOS EN MÓVIL
   Más compacto arriba para que la primera carpeta
   asome sin tener que bajar tanto.
   ============================================ */
@media (max-width:760px){
  .intro-servicios{gap:22px;padding:8px 0 0}
  .intro-servicios h1{font-size:clamp(24px,6.6vw,30px);line-height:1.2;margin-bottom:18px}
  .intro-servicios p{font-size:clamp(15px,4.1vw,18px);line-height:1.4}
  .intro-servicios p.d2{margin-top:12px !important}
  .intro-servicios .foto img{max-height:32vh}
  .carpetas{padding-top:30px}
  .kit{padding-top:52px}
}


/* ============================================
   AJUSTES DE LA HOME EN MÓVIL
   Menos aire arriba y entre bloques: se baja mucho menos
   para llegar a los clientes.
   ============================================ */
@media (max-width:760px){
  .intro{padding:46px 0 34px;gap:22px}
  .intro .cuerpo{gap:18px;padding-top:2px}
  .intro p{font-size:16px;line-height:1.55}

  /* los clientes: cada marca necesita respirar por dentro */
  .clientes{padding:44px 0 50px}
  .clientes .rotulo{margin-bottom:30px}
  .clientes li{margin-bottom:46px}
  .clientes .nombre{margin-bottom:10px}
  .clientes .que{margin-bottom:0}
  .clientes .labor{margin-top:16px}
  .clientes .logro{margin-top:12px}

  .cta{padding:60px 0 72px}
}


/* ============================================
   BELLAPIERRE EN MÓVIL — ajuste fino
   Va al final porque más arriba hay reglas antiguas de .piezas
   que, por orden, ganaban a las nuevas.
   ============================================ */
@media (max-width:1000px){
  /* el número vuelve a asomar por detrás del título, solo un poco */
  .titulo-bloque .num{top:-46px}
  /* ...y como el número sobresale 46 px por encima, el título baja lo
     suficiente para no montarse sobre la imagen de la sección anterior */
  .caso-completo .bloque:not(.primero) .titulo-bloque{margin-top:54px}
  .caso-completo .campana-sv .titulo-bloque{margin-top:54px}

  /* ni la silueta ni el moodboard se recortan como el resto de fotos */
  .caso-completo .piezas > img,
  .caso-completo .ancho-completo img,
  .caso-completo .revista-aniversario img{max-height:none;object-fit:contain}

  /* 05 · San Valentín, más apretado */
  .campana-sv .titulo-bloque{margin-bottom:2px}
  .campana-sv .etiqueta{margin-bottom:8px}
  .campana-sv .piezas{padding-top:0;margin-bottom:6px;gap:0;justify-content:center}
  /* 52 % x 1,5 = 0,78 de alto; 44 % x 1,778 = 0,78 también:
     el móvil mide exactamente lo mismo que la silueta, al lado */
  .campana-sv .piezas > img{width:50%}
  .campana-sv .col-movil{width:42%;margin-left:0}
  /* el vídeo llena su columna: había una regla antigua que le ponía
     un 36 % del ancho total y por eso salía diminuto */
  .campana-sv .col-movil .movil{width:100%;margin-left:0}
  .campana p{margin-bottom:4px}

  /* aniversario */
  .campana-aniversario .etiqueta{margin-bottom:8px}
  .campana-aniversario .texto-aniversario .a-mano{margin-bottom:12px}
  .campana-aniversario .revista-aniversario{margin-top:12px}
  .campana-aniversario .movil-aniversario{width:38%;margin:-22% 4% 0 0}
  .movil-aniversario .movil{transform:rotate(9deg)}

  .campana{margin-bottom:44px}

  /* 06 · Resultados: menos aire por arriba */
  .bloque{padding:14px 0}
  .bloque.primero{padding-top:74px}
}

@media (max-width:620px){
  .titulo-bloque .num{top:-38px}
}


/* Super Life Trip en móvil: menos blanco entre la frase escalonada
   y el bloque de Resultados con el vídeo de dron. */
@media (max-width:1000px){
  .caso-completo .cita.escalonada{padding:38px 0 6px}
  .caso-completo .cita.escalonada + .bloque,
  .caso-completo .bloque:has(+ .portada-ancha){padding-bottom:6px}
  .caso-completo .cita.escalonada ~ .bloque .titulo-bloque{margin-top:40px;margin-bottom:18px}
}


/* el enlace al Archivo, pegado a la línea de "conoce la historia
   completa" en lugar de quedarse flotando al final de la página */
@media (max-width:1000px){
  .caso-completo .bloque.explora.holgada{padding-top:34px;padding-bottom:0}
  .caso-completo .siguiente{padding:18px 0 48px}
}


/* ============================================
   SERVICIOS — textura de papel de fondo
   Al 15 %: se intuyen las arrugas y la página deja de ser
   un blanco plano. Las secciones con fondo propio (la franja,
   los documentos, el bloque negro) la tapan, como debe ser.
   ============================================ */
.zona-papel{
  /* se come el relleno que <main> reserva para la cabecera fija,
     así la textura llega al borde de arriba, por detrás del menú */
  margin-top:-96px;padding-top:96px;
  background-color:var(--blanco);
  background-image:
    linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)),
    url('../img/textura-servicios.jpg');
  background-size:auto, 760px auto;
  background-repeat:no-repeat, repeat;
}


/* En móvil el lema de San Valentín se queda suelto al final de la
   columna de texto, sin las imágenes al lado que le dan sentido.
   Ahí se oculta y el resto sube. */
@media (max-width:1000px){
  .campana .a-mano.lema-campana{display:none}
}


/* ============================================
   CONTACTO EN MÓVIL
   Solo el auricular colgando: la base ocupaba media pantalla
   y retrasaba mucho la llegada al formulario.
   ============================================ */
@media (max-width:1000px){
  .contacto .telefono.colgado{
    /* la caja se recorta justo donde acaba el auricular */
    aspect-ratio:616/861;
    width:min(210px,54%);
    margin-right:clamp(10px,4vw,34px);
  }
  .contacto .telefono .auricular{height:100%}
  .contacto .telefono .base-tel{display:none}
  .contacto .lado-foto:has(.colgado){padding:0 20px 18px}
}