/* =====================================================================
   Sobremesa · hoja de estilos
   Mobile first. Los colores están todos en :root: para recolorear la web
   entera solo hay que tocar ese bloque.
   ===================================================================== */

/* ------------------------------ Fuentes ----------------------------- */
/* Servidas desde el propio servidor, recortadas al alfabeto latino.
   Playfair rima con las letras de acero del rótulo; Karla es la de leer. */
@font-face{
  font-family:"Playfair"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fuentes/PlayfairDisplay-500.woff2") format("woff2");
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fuentes/Karla-400.woff2") format("woff2");
}
@font-face{
  font-family:"Karla"; font-style:normal; font-weight:700;
  font-display:swap; src:url("fuentes/Karla-700.woff2") format("woff2");
}

/* ----------------------------- Variables ---------------------------- */
:root{
  /* La paleta del encargo. El terracota se parte en tres tonos por una
     razón concreta: el #E07A5F original con texto blanco encima da 3,0:1
     de contraste, y hace falta 4,5:1. Así que el original se queda para
     adornar sobre fondo oscuro, y los botones usan el sólido, que sí pasa.
        #E07A5F sobre blanco -> 2,95:1   solo decoración
        #B85236 sobre blanco -> 4,89:1   botones y letra pequeña
        #9E4025 sobre blanco -> 6,53:1   hover y enlaces */
  --terracota:#E07A5F;
  --terracota-solido:#B85236;
  --terracota-honda:#9E4025;
  --crema:#F4F1DE;
  --azul:#3D405B;
  --azul-hondo:#2A2C40;

  --blanco:#FFFFFF;
  --borde:#E4DFCB;

  /* El texto no va en negro puro: sobre crema cansa. Gris con una pizca
     del azul de la marca, que es lo que hace que parezca elegido. */
  --tinta:#2E3040;
  --tinta-suave:#5F6275;

  --ancho:1180px;
  --radio:10px;
  --cabecera:74px;

  --sombra:0 1px 2px rgba(46,48,64,.05), 0 10px 30px rgba(46,48,64,.08);
  --sombra-alta:0 2px 6px rgba(46,48,64,.06), 0 22px 48px rgba(61,64,91,.16);

  --paso:.25s ease;
}

/* ------------------------------- Base ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cabecera) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  margin:0 0 .55em;
  font-family:"Playfair",Georgia,"Times New Roman",serif;
  font-weight:500; line-height:1.15; letter-spacing:-.01em;
  color:var(--azul);
  text-wrap:balance;
}
h1{ font-size:2.3rem; }
h2{ font-size:1.85rem; }
h3{ font-size:1.15rem; }
h1 em, h2 em{ font-style:italic; color:var(--terracota); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--terracota-honda); text-decoration:none; transition:color var(--paso); }
a:hover{ color:var(--azul); text-decoration:underline; }

:focus-visible{ outline:3px solid var(--terracota); outline-offset:3px; border-radius:4px; }

.salta{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 20px; background:var(--azul); color:#fff;
  border-radius:0 0 var(--radio) 0;
}
.salta:focus{ left:0; }

.inner{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px; }
.centrado{ margin-top:2.4rem; text-align:center; }

/* ------------------------------ Botones ----------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 28px;
  border:2px solid transparent; border-radius:var(--radio);
  font-family:inherit; font-size:.95rem; font-weight:700;
  line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
  transition:background var(--paso), color var(--paso),
             border-color var(--paso), transform var(--paso), box-shadow var(--paso);
}
.boton:hover{ text-decoration:none; }

.boton--primario{ background:var(--terracota-solido); border-color:var(--terracota-solido); color:#fff; }
.boton--primario:hover{
  background:var(--terracota-honda); border-color:var(--terracota-honda); color:#fff;
  transform:translateY(-2px); box-shadow:var(--sombra-alta);
}
.boton--claro{
  background:rgba(28,20,16,.42); border-color:rgba(255,255,255,.85); color:#fff;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.boton--claro:hover{
  background:rgba(28,20,16,.66); border-color:#fff; color:#fff; transform:translateY(-2px);
}

.boton--contorno{ background:transparent; border-color:var(--azul); color:var(--azul); }
.boton--contorno:hover{ background:var(--azul); color:#fff; transform:translateY(-2px); }

.boton--grande{ min-height:54px; padding:14px 32px; font-size:1rem; }

.acciones{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:2rem 0 0; padding:0; }
.acciones li{ flex:1 1 auto; }
.acciones .boton{ width:100%; }
@media (min-width:520px){
  .acciones li{ flex:0 0 auto; }
  .acciones .boton{ width:auto; }
}

/* ------------------------------ Cabecera ---------------------------- */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--paso), border-color var(--paso);
}
.cabecera[data-desplazada]{
  border-bottom-color:var(--borde);
  box-shadow:0 4px 20px rgba(46,48,64,.07);
}
.cabecera__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--cabecera);
}

.logo{ display:inline-flex; flex-direction:column; line-height:1; color:var(--azul); }
.logo:hover{ text-decoration:none; }
.logo__nombre{
  font-family:"Playfair",Georgia,serif; font-size:1.5rem; letter-spacing:-.015em;
}
.logo__cola{
  /* Subida de 9,92 a 11,5 px: por debajo de 11 px el texto funcional deja
     de leerse bien en pantallas pequeñas. Y en el tono sólido, que el
     claro sobre blanco se quedaba en 2,95:1. */
  font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--terracota-solido); margin-top:.4em;
}

.hamburguesa{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px;
  background:none; border:0; cursor:pointer;
}
.hamburguesa span{
  display:block; height:2px; width:100%; border-radius:2px; background:var(--azul);
  transition:transform var(--paso), opacity var(--paso);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu{
  position:absolute; top:100%; left:0; right:0;
  display:none; flex-direction:column; gap:6px;
  padding:14px 20px 22px;
  background:var(--blanco); border-bottom:1px solid var(--borde);
  box-shadow:0 18px 30px rgba(46,48,64,.10);
}
.menu[data-abierto]{ display:flex; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu ul a{
  display:block; padding:13px 4px;
  color:var(--tinta); border-bottom:1px solid var(--borde);
}
.menu ul a:hover{ color:var(--terracota-honda); text-decoration:none; }
.menu__cta{ margin-top:14px; }

/* ------------------------------ Portada ----------------------------- */
.portada{
  position:relative;
  display:flex; align-items:stretch;
  min-height:min(88vh,720px);
  padding:112px 0 40px;
  background:var(--azul-hondo) url("img/hero-1100.jpg") center/cover no-repeat;
  color:#fff;
}
@media (min-width:1101px){ .portada{ background-image:url("img/hero-1920.jpg"); } }

/* Sin velo: la foto se ve entera y limpia.
   Se probó a poner el texto en un color plano encima y no puede funcionar.
   Midiendo los píxeles de la imagen en la zona del texto, el más oscuro
   está en 0,00 de luminancia y el más claro en 0,93: hay ladrillo
   iluminado y sombra negra en el mismo sitio. Cualquier color se pierde
   en la mitad de las letras. Por eso el texto lleva su propia placa. */
/* El titular arriba, en el hueco de ladrillo; la placa abajo. */
/* Titular arriba, en el ladrillo limpio; botones abajo, sobre la mesa.
   Repartidos, no juntos: si los botones suben junto al titular, la mitad
   de abajo de la foto se queda vacía y la composición se descuelga. */
.portada__inner{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
}

.portada__titular{
  /* Dos líneas y no más: el titular tiene que caber en la franja de
     ladrillo limpio de arriba. Si crece, la segunda línea cae sobre el
     rótulo de la foto y deja de leerse. */
  color:#fff; max-width:22ch; margin:0;
  font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.1;
  /* Halo centrado, sin desplazamiento. Antes llevaba una sombra paralela
     (0 1px 3px) y se leía como un filo negro alrededor de la letra, que
     es lo que envejece un titular. Un halo sin desplazar hace el mismo
     trabajo de despegarlo del ladrillo pero no se ve: parece que la foto
     está más oscura ahí, no que la letra tenga borde. */
  text-shadow:0 0 18px rgba(18,12,8,.72), 0 0 48px rgba(18,12,8,.55);
}
/* El dorado de las lámparas del propio render. El rosa de antes se
   confundía con el ladrillo; este separa por tono en vez de por claridad.
   Un óxido oscuro, que era lo pedido, da 1,13:1 sobre ese fondo con el
   halo: marrón sobre negro. Este da 4,68:1. */
.portada__titular em{ color:#F5CD8F; }

/* Sin recuadro: el texto va directamente sobre la foto, y lo que lo hace
   legible es la sombra pegada a las letras. */

/* Entradilla y botones juntos, abajo a la DERECHA de la foto.
   No es un capricho de composición: medida la imagen zona por zona, el
   texto blanco da 1,8:1 de contraste abajo a la izquierda y 5,3:1 abajo
   a la derecha. En la izquierda hay ladrillo iluminado; en la derecha,
   la pared en sombra. Casi el triple, sin tocar la foto. */
.portada__pie{
  /* Ancho suficiente para las dos líneas que pidió el encargo, con su
     corte exacto. Se sale un poco hacia el centro, más claro, y por eso
     la sombra del texto va cargada. */
  max-width:min(580px,100%); margin-left:auto;
  text-align:right;
}
/* Los botones también se alinean a la derecha, o quedarían sueltos
   debajo de un texto que sí lo está. */
.portada__pie .acciones{ justify-content:flex-end; flex-wrap:nowrap; }
.portada__pie .acciones li{ flex:0 0 auto; }
.portada__pie .acciones .boton{ width:auto; white-space:nowrap; }
.portada__texto{
  /* El hueco de abajo separa el texto de los botones y, como el bloque va
     anclado al pie de la portada, es lo que hace subir el párrafo hasta
     quedar por encima de los respaldos de las sillas. */
  margin:0 0 4.4rem; font-size:1.06rem; color:#FFFFFF;
  /* El corte de línea va escrito a mano en el HTML. Aquí solo se impide
     que el navegador parta además por su cuenta cuando casi cabe. */
  text-wrap:nowrap;
  text-shadow:0 0 12px rgba(16,10,6,.9), 0 0 30px rgba(16,10,6,.8),
              0 0 60px rgba(16,10,6,.6);
}
/* En pantallas estrechas no cabe, y ahí sí que parta donde pueda. */
@media (max-width:620px){
  .portada__texto{ text-wrap:wrap; }
  .portada__texto br{ display:none; }
}
.portada .acciones{ margin-top:1.6rem; }

/* ------------------------------ Secciones --------------------------- */
.seccion{ padding:64px 0; }
.seccion--crema{ background:var(--crema); }
.seccion--oscura{ background:var(--azul); color:rgba(255,255,255,.86); }
.seccion--oscura h2{ color:#fff; }

.cabeza{ max-width:620px; margin:0 auto 44px; text-align:center; }
.cabeza .entradilla{ margin-bottom:0; }
.cabeza--clara .entradilla{ color:rgba(255,255,255,.78); }

.entradilla{ font-size:1.05rem; color:var(--tinta-suave); }

/* -------------------------- Tapas destacadas ------------------------ */
.tapas{ display:grid; gap:26px; }

.tapa{
  display:flex; flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  transition:transform var(--paso), box-shadow var(--paso);
}
.tapa:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); }
.tapa img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.tapa__cuerpo{ padding:24px 22px 28px; }
.tapa h3{ color:var(--azul); }
.tapa p{ font-size:.95rem; color:var(--tinta-suave); margin:0; }

/* ------------------------- Sección partida --------------------------
   La foto ocupa media pantalla, de borde a borde y de arriba abajo; el
   texto vive en la otra mitad. En móvil se apila: foto arriba, texto
   debajo, que es lo único que cabe.
   -------------------------------------------------------------------- */
.seccion--partida{ padding:0; }
.partida__foto{ margin:0; }
.partida__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.partida__texto{ padding:56px 20px 64px; }
.partida__inner{ max-width:60ch; margin:0 auto; }

/* ------------------------------ Galería ----------------------------- */
.galeria{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.galeria__pieza{ margin:0; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.galeria__pieza img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.galeria__pieza--ancha{ grid-column:1 / -1; }
.galeria__pieza--ancha img{ aspect-ratio:16/9; }

/* --------------------------- Hueco del widget ----------------------- */
.hueco-widget{
  max-width:640px; margin:0 auto; padding:44px 28px;
  border:2px dashed rgba(255,255,255,.42);
  border-radius:var(--radio);
  text-align:center;
}
.hueco-widget__titulo{
  margin:0 0 .5em;
  font-family:"Playfair",Georgia,serif; font-size:1.2rem; color:#fff;
}
.hueco-widget__nota{
  margin:0; font-size:.9rem; color:rgba(255,255,255,.7); max-width:44ch;
  margin-inline:auto;
}

/* ------------------------------- Datos ------------------------------ */
.datos{
  display:grid; gap:26px; grid-template-columns:1fr;
  list-style:none; margin:0; padding:0; max-width:900px; margin-inline:auto;
}
.datos h3{ margin:0 0 .3em; font-size:.98rem; }
.datos p{ margin:0; font-size:.95rem; color:var(--tinta-suave); }
.datos a{ color:var(--tinta-suave); }
.datos a:hover{ color:var(--terracota-honda); }

/* -------------------------------- Pie ------------------------------- */
.pie{ padding:56px 0 26px; background:var(--azul-hondo); color:rgba(255,255,255,.72); font-size:.92rem; }
.pie__columnas{ display:grid; gap:32px; }
.pie h2{ margin:0 0 14px; font-family:"Karla",sans-serif;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.pie .logo{ color:#fff; margin-bottom:14px; }
.pie__marca p{ max-width:34ch; }
.pie__enlaces ul{ list-style:none; margin:0; padding:0; }
.pie__enlaces li{ margin-bottom:9px; line-height:1.5; }
.pie a{ color:rgba(255,255,255,.72); }
.pie a:hover{ color:#fff; }
.pie__copy{
  margin:40px 0 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; color:rgba(255,255,255,.55); text-align:center;
}

/* ---------------------------- Volver arriba ------------------------- */
.arriba{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  background:var(--terracota-solido); color:#fff;
  border-radius:50%; box-shadow:var(--sombra-alta);
  transition:background var(--paso), transform var(--paso);
}
.arriba:hover{ background:var(--terracota-honda); transform:translateY(-3px); }
.arriba[hidden]{ display:none; }
.arriba svg{ width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------- Aparecer al desplazar --------------------
   Sin librerías: una animación de CSS que dispara un repaso al desplazar.
   La opacidad la pone la regla, NO la animación: si el navegador no la
   ejecuta, el texto se lee igual. Coste añadido: 0 KB.
   -------------------------------------------------------------------- */
.anima [data-aparece]{ opacity:0; }

.anima [data-aparece][data-visible]{
  opacity:1;
  /* "backwards" y no "both": al terminar suelta el control, y así el
     transform del hover de las tarjetas sigue funcionando. */
  animation:aparece .45s cubic-bezier(.23,1,.32,1) var(--retraso,0ms) backwards;
}

/* 10 px y 450 ms: se nota que entra, sin que haya que esperarlo. */
@keyframes aparece{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .anima [data-aparece]{ opacity:1; animation:none; }
}


/* =====================================================================
   Páginas legales
   El texto sale de las plantillas comunes de la Fábrica; aquí solo se
   viste. Las clases son las que trae ese texto: no cambiarlas.
   ===================================================================== */

.cabecera--legal{ position:static; border-bottom:1px solid var(--borde); }

.cinta-muestra{
  padding:14px 20px;
  background:#FBF3E2; border-bottom:1px solid #E9D9B4;
  font-size:.88rem; line-height:1.5; color:#6B5310; text-align:center;
}
.cinta-muestra strong{ color:#4A3A08; }

.legal-hero{
  padding:56px 0 44px;
  background:linear-gradient(120deg,var(--azul) 0%,var(--azul-hondo) 100%);
  color:rgba(255,255,255,.84);
}
.legal-hero h1{ color:#fff; margin-bottom:.3em; }
.legal-hero p{ margin:0; font-size:1.02rem; }
.breadcrumb{ margin:0 0 1.4em; font-size:.88rem; color:rgba(255,255,255,.66); }
.breadcrumb a{ color:rgba(255,255,255,.86); }
.breadcrumb a:hover{ color:#fff; }

.legal-body{ padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px); }
.legal-wrap{ max-width:70ch; margin:0 auto; }
.legal-wrap h2{
  margin-top:2.2em; padding-top:1.4em;
  border-top:1px solid var(--borde); font-size:1.35rem;
}
.legal-wrap h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-wrap h3{ margin-top:1.8em; font-size:1.05rem; }

/* Solo el cuerpo va en gris. En el encabezado azul se usa la misma clase,
   y si se pintara ahí también, el subtítulo quedaría gris sobre azul. */
.legal-body .legal-wrap p,
.legal-body .legal-wrap li{ font-size:.97rem; color:var(--tinta-suave); }
.legal-wrap ul, .legal-wrap ol{ padding-left:1.3em; margin:0 0 1.1em; }
.legal-wrap li{ margin-bottom:.5em; }
.legal-wrap table{ width:100%; border-collapse:collapse; font-size:.92rem;
  display:block; overflow-x:auto; }
.legal-wrap th, .legal-wrap td{ padding:10px 12px; border:1px solid var(--borde); text-align:left; }
.legal-wrap th{ background:var(--crema); font-weight:700; color:var(--tinta); }

.legal-datos{
  margin:0 0 2em; padding:24px 26px;
  background:var(--crema); border:1px solid var(--borde); border-radius:var(--radio);
}
.legal-datos dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0; }
.legal-datos dt{ font-weight:700; font-size:.92rem; color:var(--tinta); }
.legal-datos dd{ margin:0; font-size:.95rem; color:var(--tinta-suave); }

.legal-nota{ margin-top:2.4em; padding:18px 22px;
  background:var(--crema); border-radius:var(--radio); font-size:.92rem; }
.legal-otras{ margin-top:2em; font-size:.92rem; }

@media (max-width:520px){
  .legal-datos dl{ grid-template-columns:1fr; gap:2px 0; }
  .legal-datos dt{ margin-top:10px; }
}

/* =====================================================================
   Pantallas grandes
   ===================================================================== */

@media (min-width:600px){
  h1{ font-size:3rem; }
  h2{ font-size:2.2rem; }
  .datos{ grid-template-columns:repeat(2,1fr); gap:32px; }
}

@media (min-width:768px){
  .seccion{ padding:88px 0; }
  .inner{ padding:0 32px; }
  /* Tres columnas y no cuatro: con cinco fotos, una de ellas ocupando dos
     huecos, la rejilla cuadra justa (2+1 arriba, 3 abajo). Con cuatro
     columnas quedaba un hueco vacío abajo a la derecha. */
  .galeria{ grid-template-columns:repeat(3,1fr); }
  .galeria__pieza--ancha{ grid-column:span 2; }
  .pie__columnas{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

@media (min-width:992px){
  h1{ font-size:3.6rem; }
  h2{ font-size:2.5rem; }
  .seccion{ padding:104px 0; }

  .tapas{ grid-template-columns:repeat(3,1fr); }
  .datos{ grid-template-columns:repeat(4,1fr); }

  /* Rejilla sobre la sección entera, sin contenedor que la estreche: así
     la foto llega al borde de la pantalla sin márgenes negativos, que son
     los que suelen provocar barras de desplazamiento horizontales. */
  .seccion--partida{
    display:grid; grid-template-columns:1fr 1fr;
    align-items:stretch;
    /* Repetido aquí a propósito: la regla .seccion de este mismo bloque
       viene después en el archivo y, con la misma especificidad, le
       ganaba al padding:0 de arriba. El relleno dejaba la foto 208 px
       más corta que la sección. */
    padding:0;
  }
  .partida__foto{ height:100%; }
  .partida__foto img{
    width:100%; height:100%; aspect-ratio:auto;
    object-fit:cover; object-position:center;
  }
  .partida__texto{
    display:flex; align-items:center;
    padding:clamp(72px,8vw,120px) clamp(32px,5vw,72px);
  }
  .partida__inner{ max-width:52ch; margin:0; }

  .hamburguesa{ display:none; }
  .menu{
    position:static; display:flex; flex-direction:row; align-items:center;
    gap:6px; padding:0; background:none; border:0; box-shadow:none;
  }
  .menu ul{ display:flex; align-items:center; gap:2px; }
  .menu ul a{
    position:relative; padding:8px 13px; border:0; font-size:.92rem;
  }
  .menu ul a::after{
    content:""; position:absolute; left:50%; right:50%; bottom:2px;
    height:2px; background:var(--terracota);
    transition:left var(--paso), right var(--paso);
  }
  .menu ul a:hover::after,
  .menu ul a[aria-current="true"]::after{ left:13px; right:13px; }
  .menu ul a[aria-current="true"]{ color:var(--terracota-honda); font-weight:700; }
  .menu__cta{ margin:0 0 0 12px; min-height:44px; padding:10px 22px; }
}

@media (min-width:1200px){ .arriba{ right:28px; bottom:28px; } }