/*
 * Sistema de diseño Brikia — traducción directa del Manual de Identidad.
 *
 * Los valores de --marino, --acero, --arena y --cielo son los cuatro colores
 * principales del manual, tal cual. No se han "ajustado para web", no hay
 * variantes inventadas y no se mezclan entre sí: el manual lo prohíbe
 * expresamente ("no cambiar o combinar los colores corporativos").
 *
 * Nota de contraste, que manda sobre la estética: la arena (#d9ae7b) sobre
 * blanco da 1.9:1, insuficiente para leer. Por eso la arena se usa SIEMPRE como
 * fondo con texto marino encima, o como texto sobre marino (7.3:1). Nunca como
 * texto sobre blanco.
 */

:root {
  /* 02.1 Colores principales */
  --marino: #123747;   /* R18  G55  B71  — el dominante */
  --acero:  #447387;   /* R68  G115 B135 */
  --arena:  #d9ae7b;   /* R217 G174 B123 — el acento */
  --cielo:  #95b8c7;   /* R149 G184 B199 */

  /* Neutros derivados por transparencia del marino, no colores nuevos */
  --papel:      #ffffff;
  --papel-suave:#f7f9fa;
  --tinta:      #123747;
  --tinta-media:#4a636f;
  --tinta-suave:#7b8f99;
  --linea:      #e3eaee;

  /* 03.1 Tipografía: Work Sans. Regular cuerpo, Medium subtítulos, Bold títulos */
  --tipo: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radio: 10px;
  --radio-s: 6px;
  --sombra: 0 1px 2px rgba(18,55,71,.06), 0 8px 24px rgba(18,55,71,.06);
  --sombra-alta: 0 12px 40px rgba(18,55,71,.14);
  --ancho: 1200px;
}

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

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

body {
  margin: 0;
  font-family: var(--tipo);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

/* ------------------------------------------------------------ logotipo ---
 * El logotipo es el archivo oficial (logo-brikia.svg), no se recompone en CSS.
 * Lo que hace este bloque es aplicar las dos reglas del manual que sí dependen
 * del sitio donde se coloca:
 *
 *   01.3 ÁREA DE AISLAMIENTO — el padding de `.logo` reserva aire alrededor.
 *        El manual dice que no hay máximo y que cuanto más espacio, mejor.
 *   01.3 TAMAÑO MÍNIMO — 25 mm. A 96 ppp son ~94 px de ancho; se pone 130 px
 *        de mínimo para ir sobrados y que el eslogan siga legible.
 *
 * La proporción no se toca nunca: solo se fija el alto y el ancho es
 * automático (`width:auto`), así que el logo no se puede estirar por accidente
 * al cambiar el tamaño del contenedor.
 */
.logo { display: inline-flex; padding: 10px 14px; }
.logo__img { height: 34px; width: auto; min-width: 130px; display: block; }
.pie .logo { padding-left: 0; }
.pie .logo__img { height: 38px; }

/* --------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 28px; height: 72px; }
.cabecera__nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.cabecera__nav a {
  font-size: .94rem; color: var(--tinta-media); font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s;
}
.cabecera__nav a:hover { color: var(--marino); }
.cabecera__nav a[aria-current="page"] { color: var(--marino); border-bottom-color: var(--arena); }
/* Mas especifico que `.btn`, que declara `display:inline-flex` mas abajo:
   con la misma especificidad ganaba la regla posterior y el boton de menu
   aparecia tambien en escritorio, al lado del logotipo. */
.cabecera .cabecera__menu { display: none; }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radio-s); border: 1px solid transparent;
  font-family: var(--tipo); font-size: .95rem; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
/* La arena como FONDO con texto marino: es donde el acento contrasta bien. */
.btn--acento { background: var(--arena); color: var(--marino); font-weight: 700; }
.btn--acento:hover { background: #cf9f68; }
.btn--marino { background: var(--marino); color: #fff; }
.btn--marino:hover { background: #1a4a5f; }
.btn--linea { background: transparent; color: var(--marino); border-color: var(--cielo); }
.btn--linea:hover { border-color: var(--acero); background: var(--papel-suave); }
.btn--claro { background: #fff; color: var(--marino); }
.btn--bloque { width: 100%; }

/* ------------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acero);
}
.pastilla {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 100px; font-size: .72rem; font-weight: 500;
  background: var(--papel-suave); color: var(--tinta-media);
  border: 1px solid var(--linea);
}
.pastilla--acento { background: var(--arena); color: var(--marino); border-color: transparent; font-weight: 700; }
.pastilla--marino { background: var(--marino); color: #fff; border-color: transparent; }

/* ------------------------------------------------------------------ hero */
.hero { background: var(--marino); color: #fff; padding: 84px 0 96px; position: relative; overflow: hidden; }
/* 02.3 El bloque de color arena como remate: es el gesto gráfico del manual. */
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--arena); }
.hero__titulo { font-size: clamp(2.1rem, 5.2vw, 3.6rem); max-width: 20ch; }
.hero__texto { margin-top: 18px; font-size: 1.08rem; color: rgba(255,255,255,.8); max-width: 56ch; }
.hero .etiqueta { color: var(--arena); }

/* --------------------------------------------------------------- buscador */
.buscador {
  background: #fff; border-radius: var(--radio); padding: 18px;
  box-shadow: var(--sombra-alta); display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr) auto; align-items: end;
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label { font-size: .72rem; font-weight: 600; color: var(--tinta-suave); letter-spacing: .06em; text-transform: uppercase; }
.campo select, .campo input {
  font-family: var(--tipo); font-size: .95rem; color: var(--tinta);
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio-s);
  background: #fff; width: 100%; min-width: 0;
}
.campo select:focus, .campo input:focus { outline: 2px solid var(--acero); outline-offset: -1px; }

/* --------------------------------------------------------------- secciones */
.seccion { padding: 72px 0; }
.seccion--suave { background: var(--papel-suave); }
.seccion--marino { background: var(--marino); color: #fff; }
.seccion--marino .seccion__titulo { color: #fff; }
.seccion--marino .etiqueta { color: var(--arena); }
.seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.seccion__titulo { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
.seccion__texto { color: var(--tinta-media); margin-top: 10px; max-width: 62ch; }
.seccion--marino .seccion__texto { color: rgba(255,255,255,.76); }

/* --------------------------------------------------------------- tarjetas */
.rejilla { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: var(--cielo); }
.tarjeta__foto { position: relative; aspect-ratio: 4/3; background: var(--papel-suave); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__vacia { display: grid; place-items: center; height: 100%; color: var(--tinta-suave); font-size: .8rem; }
.tarjeta__op { position: absolute; top: 12px; left: 12px; }
.tarjeta__cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta__precio { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; }
.tarjeta__nombre { font-weight: 500; font-size: 1rem; line-height: 1.35; }
.tarjeta__lugar { color: var(--tinta-media); font-size: .88rem; }
.tarjeta__datos { display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; color: var(--tinta-media); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea); }
.tarjeta__id { font-size: .7rem; letter-spacing: .1em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- ficha */
/* Los medios de la ficha: el reel vertical a la izquierda y el carrusel de
 * fotos a la derecha. Los dos con la MISMA altura, para que el bloque quede
 * cuadrado y no escalonado.
 *
 * El ancho del reel no se elige a ojo: es la altura por 9/16, la proporción
 * exacta del formato en el que se graban los recorridos. Así el vídeo entra
 * clavado y no hay que recortarlo ni deformarlo, que es lo que prohíbe el
 * sentido común antes que el manual.
 */
.ficha__medios {
  --alto-medios: 560px;
  display: grid; gap: 10px;
  border-radius: var(--radio); overflow: hidden;
}
.ficha__medios--con-reel {
  grid-template-columns: calc(var(--alto-medios) * 9 / 16) 1fr;
}
.ficha__medios > * { height: var(--alto-medios); }

/* --- reproductor vertical (reel) ---------------------------------------- */
.reel { position: relative; background: var(--marino); overflow: hidden; border-radius: var(--radio); }
/* El fondo desenfocado con la propia portada: si el vídeo no es exactamente
   9:16, las bandas dejan de parecer un error. */
.reel__fondo {
  position: absolute; inset: -24px;
  background-size: cover; background-position: center;
  filter: blur(28px) brightness(.5); transform: scale(1.1);
}
.reel__video {
  position: relative; width: 100%; height: 100%;
  object-fit: contain;      /* entero, nunca recortado */
}
.reel__sonido {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(18,55,71,.66); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-family: var(--tipo); font-size: .85rem; font-weight: 500;
  cursor: pointer; backdrop-filter: blur(6px); white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.reel__sonido:hover { background: var(--arena); color: var(--marino); border-color: transparent; }
.reel__sonido:focus-visible { outline: 3px solid var(--arena); outline-offset: 2px; }
/* En la landing el vídeo ocupa toda la cabecera, así que el botón se va a la
   esquina: en el centro taparía el titular. */
.reel__sonido--landing { top: 16px; right: 16px; bottom: auto; left: auto; transform: none; }

.carrusel--ficha { border-radius: var(--radio); overflow: hidden; }

.ficha__cuerpo { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; margin-top: 40px; }
.ficha__precio { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; }
.especificaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--linea); }
.especificaciones div { padding: 14px 0; border-bottom: 1px solid var(--linea); padding-right: 16px; }
.especificaciones dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.especificaciones dd { margin: 4px 0 0; font-weight: 500; }

.panel-contacto {
  position: sticky; top: 96px; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra);
}

/* ------------------------------------------------------------- catálogo */
.catalogo { display: grid; grid-template-columns: 264px 1fr; gap: 36px; align-items: start; }
.filtros { position: sticky; top: 96px; display: grid; gap: 16px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.filtros__par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filtros__abrir { display: none; }

/* -------------------------------------------------------------- landing */
.lp-hero { position: relative; min-height: 78vh; display: grid; align-items: end; background: var(--marino); color: #fff; }
.lp-hero__fondo { position: absolute; inset: 0; }
.lp-hero__fondo img, .lp-hero__fondo video { width: 100%; height: 100%; }
/* Una foto apaisada rellena la cabecera; un vídeo NO. Los recorridos de Brikia
   son verticales, y recortarlos a lo ancho dejaría a la vista una franja del
   centro. Se muestran enteros sobre un fondo difuminado. */
.lp-hero__fondo img { object-fit: cover; }
/* Por defecto el vídeo rellena, que es lo correcto para uno apaisado. La clase
   `es-vertical` la pone el JavaScript cuando el propio vídeo dice que es más
   alto que ancho; solo entonces se muestra entero sobre el fondo difuminado. */
.lp-hero__fondo video { object-fit: cover; position: relative; }
.lp-hero__fondo.es-vertical video { object-fit: contain; }
/* En escritorio el recorrido vertical se corre a la derecha: así el titular y
   la llamada a la acción, que van abajo a la izquierda, no se le montan encima.
   En móvil no hace falta — el vídeo ocupa casi todo el ancho. */
@media (min-width: 1025px) {
  .lp-hero__fondo.es-vertical video { object-position: 76% center; }
}
.lp-hero__difuso { display: none; }
.lp-hero__fondo.es-vertical .lp-hero__difuso {
  display: block; position: absolute; inset: -30px;
  background-size: cover; background-position: center;
  filter: blur(34px) brightness(.55); transform: scale(1.08);
}

/* --- carrusel de la cabecera ---------------------------------------------
 * Quien pasa las fotos es el NAVEGADOR: la pista se desplaza en horizontal y
 * cada lámina es un punto de anclaje. Eso da el gesto del dedo en el móvil sin
 * una línea de JavaScript, y hace que la cabecera siga siendo usable aunque el
 * script no llegue a cargarse. Las flechas son un añadido, no el mecanismo.
 */
.carrusel { position: relative; height: 100%; background: var(--papel-suave); }
.carrusel__pista {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 3px solid var(--arena); outline-offset: -3px; }
.carrusel__lamina { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; }
.carrusel__lamina img { width: 100%; height: 100%; object-fit: cover; }

/* Los mandos nacen ocultos en el HTML y los enciende el JavaScript: si no hay
 * JavaScript no se pinta un botón que no responde. Van agrupados arriba a la
 * derecha, fuera del camino del titular y de la llamada a la acción, que es
 * donde tiene que caer la vista y el pulgar.
 */
.carrusel__mandos {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 100px;
  background: rgba(18,55,71,.5); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.carrusel__flecha {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; padding-bottom: 3px;
  background: transparent; color: #fff; border: none;
  cursor: pointer; transition: background .15s;
}
.carrusel__flecha:hover { background: rgba(255,255,255,.16); }
.carrusel__flecha:focus-visible { outline: 3px solid var(--arena); outline-offset: -2px; }
.carrusel__contador {
  color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums;
  padding: 0 6px; min-width: 48px; text-align: center; user-select: none;
}

/* 02.2: sobre fotografía, capa de opacidad para que la marca y el texto lean. */
.lp-hero__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,55,71,.45) 0%, rgba(18,55,71,.72) 55%, rgba(18,55,71,.94) 100%); }
/* `padding-block`, no `padding` a secas: el atajo pondria a cero el padding
 * lateral que trae `.contenedor`, y en un movil el titular quedaba pegado al
 * borde izquierdo de la pantalla. Se vio en la captura de 390 px. */
.lp-hero__contenido { position: relative; padding-block: 120px 64px; }
.lp-hero__titulo { font-size: clamp(2.2rem, 6vw, 4rem); max-width: 18ch; }
.beneficios { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.beneficio { padding: 24px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); }
.beneficio__numero { font-size: 2.4rem; font-weight: 700; color: var(--arena); line-height: 1; }
.seccion--marino .beneficio { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

/* ------------------------------------------------------------------- pie */
.pie { background: var(--marino); color: rgba(255,255,255,.72); padding: 56px 0 0; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.pie h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--arena); margin-bottom: 14px; }
.pie a:hover { color: #fff; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
/* La barra arena del pie es la firma gráfica del manual. */
.pie__barra { background: var(--arena); color: var(--marino); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 14px 0; font-weight: 500; }

/* ----------------------------------------------------------- utilidades */
.cta-fija { display: none; }
.vacio { text-align: center; padding: 72px 20px; }
.migas { font-size: .84rem; color: var(--tinta-suave); padding: 20px 0; }
.migas a:hover { color: var(--marino); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ responsive
 * La mayoría del tráfico llega de Meta e Instagram, es decir móvil. Aquí es
 * donde el CTA de WhatsApp pasa a ser una barra fija: en un móvil el botón de
 * contacto no puede estar sólo al final de la página.
 */
@media (max-width: 1024px) {
  .catalogo { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .ficha__cuerpo { grid-template-columns: 1fr; }
  /* Apilados: primero el recorrido, despues las fotos. En una pantalla
     estrecha ponerlos lado a lado deja el reel del ancho de un dedo. */
  .ficha__medios--con-reel { grid-template-columns: 1fr; }
  .ficha__medios { --alto-medios: auto; }
  .ficha__medios > * { height: auto; }
  .reel { aspect-ratio: 9 / 16; max-height: 72vh; margin-inline: auto; width: 100%; }
  .carrusel--ficha { aspect-ratio: 4 / 3; }
  .panel-contacto { position: static; }
  .buscador { grid-template-columns: 1fr 1fr; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .cabecera__nav { display: none; }
  .cabecera .cabecera__menu { display: inline-flex; margin-left: auto; }
  .cabecera__nav--abierto {
    display: flex; position: absolute; inset: 72px 0 auto; flex-direction: column;
    background: #fff; padding: 18px 20px 24px; gap: 4px; border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
  }
  .cabecera__nav--abierto a { padding: 10px 0; border-bottom: none; }
  .hero { padding: 56px 0 64px; }
  .seccion { padding: 48px 0; }
  .buscador { grid-template-columns: 1fr; }
  .carrusel__mandos, .reel__sonido--landing { top: 12px; right: 12px; }
  .carrusel__flecha { width: 34px; height: 34px; }
  .reel__sonido { padding: 8px 13px; font-size: .8rem; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 28px; }
  .cta-fija {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
  }
  body.con-cta-fija { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto; }
  .carrusel__pista { scroll-behavior: auto; }
}