/*==========================================================================
  MACHETE STUDIO — folha única
  Linguagem: cartaz serigrafado com profundidade. A ideia que sustenta a
  estrutura é O CORTE: o machete é a letra T do logotipo, e cada bloco se
  separa do seguinte com um corte na diagonal (.filo), alternando preto
  —onde se demonstra— e creme —onde se explica.
  Sem frameworks. Sem dependências externas.
==========================================================================*/

/* Archivo, una sola familia para toda la marca. Las dos tipografias anteriores
   salen del sitio: el nombre iba en una display condensada que se leia
   infantil, y era justo lo que habia que arreglar. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-800.woff2') format('woff2');font-weight:800;letter-spacing:-.015em;font-display:swap}

:root{
  /* La paleta aprobada el 19/08/2026. Los nombres viejos se conservan porque
     los usan 450 lineas de CSS: cambiarlos obligaria a tocar todo el archivo
     para no ganar nada. Lo que cambia es a que color apuntan. */
  --breu:#141210;          /* el negro del video, un punto por debajo de tinta */
  --tinta:#1C1A17;         /* el negro CALIDO de la marca. Nunca el negro puro */
  --papel:#FBF7F0;         /* el crema. Nunca #FFF */
  --sangue:#D9552F;        /* barro — el color de accion */
  --sangue-claro:#F2A03D;  /* manga — sobre negro da 8,2 de contraste */
  --agua:#2B7FA8;          /* el azul de la tira */
  /* El barro de marca da 3,72 sobre papel: pasa para titulares grandes (piden
     3,0) pero NO para texto pequeno (pide 4,5). Este es el mismo barro bajado
     de luminosidad hasta 4,55, y solo se usa en texto chico sobre papel. */
  --sangue-texto:#C54824;
  --carbon:#231F1C;        /* superficies elevadas SOBRE tinta */
  /* El gemelo de carbon para el lado claro, anadido el 21/08. Faltaba: el lado
     oscuro tenia superficie elevada y el claro no, asi que quien necesitaba
     levantar una tarjeta sobre papel echaba mano de #FFF — que la paleta
     prohibe tres lineas mas arriba. Esto es papel un punto por encima. */
  --papel-alto:#FEFCF8;    /* superficies elevadas SOBRE papel */
  /* Tambien faltaba, y llevaba tiempo roto: .voz pedia var(--linha) y nadie lo
     habia declarado, asi que las tarjetas de testimonios se quedaban sin borde
     y solo las separaba el blanco del fondo. Va a 2px y no a 3 como el briefing:
     2px es la medida de la casa en este archivo —.busca, .plano, los botones—
     y .busca es el caso gemelo, una tarjeta clara sobre papel. */
  --linha:2px solid var(--tinta);
  --fumo:rgba(251,247,240,.62);
  --max:1240px;
  --pad:clamp(20px,5vw,72px);
  --filo:clamp(40px,6vw,90px);   /* altura del corte diagonal */
  --t:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* `scroll-padding-top` añadido el 22/08. Antes daba igual porque no había
   anclas: hoy «Comparar os quatro planos» salta a #planos y sin esto el
   titular de la sección aterriza DEBAJO de la cabecera fija, que es como
   pulsar un enlace y que no pase nada visible. Los 96 px son la cabecera
   sólida (≈62) más un respiro. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
/* El 132 dejó de ser un número escrito a mano el 2026-08-26: ahora lo mide el
   JS al cargar y en cada giro de pantalla, y lo deja en --h-topo. El 132 se
   queda solo como red por si el script no llega a correr. */
@media (max-width:640px){html{scroll-padding-top:calc(var(--h-topo,132px) + 12px)}}
body{
  background:var(--papel);color:var(--tinta);
  font-family:'Archivo',system-ui,sans-serif;font-size:clamp(16px,1.15vw,18px);
  line-height:1.6;overflow-x:hidden;
}

/*—— grano serigráfico: lo que le faltaba a la tinta plana ————————————*/
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.tit,.num-grande{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;
  line-height:.86;letter-spacing:-.012em;text-transform:uppercase;
}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--sangue);color:var(--papel)}

.env{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/*=== BLOQUES Y CORTES ===================================================*/
.bloco{position:relative;padding-block:clamp(72px,10vw,150px)}
.bloco--breu{background:var(--breu);color:var(--papel)}
.bloco--sangue{background:var(--sangue);color:var(--papel)}

/* el filo: el corte diagonal que separa un bloque del siguiente */
.filo{position:relative;height:var(--filo);margin-top:calc(var(--filo) * -1);z-index:2}
.filo::before{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,100% 0,100% 100%)}
.filo--para-papel::before{background:var(--papel)}
.filo--para-breu::before{background:var(--breu)}
.filo--para-sangue::before{background:var(--sangue)}

/*=== CABECERA ===========================================================*/
.topo{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);
  color:var(--papel);
  transition:background .4s var(--t),color .4s var(--t),padding .4s var(--t);
}
.topo.pegado{background:var(--papel);color:var(--tinta);padding-block:11px;
  box-shadow:0 1px 0 rgba(28,26,23,.16)}
.topo__logo{width:clamp(132px,13vw,178px);color:inherit}
.topo__logo svg{width:100%;height:auto;display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Archivo',system-ui,sans-serif;font-weight:500;font-size:.82rem;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--t),background .2s,color .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn--sangue{background:var(--sangue);color:var(--papel)}
.btn--sangue:hover{background:var(--tinta)}
.btn--vazio{border-color:currentColor}
.btn--vazio:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.bloco--breu .btn--vazio:hover{background:var(--papel);color:var(--breu);border-color:var(--papel)}
.btn--grande{padding:19px 34px;font-size:.9rem}

/*=== 00 · PORTADA =======================================================*/
/* LA PORTADA, SIN VÍDEO — 19/08/2026
   Aquí había un vídeo de la marca anterior. Al caerse, la portada se queda con
   lo único que tiene que decir: la frase. Es la misma composición de las
   plantillas de post — barra de barro a sangre por la izquierda, texto grande
   sobre tinta — así que la web y el Instagram se leen como la misma casa. */
.capa{position:relative;min-height:100svh;background:var(--tinta);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(64px + clamp(40px,9vh,110px)) 0 clamp(28px,5vh,56px)}
.capa__barra{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--sangue)}
.capa__centro{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--papel)}

/* ---------------------------------------------------------------------------
   EL LOGOTIPO SE MONTA SOLO — sustituto del vídeo que se cayó
   La misma idea que tenía la abertura: algo que se resuelve delante de ti y se
   queda quieto. Pero en 3 KB de SVG y CSS en vez de 905 KB de MP4.

   Se reproduce UNA vez, no en bucle. Un logotipo que no para de moverse es un
   banner, no una marca — y a la tercera vuelta ya molesta.

   El orden importa y es el del propio dibujo: primero el fotograma vacío,
   después las perforaciones que lo convierten en película, y al final el corte
   de luz atravesándolo. Contado al revés no significa nada.
--------------------------------------------------------------------------- */
.capa__marca{width:clamp(88px,11vw,142px);margin-bottom:clamp(26px,3.6vh,44px)}
.capa__marca svg{display:block;width:100%;height:auto}

/* 1 · el fotograma entra entero, subiendo un poco */
.capa__marca svg{animation:marca-entra .62s var(--t) both}
@keyframes marca-entra{
  from{opacity:0;transform:translateY(14px) scale(.965)}
  to{opacity:1;transform:none}
}

/* 2 · las perforaciones, una detrás de otra. Son 16 — ocho arriba y ocho
       abajo — y el SVG las dibuja por columnas, así que el orden natural del
       archivo ya recorre la tira de izquierda a derecha. */
.capa__marca svg>g:last-of-type rect{opacity:0;animation:perf .3s var(--t) both}
.capa__marca svg>g:last-of-type rect:nth-child(n){animation-delay:.42s}
.capa__marca svg>g:last-of-type rect:nth-child(n+3){animation-delay:.48s}
.capa__marca svg>g:last-of-type rect:nth-child(n+5){animation-delay:.54s}
.capa__marca svg>g:last-of-type rect:nth-child(n+7){animation-delay:.60s}
.capa__marca svg>g:last-of-type rect:nth-child(n+9){animation-delay:.66s}
.capa__marca svg>g:last-of-type rect:nth-child(n+11){animation-delay:.72s}
.capa__marca svg>g:last-of-type rect:nth-child(n+13){animation-delay:.78s}
.capa__marca svg>g:last-of-type rect:nth-child(n+15){animation-delay:.84s}
@keyframes perf{from{opacity:0}to{opacity:1}}

/* 3 · el corte de luz atraviesa la ventana. Las bandas ya van recortadas por
       el clipPath del propio icono, así que basta con moverlas: entran por
       abajo a la izquierda y salen a su sitio. Las tres, escalonadas. */
.capa__marca svg>g:first-of-type path{
  animation:corte .82s cubic-bezier(.18,.72,.24,1) both}
.capa__marca svg>g:first-of-type path:nth-child(1){animation-delay:.70s}
.capa__marca svg>g:first-of-type path:nth-child(2){animation-delay:.80s}
.capa__marca svg>g:first-of-type path:nth-child(3){animation-delay:.90s}
@keyframes corte{
  from{opacity:.2;transform:translate(-52px,124px)}
  to{opacity:1;transform:none}
}

/* 4 · y detrás, el texto */
.capa__centro .olho{animation:sube-texto .6s var(--t) 1.05s both}
.capa__titulo{animation:sube-texto .7s var(--t) 1.14s both}
.capa__lema{animation:sube-texto .7s var(--t) 1.26s both}
.capa__pe{animation:sube-texto .6s var(--t) 1.44s both}
@keyframes sube-texto{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Quien pide menos movimiento lo ve montado, sin montarse. No es un extra de
   accesibilidad: hay gente a la que este tipo de animación le marea. */
@media (prefers-reduced-motion:reduce){
  .capa__marca svg,.capa__marca svg>g:last-of-type rect,
  .capa__marca svg>g:first-of-type path,
  .capa__centro .olho,.capa__titulo,.capa__lema,.capa__pe{animation:none}
  .capa__marca svg>g:last-of-type rect{opacity:1}
}
.capa__titulo{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2.7rem,7.4vw,6.2rem);line-height:.98;max-width:16ch;
  color:var(--papel);margin:0}
.capa__titulo::after{content:'';display:block;width:clamp(64px,7vw,110px);height:5px;
  background:var(--sangue-claro);margin-top:clamp(24px,3.4vh,42px)}
.capa__lema{margin-top:clamp(22px,3vh,36px);max-width:46ch;
  font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.55;color:var(--fumo)}
.capa__pe{display:flex;align-items:flex-end;justify-content:flex-start;color:var(--papel)}
.olho{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:14px;color:var(--sangue-claro);
}
.olho::before{content:'';width:26px;height:2px;background:currentColor;flex:none}

/*—— EL RÓTULO DE SECCIÓN, EN MÓVIL ————————————————————————————————————
   Damián, 2026-08-26: «las letras amarillas con el nombre de cada sección
   salen comprimidas». Tenía razón, y el problema no era el tamaño de la letra.

   `.olho` es un flex: rayita de 26px, hueco de 10 y el texto. Mientras el
   rótulo cabe en una línea se ve como debe. Cuando no cabe pasan tres cosas a
   la vez y el conjunto se lee fatal:
     · la rayita, centrada por `align-items:center`, se queda FLOTANDO entre
       las dos líneas, desconectada del texto;
     · la segunda línea cuelga sangrada bajo la primera, sin nada a su
       izquierda;
     · y el contraste entre letras muy separadas y renglones muy juntos hace
       que parezca estrujado.

   Se parte en 5 de los 15 rótulos del sitio: portada y precios, en los tres
   idiomas. «A PORTA DE ENTRADA · PREÇO FECHADO» es el peor.

   Dos medidas, en este orden:

   1) BAJAR EL ESPACIADO EN MÓVIL. El .2em está pensado para una pantalla
      ancha; en 360px es lo que empuja el texto fuera de la línea. A .1em los
      cinco rótulos entran de una pieza. Se pierde algo de aire, pero el aire
      no sirve de nada si parte la frase en dos.

   2) QUE PARTIRSE DEJE DE SER FEO. Bajar el espaciado arregla los tres
      rótulos portugueses e inglés, pero el español es cuatro caracteres más
      largo y sigue sin caber. Apretar la letra hasta que entre a la fuerza es
      pan para hoy: mañana cambia un texto y vuelve el problema.

      Así que la rayita sale del flujo. Con `position:absolute` deja de ser un
      hermano del texto y pasa a estar al lado de la primera línea, y el texto
      vuelve a ser un párrafo normal que envuelve alineado a su margen. Un
      rótulo de dos líneas así se lee perfectamente; lo que se leía mal era la
      segunda línea colgando sangrada bajo la primera, sin nada a la izquierda.

      Se conserva `inline-flex` en el precio destacado, que va centrado y donde
      el texto es corto y siempre cabe.

   3) Y SI AUN ASÍ SE PARTE, QUE PARTA BIEN. En español los dos rótulos siguen
      sin caber, y quedaba «CERRADO» solo en la segunda línea — una viuda, que
      es justo lo que hace que un rótulo parezca roto. `text-wrap:balance`
      reparte el texto entre las dos líneas en vez de llenar la primera y tirar
      lo que sobra a la segunda: «LA PUERTA DE ENTRADA ·» arriba y «PRECIO
      CERRADO» abajo. Dos líneas equilibradas se leen como una decisión; una
      viuda se lee como un error.

      Está pensada exactamente para titulares y rótulos cortos. Donde el
      navegador no la entienda, no pasa nada: se ve como antes. */
@media (max-width:640px){
  .olho,.cr__olho{letter-spacing:.1em}
  .olho{display:block;position:relative;padding-left:36px;text-wrap:balance}
  .olho::before{position:absolute;left:0;top:.58em}

  .precoalto .olho{display:inline-flex;align-items:center;padding-left:0}
  .precoalto .olho::before{position:static;top:auto}
}
.capa__desce{display:flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fumo);text-decoration:none}
.capa__desce span{display:block;width:1px;height:44px;background:var(--fumo);position:relative;overflow:hidden}
.capa__desce span::after{content:'';position:absolute;inset:0;background:var(--sangue-claro);
  animation:cair 2.2s var(--t) infinite}
@keyframes cair{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}


/*=== TÍTULOS DE SECCIÓN =================================================*/
.cab{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,54px);
  align-items:start;margin-bottom:clamp(34px,4.5vw,62px)}
.cab__n{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(2.6rem,6vw,5rem);
  line-height:.8;color:var(--sangue);opacity:.9}
.bloco--breu .cab__n{color:var(--sangue-claro)}
.bloco--sangue .cab__n{color:var(--papel);opacity:.45}
.cab__t{font-size:clamp(2.1rem,5.4vw,4.4rem);max-width:20ch}
.cab__olho{margin-bottom:12px;color:var(--tinta);opacity:.55}
.bloco--breu .cab__olho{color:var(--sangue-claro);opacity:1}
.bloco--sangue .cab__olho{color:var(--papel);opacity:.75}
.entrada{max-width:56ch;margin-top:20px;font-size:1.06rem}

/*=== 01 · NÚMEROS =======================================================*/
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:2px solid currentColor;margin-top:clamp(40px,5vw,72px)}
.cifra{padding:26px 20px 24px;border-right:2px solid currentColor}
.cifra:last-child{border-right:0}
.cifra b{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:.9}
.cifra span{display:block;margin-top:8px;font-size:.82rem;letter-spacing:.05em;opacity:.7}

/*=== 02 · EL TEST =======================================================*/
.teste{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.teste__nota{border-left:5px solid var(--sangue);padding-left:22px;margin-top:26px;
  font-size:1.15rem;font-weight:500}
/* la "búsqueda vacía" — el argumento dibujado, no contado */
.busca{background:var(--papel);border:2px solid var(--tinta);
  box-shadow:14px 14px 0 var(--tinta)}
.busca__barra{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:2px solid var(--tinta);font-size:.95rem}
.busca__barra i{width:9px;height:9px;border:2px solid var(--tinta);border-radius:50%;flex:none}
.busca__corpo{padding:22px 18px 26px;display:grid;gap:14px}
.busca__linha{height:13px;background:rgba(28,26,23,.13)}
.busca__linha--curta{width:52%}
.busca__vazio{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);
  color:var(--sangue);text-transform:uppercase;line-height:.95;padding-top:6px}

/*=== 03 · EL TRABAJO ====================================================*/
/* una obra por fila, alternando lado: registro de portfolio, no de rejilla */
.obras{display:grid;gap:clamp(44px,6vw,90px)}
.obra{position:relative;text-decoration:none;color:inherit;
  display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.obra__texto{display:flex;flex-direction:column}
.obra__resumo{font-size:1.02rem;opacity:.82;margin:16px 0 4px;max-width:52ch}
/* la par va espejada: el marco a la derecha, y las columnas cambian de sitio con él */
.obra:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,330px)}
.obra:nth-child(even) .obra__quadro{order:2}
/* la captura es vertical (760×1098): el marco la respeta entera, sin recortar */
.obra__quadro{position:relative;overflow:hidden;background:var(--breu);aspect-ratio:760/1098}
.obra__quadro img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--t),filter .8s var(--t);filter:saturate(.92)}
.obra:hover .obra__quadro img{transform:scale(1.045);filter:saturate(1.1)}
/* marcas de esquina — el encuadre de rodaje */
.obra__quadro::before,.obra__quadro::after{content:'';position:absolute;width:26px;height:26px;
  border:3px solid var(--sangue-claro);z-index:2;transition:inset .5s var(--t)}
.obra__quadro::before{top:14px;left:14px;border-right:0;border-bottom:0}
.obra__quadro::after{bottom:14px;right:14px;border-left:0;border-top:0}
.obra:hover .obra__quadro::before{top:9px;left:9px}
.obra:hover .obra__quadro::after{bottom:9px;right:9px}
.obra__topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 0 12px;border-bottom:2px solid currentColor}
.obra__nome{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.6rem,2.8vw,2.3rem);
  text-transform:uppercase;line-height:.9}
.obra__nota{font-size:.84rem;opacity:.7;white-space:nowrap}
.obra__lista{list-style:none;padding-top:16px;display:grid;gap:9px;font-size:.94rem}
.obra__lista li{padding-left:20px;position:relative;opacity:.85}
.obra__lista li::before{content:'';position:absolute;left:0;top:.58em;width:9px;height:2px;
  background:var(--sangue-claro)}
.obra__ir{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sangue-claro);text-decoration:none}
.obra:hover .obra__ir{gap:16px}
.obra__ir{transition:gap .3s var(--t)}

/*=== 04 · REJILLA GENÉRICA ==============================================*/
/* 6 piezas → 3 columnas exactas. Con auto-fit salían 4+2 y la rejilla quedaba coja */
.grade{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid currentColor;border-left:2px solid currentColor}
@media (max-width:900px){.grade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grade{grid-template-columns:1fr}}
.grade>div{padding:clamp(22px,2.4vw,32px);
  border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.grade h3{font-size:clamp(1.05rem,1.7vw,1.3rem);margin-bottom:9px}
.grade p{font-size:.94rem;opacity:.78}

/*=== 05 · PASOS =========================================================*/
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;
  background:currentColor}
.passo{background:var(--papel);padding:clamp(24px,3vw,38px);position:relative}
.bloco--breu .passo{background:var(--breu)}
.passo b{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:700;
  font-size:clamp(3rem,6vw,4.6rem);line-height:.8;color:var(--sangue);margin-bottom:14px}
.bloco--breu .passo b{color:var(--sangue-claro)}
.passo h3{font-size:1.12rem;margin-bottom:8px}
.passo p{font-size:.95rem;opacity:.8}

/*=== 06 · PRECIO — LA MATRIZ ============================================*/
.matriz{display:grid;grid-template-columns:auto 1fr 1fr;gap:2px;background:rgba(242,239,232,.28)}
.matriz>*{background:var(--breu);padding:clamp(18px,2.2vw,30px)}
.matriz__canto{display:flex;align-items:flex-end}
.matriz__canto span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.matriz__col{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.matriz__col b{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.3rem,2.2vw,1.8rem);
  text-transform:uppercase;line-height:.92}
.matriz__col span{font-size:.86rem;opacity:.7}
.matriz__lin{display:flex;align-items:center}
.matriz__lin b{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.2rem,2vw,1.6rem);
  text-transform:uppercase;line-height:.92;writing-mode:horizontal-tb}
.plano{display:flex;flex-direction:column;gap:12px;position:relative}
.plano--destaque{outline:3px solid var(--sangue-claro);outline-offset:-3px}
.plano__selo{position:absolute;top:0;right:0;background:var(--sangue-claro);color:var(--breu);
  font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px}
.plano__nome{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.plano__preco{font-family:'Archivo',system-ui,sans-serif;font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:.86}
.plano__mes{font-size:.8rem;opacity:.62;margin-top:-4px}
.plano__lista{list-style:none;display:grid;gap:7px;font-size:.9rem;margin-top:4px}
.plano__lista li{padding-left:18px;position:relative;opacity:.85}
.plano__lista li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:2px;
  background:var(--sangue-claro)}
.plano .btn{margin-top:auto;align-self:flex-start}
.rodape-preco{margin-top:26px;font-size:.86rem;opacity:.62;max-width:74ch}

/*=== 07 · PREGUNTAS =====================================================*/
.pergunta{border-bottom:2px solid currentColor}
.pergunta:first-of-type{border-top:2px solid currentColor}
.pergunta summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.55rem);line-height:1.05;transition:color .2s}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary:hover{color:var(--sangue)}
.pergunta summary::after{content:'+';font-size:1.5em;line-height:.7;color:var(--sangue);flex:none}
.pergunta[open] summary::after{content:'–'}
.pergunta p{padding:0 0 24px;max-width:70ch;opacity:.82}

/*=== 08 · CONTACTO ======================================================*/
.contato{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.form{display:grid;gap:14px}
.campo{display:grid;gap:6px}
.campo label{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.campo input,.campo select,.campo textarea{
  font:400 1rem/1.5 'Archivo',system-ui,sans-serif;color:var(--papel);
  background:transparent;border:2px solid rgba(242,239,232,.42);padding:12px 14px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--sangue-claro)}
.campo select option{color:#1C1A17}
.campo textarea{resize:vertical;min-height:96px}

/*=== PIE ================================================================*/
.pe{background:var(--tinta);color:var(--papel);padding-block:clamp(44px,6vw,70px)}
.pe__grade{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between}
.pe__logo{width:170px;color:var(--papel)}
.pe__logo svg{width:100%;height:auto}
.pe p{font-size:.88rem;opacity:.62;max-width:46ch}
.pe a{color:var(--sangue-claro)}

/*=== MOVIMIENTO =========================================================*/
.sobe{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--t),transform .7s var(--t)}
.sobe.vis{opacity:1;transform:none}
.sobe:nth-child(2){transition-delay:.07s}
.sobe:nth-child(3){transition-delay:.14s}
.sobe:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sobe{opacity:1;transform:none}
}

/*=== MÓVIL ==============================================================*/
@media (max-width:860px){
  .teste,.contato,.obra,.obra:nth-child(even){grid-template-columns:1fr}
  .obra:nth-child(even) .obra__quadro{order:0}
  .obra__quadro{aspect-ratio:760/860}
  .cab{grid-template-columns:1fr;gap:10px}
  .cab__n{font-size:2.6rem}
  .matriz{grid-template-columns:1fr;background:transparent;gap:14px}
  .matriz__canto,.matriz__col,.matriz__lin{display:none}
  .plano{border:2px solid rgba(242,239,232,.35);padding:24px}
  .capa__pe{flex-direction:column;align-items:flex-start}
  .topo__logo{width:112px}
}
@media (max-width:520px){
  .topo .btn{padding:10px 14px;font-size:.7rem}
  .busca{box-shadow:8px 8px 0 var(--tinta)}
}

/*=== SELECTOR DE IDIOMA ==================================================*/
.idiomas{display:flex;gap:2px;align-items:center}
.idiomas a{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:6px 8px;font-size:.7rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;border:2px solid transparent;
  transition:background .2s,color .2s,border-color .2s}
.idiomas a[aria-current]{border-color:currentColor}
.idiomas a:hover{background:var(--sangue);color:var(--papel);border-color:var(--sangue)}
.pe .idiomas{margin-top:18px}
@media (max-width:640px){
  .topo .idiomas a{min-width:28px;padding:5px 6px;font-size:.64rem}
}

/*=== EL PÓSTER TAPA EL FINAL DEL VÍDEO ===================================*/
/* El último fotograma se queda fijo en pantalla, y comprimido se le notan los
   bordes. Al terminar, encima va el .webp de 12 KB: siempre nítido, en móvil
   y en escritorio, sin subir el bitrate del vídeo. */


/*=== SALTAR AL CONTENIDO =================================================*/
/* Solo aparece al llegar con el tabulador. Sin esto se ve suelto arriba del
   todo, que es como salió al montar el sitio nuevo: la maqueta no lo llevaba. */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--sangue);color:var(--papel);padding:12px 18px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;
  text-decoration:none}
.saltar:focus{left:0}

/*=== LA PORTADA EN VERTICAL ==============================================*/
/* El vídeo es 16:9 y la pantalla del móvil es vertical: con `cover` el recorte
   se comía el logotipo y solo se leía «MACH». Aquí pasa a `contain` — se ve
   entero, y como la escena es casi negra sobre fondo el negro del vídeo las bandas de
   arriba y abajo no se distinguen. */
@media (max-width:820px){
  /* La portada deja de ocupar la pantalla entera: apilada, el vídeo va a todo
     el ancho justo bajo la cabecera y el texto debajo. Con `cover` a pantalla
     completa el recorte se comía el logotipo —solo se leía «MACH»—, y con
     `contain` sobre 100svh el vídeo quedaba flotando en un mar de negro. */
  /* La portada sigue llenando la pantalla en móvil. Lo único que cambia es el
     aire: en 390 px de ancho, el padding de escritorio se come media portada. */
  .capa{padding-top:calc(60px + clamp(24px,7vh,60px));padding-bottom:clamp(22px,4vh,40px)}
  .capa__titulo{font-size:clamp(2.5rem,10.5vw,3.6rem);max-width:13ch}
  .capa__lema{font-size:1.02rem;max-width:34ch}

  /* EL LOGOTIPO GRANDE SE VA DE LA PORTADA EN MÓVIL.
     En escritorio hay sitio para el fotograma arriba y la frase debajo. En
     390 px de ancho no: el logotipo de la cabecera queda a un dedo del
     logotipo de la portada, dos veces la misma marca en la misma pantalla, y
     el conjunto se lee amontonado. Aquí manda la frase, que es lo aprobado.
     La animación no se pierde — pasa al texto, que ya la tenía. */
  .capa__marca{display:none}
  .capa__centro .olho{animation-delay:.12s}
  .capa__titulo{animation-delay:.24s}
  .capa__lema{animation-delay:.40s}
  .capa__pe{animation-delay:.58s}
}

/*=== OBRA EN CONSTRUCCIÓN ================================================*/
.obra--breve .obra__quadro::before,.obra--breve .obra__quadro::after{border-color:var(--papel)}
.obra--breve .obra__quadro img{filter:saturate(.7) brightness(.72)}
.obra--breve:hover .obra__quadro img{filter:saturate(.85) brightness(.82)}
.obra__breve{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:3;background:var(--sangue);color:var(--papel);
  font-family:'Archivo',system-ui,sans-serif;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.04em;line-height:1;
  padding:.5em .9em;white-space:nowrap}
.obra--breve{cursor:default}
.obra--breve .obra__ir{color:var(--fumo);opacity:.75}
/* Obra de marca: trabajo terminado que no es un site. Ni se atenúa ni se enlaza. */
.obra--marca{cursor:default}
.obra--marca .obra__ir--seco{color:var(--sangue-claro);opacity:.9;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600}

/*=== 09 · LO QUE DICEN ===================================================*/
.vozes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,30px)}
.voz{border:var(--linha);background:var(--papel-alto);padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;gap:14px}
.voz__estrelas{color:var(--sangue);font-size:1.05rem;letter-spacing:.12em;line-height:1}
.voz__txt{font-size:1.02rem;line-height:1.55;flex:1}
.voz__quem{font-size:.84rem;opacity:.62;border-top:2px solid rgba(28,26,23,.15);padding-top:12px}
.voz__quem b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:1.05rem;
  text-transform:uppercase;opacity:1;color:var(--tinta);letter-spacing:.01em}
.nota-vozes{margin-top:22px;font-size:.84rem;opacity:.55;max-width:70ch}

/*=== LAS TRES PATAS ======================================================*/
/* Lo primero que se ve al bajar de la portada. Tiene que decir en tres bloques
   qué es esta casa, antes de contar nada más. */
.patas{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:currentColor;
  margin-top:clamp(34px,4vw,56px)}
.pata{background:var(--papel);padding:clamp(24px,3vw,40px);display:flex;
  flex-direction:column;gap:12px}
.bloco--breu .pata{background:var(--breu)}
.pata__n{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.6rem,3vw,2.3rem);
  text-transform:uppercase;line-height:.9;color:var(--sangue)}
.bloco--breu .pata__n{color:var(--sangue-claro)}
.pata p{font-size:.96rem;opacity:.8;line-height:1.55}
@media (max-width:820px){.patas{grid-template-columns:1fr}}

/*=== EL CASO CONTADO POR PASOS ===========================================*/
.pasos-caso{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(30px,4vw,50px)}
.paso-caso{display:flex;flex-direction:column;gap:14px}
.paso-caso__img{position:relative;overflow:hidden;background:var(--breu);aspect-ratio:16/10;
  border:2px solid rgba(242,239,232,.18)}
.paso-caso__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--t)}
.paso-caso:hover .paso-caso__img img{transform:scale(1.04)}
.paso-caso__n{position:absolute;top:0;left:0;z-index:2;background:var(--sangue);
  color:var(--papel);font-family:'Archivo',system-ui,sans-serif;font-size:1.1rem;
  line-height:1;padding:8px 12px}
.paso-caso h3{font-size:clamp(1.15rem,2vw,1.5rem)}
.paso-caso p{font-size:.95rem;opacity:.8;line-height:1.55}
@media (max-width:760px){.pasos-caso{grid-template-columns:1fr}}

/*=== PROYECTOS SIN PRECIO ================================================*/
.projetos{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid currentColor;border-left:2px solid currentColor;
  margin-top:clamp(30px,4vw,50px)}
.projeto{padding:clamp(22px,2.6vw,34px);border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;display:flex;flex-direction:column;gap:12px}
.projeto__n{font-family:'Archivo',system-ui,sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);
  text-transform:uppercase;line-height:.9}
.projeto__para{font-size:.92rem;opacity:.72;line-height:1.5}
.projeto ul{list-style:none;display:grid;gap:9px;font-size:.92rem;margin-top:6px;
  padding-top:16px;border-top:1px solid currentColor}
.projeto ul{border-top-color:color-mix(in srgb,currentColor 22%,transparent)}
.projeto li{padding-left:19px;position:relative;opacity:.85}
.projeto li::before{content:'';position:absolute;left:0;top:.58em;width:9px;height:2px;
  background:var(--sangue)}
.bloco--breu .projeto li::before{background:var(--sangue-claro)}
@media (max-width:820px){.projetos{grid-template-columns:1fr}}


/* ---------------------------------------------------------------------------
   LA FILMOGRAFIA — seccion 02, «a origem».
   Cuatro columnas de titulos. No es una rejilla de tarjetas a proposito: son
   creditos, y los creditos se leen como una lista, no como un catalogo.
--------------------------------------------------------------------------- */
.filmo{
  /* tres columnas desde que se cayó la de dirección de fotografía: con cuatro
     quedaba un hueco vacío a la derecha y la rejilla se leía rota */
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,52px);
  margin-top:clamp(30px,4vw,50px);
  padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid rgba(28,26,23,.14);
}
.filmo__cat h3{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sangue-texto);margin:0 0 14px;
}
.filmo__cat ul{list-style:none;margin:0;padding:0}
.filmo__cat li{
  font-size:clamp(.94rem,1.5vw,1.02rem);line-height:1.45;
  padding:9px 0;border-top:1px solid rgba(28,26,23,.09);
}
.filmo__cat li:first-child{border-top:0;padding-top:0}
@media(max-width:900px){.filmo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.filmo{grid-template-columns:1fr}}

/* Sobre fondo oscuro el barro oscuro no se lee: alli manda la manga. */
.bloco--breu .filmo__cat h3{color:var(--sangue-claro)}
.bloco--breu .filmo{border-top-color:rgba(251,247,240,.18)}
.bloco--breu .filmo__cat li{border-top-color:rgba(251,247,240,.12)}

/* El Instagram en el pie. Va suelto y en manga: es el unico enlace del pie que
   no es un cliente, y tiene que distinguirse de los dos que si lo son. */
.pe__redes{margin-top:14px;font-size:.95rem;display:flex;flex-wrap:wrap;gap:10px}
.pe__punto{opacity:.4}
.pe__redes a{color:var(--sangue-claro);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s}
.pe__redes a:hover{border-bottom-color:var(--sangue-claro)}


/*=== MÓVIL: EL MISMO CONTENIDO, EN LA MITAD DE SCROLL =====================
   En 390 px de ancho todo se apila, y lo que en escritorio es un ritmo
   holgado se convierte en veintidós pantallas. Aquí no se esconde nada: se
   aprieta el aire, que es donde se iba la mitad de la altura.
=========================================================================*/
@media (max-width:680px){
  .bloco{padding-block:clamp(48px,11vw,72px)}
  .bloco[style*="padding-top:0"]{padding-top:0}
  .cab{gap:6px}
  .cab__n{font-size:2.1rem;line-height:1}
  .cab__t{font-size:clamp(1.9rem,7.4vw,2.5rem);max-width:17ch}
  .entrada{margin-top:14px;font-size:1rem;line-height:1.55}

  /* las tres columnas de la filmografía, apiladas y sin aire de sobra */
  .filmo{gap:26px;margin-top:26px;padding-top:22px}
  .filmo__cat h3{margin-bottom:9px}
  .filmo__cat li{padding:7px 0;font-size:.94rem;line-height:1.4}

  /* los tres frentes: veintiún entregables apilados son tres pantallas */
  .projetos{margin-top:26px}
  .projeto{padding:20px 18px;gap:9px}
  .projeto__n{font-size:1.5rem}
  .projeto ul{gap:7px;padding-top:13px;font-size:.9rem}

  .patas{gap:0}
  .pata{padding:22px 20px}
  .obras{gap:44px}
  .pasos-caso{gap:26px}
  .cifras{gap:22px;margin-top:26px}
  .vozes{gap:16px}
  .voz{padding:20px}
  .passo{padding:20px}
  .grade{gap:2px}
  .grade>div{padding:20px}
  .pergunta summary{padding:16px 0}
  .form{gap:14px}
}

/* Un móvil pequeño de verdad — un iPhone SE mide 375, y hay Android de 360 */
/*
  AQUÍ FALTABA LA LÍNEA `@media` — arreglado el 2026-08-22
  --------------------------------------------------------
  El bloque tenía su comentario y sus reglas, pero **no tenía la línea que abre
  la consulta de medios**. Estaba escrito así:

      / * Un móvil pequeño de verdad … * /
        .topo{padding:11px var(--pad)}
        .topo__logo{width:74px}
        …
      }                                  ← esta llave no cerraba nada

  O sea que las reglas de un móvil de 375 px **se estaban aplicando en todos los
  tamaños**, y la llave suelta del final quedaba huérfana. El archivo tenía 376
  llaves abiertas y 377 cerradas.

  QUÉ ROMPÍA, Y ESTABA EN PRODUCCIÓN
  -----------------------------------
  Damián lo vio así: «Gorillão se ve raro, es muy grande, debe tener el mismo
  tamaño que los demás». Y tenía razón, aunque la causa no era Gorillão ni su
  imagen —las tres capturas tienen la misma proporción, 1140 × 1647—.

  La culpable era esta línea de aquí abajo:

      .obra:nth-child(even) .obra__quadro{order:0}

  Las obras van alternando lado: la impar con el marco a la izquierda, la par
  espejada. El espejo se hace con `order:2` sobre el marco. Esta regla, pensada
  para cuando están apiladas en un móvil, lo devolvía a `order:0` **también en
  el escritorio**, así que el marco de Gorillão caía en la columna elástica en
  vez de en la de 330 px.

  Medido antes de arreglarlo, a 1280 px de ancho:

      Seu Barzin   330 × 477
      Gorillão     731 × 1056     ← más del doble
      Trinka Bar   330 × 477

  Y no era lo único: el logotipo de la cabecera se estaba sirviendo a 74 px en
  el escritorio, que es la medida que este bloque reserva para un teléfono.

  Está roto **desde al menos el 19/08**: se comprobó en el HTML publicado de los
  cambios 14 y 15 y en los dos falta igual. Lo más probable es que se lo llevara
  por delante uno de los `_parche-*.py` de esos días.

  EL VALOR DEL CORTE ES UNA RECONSTRUCCIÓN, Y CONVIENE SABERLO
  -------------------------------------------------------------
  El número original se perdió con la línea. 480 px sale del propio comentario
  —«un iPhone SE mide 375, y hay Android de 360»— y de la escalera que ya había
  en el archivo: 680 arriba y 400 abajo. Lo importante no es acertar el número
  exacto sino que estas reglas **dejen de aplicarse en un monitor**.
*/
@media (max-width:480px){
  /* La cabecera fija se comía 122 px de 844 — uno de cada siete. El logotipo
     completo no hace falta a ese tamaño: se lee igual más pequeño. */
  .topo{padding:11px var(--pad)}
  .topo__logo{width:74px}
  .topo .btn{padding:9px 12px;font-size:.66rem}

  /* LA PROPORCIÓN DE LAS OBRAS, RESTAURADA.
     Estuvo un rato en 4/3 para acortar la página, y fue un error: las tres
     imágenes son capturas de un móvil —verticales, 760 × 1098— y metidas en
     un recuadro horizontal el recorte se comía la mitad del sitio. Se veían
     aplastadas y sin sentido. Vuelven a su forma: una captura de móvil tiene
     que parecer un móvil.
     Lo que sí se queda es el orden: apiladas, la foto va siempre primero. */
  .obra__quadro{aspect-ratio:760/1098;order:0}
  .obra:nth-child(even) .obra__quadro{order:0}
  .paso-caso__img{aspect-ratio:3/2}
  .plano{padding:20px}
  .voz{padding:18px}
}

@media (max-width:400px){
  :root{--pad:18px}
  .capa__titulo{font-size:2.35rem}
  .cab__t{font-size:1.78rem}
}


/*========================================================================
  LAS CINCO PÁGINAS — añadido el 2026-08-22

  Todo lo de aquí abajo existe porque el sitio dejó de ser una página. El
  problema que lo provocó, dicho con las palabras de Damián: estaba enseñando
  el sitio a una posible clienta y **tardó casi un minuto en encontrar los
  precios**. No había menú. En toda la página había dos enlaces internos.

  La regla que manda sobre este bloque: no gana quien tiene la página más
  grande con más funciones, gana la que un niño y un abuelo entienden a la
  primera.
=========================================================================*/

/*--- EL MENÚ ----------------------------------------------------------*/
/* Va en el centro de la cabecera, entre el logotipo y el botón. En móvil no
   se esconde detrás de una hamburguesa: son tres palabras y caben. Una
   hamburguesa con tres opciones dentro es esconder el menú para presumir de
   menú — justo lo contrario de lo que este cambio viene a arreglar. */
.menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);flex:1;
  justify-content:center;flex-wrap:wrap}
.menu a{
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:clamp(.82rem,1.05vw,.95rem);letter-spacing:.01em;
  color:inherit;text-decoration:none;padding:6px 2px;position:relative;
  transition:opacity .2s var(--t)}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sangue-claro);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--t)}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
/* La página en la que estás, subrayada y sin bajar de opacidad. Es la única
   pista de «dónde estoy» que tiene el visitante. */
.menu a[aria-current="page"]::after{transform:scaleX(1)}
.topo.pegado .menu a::after,.topo--fixo .menu a::after{background:var(--sangue)}

.topo__dir{display:flex;align-items:center;gap:14px;flex:none}

/* En las páginas interiores la cabecera nace sólida: no hay portada oscura
   detrás sobre la que ir en blanco. */
.topo--fixo{background:var(--papel);color:var(--tinta);padding-block:11px;
  box-shadow:0 1px 0 rgba(28,26,23,.16)}

/* EN MÓVIL LA CABECERA SE PARTÍA EN TRES FILAS Y TAPABA EL TÍTULO.
   Medido en un iPhone de 390 px: logotipo 118 + idiomas 102 + botón 150 = 370,
   más los huecos, no cabía en una fila con el menú, así que envolvía tres
   veces y ocupaba 215 px de alto. La portada interior empezaba a 132 px y el
   título quedaba debajo de la cabecera — invisible.
   Se aprieta todo hasta que caben en DOS filas: arriba logotipo, idiomas y
   botón; abajo el menú. Y la portada interior empieza por debajo de las dos. */
/* REESCRITO EL 2026-08-26 — el apaño de dos filas no aguantó
   ---------------------------------------------------------------------
   Lo de arriba pretendía dos filas: logotipo + idiomas + botón, y el menú
   debajo. En el móvil de Damián salieron TRES. La cuenta, medida sobre su
   captura: logotipo 96 + hueco 8 + idiomas 98 + hueco 8 + botón 127 = 337 px,
   y en un teléfono de 369 px con el padding lateral quedan 333. Envolvía por
   CUATRO PÍXELES, el logotipo se quedaba solo arriba, la cabecera pasaba de
   132 a ~195 px y el título de la página quedaba cortado por debajo.

   Apretar cuatro píxeles más habría durado hasta el siguiente teléfono. Se
   cambia el reparto para que sobre sitio de verdad:

     fila 1 · logotipo + FALAR COMIGO   (96 + 127 = 223 de 333)
     fila 2 · menú + idiomas            (~200 + 98 = 298 de 333)

   Los idiomas viven dentro de .topo__dir en el HTML, así que no se les puede
   dar `order` — son sobrinos, no hermanos. `display:contents` disuelve ese
   div en móvil y sus dos hijos pasan a ser hijos directos del flex, que es
   justo lo que hace falta. El div no tiene rol ARIA, así que no se pierde
   nada por el camino.

   Y la altura ya no se escribe a mano: la mide el JS en --h-topo. */
@media (max-width:640px){
  .topo{flex-wrap:wrap;row-gap:8px;padding-block:10px;gap:8px}
  .topo__logo{width:96px;order:1}
  .topo__dir{display:contents}
  .topo__dir .btn{order:2;margin-left:auto;
    padding:10px 13px;font-size:.7rem;letter-spacing:.06em}
  .menu{order:3;flex:1 1 auto;justify-content:flex-start;gap:16px}
  .menu a{font-size:.84rem}
  .idiomas--topo{order:4;margin-left:auto}
  .idiomas--topo a{min-width:26px;padding:5px 5px;font-size:.66rem}
  .capa--interna{padding-top:calc(var(--h-topo,132px) + 16px);padding-bottom:30px}
  .capa__titulo--interna{font-size:clamp(1.7rem,8vw,2.4rem)}

  /* LA CABECERA SE ENCOGE AL BAJAR Y VUELVE AL SUBIR
     Entera ocupa un cuarto de la pantalla del teléfono, y ese cuarto está
     tapando el texto todo el rato que dura la lectura. Bajando se queda lo
     único que hace falta mientras se lee: quién es y cómo hablarle. El menú
     reaparece en cuanto se sube un dedo, que es el gesto de quien ya ha
     terminado y quiere ir a otro sitio. Arriba del todo se ve siempre entera.
     `visibility` además de la altura para que el teclado no siga entrando en
     unos enlaces que no se ven. */
  .topo.mini .menu,.topo.mini .idiomas--topo{
    height:0;margin:0;overflow:hidden;visibility:hidden}
  .topo.mini{row-gap:0}
  .topo.mini .topo__logo{width:74px}
}
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  .topo__logo{transition:width .28s var(--t)}
}

/*--- LA PORTADA DE UNA PÁGINA INTERIOR --------------------------------*/
/* Corta a propósito. Una portada a pantalla completa en una página interior
   es un peaje: quien pulsa «Preços» quiere el precio, no otra pantalla de
   bienvenida antes. */
.capa--interna{
  min-height:0;display:block;background:var(--tinta);color:var(--papel);
  padding-block:calc(clamp(78px,11vh,120px) + 46px) clamp(34px,5vh,58px)}
.capa--interna .olho{color:var(--sangue-claro);opacity:1}
.capa__titulo--interna{
  font-size:clamp(2rem,5vw,3.6rem);max-width:20ch;margin-top:14px;animation:none}
.capa__titulo--interna::after{height:4px;margin-top:clamp(16px,2vh,26px)}

/*--- LAS TRES PUERTAS DE LA PORTADA -----------------------------------*/
/* Ordenadas por lo que la persona QUIERE —«quiero un site», «quiero ver el
   trabajo», «quiero hablar de un proyecto»— y no por el servicio que se
   vende. Es la diferencia entre un menú de agencia y un menú que se entiende
   sin saber nada del oficio. */
.bloco--portas{padding-block:clamp(46px,6vw,80px)}
.portas{display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.porta{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(24px,2.6vw,34px);
  background:var(--papel-alto);border:var(--linha);border-radius:4px;
  color:var(--tinta);text-decoration:none;
  transition:transform .3s var(--t),background .3s var(--t),color .3s var(--t)}
.porta:hover{transform:translateY(-4px);background:var(--tinta);color:var(--papel)}
.porta__t{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.14rem,1.7vw,1.42rem);line-height:1.15;letter-spacing:-.015em}
.porta__d{font-size:.94rem;line-height:1.5;opacity:.78}
.porta__ir{margin-top:auto;padding-top:12px;font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sangue-texto)}
.porta:hover .porta__ir{color:var(--sangue-claro)}
/* La puerta destacada: la acción de mayor valor, rellena de barro (Von Restorff). */
.porta--destaque{background:var(--sangue);border-color:var(--sangue);color:var(--papel)}
.porta--destaque .porta__d{opacity:1}
.porta--destaque .porta__ir{color:var(--papel);opacity:.95}
.porta--destaque:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.porta--destaque:hover .porta__ir{color:var(--sangue-claro)}
/* Franja de clientes: logos monocromo (crema sobre tinta), sin jerarquía. */
.bloco--clientes{background:var(--tinta);color:var(--papel)}
.cli__olho{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sangue-claro);text-align:center;margin-bottom:clamp(28px,3.5vw,44px)}
.clientes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  column-gap:clamp(30px,5vw,66px);row-gap:clamp(24px,3vw,40px)}
.cliente{height:clamp(34px,4.2vw,52px);display:flex;align-items:center;
  opacity:.66;transition:opacity .3s var(--t)}
.cliente:hover{opacity:1}
.cliente img{height:100%;width:auto;display:block}
.cliente--nome{font-family:'Archivo',system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.55rem);letter-spacing:.005em;color:var(--papel)}
/* El sello de KR es un emblema circular de trazo fino: pide más alto y menos velo. */
.cliente--kr{height:clamp(52px,6.4vw,74px);opacity:.85}

/*--- EL PRECIO, ARRIBA DEL TODO ---------------------------------------*/
/* Lo primero que se ve al entrar en /precos/ es la cifra. No un titular, no
   una explicación, no cuatro tarjetas que hay que comparar: el número y el
   plazo. Quien solo quería saber cuánto cuesta ya lo sabe sin bajar. */
.precoalto{background:var(--tinta);color:var(--papel);
  padding-block:clamp(40px,6vw,72px) clamp(52px,7vw,86px);text-align:center}
.precoalto__env{display:flex;flex-direction:column;align-items:center;gap:6px}
.precoalto .olho{color:var(--sangue-claro);opacity:1;justify-content:center}
.precoalto__desde{margin:14px 0 0;font-size:.94rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fumo)}
.precoalto__num{
  margin:2px 0 0;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:clamp(3.4rem,12vw,7.4rem);line-height:.94;letter-spacing:-.035em;
  color:var(--papel)}
.precoalto__prazo{margin:10px 0 0;font-family:'Archivo',system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.02rem,2vw,1.34rem);color:var(--sangue-claro)}
.precoalto__sub{margin:18px 0 0;max-width:52ch;font-size:.98rem;line-height:1.55;
  color:var(--fumo)}
.precoalto__botoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(24px,3vw,34px)}
/* La comparativa deja de ser un boton: era un tercer rectangulo compitiendo
   con los dos que si piden una accion. Como enlace de texto sigue estando a un
   toque y deja de robar atencion. */
.precoalto__ver{display:inline-block;margin-top:18px;color:var(--sangue-claro);
  font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:.92rem;
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .2s var(--t)}
.precoalto__ver:hover{border-bottom-color:var(--sangue-claro)}

/*--- LA TABLA COMPARATIVA ---------------------------------------------*/
/* La matriz de cuatro planes se entiende, pero para saber QUÉ CAMBIA de uno a
   otro hay que leer cuatro listas y compararlas de memoria. Esto es lo mismo
   en una rejilla. Es lo que se mira de verdad cuando se está decidiendo. */
.tabela-env{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:var(--linha);border-radius:4px;background:var(--papel-alto)}
.tabela{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
.tabela th,.tabela td{padding:13px clamp(10px,1.2vw,18px);text-align:center;
  border-bottom:1px solid rgba(28,26,23,.12)}
.tabela thead th{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:.86rem;
  line-height:1.2;background:var(--tinta);color:var(--papel);
  position:sticky;top:0}
/* La primera columna se queda quieta al arrastrar en móvil. Sin esto, en un
   teléfono acabas mirando cuatro columnas de «sí / no» sin saber de qué fila
   son — que es exactamente el fallo que esta tabla viene a arreglar. */
.tabela tbody th{text-align:left;font-weight:600;white-space:nowrap;
  position:sticky;left:0;background:var(--papel-alto);
  box-shadow:1px 0 0 rgba(28,26,23,.12)}
.tabela tbody tr:nth-child(even) th,
.tabela tbody tr:nth-child(even) td{background:rgba(28,26,23,.035)}
.tabela tbody tr:nth-child(even) th{background:#F6F1E9}
.tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}
.tabela .si{color:var(--sangue-texto);font-weight:800;font-size:1.05rem}
.tabela .no{color:rgba(28,26,23,.34);font-weight:700}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/*--- EL MAPA DEL PIE ---------------------------------------------------*/
/* Segunda vía a las mismas páginas. Quien llega al final de una página
   scrolleando no debería tener que volver arriba para seguir. */
.pe__mapa{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.pe__mapa a{font-family:'Archivo',system-ui,sans-serif;font-weight:600;
  font-size:.88rem;color:inherit;text-decoration:none;opacity:.8;
  border-bottom:1px solid transparent;padding-bottom:2px}
.pe__mapa a:hover{opacity:1;border-bottom-color:var(--sangue-claro)}

/*=============================================================================
  CROQUIS A LAPIZ — anadido el 25/08/2026
=============================================================================
  Tres ilustraciones que se dibujan solas al entrar en pantalla, una por frente,
  en la pagina de trabajos. NO son un cuestionario y no preguntan nada.

  DE DONDE VIENE ESTO. Salio de cuatro maquetas que empezaron siendo un
  cuestionario que «montaba un site en vivo». Damian lo paro:

    «me da mas dudas que respuestas. Si yo no quiero modelado y solo quiero
     site, o solo quiero marca... esta idea hace aguas.»

  Y hacia aguas. Bastaba poner los dos recorridos al lado:

      el sitio hoy   1 clic                 -> el precio, entero
      la maqueta     sector + 7 preguntas   -> el mismo precio

  La ventaja de este sitio es NO TENER PEAJE. Un cuestionario de tres hojas le
  anadia friccion justo al negocio cuyo argumento es no tenerla, y a quien solo
  queria un site las otras dos hojas no le informaban: le hacian preguntarse si
  le iban a cobrar tres cosas.

  De todo aquello se queda lo unico que valia: **el trazo a lapiz con los
  descartes tachados demuestra en tres segundos que hay una mano detras**. Y
  para eso no hacen falta preguntas.

  LOS CUATRO GESTOS, y con estos cuatro esta todo hecho:
    .cr-d       barre de izquierda a derecha con clip-path. Es el gesto de la
                mano y sirve para cualquier cosa: una caja, una linea, un texto.
    .cr-cont    la letra sale hueca y luego se entinta. Trazar y entintar son
                dos gestos distintos y aqui se ven los dos.
    .cr-risco   el tachon. ES LA PIEZA QUE SOSTIENE EL ARGUMENTO: nadie tacha
                nada cuando lo hace una maquina. Un descarte a la vista es la
                unica prueba de que hay alguien decidiendo.
    .cr-nota    la anotacion al margen, en lapiz azul, con su flecha.

  PREFIJO `cr-` EN TODO. Este archivo tiene 860 lineas y clases como .cara o
  .nota estaban pidiendo una colision.
=============================================================================*/
#croquis{--folha:#EDE4D2;--grafite:#33302B;--grafite-2:#6E675E;
  --lapis:#2B5F7A;--vermelho:#B8431F;
  --traco:cubic-bezier(.16,.84,.28,1)}

.cr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:clamp(40px,6vw,84px)}
.cr:last-child{margin-bottom:0}
@media (max-width:900px){.cr{grid-template-columns:1fr;gap:24px}}
.cr__olho{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sangue-claro);font-weight:600}
.cr__tit{font-size:clamp(1.35rem,2.8vw,2rem);margin:9px 0 12px;max-width:22ch}
.cr__txt{color:var(--fumo);max-width:48ch}
.cr__txt b{color:var(--papel);font-weight:600}

/*—— la hoja ——*/
.cr-folha{position:relative;background:var(--folha);color:var(--grafite);
  padding:40px 20px 24px 46px;min-height:400px;
  box-shadow:0 22px 54px rgba(0,0,0,.5), inset 0 0 60px rgba(120,100,70,.14)}
/* la cuadricula del papel de estudio y la linea roja de margen del bloc: se
   ven si las buscas y no si no las buscas */
.cr-folha{background-image:linear-gradient(rgba(90,75,55,.07) 1px,transparent 1px),
                          linear-gradient(90deg,rgba(90,75,55,.07) 1px,transparent 1px);
  background-size:19px 19px}
.cr-folha::before{content:'';position:absolute;top:0;bottom:0;left:34px;width:1px;
  background:rgba(184,67,31,.22)}
.cr-chapa{position:absolute;top:12px;right:14px;font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--grafite-2);
  border:1px solid rgba(51,48,43,.35);padding:4px 9px}
.cr-pie{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grafite-2)}
.cr-tit{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafite-2);margin-bottom:3px}

/*—— los cuatro gestos ——*/
.cr-d{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--traco)}
.cr-d.on{clip-path:inset(0 0 0 0)}
.cr-traco{height:2px;background:var(--grafite);border-radius:2px;width:0;
  transition:width .5s var(--traco)}
.cr-traco.on{width:100%}
.cr-cont{-webkit-text-stroke:1.1px var(--grafite);color:transparent;
  transition:color .5s ease,-webkit-text-stroke-width .5s ease}
.cr-cont.tinta{color:var(--grafite);-webkit-text-stroke-width:0}
.cr-nota{position:absolute;font-size:.58rem;font-style:italic;color:var(--lapis);
  line-height:1.25;max-width:118px;opacity:0;transform:translateY(5px);
  transition:opacity .4s ease,transform .4s var(--t)}
.cr-nota.on{opacity:1;transform:none}
.cr-nota::after{content:'';position:absolute;height:1px;background:var(--lapis);opacity:.75}
.cr-nota--dir::after{right:100%;top:8px;width:24px;margin-right:5px}
.cr-nota--esq::after{left:100%;top:8px;width:24px;margin-left:5px}
.cr-pranchaw{position:relative}

/*—— LAS NOTAS AL MARGEN, EN MÓVIL, NO TIENEN MARGEN ————————————————
   Detectado el 2026-08-26 en capturas de Damián. Las notas van en
   position:absolute con píxeles fijos (right:10px, left:2px) y 118px de ancho,
   medidas para el aire que sobra a los lados en escritorio. En un móvil no
   sobra nada: «fica a escolhida» se salía del papel y «um botão só, bem
   grande» aterrizaba encima de «Endereço».

   Apretarlas más no arregla nada — solo mueve el choque unos píxeles. Lo que
   hace un boceto de verdad cuando no le queda margen es escribir la nota
   DEBAJO de lo que anota, y eso es lo que se hace aquí: dejan de ser absolutas
   y vuelven al flujo. Como en el HTML cada una va justo detrás del bloque que
   comenta, caen exactamente donde tienen que caer.

   La flecha, que en escritorio sale de lado buscando el dibujo, pasa a salir
   por la izquierda como el guion de una anotación al pie.

   La animación de aparición NO se toca: sigue siendo el mismo opacity que
   enciende el observador. Aquí solo se cambia dónde está la nota, no cómo
   entra. ———————————————————————————————————————————————————————————*/
@media (max-width:640px){
  /* El margen de ABAJO no es decoración: sin él la nota terminaba a 5px del
     título siguiente y se leían como un solo bloque. Medido el 2026-08-26. */
  .cr-nota{position:static;max-width:none;margin:10px 0 16px;padding-left:26px}
  .cr-nota--dir::after,.cr-nota--esq::after{
    left:2px;right:auto;top:.66em;width:16px;margin:0}
}

/*—— folha 01 · marca ——*/
.cr-nome{font-weight:800;font-size:1.4rem;line-height:1;text-transform:uppercase;
  letter-spacing:-.02em}
.cr-desc{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grafite-2);margin-top:4px}
.cr-tents{display:flex;gap:20px;justify-content:center;margin:8px 0 18px}
.cr-tw{position:relative;flex:none}
.cr-tent{position:relative;width:54px;height:54px;border:2px solid var(--grafite);
  display:grid;place-items:center;font-weight:800;font-size:1.45rem}
.cr-tent--corte{transform:rotate(-6deg)}
.cr-tent--red{border-radius:50%}
/* EL TACHON Y EL CIRCULO SON HERMANOS DE LA CAJA, NO HIJOS. La caja lleva
   `.cr-d`, que es un clip-path — y eso recorta al borde: metidos dentro, se les
   comia los lados y del circulo solo asomaban dos esquinas. */
.cr-risco{position:absolute;left:-2%;top:50%;height:3px;width:0;
  background:var(--vermelho);opacity:.85;border-radius:3px;
  transform:rotate(-7deg);transition:width .38s var(--traco)}
.cr-risco.on{width:104%}
/* y CADA TACHON CON SU ANGULO. Con los dos a -7 grados y a la misma altura
   parecian UNA SOLA linea atravesando los dos cuadros — se vio en la captura,
   no razonandolo. Uno baja y otro sube, y ya se leen como dos gestos. */
.cr-tw:nth-child(2) .cr-risco{transform:rotate(6deg)}
/* y con `inset` distinto en horizontal y vertical el elemento no era cuadrado,
   asi que el radio no daba un circulo: salia un rectangulo con las esquinas
   limadas. Igual en los cuatro lados, y ya es un circulo */
.cr-circ{position:absolute;inset:-13px;border:2.5px solid var(--vermelho);
  border-radius:50% 50% 47% 53%;transform:rotate(-3deg) scale(.7);opacity:0;
  transition:transform .45s var(--traco),opacity .3s}
.cr-circ.on{transform:rotate(-3deg) scale(1);opacity:1}
.cr-manchas{display:flex;gap:13px;margin-top:6px}
.cr-mancha{width:54px;flex:none}
/* un pincel no deja rectangulos */
.cr-mancha i{display:block;height:36px;border-radius:46% 54% 52% 48%/55% 46% 54% 45%;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.14)}
.cr-mancha span{display:block;font-size:.48rem;color:var(--grafite-2);margin-top:4px}
.cr-aplic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.cr-ap{text-align:center}
.cr-ap svg{width:100%;height:62px;display:block}
.cr-ap b{display:block;font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grafite-2);margin-top:5px;font-weight:600}

/*—— folha 02 · o ponto ——*/
.cr-prancha{position:relative;height:300px;perspective:1250px;display:grid;
  place-items:center;overflow:hidden;margin-top:6px}
.cr-mundo{transform-style:preserve-3d;animation:crgirar 30s ease-in-out infinite;
  transform:rotateX(-14deg) rotateY(-19deg)}
@keyframes crgirar{
  0%{transform:rotateX(-14deg) rotateY(-23deg)}
  50%{transform:rotateX(-14deg) rotateY(1deg)}
  100%{transform:rotateX(-14deg) rotateY(-23deg)}
}
/* EL SUELO va anclado a la BASE del volumen. Un plano girado 90 grados en X
   gira sobre su propio centro, asi que para caer en la base su centro tiene que
   estar en la base: `bottom:0` y margen negativo de la MITAD de su lado. En la
   primera maqueta esto no estaba y el suelo salia por el tejado. */
.cr-chao{position:absolute;left:50%;bottom:0;width:380px;height:380px;
  margin-left:-190px;margin-bottom:-190px;transform:rotateX(90deg);
  opacity:0;transition:opacity .9s var(--t);
  background-image:linear-gradient(rgba(51,48,43,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(51,48,43,.16) 1px,transparent 1px);
  background-size:26px 26px;
  outline:1px dashed rgba(51,48,43,.35);outline-offset:-1px}
.cr-chao.on{opacity:1}
.cr-predio{transform-style:preserve-3d;position:relative;width:182px;height:0;
  transition:height 1.1s var(--t)}
.cr-cara{position:absolute;border:2px solid var(--grafite);
  background:rgba(237,228,210,.62)}
.cr-f1{width:182px;height:100%;transform:translateZ(56px);display:flex;
  flex-direction:column;align-items:center;padding-top:11px}
.cr-f2{width:112px;height:100%;left:35px;transform:rotateY(-90deg) translateZ(91px)}
.cr-f3{width:112px;height:100%;left:35px;transform:rotateY(90deg) translateZ(91px)}
.cr-f4{width:182px;height:112px;top:0;transform:rotateX(90deg) translateZ(56px)}
/* el sombreado va SOLO en los dos lados que quedan a la sombra, con rayado a
   48 grados: es como se sombrea a mano, no un degradado */
.cr-somb .cr-f3{background-image:repeating-linear-gradient(48deg,
  rgba(51,48,43,.3) 0 1px,transparent 1px 5px)}
.cr-somb .cr-f2{background-image:repeating-linear-gradient(48deg,
  rgba(51,48,43,.18) 0 1px,transparent 1px 7px)}
.cr-vaos{position:absolute;inset:0;display:flex;gap:12px;justify-content:center;
  align-items:flex-end;padding:0 15px 13px;opacity:0;transition:opacity .7s var(--t)}
.cr-vaos.on{opacity:1}
.cr-vao{border:2px solid var(--grafite);background:rgba(51,48,43,.07)}
/* el cristal se dibuja como se dibuja el cristal: rayas en diagonal */
.cr-vao::after{content:'';display:block;height:100%;
  background:repeating-linear-gradient(38deg,rgba(51,48,43,.24) 0 1px,transparent 1px 7px)}
.cr-porta{width:36px;height:54px}
.cr-jan{width:33px;height:37px}
/* el letreiro es el UNICO color de la hoja: un acento sobre papel se ve mas que
   una hoja entera pintada */
.cr-letreiro{position:absolute;top:8px;left:50%;
  transform:translateX(-50%) translateZ(2px);background:var(--sangue-texto);
  color:var(--papel);padding:4px 11px;font-size:.6rem;font-weight:800;
  text-transform:uppercase;white-space:nowrap;opacity:0;
  transition:opacity .6s var(--t)}
.cr-letreiro.on{opacity:1}
.cr-cotas{position:absolute;inset:0;pointer-events:none;font-size:.58rem;
  font-weight:600;letter-spacing:.08em;color:var(--lapis)}
.cr-cota{position:absolute;opacity:0;transition:opacity .7s var(--t)}
.cr-cota.on{opacity:1}
.cr-cota--l{left:14%;right:14%;bottom:14px;text-align:center;padding-top:5px;
  border-top:1px solid var(--lapis)}
.cr-cota--l::before,.cr-cota--l::after{content:'';position:absolute;top:-5px;
  width:1px;height:11px;background:var(--lapis)}
.cr-cota--l::before{left:0}.cr-cota--l::after{right:0}
.cr-cota--a{right:6px;top:18%;bottom:34%;border-right:1px solid var(--lapis);
  display:grid;place-items:center;padding-right:5px;writing-mode:vertical-rl}

/*—— folha 03 · a pagina ——*/
.cr-wf{display:grid;gap:9px;margin-top:4px}
.cr-cx{border:2px solid var(--grafite);padding:9px 11px}
.cr-rot{font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite-2);font-weight:600;margin-bottom:6px}
.cr-wnome{font-weight:800;font-size:.98rem;line-height:1;text-transform:uppercase}
.cr-wsub{font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite-2);margin-top:4px}
/* la caja de foto con las dos diagonales en cruz: la convencion mas vieja del
   oficio, y lo que hace que esto NO se pueda confundir con un generador
   automatico. Un generador ensena el resultado; un estudio ensena el plano. */
.cr-foto{height:76px;border:2px solid var(--grafite);display:grid;place-items:center;
  background:
    linear-gradient(to top right,transparent calc(50% - 1px),rgba(51,48,43,.45) 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom right,transparent calc(50% - 1px),rgba(51,48,43,.45) 50%,transparent calc(50% + 1px))}
.cr-foto span{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grafite-2);background:var(--folha);padding:2px 7px;font-weight:600}
.cr-fila{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid rgba(51,48,43,.22);font-size:.68rem}
.cr-fila:last-child{border-bottom:0}
.cr-fila i{font-style:normal;font-weight:800;color:var(--sangue-texto)}
.cr-dado{display:flex;justify-content:space-between;font-size:.6rem;
  color:var(--grafite-2);padding:2px 0}
.cr-btn{border:2px solid var(--sangue-texto);color:var(--sangue-texto);
  text-align:center;padding:9px;font-size:.6rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase}

/* Quien pide menos movimiento lo ve dibujado, sin dibujarse. No es un extra:
   hay gente a la que este tipo de animacion le marea de verdad. El motor
   tambien lo comprueba y pinta todo de golpe. */
@media (prefers-reduced-motion:reduce){
  .cr-mundo{animation:none;transform:rotateX(-14deg) rotateY(-17deg)}
}