/* ==========================================================================
   HOFT — LAYOUT
   Contenedores, rejillas fluidas y chasis (logo + header de botones, footer).
   Mobile-first: la base es 1 columna; las columnas se añaden con min-width.
   ========================================================================== */

/* --- Contenedor ----------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contenedor--ancho { max-width: none; }
.contenedor--estrecho { max-width: 68rem; }

/* --- Secciones ------------------------------------------------------------ */
.seccion {
  padding-block: var(--esp-lg);
  position: relative;
}

/* En la v3 cada sección encadena varios bloques —texto, rejilla, formulario—
   donde antes cada uno era una <section> con su propio padding. Sin esto se
   pisan. El margen de la cabecera, que ya trae el suyo, se funde con este por
   colapso de márgenes en vez de sumarse. */
.seccion .contenedor > * + * { margin-top: var(--esp-lg); }

.seccion__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  margin-bottom: var(--esp-lg);
}

@media (min-width: 768px) {
  .seccion__cabecera {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: var(--esp-md);
  }
}

.seccion__indice { display: block; margin-bottom: var(--esp-2xs); }

/* --- Rejilla fluida ------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

.grid--auto {
  --min-col: 17rem;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col), 100%), 1fr));
}

@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1920px) {
  .grid--auto { --min-col: 20rem; }
  .grid--4 { grid-template-columns: repeat(5, 1fr); }
}

/* Split editorial: texto + media */
.split {
  display: grid;
  gap: var(--esp-lg);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-xl); }
  .split--desigual { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.stack { display: flex; flex-direction: column; gap: var(--esp-sm); }
/* Los hijos de un .stack se estiran a lo ancho: con un botón dentro, el botón
   se comería la columna entera. */
.stack--inicio { align-items: start; }
.stack--sm { gap: var(--esp-xs); }
.stack--lg { gap: var(--esp-md); }

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-sm);
}

/* --- Chasis: menú lateral fijo + lienzo ------------------------------------
   El cambio de la v3. No hay cabecera superior: una columna fija a toda altura
   con el índice de secciones a la izquierda, y a su derecha el lienzo, que es
   lo único que se mueve. Todo el sitio es una sola página y el menú lleva a
   sus secciones.

   Mobile-first: por debajo de 1024 px no cabe una columna al lado del texto,
   así que la base es una barra superior con el logo y un botón que despliega
   el índice a pantalla completa. La columna fija aparece a partir de ahí.
   -------------------------------------------------------------------------- */

/* Lienzo: la parte móvil de la web. En móvil deja hueco a la barra; en
   escritorio se aparta el ancho del menú. */
.lienzo {
  position: relative;
  padding-top: var(--alto-barra);
}

/* --- Barra superior (solo móvil) ------------------------------------------ */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-menu);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  height: var(--alto-barra);
  padding-inline: var(--gutter);
  background-color: color-mix(in srgb, var(--color-fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-linea);
}

/* El enlace del logo se ciñe a su arte. Sin esto es un ancla en flujo normal,
   se estira a lo ancho de la barra y el logo acaba flotando en el centro. */
.marca { display: inline-flex; align-items: center; }
.marca img { width: auto; }

.barra .marca img { height: 1.5rem; }

/* Botón del menú: dos trazos de tinta que se cruzan al abrir. Sin caja ni
   relleno, para que no compita con nada. */
.barra__boton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin-right: calc(var(--gutter) / -4);
  align-items: flex-end;
}

.barra__boton span {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  background-color: var(--color-texto);
  transition: transform var(--dur-media) var(--ease),
              opacity var(--dur-rapida) var(--ease);
}

.barra__boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.406rem) rotate(45deg); }
.barra__boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.barra__boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.406rem) rotate(-45deg); }

/* Velo que apaga el contenido mientras el panel está abierto en móvil */
.menu-velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu-velo);
  background-color: color-mix(in srgb, var(--hoft-negro) 34%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease);
}
.menu-velo[data-abierto="true"] { opacity: 1; pointer-events: auto; }

/* --- El menú --------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--esp-lg);
  width: min(21rem, 86vw);
  padding: var(--esp-md) var(--esp-md) var(--esp-sm);
  background-color: var(--color-fondo);
  /* Excepción a "ningún filete separa bloques": esta línea no separa dos
     bloques de contenido, marca el borde entre lo que está quieto y lo que se
     mueve. Sin ella el texto pasaría por debajo del menú sin frontera. */
  border-right: 1px solid var(--color-linea);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-101%);          /* 101 %: ni un pelo del filete asoma */
  visibility: hidden;
  transition: transform var(--dur-media) var(--ease),
              visibility 0s linear var(--dur-media);
}

.menu[data-abierto="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-media) var(--ease), visibility 0s;
}

/* Logo: arriba del todo, con su área de seguridad ½X como manda el manual */
.menu .marca {
  display: inline-flex;
  padding: var(--logo-seguridad);
  margin-left: calc(var(--logo-seguridad) * -1);
}
.menu .marca img { height: var(--logo-alto); width: auto; }

/* --- Índice de secciones ---------------------------------------------------
   Cada entrada es un número en una pastilla y el nombre debajo, con su
   descriptor en mono. El "estás aquí" enciende la pastilla con el color de
   esa sección: sobre el color, la tinta siempre en negro (regla del manual).
   -------------------------------------------------------------------------- */
.menu__indice {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
}

.menu__enlace {
  --acento-item: var(--hoft-negro);
  --tinta-num: var(--hoft-blanco);
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: start;
  gap: 0 var(--esp-xs);
  padding-block: var(--esp-3xs);
}

.menu__enlace--traxx   { --acento-item: var(--color-traxx);    --tinta-num: var(--hoft-negro); }
.menu__enlace--booking { --acento-item: var(--color-booking);  --tinta-num: var(--hoft-negro); }
.menu__enlace--blog    { --acento-item: var(--color-blog);     --tinta-num: var(--hoft-negro); }

.menu__num {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.375rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--txt-xs);
  letter-spacing: 0.06em;
  color: var(--color-texto-tenue);
  transition: background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.menu__nombre {
  font-family: var(--font-display);
  font-weight: var(--peso-semibold);
  font-size: var(--txt-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-titular);
  line-height: 1.2;
  transition: transform var(--dur-media) var(--ease);
}

.menu__cat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  transition: color var(--dur-rapida) var(--ease),
              transform var(--dur-media) var(--ease);
}

@media (hover: hover) {
  .menu__enlace:hover .menu__nombre,
  .menu__enlace:hover .menu__cat { transform: translateX(0.25rem); }
  .menu__enlace:hover .menu__num { color: var(--color-texto); }
  .menu__enlace:hover .menu__cat { color: var(--color-texto-suave); }
}

.menu__enlace:focus-visible { outline-offset: 6px; }

/* Estás aquí: se enciende la pastilla y el descriptor sube a tinta plena. */
.menu__enlace[aria-current="true"] .menu__num {
  background-color: var(--acento-item);
  color: var(--tinta-num);
}
.menu__enlace[aria-current="true"] .menu__cat { color: var(--color-texto-suave); }

/* --- Pie del menú ----------------------------------------------------------
   Se pega abajo con margin-top auto. Contactos y redes en mono pequeño, y las
   dos pegatinas del mando, que siguen siendo el único control de la casa.
   -------------------------------------------------------------------------- */
.menu__pie {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  margin-top: auto;
}

.menu__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3xs) var(--esp-sm);
}

.menu__enlaces a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
  transition: color var(--dur-rapida) var(--ease);
}
.menu__enlaces a:hover { color: var(--color-texto); }

.menu__firma {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

/* --- A partir de 1024 px: la columna fija ---------------------------------- */
@media (min-width: 1024px) {
  .barra, .menu-velo { display: none; }

  .lienzo { margin-left: var(--ancho-menu); }

  .menu {
    width: var(--ancho-menu);
    padding: var(--esp-md) var(--esp-md) var(--esp-md);
    transform: none;
    visibility: visible;
    transition: none;
  }
}

@media (min-width: 1440px) {
  /* Más aire arriba, pero los laterales se quedan como están: --esp-lg llega a
     80 px y en una columna de 300 se comía la mitad del ancho útil, con los
     descriptores partidos en dos líneas. */
  .menu { padding-top: var(--esp-lg); }
  .menu__indice { gap: var(--esp-sm); }
}

/* --- Botones de contenido -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  min-height: 3rem;
  padding: var(--esp-xs) var(--esp-md);
  border: 1px solid var(--color-texto);
  border-radius: 100vmax;
  font-family: var(--font-mono);
  font-size: var(--txt-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}
.btn:hover { background-color: var(--color-texto); color: var(--color-fondo); }

.btn--solido { background-color: var(--color-texto); color: var(--color-fondo); }
.btn--solido:hover { background-color: transparent; color: var(--color-texto); }

/* Acento de página: fondo de color + texto negro, nunca al revés */
.btn--acento {
  background-color: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--hoft-negro);
}
.btn--acento:hover { filter: brightness(0.93); background-color: var(--color-acento); color: var(--hoft-negro); }

.btn--bloque { width: 100%; }
@media (min-width: 480px) { .btn--bloque { width: auto; } }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding-block: var(--esp-lg) var(--esp-md);
}

.site-footer__grid {
  display: grid;
  gap: var(--esp-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-xs) var(--esp-md);
  justify-content: space-between;
  margin-top: var(--esp-lg);
  padding-top: var(--esp-sm);
}

/* --- Siluetas de esquina ---------------------------------------------------
   Recurso gráfico secundario del manual: cuatro siluetas muy pequeñas, una por
   esquina, cada una arrancando en un movimiento distinto. Solo se mueven con
   el scroll (lo gobierna assets/js/siluetas.js).
   -------------------------------------------------------------------------- */
.siluetas {
  position: fixed;
  inset: 0;
  z-index: var(--z-siluetas);
  pointer-events: none;
}

.silueta {
  position: absolute;
  width: var(--silueta-tam);
  aspect-ratio: 1;
}
.silueta--tl { top: calc(var(--alto-barra) + var(--silueta-margen)); left: var(--silueta-margen); }
.silueta--tr { top: calc(var(--alto-barra) + var(--silueta-margen)); right: var(--silueta-margen); }
.silueta--bl { bottom: var(--silueta-margen); left: var(--silueta-margen); }
.silueta--br { bottom: var(--silueta-margen); right: var(--silueta-margen); }

@media (min-width: 1024px) {
  .silueta--tl, .silueta--tr { top: var(--esp-sm); }
  /* Las siluetas bailan solo en la parte móvil de la web: la capa arranca donde
     acaba el menú, así ninguna se cuela sobre la columna fija. */
  .siluetas { left: var(--ancho-menu); }
}

/* --- Grano de película -----------------------------------------------------
   Capa fija sobre todo el documento, header incluido, con ruido generado por
   SVG (feTurbulence) incrustado: ni una petición extra ni un PNG que mantener.
   El navegador lo rasteriza a la resolución real de la pantalla, así que en
   retina el grano sale fino en vez de a cuadros.

   Activa en todas las páginas, artículos del blog incluidos.
   -------------------------------------------------------------------------- */
.grano {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: var(--grano-opacidad);
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'><filter%20id='g'><feTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='3'%20stitchTiles='stitch'/><feColorMatrix%20type='saturate'%20values='0'/></filter><rect%20width='200'%20height='200'%20filter='url%28%23g%29'/></svg>");
  background-size: 200px 200px;
}

/* --- Pegatinas -------------------------------------------------------------
   El visitante pega pegatinas donde quiera y se quedan ahí. La capa cubre todo
   el documento (no la ventana), así que al hacer scroll la pegatina se queda
   junto al contenido sobre el que se soltó, no flotando en la pantalla.

   La capa no captura el ratón; solo las pegatinas. Va por debajo del menú
   (--z-menu) y por encima de todo lo demás, textos incluidos.

   Como las siluetas, se queda a la derecha del menú: una pegatina soltada
   debajo de la columna fija quedaría tapada y ya no habría forma de agarrarla.
   -------------------------------------------------------------------------- */
.pegatinas-capa {
  position: absolute;
  inset: 0;
  z-index: var(--z-pegatinas);
  pointer-events: none;
  overflow: hidden;              /* una pegatina soltada al borde no genera scroll */
}

@media (min-width: 1024px) {
  .pegatinas-capa { left: var(--ancho-menu); }
}

.pegatina {
  position: absolute;
  width: var(--pegatina-tam);
  height: var(--pegatina-tam);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;            /* en táctil, arrastrar la pegatina no desplaza la página */
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
}
.pegatina img { width: 100%; height: 100%; display: block; pointer-events: none; }

.pegatina--arrastrando {
  cursor: grabbing;
  z-index: 1;                    /* la que se mueve, por encima de sus hermanas */
}

/* --- Mando de pegatinas (en el pie del menú) -------------------------------
   Los dos botones son pegatinas de verdad, no botones con etiqueta: uno pega y
   el otro, tachado, limpia. Sin marco ni sombra, para que se lean como parte
   del lenguaje de la marca y no como una barra de herramientas.
   -------------------------------------------------------------------------- */
.mando-pegatinas {
  display: flex;
  gap: var(--esp-xs);
  justify-content: center;
}

.btn-mando {
  --tam: 1.75rem;
  position: relative;
  width: var(--tam);
  height: var(--tam);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-comic),
              opacity var(--dur-rapida) var(--ease);
}
.btn-mando img { width: 100%; height: 100%; display: block; }

@media (hover: hover) {
  .btn-mando:hover:not(:disabled) { transform: rotate(-10deg) scale(1.15); }
}
.btn-mando:active:not(:disabled) { transform: scale(0.92); transition-duration: 60ms; }

/* Sin nada pegado no hay nada que limpiar: se apaga, pero no desaparece, para
   que la pareja de pegatinas no baile de sitio. */
.btn-mando:disabled { opacity: 0.28; cursor: default; }

/* Tachada: una barra de tinta en diagonal, como una pegatina anulada. */
.btn-mando--limpiar::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--hoft-negro);
  transform: translateY(-50%) rotate(-45deg);
}

/* --- Selector de idioma (en el pie del menú) -------------------------------
   Un único botón cuadrado con el idioma activo (ES/EN/CA); al abrirlo aparecen
   los otros dos, también cuadrados, en una lista flotante encima del botón.
   Es un <details> nativo: se abre y cierra sin una línea de JavaScript, así
   que el cambio de idioma nunca depende de que el JS haya cargado.
   -------------------------------------------------------------------------- */
.selector-idioma {
  position: relative;
  align-self: center;
}

.btn-idioma {
  --tam: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tam);
  height: var(--tam);
  border: 1px solid var(--hoft-negro);
  border-radius: var(--radio-0);
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

/* El triángulo por defecto del <summary> es de <details>, no del botón. */
.selector-idioma > summary.btn-idioma { list-style: none; }
.selector-idioma > summary.btn-idioma::-webkit-details-marker { display: none; }

.selector-idioma[open] > summary.btn-idioma,
.btn-idioma:hover {
  background-color: var(--hoft-negro);
  color: var(--color-fondo);
}

.selector-idioma__lista {
  position: absolute;
  bottom: 0;
  left: calc(100% + var(--esp-xs));
  display: flex;
  flex-direction: row;
  gap: var(--esp-xs);
}

.selector-idioma__lista a { text-decoration: none; }