@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   MIA SIN TILDE — Home
   Réplica de MIASINTILDE_Landing Page-1.pdf, página 1 (1920 × 3767,5 pt).

   ESCALA: 1rem = 10 px del diseño de 1920. Cada medida del PDF entra aquí
   dividida entre 10, así que se lee igual que en el documento original:
   un titular de 71 pt es 7.1rem. Nada de px sueltos.

   POSICIÓN VERTICAL DEL TEXTO: se coloca por LÍNEA BASE, no por caja.
   top = línea_base − ascendente × tamaño, con la línea-altura fijada al em
   de la fuente para que el medio-interlineado sea cero. Los ascendentes
   están en --asc-sans / --asc-serif: si el texto baila, se corrigen ahí una
   vez y se arreglan las cuarenta cadenas a la vez.

   CONTENEDOR: cada elemento se posiciona respecto a SU SECCIÓN, con la y
   del PDF menos el inicio de esa sección. Los pocos casos anidados (barra
   del menú, tarjetas, botón) llevan escrito de qué caja cuelgan.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fuentes ────────────────────────────────────────────────────────────
   OJO: las dos son de prueba y su licencia prohíbe subirlas a un servidor.
   Ver fuentes/LEER-ANTES-DE-SUBIR.md. Al comprar la licencia se cambian
   estos dos @font-face y no hace falta tocar nada más.                  */

@font-face{
  font-family:'Atyp';
  src:url('../fuentes/AtypTEST-Variable.ttf') format('truetype-variations');
  font-weight:40 160;
  font-display:swap;
}
@font-face{
  font-family:'Albra';
  src:url('../fuentes/AlbraTRIAL-MediumItalic.otf') format('opentype');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

:root{
  /* Paleta: un valor por color, el mayoritario del diseño. Ver docs/02-COLOR.md */
  --violeta:#4d41f7;
  --azul:#9bc2ff;
  --azul-texto:#9fc0ff;
  --azul-medio:#92c2ff;
  --violeta-texto:#494aee;
  --amarillo:#f6e300;
  --amarillo-caja:#f7e400;
  --blanco:#fff;
  --negro:#000;

  --fuente-sans:'Atyp', 'Segoe UI', Arial, sans-serif;
  --fuente-serif:'Albra', Georgia, serif;

  /* Ascendente y descendente que el navegador aplica a cada fuente. Clavan
     la línea base y NO se pueden dar por supuestas: Chrome usa las métricas
     `typo` del OS/2 en Atyp (0,74/0,20) y las `hhea` en Albra (0,786/0,214).
     Suponer 1,0 para Atyp dejaba todo su texto 0,13 em alto — 9 px en los
     titulares de 71. Medido con herramientas/medir_elementos.py. */
  --asc-sans:.74;
  --desc-sans:.2;
  --asc-serif:.786;
  --desc-serif:.214;

  /* Atyp tiene ejes wght 40–160 e ital 0–100 (0–13° de inclinación).
     El diseño usa dos ajustes, medidos comparando grosor de asta e
     inclinación contra el render del PDF (ver docs/01-TIPOGRAFIA.md):

       titulares  wght 150 · ital 50  → asta 12 px e inclinación 7,3° a 71 px
                                        el PDF da 12 px y 7,4°
       texto      wght 105 · ital  0  → asta 4 px, igual que el PDF

     El eje ital NO es una itálica de verdad: inclina el mismo dibujo. Por eso
     el ajuste por área de tinta no lo detectaba — una cizalla no cambia el
     área — y hacía falta medir la inclinación en el render. */
  --sans-texto:105;
  --sans-titular:150;
  --ital-titular:50;
}

*,*::before,*::after{box-sizing:border-box}

html{
  /* 1rem = 10 px del diseño. Toda la maqueta escala con el ancho de la
     ventana, así que no hace falta ni un @media para escritorio. */
  font-size:calc(100vw / 192);
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--violeta);
  font-family:var(--fuente-sans);
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul,ol,dl,dd,figure,blockquote,h1,h2,p{margin:0;padding:0}
li{list-style:none}
button{border:0;background:0;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ── Tipografía base ────────────────────────────────────────────────── */

.sans{
  font-family:var(--fuente-sans);
  font-variation-settings:'wght' var(--sans-texto),'ital' 0;
  /* line-height = ascendente + descendente ⇒ medio-interlineado 0 ⇒ la
     línea base cae exactamente a --asc-sans del borde superior. */
  line-height:calc(var(--asc-sans) + var(--desc-sans));
  font-style:normal;
}
/* .ti = titular: el Atyp grueso e inclinado de los rótulos */
.sans.ti{
  font-variation-settings:'wght' var(--sans-titular),'ital' var(--ital-titular);
}
.serif{
  font-family:var(--fuente-serif);
  font-style:italic;
  font-weight:500;
  line-height:calc(var(--asc-serif) + var(--desc-serif));
}

/* Todo lo que va colocado por coordenadas del PDF lleva la clase `pos`.
   Antes esto era una lista explícita de clases: con `[class^=…]` no funciona
   —el atributo empieza por "sans"/"serif" y el selector no casa— y con la
   lista había que acordarse de añadir cada nombre nuevo. */
.pos{position:absolute;white-space:nowrap;display:block}

/* ── Secciones ─────────────────────────────────────────────────────── */

.seccion{position:relative;width:100%}

/* Cajas redondeadas del diseño. Illustrator las guarda giradas, así que
   ancho/alto/radio/ángulo salen de herramientas/cajas.py, no del bbox:
   el bbox de un rectángulo girado es más ancho y más bajo que el original. */
.caja{position:absolute;display:block;content:''}

/* ═══ HÉROE ═══════════════════════════════════════ y del PDF 0 → 661,7 */

.cabecera{position:absolute;inset:0}

.logo{position:absolute;left:9.021rem;top:5.251rem;width:12.579rem;height:9.324rem}
.logo img{width:100%;height:100%}

.barra{
  position:absolute;
  left:26.15rem;top:5.19rem;
  width:161.7rem;height:8.69rem;
  background:var(--blanco);
  border-radius:4.345rem;
}

/* Los .mnu cuelgan de .barra: x del PDF − 261,5 · y del PDF − 51,9 */
.mnu{position:absolute;display:block}
.mnu img{width:100%;height:100%}
.mnu-us         {left:54.334rem; top:1.618rem;width:6.074rem; height:5.901rem}
.mnu-deliver    {left:67.593rem; top:1.946rem;width:11.205rem;height:5.244rem}
.mnu-portafolio {left:84.692rem; top:2.678rem;width:14.817rem;height:3.78rem}
.mnu-makers     {left:105.5rem; top:0;      width:13rem;  height:8.69rem}
.mnu-talk       {left:124.727rem;top:1.914rem;width:9.039rem; height:5.211rem}
.ico-tel        {left:145.971rem;top:2.586rem;width:4.361rem; height:4.546rem}
.ico-mail       {left:154.003rem;top:2.826rem;width:4.512rem;height:3.302rem}

/* Y éstos cuelgan de .mnu-makers: x − 1316,5 · y − 51,9 */
.nav-the{
  left:2.75rem;
  top:calc(4.69rem - var(--asc-serif) * 3.51rem);
  font-size:3.51rem;color:var(--azul-texto);
  transform:rotate(-8.65deg);
  transform-origin:left calc(var(--asc-serif) * 1em);
}
.nav-makers{
  left:.29rem;
  top:calc(7.1rem - var(--asc-sans) * 3.692rem);
  font-size:3.692rem;color:var(--amarillo);
}


/* ── Pie, común a todas las páginas ─────────────────────────────────── */

.pie{position:absolute;inset:0}
.logo-pie,.mosaico{position:absolute}

/* ── Botón "Read more", común ───────────────────────────────────────── */

.boton-lee{position:absolute;display:block}
.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;
  font-size:3.794rem;color:var(--blanco);
  white-space:nowrap;
}

/* ── Flechas y chevrons de los carruseles ───────────────────────────── */
/* En el diseño son filiformes: 0,55 pt de trazo. */

.flecha,.chevron{position:absolute;display:block}
.flecha img,.chevron img{width:100%;height:100%}

/* ── Columna flotante de redes ──────────────────────────────────────── */
/* Cuelga del documento, no de una sección: flota sobre el contenido. La
   posición cambia de página a página, así que va en el CSS de cada una. */

.redes{position:absolute;width:10rem;z-index:5}
.redes img{width:100%;height:100%}
.redes .zona{position:absolute;left:1rem;width:8rem;height:6rem}