/*==========================================================================
  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}
@media (max-width:640px){html{scroll-padding-top:132px}}
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}
.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}

/*=== 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 */
  /* 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. */
@media (max-width:640px){
  .topo{flex-wrap:wrap;row-gap:8px;padding-block:10px;gap:8px}
  .topo__logo{width:96px}
  .menu{order:3;flex-basis:100%;justify-content:flex-start;gap:16px}
  .menu a{font-size:.84rem}
  .topo__dir{gap:8px}
  .topo__dir .btn{padding:10px 13px;font-size:.7rem;letter-spacing:.06em}
  .idiomas--topo a{min-width:26px;padding:5px 5px;font-size:.66rem}
  .capa--interna{padding-top:126px;padding-bottom:30px}
  .capa__titulo--interna{font-size:clamp(1.7rem,8vw,2.4rem)}
}

/*--- 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)}

/*--- 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 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)}