/* ==========================================================================
   ASADERO SANCHO PANZA · Hoja de estilos
   --------------------------------------------------------------------------
   Mobile first: los estilos base son los de movil y las media queries van
   hacia arriba (400, 560, 700, 860, 1000 px).
   Indice de bloques:
      1. Variables de marca          11. Bloque a dos columnas
      2. Reset y bases               12. Donde estamos
      3. Tipografia                  13. Cierre oscuro
      4. Estructura                  14. Footer
      5. Botones                     15. WhatsApp flotante
      6. Marcos de foto              16. Banner de cookies
      7. Header                      17. Lightbox
      8. Heroe                       18. Aparicion al hacer scroll
      9. Franja de reclamos          19. Impresion
     10. Rejillas de tarjetas        19b. Logotipo / 20. Piezas menores
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE MARCA
   Paleta muestreada directamente del logo: la tinta del grabado, el fondo
   crema del sello, el terracota del "PANZA" y el dorado del sombrero.
   ========================================================================== */
:root{
  /* Fondos inmersivos */
  --negro:         #1C1209;
  --negro-2:       #241708;
  --negro-3:       #120B04;

  /* Fondos claros */
  --crema:         #FAF6EF;
  --crema-2:       #F4EDE1;
  --crema-3:       #FDFBF7;

  /* Acentos */
  --terracota:     #A33E1F;
  --terracota-osc: #833014;
  --dorado:        #E8B54A;
  --dorado-osc:    #C7942B;
  --bronce:        #8A5A16;

  /* Texto */
  --tinta:         #3B2A19;
  --tinta-suave:   #6B5540;

  /* Líneas */
  --linea:         #E3D9C8;
  --linea-clara:   rgba(250, 246, 239, .18);

  /* Tipografías */
  --serif: 'Playfair Display', 'Bitter', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mano:  'Caveat', 'Segoe Script', cursive;

  /* Medidas */
  --radio:    3px;
  --ancho:    1180px;
  --gutter:   16px;
  --header-h: 64px;
}

@media (min-width: 560px){ :root{ --gutter: 24px } }
@media (min-width: 860px){ :root{ --gutter: 32px; --header-h: 84px } }

/* ==========================================================================
   2. RESET Y BASES
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.sin-scroll{ overflow: hidden }

img{ display: block; max-width: 100% }
svg{ display: block }
a{ color: inherit }
button{ font: inherit; color: inherit }
h1, h2, h3, h4, p{ margin: 0 }
ul, ol{ margin: 0; padding: 0; list-style: none }
iframe{ border: 0; display: block }

/* Foco visible en toda la página (accesibilidad por teclado) */
:focus-visible{
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
}
/* Sobre fondos crema el dorado se apoya en un doble trazo para destacar */
.es-claro :focus-visible{
  outline-color: var(--terracota);
}

/* Salto al contenido, para lectores de pantalla y teclado */
.salto-contenido{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .8rem 1.2rem;
  background: var(--terracota);
  color: var(--crema);
  text-decoration: none;
  font-weight: 600;
}
.salto-contenido:focus{ left: 0 }

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */
.titular{
  font-family: var(--serif);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.015em;
}

.titular--xl{ font-size: clamp(2.6rem, 11vw, 4.6rem) }
.titular--l { font-size: clamp(2.1rem, 8vw, 3.5rem) }
.titular--m { font-size: clamp(1.75rem, 6vw, 2.6rem) }

.antetitulo{
  font-family: var(--sans);
  font-size: clamp(.68rem, 2.6vw, .78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* El filete horizontal que acompaña al antetítulo en la referencia */
.antetitulo::after{
  content: "";
  flex: 0 0 clamp(28px, 8vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.antetitulo--centrado{ justify-content: center }
.antetitulo--centrado::after{ display: none }

.entradilla{
  font-size: clamp(1rem, 3.4vw, 1.12rem);
  max-width: 46ch;
}

.subtitulo-seccion{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.4rem);
  color: var(--terracota);
}

.dorado{ color: var(--dorado) }
.terracota{ color: var(--terracota) }
.suave{ color: var(--tinta-suave) }

/* Notas manuscritas al margen: el recurso de marca. 5 en toda la página. */
.nota{
  font-family: var(--mano);
  font-weight: 500;
  font-size: clamp(1.2rem, 4vw, 1.55rem);
  line-height: 1.1;
  color: var(--terracota);
  pointer-events: none;
}
.nota--clara{ color: var(--dorado) }

/* ==========================================================================
   4. ESTRUCTURA
   ========================================================================== */
.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.seccion{
  position: relative;
  padding: clamp(3.25rem, 8vw, 5.75rem) 0;
  scroll-margin-top: var(--header-h);
}

.es-oscuro{
  background: var(--negro);
  color: var(--crema);
}
.es-claro{ background: var(--crema) }
.es-claro-2{ background: var(--crema-2) }

.cabecera-seccion{
  text-align: center;
  display: grid;
  gap: .7rem;
  justify-items: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Divisor con flor de lis, tomado del pie del logo */
.divisor{
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--terracota);
  margin-bottom: .4rem;
}
.divisor::before,
.divisor::after{
  content: "";
  width: clamp(36px, 12vw, 72px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.divisor svg{ width: 18px; height: 22px }
.es-oscuro .divisor{ color: var(--dorado) }

/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.55em;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg{ width: 1.05em; height: 1.05em; flex: none }

.btn--terracota{
  background: var(--terracota);
  color: var(--crema);
  border-color: var(--terracota);
}
.btn--terracota:hover{ background: var(--terracota-osc); border-color: var(--terracota-osc) }

.btn--linea{
  background: transparent;
  color: var(--crema);
  border-color: rgba(250, 246, 239, .45);
}
.btn--linea:hover{ background: rgba(250, 246, 239, .12); border-color: var(--crema) }

.btn--dorado{
  background: var(--dorado);
  color: var(--negro);
  border-color: var(--dorado);
}
.btn--dorado:hover{ background: var(--dorado-osc); border-color: var(--dorado-osc) }

.btn--grande{ padding: 1.1em 2.1em; font-size: clamp(1rem, 3.6vw, 1.08rem) }

.btn-fila{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Enlace de texto con flecha */
.enlace-flecha{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: .92rem;
  color: var(--terracota);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.enlace-flecha svg{ width: 15px; height: 15px }
.enlace-flecha:hover{ border-bottom-color: currentColor }

/* ==========================================================================
   6. MARCOS DE FOTO Y MARCADOR MIENTRAS NO HAY FOTOS
   Cada <img> lleva un onerror que marca su marco. Cuando subas el .webp
   con el nombre esperado, el marcador desaparece solo.
   ========================================================================== */
.marco{
  position: relative;
  overflow: hidden;
  background: var(--crema-2);
  margin: 0;
}
.marco img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marco.sin-foto{
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  padding: 1.25rem;
  background: var(--crema-2);
  border: 1px dashed var(--linea);
}
.marco.sin-foto img,
.marco.sin-foto .zoom,
.marco.sin-foto .heroe__vineta{ display: none }
.marco.sin-foto::before{
  content: "";
  width: clamp(48px, 9vw, 76px);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23A33E1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='31'/%3E%3Cpath d='M50 26l5.5 13.5L69 45l-13.5 5.5L50 64l-5.5-13.5L31 45l13.5-5.5z'/%3E%3Cpath d='M38 74h24'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .5;
}
.marco.sin-foto::after{
  content: attr(data-marcador);
  text-align: center;
  font-family: var(--mano);
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  line-height: 1.2;
  color: var(--tinta-suave);
}
/* Variante sobre fondo oscuro */
.marco--oscuro{ background: var(--negro-2) }
.marco--oscuro.sin-foto{
  background: var(--negro-2);
  border-color: var(--linea-clara);
}
.marco--oscuro.sin-foto::after{ color: rgba(250, 246, 239, .7) }

/* Botón invisible que envuelve las fotos ampliables (lightbox) */
.zoom{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--crema);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
/* En las paginas interiores el contenido tambien es crema, asi que la
   cabecera necesita su filete desde el principio: en la portada se separa
   sola porque debajo tiene el heroe oscuro. */
.pagina-interior .header{ border-bottom-color: var(--linea) }

.header.compacto{
  border-bottom-color: var(--linea);
  background: rgba(250, 246, 239, .97);
  backdrop-filter: saturate(140%) blur(6px);
}

.header__barra{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-top: .5rem;
  padding-bottom: .5rem;
  transition: min-height .25s ease;
}

/* Navegación de escritorio */
.nav{ display: none }
@media (min-width: 1000px){
  .nav{
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2rem);
  }
  .nav a{
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--tinta);
    padding: .4rem 0;
    border-bottom: 1px solid transparent;
  }
  .nav a:hover{ color: var(--terracota) }
  .nav a[aria-current="page"]{
    color: var(--terracota);
    border-bottom-color: var(--terracota);
  }
}

.header__cta{ display: none }
@media (min-width: 700px){ .header__cta{ display: inline-flex } }

/* Hamburguesa */
.hamburguesa{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: transparent;
  cursor: pointer;
}
.hamburguesa span{
  display: block;
  height: 1.5px;
  background: var(--tinta);
  transition: transform .25s ease, opacity .2s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg) }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity: 0 }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg) }
@media (min-width: 1000px){ .hamburguesa{ display: none } }

/* Menú a pantalla completa en móvil */
.menu-movil{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  background: var(--negro);
  color: var(--crema);
  padding: var(--gutter);
  overflow-y: auto;
}
.menu-movil[data-abierto="true"]{ display: flex }

.menu-movil__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
.menu-movil__cabecera .logo__sello{ height: 54px }

.menu-movil__cerrar{
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  background: transparent;
  color: var(--crema);
  cursor: pointer;
}
.menu-movil__cerrar svg{ width: 18px; height: 18px }

.menu-movil__lista{
  display: grid;
  gap: .25rem;
  margin: clamp(1.5rem, 6vw, 3rem) 0 2rem;
}
.menu-movil__lista a{
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  line-height: 1.25;
  text-decoration: none;
  color: var(--crema);
  padding: .3rem 0;
  border-bottom: 1px solid var(--linea-clara);
}
.menu-movil__lista a:hover{ color: var(--dorado) }

.menu-movil__pie{
  margin-top: auto;
  display: grid;
  gap: 1rem;
  padding-top: 1.5rem;
}
.menu-movil__pie .btn{ width: 100% }
.menu-movil__tel{
  font-size: .95rem;
  color: rgba(250, 246, 239, .75);
  text-decoration: none;
}

/* ==========================================================================
   8. HÉROE
   ========================================================================== */
.heroe{
  position: relative;
  background: var(--negro);
  color: var(--crema);
  overflow: hidden;
}

.heroe__grid{
  display: grid;
  grid-template-areas: "texto" "nota" "foto";
  grid-template-columns: 1fr;
}

/* Foto a sangre con viñeteado */
.heroe__foto{
  grid-area: foto;
  position: relative;
  min-height: 62vw;
  max-height: 58vh;
  background: var(--negro-2);
}
.heroe__foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Viñeteado: oscurece las esquinas y funde el borde con el fondo.
   Va en su propia capa y no en un pseudoelemento, porque .marco.sin-foto ya
   usa ::before y ::after para el marcador de foto pendiente. */
.heroe__vineta{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 55% 50%, rgba(28,18,9,0) 42%, rgba(28,18,9,.68) 100%),
    linear-gradient(to bottom, rgba(28,18,9,.96) 0%, rgba(28,18,9,0) 32%);
}

.heroe__texto{
  grid-area: texto;
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1rem, 3vw, 1.5rem);
  justify-items: start;
  padding: clamp(2.5rem, 9vw, 4rem) var(--gutter) clamp(1.25rem, 4vw, 2rem);
}

.heroe .antetitulo{ color: rgba(250, 246, 239, .8) }
.heroe .entradilla{ color: rgba(250, 246, 239, .88) }

.heroe__nota{
  grid-area: nota;
  justify-self: end;
  z-index: 3;
  transform: rotate(-6deg);
  text-align: center;
  max-width: 13ch;
  margin-right: calc(var(--gutter) + 1rem);
  margin-bottom: clamp(2.25rem, 8vw, 3.25rem);
}

@media (min-width: 860px){
  .heroe__grid{
    grid-template-areas: "texto foto";
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: min(78vh, 680px);
  }
  .heroe__foto{
    min-height: 100%;
    max-height: none;
  }
  .heroe__vineta{
    background:
      /* Oscurece la esquina donde va la nota manuscrita. Sin esto el fondo
         salta de negro puro a un brillo de 0,43 de luminancia y el dorado se
         pierde justo encima: 1,16:1. Oscurecida, el peor caso sube a 4,6:1. */
      radial-gradient(58% 52% at 88% 84%, rgba(28,18,9,.90) 0%, rgba(28,18,9,.74) 48%, rgba(28,18,9,0) 100%),
      radial-gradient(110% 95% at 62% 45%, rgba(28,18,9,0) 40%, rgba(28,18,9,.70) 100%),
      linear-gradient(to right, rgba(28,18,9,.98) 0%, rgba(28,18,9,0) 26%);
  }
  .heroe__texto{
    margin-top: 0;
    align-content: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem)
             max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  }
  .heroe__nota{
    position: absolute;
    right: clamp(1.5rem, 4vw, 3rem);
    /* Por encima del botón flotante de WhatsApp, que vive en esta esquina */
    bottom: clamp(5.5rem, 10vw, 7rem);
    top: auto;
    max-width: 10ch;
    margin-right: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   9. FRANJA DE RECLAMOS (terracota)
   En móvil se convierte en un carrusel de scroll horizontal.
   ========================================================================== */
.reclamos{
  background: var(--terracota);
  color: var(--crema);
}

.reclamos__lista{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reclamos__lista::-webkit-scrollbar{ display: none }

.reclamo{
  flex: 0 0 82%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem clamp(1rem, 4vw, 1.75rem);
}
.reclamo__icono{
  flex: none;
  width: clamp(44px, 12vw, 56px);
  color: var(--dorado);
}
/* Los tres iconos de la franja son imagenes, no SVG inline: vienen
   dibujados a mano y ya limpios en el dorado de la marca. */
.reclamo__icono img{ width: 100%; height: auto }
.reclamo h3{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 4vw, 1.2rem);
  line-height: 1.2;
  color: var(--crema);
  margin-bottom: .2rem;
}
.reclamo p{
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(250, 246, 239, .88);
  max-width: 24ch;
}

/* Aviso de "desliza" solo en móvil */
.reclamos__pista{
  font-family: var(--mano);
  font-size: 1.05rem;
  text-align: center;
  color: rgba(250, 246, 239, .75);
  padding-bottom: 1rem;
}

@media (min-width: 860px){
  .reclamos__lista{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
  .reclamo{ flex: none }
  .reclamo + .reclamo{ border-left: 1px solid rgba(250, 246, 239, .28) }
  .reclamos__pista{ display: none }
}

/* ==========================================================================
   10. REJILLAS DE TARJETAS (carta y blog comparten lenguaje)
   ========================================================================== */
.rejilla{
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px){
  .rejilla{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 1000px){
  .rejilla--4{ grid-template-columns: repeat(4, 1fr) }
  .rejilla--3{ grid-template-columns: repeat(3, 1fr) }
}

.tarjeta{
  display: flex;
  flex-direction: column;
  background: var(--crema-3);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.tarjeta__media{
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--linea);
}
.tarjeta__cuerpo{
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  padding: 1.1rem 1.15rem 1.25rem;
}
.tarjeta h3{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.12rem, 4vw, 1.28rem);
  line-height: 1.2;
  color: var(--tinta);
}
.tarjeta p{
  font-size: .9rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}
/* En las tarjetas del blog el enlace se pega abajo, para que los tres queden
   alineados aunque los extractos tengan distinto numero de lineas. */
.tarjeta__cuerpo .enlace-flecha{
  margin-top: auto;
  padding-top: .35rem;
}

/* Ahora solo lleva los alergenos. El margin-top automatico los mantiene
   pegados al fondo, para que las cuatro tarjetas queden alineadas aunque las
   descripciones tengan distinto largo. */
.tarjeta__pie{
  margin-top: auto;
  padding-top: .9rem;
}
/* Los alergenos ocupan el sitio que tenia el precio en el pie de la tarjeta,
   para conservar el equilibrio del mockup: texto a la izquierda, flecha a la
   derecha. No hay precios: esto es una muestra de platos, no la carta. */
.tarjeta__alergenos{
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.tarjeta__fecha{
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota);
}

/* Avisos bajo la rejilla de platos. Van dos: el primero aclara que esto es
   una muestra y no la carta entera, el segundo es el de alergenos. */
.aviso-carta--seguido{ margin-top: .55rem !important }

.aviso-carta{
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  font-size: .85rem;
  color: var(--tinta-suave);
  text-align: center;
}

/* ==========================================================================
   11. BLOQUE A DOS COLUMNAS (el asadero)
   ========================================================================== */
.doble{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.doble__foto{
  min-height: 68vw;
  max-height: 60vh;
}
.doble__texto{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  align-content: center;
  /* Aire abajo para que la Alhambra no quede pegada al boton */
  padding: clamp(2.5rem, 8vw, 4.5rem) var(--gutter) calc(22vw + 1.5rem);
}
/* Ilustracion de grabado de la seccion: la Alhambra y la rama de olivo.
   El archivo trae la mitad izquierda despejada a proposito, que es donde
   caen el titular y el parrafo.
   En movil se coloca como franja al pie, a ancho completo y sin recortar,
   dentro del hueco que le reserva el padding inferior de .doble__texto. */
/* Hay dos versiones del grabado porque el bloque cambia mucho de forma: de
   proporcion 0,75 en un movil a 2,39 en un monitor panoramico. La cuadrada
   cubre desde movil hasta 1350 px, donde el bloque ronda el cuadrado; la
   apaisada entra por encima, que es para lo que esta dibujada.
   El color de fondo va muestreado de la fila superior de cada WebP: con tres
   puntos de diferencia ya se dibujaba una costura visible. */
.doble__texto{
  background-color: #FAE9CF;
  background-image: url("../img/fondo-asadero-movil.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (min-width: 860px){
  .doble{ grid-template-columns: 1fr 1fr; align-items: stretch }
  .doble__foto{ min-height: 100%; max-height: none }
  .doble__texto{
    /* La columna ronda el cuadrado, asi que la imagen cuadrada encaja con
       recorte minimo y el tercio despejado de arriba queda para el texto. */
    padding: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem)
             clamp(5rem, 11vw, 8rem) clamp(2rem, 4vw, 3.5rem);
  }
}

/* A partir de aqui la columna ya tiene proporcion 1,26 o mas, y el recorte de
   cover deja libre la mitad limpia de la imagen, que es donde cae el texto.
   Por debajo de este ancho la ilustracion se colaba bajo el parrafo: la
   ventana visible del recorte empieza en 1851 - 850 x proporcion, y hasta
   1350 px eso cae dentro de la Alhambra. */
@media (min-width: 1350px){
  .doble__texto{
    background-color: #F6EAD5;
    background-image: url("../img/fondo-asadero-escritorio.webp");
    background-size: cover;
    background-position: right bottom;
    padding: clamp(3rem, 7vw, 5.5rem)
             max(calc(var(--gutter) + 5.5rem), calc((100vw - var(--ancho)) / 2 + var(--gutter)))
             clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
  }
  /* Velo crema: asegura el contraste del texto sobre el grabado sea cual sea
     el recorte, y deja el grabado limpio en el lado derecho. */
  .doble__texto::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      #F6EAD5 0%,
      rgba(246, 234, 213, .94) 30%,
      rgba(246, 234, 213, 0) 68%);
  }
  .doble__texto > *{ position: relative }
  /* El parrafo se estrecha para no meterse en las torres */
  .doble__texto .entradilla{ max-width: 40ch }
}

/* ==========================================================================
   12. DÓNDE ESTAMOS
   ========================================================================== */
.local{
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px){
  .local{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 4rem) }
}

.datos{ display: grid; gap: 1.75rem }
.datos__grupo h3{
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: .6rem;
}
.datos__grupo p,
.datos__grupo li{ font-size: 1rem }
.datos__grupo a{ text-decoration: none; border-bottom: 1px solid var(--linea) }
.datos__grupo a:hover{ border-bottom-color: var(--terracota); color: var(--terracota) }

.horario{ display: grid; gap: .35rem }
.horario li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--linea);
  font-size: .95rem;
}
.horario span:first-child{ color: var(--tinta-suave) }
.horario span:last-child{ font-weight: 500 }
@media (min-width: 400px){
  .horario li{
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .horario span:last-child{ text-align: right }
}
.horario li[data-cerrado] span:last-child{ color: var(--terracota) }

/* La nota manuscrita va en el flujo, como una fila mas de la rejilla de
   datos: asi no puede solaparse con nada a ningun ancho, que es lo que le
   pasaba cuando iba posicionada sobre la ilustracion. */
.datos__nota{
  justify-self: start;
  max-width: 17ch;
  text-align: center;
  transform: rotate(-4deg);
  margin-top: -.5rem;
}

/* Mapa: el iframe no se carga hasta que se aceptan las cookies */
.mapa{
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--crema-2);
}
.mapa iframe{
  width: 100%;
  height: 100%;
  /* Filtro cálido para que el mapa no rompa la paleta */
  filter: grayscale(.55) sepia(.35) saturate(1.15) contrast(.95) brightness(.98);
}
.mapa__bloqueado{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .9rem;
  text-align: center;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  background: var(--crema-2);
}
.mapa__bloqueado p{
  font-size: .92rem;
  color: var(--tinta-suave);
  max-width: 34ch;
}
.mapa__bloqueado svg{ width: 40px; height: 40px; color: var(--terracota) }
.mapa[data-consentido="true"] .mapa__bloqueado{ display: none }

/* ==========================================================================
   13. CIERRE OSCURO
   ========================================================================== */
.cierre{
  position: relative;
  background: var(--negro);
  color: var(--crema);
  overflow: hidden;
  text-align: center;
  /* Bandas superior e inferior para el olivo y el gallo */
  padding: clamp(7rem, 26vw, 8rem) 0 clamp(9rem, 32vw, 10rem);
}
.cierre__contenido{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}
.cierre__pie{
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .68);
  margin-top: .4rem;
}
.cierre__pie::before,
.cierre__pie::after{
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.fondo-gallo,
.fondo-olivo{
  position: absolute;
  color: var(--crema);
  opacity: .13;
  z-index: 1;
  pointer-events: none;
}
.fondo-gallo{ left: -1%; bottom: 0; width: min(31vw, 175px) }
.fondo-olivo{ right: -5%; top: .5rem; width: min(58vw, 300px) }

@media (min-width: 860px){
  .fondo-gallo,
  .fondo-olivo{ opacity: .085 }
  .fondo-gallo{ left: -6%; bottom: -4%; width: min(46%, 300px) }
  .fondo-olivo{ right: -8%; top: -6%; width: min(52%, 380px); transform: rotate(8deg) }
  .cierre{ padding: clamp(3.5rem, 10vw, 6.5rem) 0 }
}

.cierre__nota{
  position: absolute;
  right: clamp(.75rem, 4vw, 4rem);
  bottom: .75rem;
  z-index: 3;
  transform: rotate(-8deg);
  text-align: center;
  max-width: 14ch;
}
@media (min-width: 860px){
  .cierre__nota{
    bottom: clamp(1.5rem, 5vw, 3rem);
    max-width: 8ch;
  }
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer{
  position: relative;
  background: var(--crema);
  border-top: 1px solid var(--linea);
  /* El hueco inferior es fijo: deja sitio al botón flotante de WhatsApp */
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 6rem;
}
.footer__grid{
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px){
  .footer__grid{ grid-template-columns: auto 1fr auto; gap: clamp(2rem, 5vw, 4rem) }
}

.footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem clamp(1rem, 3vw, 2rem);
}
.footer__nav a{
  font-size: .92rem;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid transparent;
}
.footer__nav a:hover{ color: var(--terracota); border-bottom-color: currentColor }

.footer__nota{
  transform: rotate(-5deg);
  text-align: center;
  max-width: 10ch;
}

.footer__legal{
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--tinta-suave);
}
.footer__legal ul{ display: flex; flex-wrap: wrap; gap: .5rem 1.1rem }
.footer__legal a{ text-decoration: none; border-bottom: 1px solid var(--linea) }
.footer__legal a:hover{ color: var(--terracota); border-bottom-color: var(--terracota) }

/* ==========================================================================
   15. WHATSAPP FLOTANTE
   ========================================================================== */
.wa{
  position: fixed;
  right: clamp(.9rem, 4vw, 1.5rem);
  bottom: clamp(.9rem, 4vw, 1.5rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  background: var(--terracota);
  color: var(--crema);
  border: 1px solid var(--terracota-osc);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(18, 11, 4, .35);
  transition: background-color .2s ease, bottom .25s ease;
}
.wa:hover{ background: var(--terracota-osc) }
.wa svg{ width: 22px; height: 22px; flex: none }
.wa span{ display: none }
@media (min-width: 420px){ .wa span{ display: inline } }

/* En escritorio el flotante se queda, pero desaparece mientras el banner de
   cookies esta visible. El choque con la nota manuscrita del heroe solo se
   daba en ese estado: el banner empuja el boton unos 110 px hacia arriba y ahi
   se le come la nota. Una vez decidido, el boton vuelve a su esquina y queda a
   38 px de la nota, sin tocarla. */
@media (min-width: 1000px){
  body.con-banner .wa{ display: none }
}

/* Se aparta cuando el banner de cookies está visible */
body.con-banner .wa{
  bottom: calc(clamp(.9rem, 4vw, 1.5rem) + var(--banner-h, 200px) + .5rem);
}

/* ==========================================================================
   16. BANNER DE COOKIES
   ========================================================================== */
.cookies{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none;
  background: var(--negro);
  color: var(--crema);
  border-top: 2px solid var(--dorado);
}
.cookies[data-visible="true"]{ display: block }
.cookies__caja{
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem var(--gutter);
  max-width: var(--ancho);
  margin: 0 auto;
}
.cookies__texto{ font-size: .88rem; line-height: 1.55; color: rgba(250, 246, 239, .88) }
.cookies__texto strong{
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--crema);
  margin-bottom: .2rem;
}
.cookies__texto a{ color: var(--dorado) }
.cookies__botones{ display: flex; flex-wrap: wrap; gap: .6rem }
.cookies__botones .btn{ flex: 1 1 auto }
@media (min-width: 700px){
  .cookies__caja{ grid-template-columns: 1fr auto; gap: 1.5rem }
  .cookies__botones .btn{ flex: none }
}

/* ==========================================================================
   17. LIGHTBOX
   ========================================================================== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(18, 11, 4, .94);
}
.lightbox[data-abierto="true"]{ display: flex }
.lightbox__figura{
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: grid;
  gap: .9rem;
  justify-items: center;
}
.lightbox__figura img{
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--linea-clara);
}
.lightbox__figura figcaption{
  font-family: var(--mano);
  font-size: 1.25rem;
  color: var(--dorado);
  text-align: center;
}
.lightbox__cerrar{
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  background: transparent;
  color: var(--crema);
  cursor: pointer;
}
.lightbox__cerrar:hover{ background: rgba(250, 246, 239, .12) }
.lightbox__cerrar svg{ width: 18px; height: 18px }

/* ==========================================================================
   18. APARICIÓN AL HACER SCROLL
   Sutil: 14px de desplazamiento y nada más.
   ========================================================================== */
.aparece{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.aparece.visible{
  opacity: 1;
  transform: none;
}
/* Si JS no arranca, nada se queda invisible */
.sin-js .aparece{ opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  .aparece{ opacity: 1 !important; transform: none !important; transition: none }
  *{ transition-duration: .01ms !important }
}

/* ==========================================================================
   19. IMPRESIÓN
   ========================================================================== */
@media print{
  .header, .wa, .cookies, .lightbox, .menu-movil, .mapa{ display: none !important }
  body{ background: #fff; color: #000 }
  .es-oscuro, .heroe, .cierre, .reclamos{ background: #fff !important; color: #000 !important }
}

/* ==========================================================================
   19b. LOGOTIPO
   El archivo del logo es el sello cuadrado completo: a 56px su rótulo interior
   no se lee, así que funciona como sello y el nombre va en tipografía al lado,
   igual que en la referencia. El <img> va con alt vacío porque el nombre ya
   lo aporta el texto.
   ========================================================================== */
.logo{
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.logo__sello{
  height: clamp(52px, 13vw, 66px);
  width: auto;
  transition: height .25s ease;
}
.logo__texto{
  display: grid;
  gap: .18em;
  line-height: 1;
}
.logo__linea1{
  font-family: var(--sans);
  font-size: clamp(.55rem, 1.9vw, .64rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.logo__linea2{
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.02rem, 3.6vw, 1.32rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
}
/* Variante sobre fondo oscuro (menú móvil) */
.logo--claro .logo__linea1{ color: rgba(250, 246, 239, .72) }
.logo--claro .logo__linea2{ color: var(--crema) }

.header.compacto .logo__sello{ height: clamp(44px, 11vw, 52px) }

/* En el footer el sello manda más */
.footer__logo .logo__sello{ height: clamp(64px, 18vw, 86px) }
.footer__logo .logo__linea2{ font-size: clamp(1.15rem, 4vw, 1.5rem) }

/* ==========================================================================
   19c. ENTRADAS DEL BLOG
   Paginas de blog/. La medida de lectura se limita a 68ch, que es donde el
   ojo no se pierde al saltar de linea.
   ========================================================================== */
.entrada{
  background: var(--crema);
  padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(3rem, 8vw, 5rem);
}

.entrada__cabecera,
.entrada__cuerpo,
.entrada__cta,
.entrada__mas{
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.entrada__cabecera{
  display: grid;
  gap: .9rem;
  justify-items: start;
  padding-top: clamp(1rem, 4vw, 2rem);
  padding-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Volver al listado de la portada */
.entrada__volver{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota);
  text-decoration: none;
}
.entrada__volver svg{ width: 15px; height: 15px }
.entrada__volver:hover{ color: var(--terracota-osc) }

.entrada__meta{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.entrada__entradilla{
  font-size: clamp(1.05rem, 3.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* La foto sale de la medida de lectura, a sangre en movil */
.entrada__foto{
  margin: 0 0 clamp(1.5rem, 5vw, 2.5rem);
  aspect-ratio: 4 / 3;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.entrada__foto figcaption{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.2rem 1rem .7rem;
  font-family: var(--mano);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  text-align: center;
  color: var(--crema);
  background: linear-gradient(to top, rgba(28,18,9,.82), rgba(28,18,9,0));
  pointer-events: none;
}
.marco.sin-foto figcaption{ display: none }

@media (min-width: 860px){
  .entrada__foto{
    max-width: 1000px;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
  }
}

/* ---- Prosa del articulo ---- */
.prosa h2{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.6vw, 1.6rem);
  line-height: 1.2;
  color: var(--tinta);
  margin: clamp(1.9rem, 5vw, 2.5rem) 0 .7rem;
}
.prosa h2:first-child{ margin-top: 0 }

.prosa p{
  font-size: clamp(1rem, 3.4vw, 1.06rem);
  line-height: 1.75;
  margin-bottom: 1.05rem;
}

.prosa ul{
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.prosa ul li{
  position: relative;
  padding-left: 1.5rem;
  font-size: clamp(1rem, 3.4vw, 1.06rem);
  line-height: 1.65;
}
/* Vinneta en terracota, en lugar del disco del navegador */
.prosa ul li::before{
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--terracota);
  transform: rotate(45deg);
}
.prosa strong{ font-weight: 600; color: var(--tinta) }

/* ---- Cierre del articulo ---- */
.entrada__cta{
  display: grid;
  justify-items: center;
  gap: .9rem;
  margin-top: clamp(2.5rem, 7vw, 3.5rem);
  padding-top: clamp(2rem, 5vw, 2.5rem);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.entrada__cta-texto{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  color: var(--tinta);
}

/* ---- Mas entradas ---- */
.entrada__mas{
  max-width: var(--ancho);
  margin-top: clamp(2.5rem, 7vw, 4rem);
}
.entrada__mas-titulo{
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracota);
  text-align: center;
  margin-bottom: 1.2rem;
}
@media (min-width: 700px){
  .entrada__mas .rejilla{ grid-template-columns: repeat(2, 1fr) }
}

/* ==========================================================================
   19d. PAGINAS LEGALES
   Comparten la maqueta de las entradas del blog (.entrada) y solo anaden lo
   propio: subtitulos de tercer nivel, la tabla de cookies y el pie con los
   otros documentos.
   ========================================================================== */
.prosa h3{
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1rem, 3.6vw, 1.08rem);
  color: var(--terracota);
  margin: 1.4rem 0 .5rem;
}

.legal .entrada__meta{
  padding-top: .3rem;
  color: var(--tinta-suave);
  font-weight: 500;
  letter-spacing: .06em;
}

/* Tabla de cookies: en movil se desplaza en horizontal en vez de romperse */
.tabla-cookies{
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.3rem;
  font-size: .88rem;
}
.tabla-cookies th,
.tabla-cookies td{
  border: 1px solid var(--linea);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
  min-width: 6.5rem;
}

/* Cinco columnas no caben en la medida de lectura de 68ch, asi que a partir
   de pantalla mediana la tabla se sale del texto por los dos lados. En movil
   se queda dentro y se desplaza en horizontal. */
@media (min-width: 900px){
  .tabla-cookies{
    width: calc(100% + 9rem);
    margin-left: -4.5rem;
  }
}
.tabla-cookies thead th{
  background: var(--crema-2);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracota);
}
.tabla-cookies code{
  font-size: .85em;
  background: var(--crema-2);
  padding: .1em .35em;
  border-radius: 2px;
}

.legal__otras{
  width: 100%;
  max-width: 68ch;
  margin: clamp(2.5rem, 7vw, 3.5rem) auto 0;
  padding: clamp(1.75rem, 5vw, 2.25rem) var(--gutter) 0;
  border-top: 1px solid var(--linea);
}
.legal__otras ul{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.75rem;
  list-style: none;
  padding: 0;
  justify-content: center;
}

/* ==========================================================================
   20. PIEZAS MENORES
   Clases de apoyo, agrupadas aquí para no ensuciar los bloques de arriba.
   ========================================================================== */

/* El bronce es la versión legible del dorado sobre fondo crema: el dorado
   puro se queda en 1,75:1 y no pasa AA, este llega a 5,5:1. */
.bronce{ color: var(--bronce) }

.header__acciones{
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* La franja de reclamos va a sangre en móvil y dentro del contenedor en
   escritorio, de ahí este marco intermedio. */
.reclamos__marco{ width: 100% }
.reclamos__lista{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (min-width: 860px){
  .reclamos__marco{
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .reclamos__lista{ padding-left: 0; padding-right: 0 }
}

.nota--carta{
  display: block;
  margin-top: 1.75rem;
  text-align: center;
  transform: rotate(-3.5deg);
}

.datos__extra{ margin-top: .7rem }

.mapa__alternativa{ font-size: .85rem }

.cierre__entradilla{ color: rgba(250, 246, 239, .88) }

.footer__datos{
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--tinta-suave);
}
.footer__datos a{ text-decoration: none; border-bottom: 1px solid var(--linea) }
.footer__datos a:hover{ color: var(--terracota); border-bottom-color: var(--terracota) }

/* Botón que se comporta como enlace (preferencias de cookies del footer) */
.boton-texto{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .8rem;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--linea);
}
.boton-texto:hover{ color: var(--terracota); border-bottom-color: var(--terracota) }