/* ==========================================================================
   LAVAVUT — hoja de estilos
   Paleta extraída del propio local: grafito de las máquinas, roble del
   revestimiento, blanco roto de las paredes y verde de las plantas.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Color */
  --grafito:      #211e1c;
  --grafito-alto: #322d29;
  --grafito-mid:  #4a443f;
  --acero:        #7c807f;
  --roble:        #9c6b36;
  --roble-osc:    #7c5327;
  --roble-luz:    #e3c9a4;
  --roble-vel:    #f2e7d7;
  --hueso:        #f7f5f2;
  --blanco:       #ffffff;
  --verde:        #4c7a4e;
  --verde-luz:    #e7f0e6;
  --linea:        #e4dfd8;
  --linea-osc:    #4a443f;

  /* Tipografía */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Instrument Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --dato:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Escala */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.625rem;
  --t-2xl:  2.25rem;
  --t-3xl:  clamp(2.4rem, 6vw, 4.5rem);

  /* Ritmo */
  --gap:     1.5rem;
  --seccion: clamp(4.5rem, 9vw, 8rem);
  --ancho:   1200px;
  --radio:   14px;
  --radio-s: 8px;

  --sombra:     0 1px 2px rgba(33, 30, 28, .06), 0 8px 24px rgba(33, 30, 28, .07);
  --sombra-alt: 0 2px 4px rgba(33, 30, 28, .08), 0 18px 44px rgba(33, 30, 28, .13);
  --transicion: 260ms cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--grafito);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

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

/* --- Utilidades --------------------------------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--grafito); color: var(--blanco);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radio-s) var(--radio-s);
  text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 0; }

/* Etiqueta superior de sección */
.eyebrow {
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--roble-osc);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--roble);
  flex: none;
}

.titulo-seccion { font-size: clamp(1.9rem, 4.2vw, 3rem); }

.entradilla {
  font-size: var(--t-lg);
  color: var(--grafito-mid);
  max-width: 56ch;
  margin-top: 1.1rem;
  line-height: 1.55;
}

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: var(--t-base);
  text-decoration: none;
  transition: transform var(--transicion), background var(--transicion),
              color var(--transicion), border-color var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--principal { background: var(--grafito); color: var(--blanco); }
.btn--principal:hover { background: var(--roble-osc); }

.btn--madera { background: var(--roble); color: var(--blanco); }
.btn--madera:hover { background: var(--roble-osc); }

.btn--linea { background: transparent; color: var(--grafito); border-color: var(--grafito); }
.btn--linea:hover { background: var(--grafito); color: var(--blanco); }

.btn--claro { background: var(--blanco); color: var(--grafito); }
.btn--claro:hover { background: var(--roble-vel); }

.btn svg { width: 19px; height: 19px; flex: none; }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
}

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marca img { width: 46px; height: 46px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.marca__sub {
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--acero);
}

.nav ul { display: flex; gap: clamp(.9rem, 1.6vw, 1.6rem); }
.nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--t-sm);
  padding: .35rem 0;
  position: relative;
  color: var(--grafito-mid);
  transition: color var(--transicion);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--roble);
  transition: width var(--transicion);
}
.nav a:hover { color: var(--grafito); }
.nav a:hover::after { width: 100%; }

/* Indicador de apertura en vivo */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--verde-luz);
  color: #2f5631;
  white-space: nowrap;
}
.estado[data-abierto="no"] { background: #f4ece6; color: var(--roble-osc); }

.estado__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--verde);
  flex: none;
  position: relative;
}
.estado[data-abierto="no"] .estado__punto { background: var(--roble); }
.estado__punto::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .35;
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0%   { transform: scale(.6); opacity: .5; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.cabecera .btn { padding: .6rem 1.15rem; font-size: var(--t-sm); }

/* Botón hamburguesa */
.hamburguesa {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  color: var(--grafito);
}
.hamburguesa svg { width: 26px; height: 26px; }

/* ==========================================================================
   PORTADA
   ========================================================================== */
.portada { padding: clamp(3rem, 6vw, 5.5rem) 0 0; background: var(--hueso); overflow: hidden; }

.portada__rejilla {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.portada h1 {
  font-size: var(--t-3xl);
  letter-spacing: -.045em;
}
.portada h1 em {
  font-style: normal;
  color: var(--roble-osc);
}

.portada__texto p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--grafito-mid); margin-top: 1.4rem; max-width: 46ch; }

.portada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Tira de datos en mono */
.tira {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.tira > div {
  padding: 1rem 1.6rem 1rem 0;
  margin-right: 1.6rem;
  border-right: 1px solid var(--linea);
}
.tira > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tira dt {
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acero);
  margin-bottom: .2rem;
}
.tira dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

/* Foto de portada enmarcada como ojo de buey */
.portada__foto {
  position: relative;
  aspect-ratio: 1;
  align-self: center;
  max-width: 480px;
  margin-left: auto;
}
.portada__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 12px solid var(--blanco);
  box-shadow: var(--sombra-alt);
}
.portada__aro {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px dashed var(--roble-luz);
  animation: girar 70s linear infinite;
  pointer-events: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

.portada__sello {
  position: absolute;
  right: -6px;
  bottom: 10%;
  background: var(--grafito);
  color: var(--blanco);
  padding: .9rem 1.2rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alt);
  text-align: center;
}
.portada__sello strong {
  display: block;
  font-family: var(--dato);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.portada__sello span {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--roble-luz);
}

/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
.seccion { padding: var(--seccion) 0; }
.seccion--hueso { background: var(--hueso); }
.seccion--oscura { background: var(--grafito); color: var(--hueso); }
.seccion--oscura .titulo-seccion { color: var(--blanco); }
.seccion--oscura .entradilla { color: #c4bdb5; }
.seccion--oscura .eyebrow { color: var(--roble-luz); }
.seccion--oscura .eyebrow::before { background: var(--roble-luz); }

.seccion__cabeza { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ==========================================================================
   TARIFAS — la pared de máquinas
   ========================================================================== */
.pared {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.05) 0 1px,
      transparent 1px 118px
    ),
    linear-gradient(178deg, #a97645 0%, #8d5f31 45%, #99693a 46%, #7e5429 100%);
  border-radius: var(--radio);
  padding: clamp(1.6rem, 3.5vw, 3rem);
  box-shadow: inset 0 0 60px rgba(0,0,0,.28);
}

.pared__rotulo {
  display: inline-block;
  background: var(--blanco);
  border: 4px solid var(--grafito);
  border-radius: 4px;
  padding: .5rem 2rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  box-shadow: var(--sombra);
}

.maquinas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.maquina {
  background: linear-gradient(165deg, #3a3835 0%, #26241f 100%);
  border-radius: 10px;
  padding: 1.4rem 1.2rem 1.2rem;
  color: var(--hueso);
  text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.13);
  transition: transform var(--transicion);
}
.maquina:hover { transform: translateY(-6px); }

.maquina__tipo {
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--roble-luz);
}

/* Ojo de buey */
.ojo {
  width: clamp(84px, 11vw, 120px);
  aspect-ratio: 1;
  margin: 1rem auto;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6c6862 0%, #2b2926 62%, #15130f 100%);
  border: 7px solid #a9aeb0;
  box-shadow: inset 0 0 22px rgba(0,0,0,.85), 0 0 0 2px #55524d;
  position: relative;
  display: grid;
  place-items: center;
}
.ojo::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px dotted rgba(255,255,255,.16);
  transition: transform 1.2s linear;
}
.maquina:hover .ojo::after { transform: rotate(180deg); }

.ojo span {
  font-family: var(--dato);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  color: var(--blanco);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}

.maquina__carga {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.maquina__nota {
  font-size: var(--t-xs);
  color: #a49d94;
  margin-top: .2rem;
}
.maquina__unidades {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--roble-luz);
  border: 1px solid rgba(227,201,164,.35);
  border-radius: 999px;
  padding: .2rem .6rem;
}

.pared__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  color: #f4e9db;
  font-size: var(--t-sm);
}
.pared__pie strong { font-weight: 600; }

/* ==========================================================================
   CÓMO FUNCIONA — secuencia real de 5 pasos
   ========================================================================== */
.pasos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding-top: 2.6rem;
  border-top: 2px solid var(--linea);
}
.paso::before {
  counter-increment: paso;
  content: "0" counter(paso);
  position: absolute;
  top: -.85rem;
  left: 0;
  background: var(--hueso);
  padding-right: .7rem;
  font-family: var(--dato);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--roble-osc);
}
.seccion:not(.seccion--hueso) .paso::before { background: var(--blanco); }

.paso h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.paso p { font-size: var(--t-sm); color: var(--grafito-mid); }
.paso__tiempo {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--acero);
}

/* ==========================================================================
   EXTRAS
   ========================================================================== */
.extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.extra {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.extra:hover { border-color: var(--roble-luz); transform: translateY(-3px); box-shadow: var(--sombra); }
.extra__icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--roble-vel);
  color: var(--roble-osc);
  margin-bottom: 1rem;
}
.extra__icono svg { width: 22px; height: 22px; }
.extra h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.extra p { font-size: var(--t-sm); color: var(--grafito-mid); }

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.galeria img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radio);
}
.galeria figure { margin: 0; }
.galeria figcaption {
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--acero);
  margin-top: .6rem;
  letter-spacing: .04em;
}

/* ==========================================================================
   ALOJAMIENTOS (VUT)
   ========================================================================== */
.vut { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vut__foto img { border-radius: var(--radio); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.lista-check { margin: 1.75rem 0; display: grid; gap: .85rem; }
.lista-check li { display: flex; gap: .8rem; align-items: flex-start; }
.lista-check svg { width: 20px; height: 20px; flex: none; margin-top: .28rem; color: var(--roble-luz); }
.seccion:not(.seccion--oscura) .lista-check svg { color: var(--verde); }

/* ==========================================================================
   APP — bloque secundario y honesto
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.75rem;
  align-items: center;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.app__icono {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--grafito);
  color: var(--roble-luz);
}
.app__icono svg { width: 27px; height: 27px; }
.app h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.app p { font-size: var(--t-sm); color: var(--grafito-mid); max-width: 60ch; }
.app__tiendas { display: flex; gap: .6rem; flex-wrap: wrap; }
.app__tiendas a {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--grafito);
  border-radius: 999px;
  padding: .55rem 1rem;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.app__tiendas a:hover { background: var(--grafito); color: var(--blanco); }
.app__tiendas svg { width: 17px; height: 17px; }

/* ==========================================================================
   RESEÑAS
   ========================================================================== */
.resenas__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.nota {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem 1.4rem;
}
.nota__num {
  font-family: var(--dato);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
}
.nota__estrellas { color: #e0a12a; letter-spacing: .1em; font-size: .95rem; }
.nota__txt { font-size: var(--t-xs); color: var(--acero); }

.resenas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.resena {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.resena blockquote { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--grafito-alto); }
.resena figcaption { margin-top: auto; display: flex; align-items: center; gap: .7rem; }
.resena__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--roble-vel);
  color: var(--roble-osc);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  flex: none;
}
.resena__nombre { font-weight: 600; font-size: var(--t-sm); line-height: 1.25; }
.resena__meta { font-family: var(--dato); font-size: .625rem; color: var(--acero); letter-spacing: .06em; }

/* ==========================================================================
   VIBES CORUÑA
   ========================================================================== */
.vibes {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  border: 2px solid var(--grafito);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.vibes h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: .6rem; }
.vibes p { color: var(--grafito-mid); max-width: 58ch; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); }

.datos { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.dato { display: flex; gap: 1rem; align-items: flex-start; }
.dato__icono {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--roble-vel);
  color: var(--roble-osc);
}
.dato__icono svg { width: 19px; height: 19px; }
.dato dt {
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acero);
}
.dato dd { margin: 0; font-weight: 600; }
.dato a { text-decoration: none; border-bottom: 1px solid var(--roble-luz); }
.dato a:hover { border-bottom-color: var(--roble); }

.mapa {
  width: 100%;
  aspect-ratio: 16/10;
  border: 0;
  border-radius: var(--radio);
  filter: grayscale(.35) contrast(1.04);
}

/* Formulario */
.formulario {
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-family: var(--dato);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grafito-mid);
  margin-bottom: .4rem;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem .95rem;
  font-family: var(--texto);
  font-size: var(--t-base);
  color: var(--grafito);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 118px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 0;
  border-color: var(--roble);
  box-shadow: 0 0 0 3px rgba(156, 107, 54, .16);
}
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo--doble .campo { margin-bottom: 0; }

.consentimiento { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); margin: 1.25rem 0; }
.consentimiento input { margin-top: .32rem; width: 17px; height: 17px; flex: none; accent-color: var(--roble); }
.consentimiento a { color: var(--roble-osc); }

/* Trampa antispam */
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; }

.aviso {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radio-s);
  font-size: var(--t-sm);
  display: none;
}
.aviso--ok  { display: block; background: var(--verde-luz); color: #2f5631; }
.aviso--err { display: block; background: #fbeae6; color: #8c3a22; }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: var(--grafito); color: #b8b1a8; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #3a352f;
}
.pie h4 {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--roble-luz);
  font-family: var(--dato);
  font-weight: 500;
  margin-bottom: 1rem;
}
.pie ul { display: grid; gap: .6rem; }
.pie a { text-decoration: none; font-size: var(--t-sm); transition: color var(--transicion); }
.pie a:hover { color: var(--blanco); }
.pie__marca img { width: 62px; filter: invert(1) brightness(2.2); margin-bottom: 1rem; }
.pie__marca p { font-size: var(--t-sm); max-width: 34ch; }
.pie__horario { font-family: var(--dato); font-size: var(--t-sm); color: var(--hueso); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: var(--t-xs);
  color: #85807a;
}

/* ==========================================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================================== */
.flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #1fa855;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-sm);
  padding: .85rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  transition: transform var(--transicion);
}
.flotante:hover { transform: translateY(-3px); }
.flotante svg { width: 21px; height: 21px; }

/* ==========================================================================
   REVELADO AL HACER SCROLL
   ========================================================================== */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.revelar.visible { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .maquinas { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .extras { grid-template-columns: repeat(2, 1fr); }
  .resenas { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .hamburguesa { display: block; order: 3; }
  /* En pantallas pequeñas el botón de llamar se queda solo con el icono */
  .cabecera .btn--principal { padding: .6rem; }
  .cabecera .btn--principal .btn__texto { display: none; }

  .nav--abierto {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    padding: 1.25rem 1.25rem 1.75rem;
  }
  .nav--abierto ul { flex-direction: column; gap: 0; }
  .nav--abierto a {
    display: block;
    padding: .85rem 0;
    border-bottom: 1px solid var(--linea);
    font-size: var(--t-lg);
    font-family: var(--display);
    font-weight: 700;
  }
  .nav--abierto a::after { display: none; }

  .portada__rejilla { grid-template-columns: 1fr; }
  .portada__foto { max-width: 420px; margin-inline: auto; }
  .vut, .contacto { grid-template-columns: 1fr; }
  .app { grid-template-columns: auto 1fr; }
  .app__tiendas { grid-column: 1 / -1; }
  .vibes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .estado__extra { display: none; }
}

@media (max-width: 640px) {
  .cabecera__fila { min-height: 64px; }
  .marca img { width: 38px; height: 38px; }
  .estado { font-size: .625rem; padding: .3rem .6rem; }
  .pasos { grid-template-columns: 1fr; }
  .extras { grid-template-columns: 1fr; }
  .resenas { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; }
  .maquinas { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .campo--doble { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .tira > div { border-right: 0; padding: .7rem 0; margin-right: 0; width: 50%; }
  .flotante span { display: none; }
  .flotante { padding: .95rem; border-radius: 50%; }
}

@media (max-width: 400px) {
  .marca__sub { display: none; }
}

@media (max-width: 380px) {
  .maquinas { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; }
}

/* --- Accesibilidad: movimiento reducido -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* --- Impresión ---------------------------------------------------------- */
@media print {
  .cabecera, .flotante, .formulario, .mapa { display: none; }
  body { color: #000; }
}

/* ==========================================================================
   PÁGINAS LEGALES E INTERIORES
   ========================================================================== */
.legal { padding: clamp(3rem, 7vw, 6rem) 0 var(--seccion); }
.legal__cuerpo { max-width: 74ch; }
.legal h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 1.5rem; }
.legal h2 {
  font-size: 1.3rem;
  margin: 2.75rem 0 .9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--grafito-alto); }
.legal ul.legal__lista { list-style: disc; padding-left: 1.35rem; margin: 0 0 1rem; display: grid; gap: .45rem; }
.legal a { color: var(--roble-osc); }

.ficha {
  background: var(--hueso);
  border-left: 3px solid var(--roble);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  padding: 1.35rem 1.6rem;
  margin: 1.5rem 0 2.5rem;
  font-family: var(--dato);
  font-size: var(--t-sm);
  line-height: 1.9;
}

.pendiente {
  background: #fff7e8;
  border: 1px dashed #d6a54a;
  border-radius: var(--radio-s);
  padding: 1.1rem 1.35rem;
  font-size: var(--t-sm);
  color: #7a5615;
  margin: 1.5rem 0;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--grafito-mid);
  margin-bottom: 2rem;
}
.volver:hover { color: var(--roble-osc); }
.volver svg { width: 17px; height: 17px; }

/* Página de gracias */
.gracias { min-height: 68vh; display: grid; place-items: center; text-align: center; padding: var(--seccion) 0; }
.gracias__marca {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--verde-luz);
  color: var(--verde);
  display: grid; place-items: center;
  margin: 0 auto 1.75rem;
}
.gracias__marca svg { width: 36px; height: 36px; }
.gracias h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1rem; }
.gracias p { color: var(--grafito-mid); max-width: 48ch; margin-inline: auto; }
.gracias .btn { margin-top: 2rem; }

/* ==========================================================================
   Consentimiento de cookies
   Marcador del mapa + panel. Usa los mismos tokens que el resto de la web.
   ========================================================================== */

/* --- Marcador del mapa mientras no hay consentimiento -------------------- */
.mapa-caja { width: 100%; }

.mapa-bloqueado {
  width: 100%;
  aspect-ratio: 16/10;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(135deg,
      var(--hueso) 0 12px, #efece7 12px 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1.75rem;
  text-align: center;
}

.mapa-bloqueado__texto {
  max-width: 34ch;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--grafito-mid);
}

.mapa-bloqueado__pie { margin: 0; font-size: var(--t-xs); }
.mapa-bloqueado__pie a { color: var(--grafito-mid); }

/* --- Panel de consentimiento -------------------------------------------- */
.ck { position: fixed; inset: 0; z-index: 9999; display: none; }
.ck.ck--visible { display: block; }
body.ck-abierto { overflow: hidden; }

.ck-fondo {
  position: absolute;
  inset: 0;
  background: rgba(33, 30, 28, .55);
  backdrop-filter: blur(2px);
}

.ck-panel {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 2rem));
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alt);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.ck-titulo {
  font-family: var(--display);
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin: 0 0 .65rem;
}

.ck-desc {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--grafito-mid);
  margin: 0 0 1.25rem;
}

.ck-desc a { color: var(--roble-osc); text-underline-offset: 3px; }

/* Categorías */
.ck-detalle {
  border-top: 1px solid var(--linea);
  margin-bottom: 1.25rem;
}

.ck-cat { border-bottom: 1px solid var(--linea); padding: 1rem 0; }

.ck-cat__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}

.ck-cat h3 {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.ck-cat p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--grafito-mid);
}

.ck-fija {
  font-family: var(--dato);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verde);
  background: var(--verde-luz);
  padding: .28rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Interruptor */
.ck-interruptor {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  flex-shrink: 0;
}

.ck-interruptor input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.ck-palanca {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d8d2ca;
  position: relative;
  transition: background var(--transicion);
  flex-shrink: 0;
  pointer-events: none;
}

.ck-palanca::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 1px 3px rgba(33, 30, 28, .3);
  transition: transform var(--transicion);
}

.ck-interruptor input:checked + .ck-palanca { background: var(--verde); }
.ck-interruptor input:checked + .ck-palanca::after { transform: translateX(18px); }
.ck-interruptor input:focus-visible + .ck-palanca {
  outline: 2px solid var(--grafito);
  outline-offset: 3px;
}

.ck-palanca-txt {
  font-family: var(--dato);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grafito-mid);
}

/* Botones: aceptar y rechazar con el mismo peso visual, como exige la AEPD */
.ck-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.ck-btn {
  font-family: var(--texto);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: 999px;
  padding: .8rem 1.5rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.ck-btn--solido {
  flex: 1 1 auto;
  min-width: 150px;
  background: var(--grafito);
  color: var(--blanco);
  border-color: var(--grafito);
}

.ck-btn--solido:hover { background: var(--grafito-alto); border-color: var(--grafito-alto); }

.ck-btn--texto {
  background: transparent;
  color: var(--grafito-mid);
  border-color: var(--linea);
}

.ck-btn--texto:hover { border-color: var(--grafito); color: var(--grafito); }

.ck-btn:focus-visible { outline: 2px solid var(--roble); outline-offset: 3px; }

@media (max-width: 560px) {
  .ck-panel { bottom: 0; border-radius: var(--radio) var(--radio) 0 0; width: 100%; }
  .ck-btn--solido { flex: 1 1 100%; }
  .ck-btn--texto  { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-palanca, .ck-palanca::after, .ck-btn { transition: none; }
}

/* Tabla de la política de cookies */
.legal__tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: var(--t-sm);
}

.legal__tabla th,
.legal__tabla td {
  border: 1px solid var(--linea);
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.legal__tabla th {
  background: var(--hueso);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.legal__tabla code {
  font-family: var(--dato);
  font-size: .82em;
  background: var(--hueso);
  padding: .1rem .3rem;
  border-radius: 4px;
  word-break: break-word;
}

.legal__fecha {
  font-family: var(--dato);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--acero);
  margin-bottom: 2rem;
}

@media (max-width: 640px) {
  .legal__tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .legal__tabla td { white-space: normal; min-width: 160px; }
}