@charset "utf-8";
/* Home — página 1 del PDF (1920 × 3767,5). Coordenadas en docs/03-ESTRUCTURA.md
   Necesita base.css cargado antes. */

.heroe       {height:66.17rem;background:var(--azul)}
.que-hacemos {height:62.84rem;background:var(--violeta);overflow:hidden}
.cifras      {height:40.12rem;background:var(--blanco)}
.servicios   {height:72.07rem;background:var(--violeta);overflow:hidden}
.marcas      {height:65.55rem;background:var(--azul)}
.testimonios {height:70.00rem;background:var(--blanco);overflow:hidden}


.h-heroe{font-weight:400;font-size:inherit}

.h-where     {left:58.27rem;top:calc(35.13rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--violeta)}
.h-creativity{left:83.97rem;top:calc(35.13rem - var(--asc-serif) * 12rem); font-size:12rem; color:var(--blanco)}
.h-meets     {left:60.56rem;top:calc(41.57rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--amarillo-caja)}

.caja-strategy{
  left:81.94rem;top:36.94rem;
  width:42.06rem;height:9.4rem;
  border-radius:1.15rem;
  background:var(--blanco);
  transform:rotate(-5.65deg);
}
.h-strategy{
  left:84.41rem;top:calc(46.77rem - var(--asc-sans) * 9.3rem);
  font-size:9.3rem;color:var(--azul);
  transform:rotate(-8.43deg);
  transform-origin:left calc(var(--asc-sans) * 1em);
}
.h-punto{
  left:121.73rem;top:calc(41.23rem - var(--asc-sans) * 8rem);
  font-size:8rem;color:var(--azul);
  transform:rotate(-8.43deg);
  transform-origin:left calc(var(--asc-sans) * 1em);
}

/* Las imágenes del diseño no están sólo colocadas: llevan matriz de giro.
   El rect que devuelve get_image_rects es su bounding box YA girado, y usarlo
   como width/height dibuja la bombilla el doble de grande y sin inclinar.
   Los valores de abajo salen de descomponer la matriz real del PDF. */
.sombra-bombilla{position:absolute;left:75.243rem;top:41.453rem;width:12.2rem;  height:12.6rem}
.bombilla{
  position:absolute;left:69.984rem;top:47.718rem;width:16.725rem;height:14.246rem;
  transform:rotate(-42deg);transform-origin:0 0;
}

/* ═══ QUÉ HACEMOS ════════════════════════════ y del PDF − 661,7 ══════ */

.que-hacemos h2{font-weight:400;font-size:inherit}

.caja-wedo{
  left:52.8rem;top:12.09rem;
  width:39.86rem;height:10.7rem;
  border-radius:1.22rem;
  background:var(--blanco);
  transform:rotate(-1.85deg);
}
.qh-what{left:21.98rem;top:calc(21.02rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--blanco)}
.qh-do  {left:42.69rem;top:calc(21.02rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--azul-medio)}
.qh-wedo{left:54.24rem;top:calc(22.21rem - var(--asc-serif) * 12rem); font-size:12rem; color:var(--violeta)}

.qh-texto{
  left:22.65rem;
  /* Este párrafo lleva line-height propio (34,1 pt entre líneas base, el del
     PDF), así que el medio-interlineado deja de ser cero y la primera base
     cae 0,13 em más abajo: (1,19986 − 0,94) / 2. De ahí el sumando. */
  top:calc(28rem - (var(--asc-sans) + .13) * 2.842rem);
  font-size:2.842rem;color:var(--blanco);
  line-height:calc(3.41 / 2.842);
}

/* El botón es la caja; el texto cuelga de él: x − 223,7 · y − 1030,5 */
.qh-lee{left:22.37rem;top:36.88rem;width:20.94rem;height:4.81rem}
.boton-lee::before{
  content:'';position:absolute;left:0;top:0;
  width:100%;height:100%;
  border-radius:.53rem;
  background:var(--azul);
  transform:rotate(-.3deg);
}
.boton-lee .serif{
  position:absolute;
  left:1.43rem;
  top:calc(3.62rem - var(--asc-serif) * 3.794rem);
  font-size:3.794rem;color:var(--blanco);
  white-space:nowrap;
}

/* El portátil arranca en y 604 del PDF, por encima de esta sección: el
   diseño lo recorta con el borde violeta. Lo reproduce el overflow:hidden. */
.sombra-portatil{position:absolute;left:104.453rem;top:4.392rem;width:53.9rem;height:46.6rem}
.portatil{
  position:absolute;left:101.533rem;top:-5.785rem;width:70.387rem;height:48.007rem;
  transform:rotate(11.33deg) skewX(.84deg);transform-origin:0 0;
}
.pantalla-foods{
  position:absolute;left:118.328rem;top:6.786rem;width:35.944rem;height:23.309rem;
  transform:rotate(11.35deg) skewX(.84deg);transform-origin:0 0;
}
.estrella       {position:absolute;left:140.902rem;top:24.646rem;width:19.805rem;height:20.418rem}

/* ═══ CIFRAS ════════════════════════════════ y del PDF − 1290,1 ══════ */

/* .cifra se deja SIN posicionar a propósito: así sus hijos y su ::before
   se colocan respecto a la sección y todas las coordenadas son homogéneas. */
.cifras .cifra{position:static}

.cifra::before{
  content:'';position:absolute;
  background:var(--amarillo-caja);
  transform:rotate(-3.29deg);
}
.c1::before{left:52.1rem;  top:17.51rem;width:19.85rem;height:4.79rem;border-radius:.51rem}
.c2::before{left:82.39rem; top:17.37rem;width:11.48rem;height:4.8rem; border-radius:.4rem}
.c3::before{left:104.81rem;top:17.28rem;width:11.48rem;height:4.8rem; border-radius:.4rem}
.c4::before{left:129.74rem;top:17.2rem; width:11.48rem;height:4.8rem; border-radius:.4rem}

.cifras dt{
  font-size:3.794rem;color:var(--violeta);
  transform:rotate(-4.27deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}
.cifras dd{
  font-size:3.963rem;color:var(--violeta-texto);
  font-variation-settings:'wght' var(--sans-texto);
}

.c1 dt{left:52.69rem; top:calc(22.02rem - var(--asc-serif) * 3.794rem)}
.c2 dt{left:87.36rem; top:calc(21.17rem - var(--asc-serif) * 3.794rem)}
.c3 dt{left:106.6rem; top:calc(21.31rem - var(--asc-serif) * 3.794rem)}
.c4 dt{left:133.81rem;top:calc(21.07rem - var(--asc-serif) * 3.794rem)}

.c1 dd{left:50.6rem;  top:calc(25.25rem - var(--asc-sans) * 3.963rem)}
.c2 dd{left:82.52rem; top:calc(25.16rem - var(--asc-sans) * 3.963rem)}
.c3 dd{left:103.19rem;top:calc(25.25rem - var(--asc-sans) * 3.963rem)}
.c4 dd{left:129.55rem;top:calc(25.18rem - var(--asc-sans) * 3.963rem)}

/* ═══ SERVICIOS ═════════════════════════════ y del PDF − 1691,3 ══════ */

.servicios h2{font-weight:400;font-size:inherit}

.sv-kicker{
  left:81.41rem;top:calc(11.38rem - var(--asc-sans) * 4.204rem);
  font-size:4.204rem;color:var(--blanco);
}
.sv-a    {left:36.55rem;top:calc(18.45rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--azul-medio)}
.sv-new  {left:43.93rem;top:calc(18.45rem - var(--asc-serif) * 12rem); font-size:12rem; color:var(--blanco)}
.sv-level{left:68.05rem;top:calc(18.45rem - var(--asc-sans) * 7.1rem); font-size:7.1rem;color:var(--azul-medio)}
.sv-exp  {
  left:95.67rem;top:calc(19.4rem - var(--asc-serif) * 12rem);
  font-size:12rem;color:var(--blanco);
  transform:rotate(-1.52deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}

.tarjeta{
  position:absolute;
  width:36.54rem;height:30.41rem;
  background:var(--blanco);
  border-radius:4.78rem;
}
.t1{left:19.92rem; top:26.09rem}
.t2{left:59.94rem; top:25.81rem}
.t3{left:100.79rem;top:24.79rem}
.t4{left:140.82rem;top:24.51rem}

/* Los textos cuelgan de SU tarjeta: x − izquierda de la tarjeta,
   y − arriba de la tarjeta. */
.tarjeta a{display:block}
.tarjeta .sans {color:var(--amarillo)}
.tarjeta .serif{color:var(--azul-texto)}

.t1 .sans {left:7.24rem; top:calc(16.64rem - var(--asc-sans) * 4rem);     font-size:4rem}
.t1 .serif{left:21.84rem;top:calc(16.64rem - var(--asc-serif) * 4rem);    font-size:4rem}
.t2 .sans {left:6.37rem; top:calc(16.56rem - var(--asc-sans) * 3.963rem); font-size:3.963rem}
.t2 .serif{left:17.85rem;top:calc(16.56rem - var(--asc-serif) * 3.963rem);font-size:3.963rem}
.t3 .sans {left:4.7rem;  top:calc(16.31rem - var(--asc-sans) * 4rem);     font-size:4rem}
.t3 .serif{left:20rem;   top:calc(16.31rem - var(--asc-serif) * 3.963rem);font-size:3.963rem}
.t4 .sans {left:8.22rem; top:calc(16.19rem - var(--asc-sans) * 3.963rem); font-size:3.963rem}
.t4 .barra-sep{left:17.36rem}
.t4 .serif{left:19.5rem; top:calc(16.19rem - var(--asc-serif) * 3.963rem);font-size:3.963rem}

/* Las flechas del carrusel son filiformes en el diseño: 0,55 pt de trazo. */
.flecha-izq{left:14.457rem;top:38.684rem;width:2.036rem;height:4.042rem}
.flecha-der{left:180.216rem;top:38.684rem;width:2.036rem;height:4.042rem}

/* ═══ MANEJAMOS TU MARCA ════════════════════ y del PDF − 2412 ════════ */

.marcas h2{font-weight:400;font-size:inherit}

.caja-marca{
  left:70.17rem;top:16.68rem;
  width:56.77rem;height:11.19rem;
  border-radius:1.49rem;
  background:var(--blanco);
  transform:rotate(-1.84deg);
}
.mc-manejamos{left:79.77rem;top:calc(14rem - var(--asc-sans) * 7.1rem);font-size:7.1rem;color:var(--blanco)}
.mc-tumarca{
  left:72.76rem;top:calc(27.34rem - var(--asc-serif) * 12rem);
  font-size:12rem;color:var(--azul);
  transform:rotate(-1.85deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}

/* PENDIENTE: el PDF deja estas tres cajas vacías. docs/05-PENDIENTE-CLIENTE.md */
.marca{position:absolute;top:32.78rem;width:32.69rem;height:18.75rem;background:var(--blanco)}
.m1{left:42.63rem}
.m2{left:79.79rem}
.m3{left:116.7rem}

/* ═══ TESTIMONIOS + PIE ═════════════════════ y del PDF − 3067,5 ══════ */

.testimonios h2{font-weight:400;font-size:inherit}

.ts-spoiler{left:61.58rem;top:calc(22.63rem - var(--asc-serif) * 12rem);font-size:12rem;color:var(--violeta)}
.caja-alert{
  left:98.79rem;top:18.29rem;
  width:22.45rem;height:8.33rem;
  border-radius:.74rem;
  background:var(--amarillo-caja);
  transform:rotate(-7.66deg);
}
.ts-alert{
  left:101.5rem;top:calc(26.29rem - var(--asc-sans) * 7.1rem);
  font-size:7.1rem;color:var(--violeta);
  transform:rotate(-7.92deg);
  transform-origin:left calc(var(--asc-sans) * 1em);
}
.sirena{
  position:absolute;left:120.04rem;top:15.449rem;width:11.356rem;height:12.948rem;
  transform:rotate(19.93deg);transform-origin:0 0;
}
.flecha-testim{left:172.187rem;top:16.884rem;width:2.036rem;height:4.042rem}

/* .testimonio sin posicionar: sus hijos van respecto a la sección. */
.testimonio{position:static}
.chevron{width:1.18rem;height:2.342rem}
.ch-izq{left:76.36rem;top:35.875rem}
.ch-der{left:114.484rem;top:35.875rem}

.ts-cita{
  left:79.44rem;top:calc(37.78rem - var(--asc-sans) * 2.842rem);
  font-size:2.842rem;color:var(--negro);font-weight:400;
}

/* El diseño deja el autor en BLANCO SOBRE BLANCO: invisible. Se replica tal
   cual. Para hacerlo visible basta cambiar este color a var(--violeta). */
.ts-autor{position:static;color:var(--blanco)}
.ts-nombre{left:25.49rem;top:calc(51.9rem - var(--asc-sans) * 4.2rem);   font-size:4.2rem}
.ts-cargo {left:25.55rem;top:calc(56.36rem - var(--asc-sans) * 2.471rem);font-size:2.471rem}

.logo-pie{left:9.747rem;top:53.021rem;width:14.729rem;height:11.773rem}
.mosaico {left:76.416rem;top:48.878rem;width:115.459rem;height:20.992rem}

/* ═══ COLUMNA FLOTANTE DE REDES ═══════════════════════════════════════ */
/* Cuelga del documento, no de una sección: en el diseño flota sobre el
   contenido a la altura de "What do we do?". */

.redes{left:174.836rem;top:75.278rem;width:9.46rem;height:47.446rem}
.redes img{width:100%;height:100%}
.redes .zona{position:absolute;left:1rem;width:8rem;height:6rem}
.z-mail{top:.6rem}
.z-fb  {top:7.2rem}
.z-ig  {top:13.5rem}
.z-tt  {top:19.8rem}
.z-in  {top:26.1rem}
.z-wa  {top:38.2rem;height:9.5rem}