/* Pacific Craft — CSS de secciones que NO puede vivir en una clase global de Bricks.
   Motivos: (a) son reglas de <span> EN LINEA dentro de elementos de texto de Bricks, y a un
   span en linea no se le puede enganchar una clase global desde el constructor; (b) son
   propiedades que el conversor no mapea a un control nativo de Bricks (transform).
   Se carga DESPUES del CSS de Bricks (prioridad 100 en el mu-plugin) para ganar siempre.
   Cada bloque va escopado bajo la raiz de su seccion. */

/* --- s01 hero: cifras de las stats --- */
.hero-stat__num--tight { letter-spacing: clamp(-0.9px, -0.222px - 0.0356vw, -0.37px); }
.hero-stat__num--bold  { font-weight: 700; }

/* --- s04/s05/s06 gamas: el titular mezcla dos pesos de Lexend en la misma linea
       ("Gama" Light 300 + "Open" Medium 500), asi que van como spans en linea. --- */
.gama__title .gama-t-light  { font-weight: 300; }
.gama__title .gama-t-strong { font-weight: 500; }

/* --- s04/s05/s06 gamas: chevrons y punta de flecha (cuadrado girado 45 grados).
       El conversor no emite transform como control nativo de Bricks. --- */
.gama__chev--next     { transform: rotate(45deg); }
.gama__chev--prev     { transform: rotate(225deg); }
.gama__all-arrow-head { transform: rotate(45deg); }

/* El carrusel de tarjetas de gama no ensena barra de scroll (en movil se arrastra). */
.gama__cards, .exp__cards { scrollbar-width: none; }
.gama__cards::-webkit-scrollbar, .exp__cards::-webkit-scrollbar { display: none; }

/* --- s08 testimonios: la firma mezcla 3 estilos EN LA MISMA LINEA (ciudad en teal
       oscuro, separador en negro, cargo en un navy propio #182f51 que no esta en la
       paleta), asi que van como spans en linea.
   REFACTOR FLUIDO 2026-08-07: estos spans llevaban tamano FIJO y dos media queries de
   reescalado (20/16/12). Son los unicos escalones que quedaban fuera de las clases de
   Bricks, y saltaban a 991 y a 478 mientras el resto de la tarjeta ya escalaba solo.
   Ahora van en clamp() con los mismos extremos Figma que el resto: 1920 y 402. */
.exp-card__author .exp-a-name { font-weight: 500; font-size: clamp(12px, 9.8738px + 0.5277vw, 20px); line-height: clamp(15px, 12.3441px + 0.6594vw, 25px); letter-spacing: 0.02em; }
.exp-card__author .exp-a-city { font-weight: 400; font-size: clamp(9px, 7.4034px + 0.3959vw, 15px); line-height: clamp(13px, 8.7552px + 1.0547vw, 29px); letter-spacing: 0.02em; color: #61848c; }
.exp-card__author .exp-a-sep  { font-weight: 400; font-size: clamp(9px, 7.4034px + 0.3959vw, 15px); line-height: clamp(13px, 8.7552px + 1.0547vw, 29px); letter-spacing: 0.02em; color: #000000; }
.exp-card__author .exp-a-rest { font-weight: 300; font-size: clamp(9px, 7.4034px + 0.3959vw, 15px); line-height: clamp(11px, 8.3441px + 0.6594vw, 21px); letter-spacing: 0.02em; color: #182f51; }

/* --- s01 hero: ENCUADRE de la foto de fondo -------------------------------------------
   🔴 Va aqui y no en una clase de Bricks porque `object-position` NO tiene control nativo
   en Bricks: el conversor la descarta en silencio.

   ANCLADA ABAJO (2026-08-09, peticion de Alvaro). `object-fit:cover` recorta lo que sobra
   por arriba y por abajo a partes iguales, y la barca esta en la parte INFERIOR de la
   foto. Desde que el hero pasa a medir lo que la ventana (100svh) el recorte es bastante
   mayor que antes, y centrado se comia justo la barca: una foto de mar sin barca no dice
   nada. Anclando abajo, lo que se pierde es cielo. */
.hero__bg { object-position: center bottom; }

/* --- s01 hero: legibilidad de la ENTRADILLA sobre la barca ---------------------------
   Pere (13-ago), literal: "el text sota el titular, s'enganxa per sobre la barca i no es
   llegeix be. Pots separar-ho un pelet, please?".

   Lo pedido era SEPARARLO, y no se puede: se escaneo el hero entero buscando una franja
   donde la entradilla se leyera, y NO EXISTE. En todas las posiciones probadas (de y=90
   al pie) el peor caso se queda entre 1,00 y 2,92:1, porque la entradilla es muy ancha y
   siempre cruza la estela blanca. Moverla la cambia de sitio, no la hace legible.

   Que tan grave es, medido sobre los pixeles REALES de letra (mascara sacada comparando
   la pagina con el texto y sin el), porcentaje de letra sobre fondo peor de 3:1:
     1366x650 11,6% · 1280x620 8,4% · 1920x960 2,6% · 1440x760 3,1%
   El TITULAR en cambio esta bien (0,1-2,2% bajo su umbral de 3:1, que es el que le toca
   por tamaño): no se toca.

   Por que sombra y no velo: se probo un velo. Resolvia el contraste (5,3-9,2:1) pero
   dejaba el hero al 62,26% de diferencia contra el Figma, frente al 0,78% de linea base.
   Oscurecer medio hero para arreglar la entradilla es cambiarle la foto al diseñador. La
   sombra actua solo en el contorno de la letra y deja la imagen como esta.
   Es una desviacion de lo que pidio el cliente y va NOMBRADA en el correo. */
/* 🔴 SOMBRA RETIRADA EL 2026-09-02 a peticion del equipo de arte del cliente (correo de
   Pere tras la reunion del 2-sep: "volver a la version del SUBTITULAR DE LA HOME sin la
   sombrita (...) podemos probarlo para que lo vean y si da problemas, volveremos a
   corregirlo?"). Se deja escrita para poder devolverla en diez segundos: basta con quitar
   los delimitadores de comentario de las cuatro lineas de abajo.
   Medido HOY sobre la foto nueva del hero (la que se re-extrajo el 31-ago), con el texto
   oculto para leer el fondo limpio: el blanco sobre ese fondo da un peor caso de 1,57 a
   1,88:1 segun el ancho, y entre el 15% y el 34% de la caja del texto queda por debajo de
   3:1. El minimo para texto de este tamano es 4,5:1. Va DICHO en el correo, con las cifras.
.hero__lead.hero__lead {
  text-shadow:
    0 1px 3px rgba(9, 24, 43, 0.92),
    0 0 10px rgba(9, 24, 43, 0.78),
    0 0 24px rgba(9, 24, 43, 0.55);
}
*/

/* --- s01 hero en movil: ENCUADRE de la foto de fondo ---------------------------------
   A 402px de ancho, `object-fit:cover` sobre una foto de 1920x1170 recorta 1055px a lo
   ancho y, centrado, deja la embarcacion fuera de cuadro. El diseno movil la mantiene
   dentro. El 30% NO es a ojo: se ha calculado deslizando la banda de foto sin texto de
   refs/crops/s01-hero-402.png sobre la foto reescalada y quedandose con el desplazamiento
   de minimo error (314px de 1055 = 29,8%).
   Va aqui y no en una clase de Bricks porque `object-position` no tiene control nativo. */
@media (max-width: 478px) {
  .hero__bg { object-position: 30% center; }
}

/* --- s09 concesionarios: APILADO de los dos paneles en tablet y movil ----------------
   🔴 Esto NO puede vivir en la clase de Bricks. `_direction:<breakpoint>` funciona con
   `row` pero Bricks DESCARTA EN SILENCIO el valor `column` en un breakpoint responsive
   (en el breakpoint base si lo emite). Comprobado el 2026-08-03 sobre el CSS servido:
     .dealer__filters -> `flex-direction: row` emitido en los dos breakpoints  ✅
     .dealer__cols    -> `column` pedido, NUNCA emitido, y `ok:true`            ❌
   Sin esto los dos paneles se quedan en fila al 100% cada uno y el segundo se sale de la
   pantalla por la derecha (medido: la seccion daba 578px de alto en vez de 844).

   La clase va duplicada a proposito: Bricks emite `.dealer__cols.brxe-div` (dos clases) y
   una regla de una sola clase pierde por especificidad, no por orden. */
@media (max-width: 991px) {
  .dealer__cols.dealer__cols.brxe-div { flex-direction: column; }
}

/* --- s09: salto de linea del titular, solo en movil ----------------------------------
   El <br> vive DENTRO del contenido del heading, asi que no es un elemento de Bricks y el
   conversor no le crea clase global (comprobado: no se emite ni una regla). Por eso la
   regla va aqui. Sin ella el salto se aplica tambien en escritorio y la seccion crece una
   linea entera (medido: 780px en vez de 695). */
.dealer__title-br { display: none; }
/* --- s02 intro: el titulo movil del diseno va en DOS lineas ("El mar / nos inspira");
   con la tipografia fluida cabe en una a 402px, asi que el salto se fuerza solo en movil
   (mismo patron y motivo que .dealer__title-br). */
.intro__title-br { display: none; }
@media (max-width: 991px) {
  .dealer__title-br { display: inline; }
}
@media (max-width: 478px) {
  .intro__title-br { display: inline; }
}

/* --- s10 formulario: APILADO de foto y panel en tablet y movil ----------------------
   Mismo motivo que en la s09: `_direction:<breakpoint>: column` no lo emite Bricks
   (gotcha 11 de web-bricks/references/03-construccion.md). Clase duplicada para ganar en
   especificidad a `.form__cols.brxe-div`, que es lo que emite Bricks. */
@media (max-width: 991px) {
  /* 🔴 Triple clase y SIN .brxe-*: desde 2026-08-07 form__cols es un elemento
     container, no un div, asi que `.form__cols.brxe-div` ya no casa con nada. */
  .form__cols.form__cols.form__cols { flex-direction: column; }
}

/* --- s12 footer: APILADO de las columnas en tablet y movil ---------------------------
   Mismo gotcha 11 que en la s09 y la s10: Bricks no emite `column` en un breakpoint. */
@media (max-width: 991px) {
  .cta__cols.cta__cols.brxe-div { flex-direction: column; }
}

/* --- s12 footer: DISPOSICION movil (<=478, crop 402) -------------------------------
   El diseno movil del footer va CENTRADO (titulo, columnas, redes, logo) y reparte los
   legales a lo ancho; la barra decorativa de la col 2 (absoluta, top:-77) no aparece en
   el diseno movil y al apilar se colaba sobre el texto de la col 1: se oculta.
   Selectores agrupados + media => verbatim aqui (regla D5). Clase duplicada para ganar
   a la emision .clase.brxe-* de Bricks. */
@media (max-width: 478px) {
  .cta__title.cta__title { text-align: center; }
  .cta__cols.cta__cols.brxe-div { align-items: center; }
  .cta__col.cta__col.brxe-div { align-items: center; }
  .cta__col-title.cta__col-title, .cta__sub.cta__sub, .cta__addr.cta__addr,
  .cta__note.cta__note, .cta__tel-text.cta__tel-text { text-align: center; margin-left: 0; }
  .cta__rule.cta__rule { margin-left: 0; }
  .cta__bar.cta__bar { display: none; }
  .cta__legal.cta__legal.brxe-div { width: 100%; justify-content: space-between; column-gap: 0; }
}

/* --- s00 cabecera: estado FIJO (el "MENU FIJO" del diseno) -------------------------
   Figma rBHwLmypJcvruXDtMWdF1Z, nodo 946-298, leido y verificado el 2026-08-08.

   🔴 REESCRITO el 2026-08-08 sobre el STICKY NATIVO de Bricks, tras probar la primera
   version con Alvaro. Lo que fallaba: la primera version metia y sacaba la barra
   DESLIZANDOLA (position:fixed + translateY). Al volver arriba del todo, la barra blanca
   se iba hacia arriba durante 280ms y en ese rato NO habia cabecera en pantalla; al
   terminar aparecia de golpe la transparente. Eso es el "unfold" que se veia. Y de paso,
   mientras subia, se veia una barra blanca volando sobre la foto del hero.
   La cabecera no tiene que ENTRAR ni SALIR: siempre esta. Lo unico que cambia es el
   color de fondo, el del texto y cual de los dos logos se ve.

   Ahora lo fija Bricks (ajuste `headerSticky` de la plantilla 155 -> #brx-header.brx-sticky
   con position:fixed), y su propio JS pone la clase `scrolling` en cuanto scrollY > 0.
   El tema ya trae `transition: background-color .2s` y pasa `transition: inherit` a sus
   hijos directos, asi que el cambio de color va suave sin que pongamos nada.
   Nosotros solo escribimos el ASPECTO de los dos estados. Cero JS propio.

   Clase de estado repetida 3 veces para ganar a la emision .clase.brxe-* de Bricks sin
   usar !important (regla 6).

   🔴 Lo que el diseno NO dice, y por que se decidio asi:
   · El frame mide 1847, no 1920. NO es un cambio de escala: el ritmo del menu coincide
     EXACTO con la cabecera ya construida (huecos 57 / 67 / 57, boton 144x39 r25, texto
     18/16 ls 0,6). Es un recorte, y de un recorte no se pueden recuperar los margenes de
     pagina. Por eso el padding lateral NO se toca: si cambiara entre los dos estados, el
     menu daria un salto horizontal, que es un defecto visible. La unica lectura que el
     recorte deja abierta es de 12px, y va al hueco logo-menu.
   · El movil no esta disenado. Sus extremos salen de aplicar a los valores de escritorio
     la MISMA proporcion que ya usa la cabecera (barra 0,775 · logo 0,695), no de un
     valor inventado: barra 135->105, logo 228x88 -> 158x61.

   El "ES" va en Stack Sans Text como el resto, NO en el Trebuchet MS que trae el diseno:
   eso es un descuido mas de los que ya estan en el issue 9fee61e0, a la espera de Xavier. */

/* La barra fija es 6px mas alta que la de sobre el hero (135 contra 129), y ademas TODO
   su contenido va 8,5px mas arriba que si estuviera centrado: en el diseno el logo queda
   a -8,5 del eje y el boton a +9, cuando construido salian +0 y +16,5. Es UN solo
   desplazamiento del grupo, no dos rarezas (la relacion interna logo<->menu se conserva:
   17,5 en el diseno contra 16,5 construido).
   El eje vertical SI es fiable aunque el frame este recortado: la barra entra entera de
   arriba abajo. El recorte solo afecta al horizontal.
   Se sube con padding-bottom porque con align-items:center el relleno inferior desplaza
   el contenido la MITAD de su valor: 17 -> 8,5 justos.

   🔴 Solo por encima de 478: en movil la cabecera se APILA (hamburguesa arriba a la
   derecha, logo centrado debajo, padding-top 68) y su alto es AUTOMATICO, 127px reales.
   Imponerle los 105 del clamp le quitaba 22px y le aplastaba el contenido. El movil del
   menu fijo no esta disenado, asi que alli el estado fijo solo cambia color y logo y
   respeta la disposicion apilada que ya estaba cerrada. */
/* 🔴 PUNTO 5 de Pere (2026-08-31): "header que arribi fins al final (no marges a
   sticky header)". El fondo blanco estaba en .site-header__inner, que lleva
   max-width:1920px, asi que POR ENCIMA de 1920 la barra dejaba margen a los dos lados.
   Medido antes del cambio a 2560: la barra empezaba en x=320 y media 1920, o sea
   320px de hueco a cada lado. Por debajo de 1920 no se notaba, y por eso no habia
   saltado antes (la pantalla de Alvaro es de 1440).
   El fondo pasa al contenedor de ancho completo (.site-header, que es absolute con
   left:0/right:0 dentro de #brx-header). El CONTENIDO sigue tope a 1920 y centrado:
   solo se extiende el color. */
#brx-header.scrolling .site-header {
  background-color: #ffffff;
}
@media (min-width: 479px) {
  #brx-header.scrolling .site-header .site-header__inner {
    height: clamp(105px, 97.0477px + 1.9769vw, 135px);
    padding-bottom: clamp(13px, 11.9331px + 0.2642vw, 17px);
  }
}

/* El grupo del menu va 1px mas abajo que el logo respecto a como estan sobre el hero: en
   el diseno la distancia logo<->boton es 17,5 y sobre el hero 16,5. Con align-items:center
   el margen superior desplaza la MITAD, asi que +2 de margen = +1 de posicion.
   (Debajo de 991 el menu no se ve: su extremo movil es proporcional, no un valor medido.) */
#brx-header.scrolling .site-header .site-nav.site-nav {
  margin-top: clamp(25px, 22.3441px + 0.6594vw, 35px);
}

/* Cambio de logo. Los dos <img> estan en el HTML desde el principio y solo se alterna
   cual se ve: cambiar el `src` al hacer scroll (que es lo que hace el swap nativo de
   Bricks con .bricks-site-logo) parpadea la primera vez, porque la imagen todavia no
   esta en cache. Por eso no usamos ese swap nativo aunque exista. */
#brx-header.scrolling .site-header .site-header__logo-img { display: none; }
#brx-header.scrolling .site-header .site-header__logo-img--dark { display: block; }

/* Colores del estado: todo lo que sobre el hero va en blanco pasa a #61848c.
   El color se transiciona (lo hereda del tema); el cambio de logo no, porque display
   no es animable: por eso el resto acompana en 200ms y el logo salta, que a esa
   velocidad no se percibe como dos tiempos. */
#brx-header.scrolling .site-header .site-nav__link,
#brx-header.scrolling .site-header .site-lang { color: #61848c; }
#brx-header.scrolling .site-header .site-lang__caret { border-top-color: #61848c; }
#brx-header.scrolling .site-header .btn-pill { color: #61848c; border-color: #61848c; }
#brx-header.scrolling .site-header .site-burger__bar { background-color: #61848c; }

/* Que el color acompane tambien en los elementos que no son hijos DIRECTOS de
   #brx-header (el tema solo pasa `transition: inherit` a los directos). */
.site-header .site-nav__link, .site-header .site-lang, .site-header .btn-pill,
.site-header .site-lang__caret, .site-header .site-burger__bar,
.site-header .site-header__inner, .site-header {
  transition: background-color .2s, color .2s, border-color .2s;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav__link, .site-header .site-lang, .site-header .btn-pill,
  .site-header .site-lang__caret, .site-header .site-burger__bar,
  .site-header .site-header__inner, .site-header { transition: none; }
}

/* --- s08 experiencias: ESPEJO de la tarjeta del medio ---------------------------------
   La tarjeta de en medio lleva el avatar a la IZQUIERDA y las estrellas a la DERECHA (en
   las otras dos es al reves). Se hace invirtiendo la fila, NO cambiando el orden del HTML:
   asi un lector de pantalla oye siempre lo mismo en las tres.

   🔴 Va aqui porque es un selector DESCENDIENTE y Bricks solo sabe de clases sueltas: el
   conversor lo descarta en silencio. Clase repetida para ganar a la emision .clase.brxe-*
   sin usar !important (regla 6). */
.exp-card--b.exp-card--b.exp-card--b .exp-card__head { flex-direction: row-reverse; }

/* --- cabecera OSCURA en las interiores de fondo claro (hub, gama, ficha) --------------
   Tercer estado de la cabecera (los otros dos: blanco sobre foto, y el menu fijo). El
   fondo de estas portadas es claro (#fdfdfd), asi que el texto del menu va oscuro y el
   logo cambia al oscuro. Medido en el arbol de Figma (2026-08-11): items del menu en
   #24231D (regular 400), item activo + "ES" + borde del boton en #3D372F. La marca, el
   contacto y el 404 llevan foto en la portada y MANTIENEN el estado blanco.
   Al hacer scroll manda .scrolling (menu fijo blanco), identico en todas las paginas. */
body.page-id-173 #brx-header:not(.scrolling) .site-nav__link,
body.page-id-174 #brx-header:not(.scrolling) .site-nav__link,
body.tax-gama #brx-header:not(.scrolling) .site-nav__link,
body.single-embarcacion #brx-header:not(.scrolling) .site-nav__link,
body.error404 #brx-header:not(.scrolling) .site-nav__link { color: #24231d; }
body.page-id-173 #brx-header:not(.scrolling) .site-lang,
body.page-id-174 #brx-header:not(.scrolling) .site-lang,
body.tax-gama #brx-header:not(.scrolling) .site-lang,
body.single-embarcacion #brx-header:not(.scrolling) .site-lang,
body.error404 #brx-header:not(.scrolling) .site-lang { color: #3d372f; }
body.page-id-173 #brx-header:not(.scrolling) .site-lang__caret,
body.page-id-174 #brx-header:not(.scrolling) .site-lang__caret,
body.tax-gama #brx-header:not(.scrolling) .site-lang__caret,
body.single-embarcacion #brx-header:not(.scrolling) .site-lang__caret,
body.error404 #brx-header:not(.scrolling) .site-lang__caret { border-top-color: #3d372f; }
body.page-id-173 #brx-header:not(.scrolling) .btn-pill,
body.page-id-174 #brx-header:not(.scrolling) .btn-pill,
body.tax-gama #brx-header:not(.scrolling) .btn-pill,
body.single-embarcacion #brx-header:not(.scrolling) .btn-pill,
body.error404 #brx-header:not(.scrolling) .btn-pill { color: #3d372f; border-color: #3d372f; }
body.page-id-173 #brx-header:not(.scrolling) .site-burger__bar,
body.page-id-174 #brx-header:not(.scrolling) .site-burger__bar,
body.tax-gama #brx-header:not(.scrolling) .site-burger__bar,
body.single-embarcacion #brx-header:not(.scrolling) .site-burger__bar,
body.error404 #brx-header:not(.scrolling) .site-burger__bar { background-color: #24231d; }
body.page-id-173 #brx-header:not(.scrolling) .site-header__logo-img,
body.page-id-174 #brx-header:not(.scrolling) .site-header__logo-img,
body.tax-gama #brx-header:not(.scrolling) .site-header__logo-img,
body.single-embarcacion #brx-header:not(.scrolling) .site-header__logo-img,
body.error404 #brx-header:not(.scrolling) .site-header__logo-img { display: none; }
body.page-id-173 #brx-header:not(.scrolling) .site-header__logo-img--dark,
body.page-id-174 #brx-header:not(.scrolling) .site-header__logo-img--dark,
body.tax-gama #brx-header:not(.scrolling) .site-header__logo-img--dark,
body.single-embarcacion #brx-header:not(.scrolling) .site-header__logo-img--dark,
body.error404 #brx-header:not(.scrolling) .site-header__logo-img--dark { display: block; }

/* --- hub h01: apilado <=991 (la foto pasa arriba) -------------------------------------
   🔴 Va aqui porque Bricks descarta _direction:<breakpoint> en silencio (regla dura 6).
   column-reverse: la foto es el 2o hijo del DOM y en el regimen apilado se ve PRIMERO,
   como en el diseno movil. Clase repetida para especificidad sin !important. */
/* La altura de la foto del hero: el conversor la pierde al crear la clase y el _height
   de Bricks NO llega al elemento image (medido: rendia a su aspecto natural, 293px en
   vez de 341 a 402). Verbatim con la misma recta que el resto de la seccion. */
.hub-hero__img.hub-hero__img.hub-hero__img { height: clamp(341px, 261.5457px + 19.7635vw, 641px); }
/* 🔴 Y lo mismo para el VIDEO que sustituye a esa foto desde el 31-ago. El alto es el del
   Figma nuevo (551 a 1920, contra los 641 de la foto anterior). El extremo pequeño es
   TAMBIEN del diseño: el frame movil (RESPONSIVE HUB, exportado el 1-sep) sigue dando 341
   de alto, porque no lo han actualizado. Anoche se puso 293 escalando en proporcion, sin
   tener el PNG delante; con el PNG, 341. Sin esta regla el flex-basis:0 del regimen fila le gobierna el ALTO en columna
   y el video se queda en 0 px, que es exactamente lo que paso al montarlo. */
.hub-hero__video.hub-hero__video.hub-hero__video { height: clamp(341px, 285.39px + 13.834vw, 551px); }
@media (max-width: 991px) {
  .hub-hero__wrap.hub-hero__wrap.hub-hero__wrap { flex-direction: column-reverse; }
  /* A sangre: compensa el padding-left 14 del wrap. El width va aqui y no en un
     _width de Bricks porque Bricks NO acepta calc() ahi (se queda en 100%).
     🔴 flex a 0 0 auto: el flex-basis:0 + grow:1 que dan el ANCHO de la foto en el
     regimen fila pasan a gobernar su ALTURA en columna y anulan el height (medido:
     la foto rendia a su aspecto natural, 293px en vez de 341). */
  .hub-hero__img.hub-hero__img.hub-hero__img,
  .hub-hero__video.hub-hero__video.hub-hero__video { width: calc(100% + 14px); flex: 0 0 auto; }
}

/* --- hub h02: alternancia de las bandas de gama ---------------------------------------
   Las bandas salen de un BUCLE sobre la taxonomia `gama`: mismas clases las tres. El
   diseno alterna el lado del texto (1a izquierda, 2a derecha, 3a izquierda): en la
   banda PAR la COLUMNA entera se va a la derecha, pero su contenido sigue alineado a
   la izquierda (medido: texto en x=1176, no pegado al borde de 1829). Selector
   compuesto -> verbatim aqui. */
.hub-banda:nth-child(even) .hub-banda__col.hub-banda__col { margin-left: auto; }

/* --- hub h02: el "Gama" pequeño del titular de banda ----------------------------------
   El titular mezcla dos cuerpos (50px la palabra "Gama", 110px el nombre de la gama:
   characterStyleOverrides del arbol de Figma). El BLOQUE lleva la metrica pequeña y el
   span la grande: al reves, el strut del bloque inflaria la linea 1 a 95px. El span
   vive DENTRO del ajuste text del heading, no es un elemento: su clase global nunca se
   emite (mismo caso que .gama-t-light de la home, resuelto igual: aqui, verbatim). */
.hub-banda__title .hub-banda__t-big {
  font-size: clamp(55.9px, 41.5655px + 3.5646vw, 110px);
  line-height: clamp(48.3px, 35.9252px + 3.0771vw, 95px);
}

/* --- gama g01: apilado <=991 (texto primero, foto despues: orden NORMAL del DOM) ----- */
@media (max-width: 991px) {
  .ghero__wrap.ghero__wrap.ghero__wrap { flex-direction: column; }
  .ghero__img.ghero__img.ghero__img { width: calc(100% + 24px); flex: 0 0 auto; }
}
/* altura de la foto de portada de gama (G13: height de image ni por PATCH) */
.ghero__img.ghero__img.ghero__img { height: clamp(312px, 224.6389px + 21.7326vw, 642px); }

/* --- gama g02: separadores entre ventajas (items de bucle: nth-child) ---------------- */
.ventaja:nth-child(n+2) .ventaja:nth-child(n+2) { border-left: 0; }
.ventajas__grid .ventaja + .ventaja { border-left: 5px solid #eff1f7; }
@media (max-width: 991px) {
  .ventajas__grid.ventajas__grid.ventajas__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .ventajas__grid .ventaja + .ventaja { border-left: 0; }
}

/* --- gama g03: radios ORGANICOS por tarjeta -----------------------------------------
   El diseno da a cada tarjeta radios asimetricos DISTINTOS (marca de la casa, como la
   foto del formulario de la home). La tarjeta sale de un bucle (misma clase las 6):
   los radios van por posicion, verbatim. Orden Figma: TL TR BR BL. */
.modelos__grid .g-card { overflow: hidden; }
/* Los radios SUPERIORES organicos van en la TARJETA (que recorta con overflow) y la
   foto queda cuadrada por arriba. Antes el radio superior iba partido (tarjeta blanca
   a 20px, foto a 90-115px) y entre las dos curvas asomaba una cuna BLANCA sobre el
   fondo lavanda (aviso de Pere 18-ago, issue 57e89233): en el diseno, por encima de
   la curva de la foto solo hay seccion. Los radios INFERIORES de la foto se quedan
   en __media (la foto curva sobre el cuerpo blanco, eso si es del diseno). */
.modelos__grid .g-card:nth-child(3n+1) { border-radius: 14px 115px 70px 20px; }
.modelos__grid .g-card:nth-child(3n+2) { border-radius: 90px 90px 70px 20px; }
/* La 3a de cada fila, SIEMPRE igual (24-ago... corregido 25-ago): el Figma de la gama
   solo dibuja UNA fila y su tercera mide TL~100/TR~28; el 115px que llevaba la 6a era
   una extrapolacion sin respaldo del diseno y ademas se comia el simbolo "+"
   (observacion de Alvaro con la gama Open delante). */
.modelos__grid .g-card:nth-child(3n)   { border-radius: 100px 28px 70px 20px; }
.modelos__grid .g-card:nth-child(3n+1) .g-card__media { border-radius: 0 0 0 81px; }
.modelos__grid .g-card:nth-child(3n+2) .g-card__media { border-radius: 0; }
.modelos__grid .g-card:nth-child(3n)   .g-card__media { border-radius: 0 0 85px 0; }

/* --- ficha p01: foto de cabecera (G13/G17: height de image + flex al apilar) -------- */
.phero__img.phero__img.phero__img { height: clamp(311px, 230.088px + 20.1416vw, 617px); }
@media (max-width: 991px) {
  .phero__wrap.phero__wrap.phero__wrap { flex-direction: column-reverse; }
  .phero__img.phero__img.phero__img { width: calc(100% + 24px); flex: 0 0 auto; }
  .phero__title.phero__title { margin-top: 21px; }
}

/* --- ficha p02: colocacion y radios del mosaico (items de bucle, por posicion) ------- */
.pgal__grid .pgal__item:nth-child(1) { grid-column: 1 / 4; height: clamp(260px, 168.6px + 22.75vw, 606px); }
.pgal__grid .pgal__item:nth-child(2) { grid-column: 5 / 6; height: clamp(260px, 168.6px + 22.75vw, 606px); }
.pgal__grid .pgal__item:nth-child(3) { grid-column: 1 / 2; height: clamp(232px, 150.4px + 20.31vw, 541px); }
.pgal__grid .pgal__item:nth-child(4) { grid-column: 3 / 6; height: clamp(232px, 150.4px + 20.31vw, 541px); }
.pgal__grid .pgal__item:nth-child(1) { border-radius: 45px 0 0 0; }
.pgal__grid .pgal__item:nth-child(2) { border-radius: 0 14px 0 0; }
.pgal__grid .pgal__item:nth-child(3) { border-radius: 0 0 0 14px; }
.pgal__grid .pgal__item:nth-child(4) { border-radius: 0 0 141px 0; }
@media (max-width: 767px) {
  /* en movil el mosaico pasa a una columna */
  .pgal__grid .pgal__item { grid-column: 1 / 6 !important; }
}

/* --- ficha p03: apilado de las dos columnas de specs --------------------------------- */
@media (max-width: 991px) {
  .specs__cols.specs__cols.specs__cols { flex-direction: column; }
}

/* --- ficha p05 / otros: los radios organicos de g-card valen tambien aqui ------------ */
.otros__grid .g-card { overflow: hidden; }
/* Mismo arreglo de la cuna blanca que en .modelos__grid: radio superior organico en
   la tarjeta, foto cuadrada por arriba, radio inferior de la foto en __media. */
.otros__grid .g-card:nth-child(3n+1) { border-radius: 14px 115px 70px 20px; }
.otros__grid .g-card:nth-child(3n+2) { border-radius: 100px 14px 70px 20px; }
.otros__grid .g-card:nth-child(3n)   { border-radius: 14px 115px 70px 20px; }
.otros__grid .g-card:nth-child(3n+1) .g-card__media { border-radius: 0 0 0 81px; }
.otros__grid .g-card:nth-child(3n+2) .g-card__media { border-radius: 0 0 80px 0; }
.otros__grid .g-card:nth-child(3n)   .g-card__media { border-radius: 0 0 0 80px; }

/* --- marca + contacto: apilados <=991 (fotos absolutas pasan a flujo) ---------------- */
@media (max-width: 991px) {
  .msavoir__img.msavoir__img.msavoir__img { position: static; width: 100%; height: auto; margin-top: 24px; }
  .msavoir__col.msavoir__col.msavoir__col { align-items: flex-start; padding-left: 24px; }
  .msavoir__title.msavoir__title { text-align: left; }
  .mar__img.mar__img.mar__img { position: static; width: 100%; height: auto; }
  .mar__col.mar__col.mar__col { padding-left: 24px; }
  /* el mosaico absoluto de las fotos del motor pasa a CARRUSEL: ver mas abajo */
  .motor.motor.motor { min-height: 0; }
  .cform__cols.cform__cols.cform__cols { flex-direction: column; }
  .cform__foto.cform__foto { width: 100%; height: auto; margin-top: 24px; }
  .e404__arte.e404__arte { position: static; width: 100%; margin-top: 90px; }
}

/* --- marca: radios organicos de las fotos (del arbol de Figma) ----------------------- */
.msavoir__img.msavoir__img { border-radius: 14px 0 344px 0; }
.motor__foto-a.motor__foto-a { border-radius: 0 0 0 150px; }
.motor__foto-b.motor__foto-b { border-radius: 0 0 150px 0; }
.motor__foto-c.motor__foto-c { border-radius: 0 90px 0 0; }
.mar__img.mar__img { border-radius: 0 0 150px 0; }

/* --- contacto c02: la parrilla del formulario en GRID -------------------------------
   Con flex-wrap, los anchos fijos (478+41+478) rompian a una columna en cuanto el
   viewport real (scrollbar incluido) dejaba el contenedor en 994px. El grid reparte
   50/50 sin depender del redondeo del clamp. */
.cform__grid.cform__grid.cform__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.cform__grid .cfield.cfield { width: auto; }
.cform__grid .cfield--area.cfield--area { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .cform__grid.cform__grid.cform__grid { grid-template-columns: 1fr; }
}

/* ==== ESTANDAR DE ESPACIADO (2026-08-11, peticion de Alvaro) =========================
   Un solo padding lateral y un solo hueco entre columnas para TODO el sitio, en vez de
   los valores por-seccion del diseno (92/95/99/104/107/109/121..., y el formulario con
   ~130 de margen derecho). El diseno es incoherente en esto; manda el estandar.
   --pc-pad-x  = 105px @1920 -> 24px @402  (el page-pad historico de la home)
   --pc-col-gap = 64px @1920 -> 24px @402  (hueco minimo GARANTIZADO entre columnas)
   Las fotos de los heroes van con flex 1 1 0: absorben el gap sin desbordar. */
:root {
  --pc-pad-x: clamp(24px, 2.5484px + 5.336vw, 105px);
  --pc-col-gap: clamp(24px, 13.4072px + 2.635vw, 64px);
}
/* huecos entre columnas */
.hub-hero__wrap.hub-hero__wrap.hub-hero__wrap,
.ghero__wrap.ghero__wrap.ghero__wrap,
.phero__wrap.phero__wrap.phero__wrap,
.cform__cols.cform__cols.cform__cols,
.specs__cols.specs__cols.specs__cols { column-gap: var(--pc-col-gap); }
/* s09 localizador (heredada de la home): los dos paneles iban casi pegados (11-14px
   en anchos intermedios); el gap estandar con encogimiento para no desbordar */
.dealer__cols.dealer__cols.dealer__cols { column-gap: var(--pc-col-gap); }
.dealer__cols.dealer__cols > * { min-width: 0; flex-shrink: 1; }

/* --- s09 localizador: las dos tarjetas terminan a la MISMA altura (2026-08-14) --------
   Feedback de Pere (13-ago): algo desalineado por abajo en la home, y textual suyo
   "a TFT em surt be". Es un fallo de ancho intermedio, no un fallo general.

   Causa MEDIDA: las dos tarjetas escalaban con leyes distintas y solo coincidian arriba.
     .dealer__list    height     clamp(264px, 214.7354px + 12.2536vw, 450px)   pendiente 12,25vw
     .dealer__detail  min-height clamp(395px, 380.1623px +  3.6897vw, 451px)   pendiente  3,69vw
   Desfase (listado - panel), medido en el lab:
     1280 -55,80 · 1366 -48,45 · 1440 -42,11 · 1512 -35,94 · 1680 -21,55 · 1920 -1,00
   O sea: cuadra en su TFT de 1920 y se abre casi 56px en un portatil. Exactamente lo que
   describe el cliente.

   Arreglo: se suelta la altura fija del listado y se estira a la altura de la fila, que
   la fija el min-height del panel. Quita un numero magico en vez de anadir otro, y cuadra
   a CUALQUIER ancho, no solo en los seis que hemos medido.

   Solo en fila: por debajo de 992px las dos tarjetas se apilan (regla de mas arriba) y
   estirar ahi no procede. Triple clase por especificidad: Bricks emite
   `.dealer__list.brxe-div` (0,2,0) en un <style> en linea, que ganaria por orden.

   Y el alto sobrante lo absorbe la LISTA, no el fondo de la tarjeta. Sin esto la tarjeta
   estira pero su contenido no, y el hueco blanco de abajo crecia al estrecharse (medido:
   0,2% del alto a 1920, 5,1% a 1680, 10,2% a 1440, 13,8% a 1280). Cambiar un desajuste por
   un hueco muerto no es arreglarlo. Con la lista creciendo, la proporcion lista/tarjeta se
   queda cerca de la del diseno a cualquier ancho y se ven mas distribuidores. */
@media (min-width: 992px) {
  .dealer__list.dealer__list.dealer__list { height: auto; align-self: stretch; }
  .dealer__scroll.dealer__scroll.dealer__scroll { flex-grow: 1; min-height: 0; }
}

/* --- marca-m03 motor: la foto de abajo a la derecha cuadra con la de la izquierda ----
   Feedback de Pere (13-ago): "unas fotos que deberian alinearse por abajo no lo hacen".

   Causa MEDIDA: la foto A esta EN FLUJO (su fondo depende de cuanto ocupe el texto, que
   reflowa: 6 lineas por debajo de 1440 y 5 por encima) y la foto C esta ABSOLUTA anclada
   por `top` con clamps lineales. Dos leyes que solo coinciden a 1920.
   Desfase A vs C, medido antes del cambio:
     1280 84,6 · 1366 77,3 · 1440 43,3 · 1512 36,8 · 1680 21,7 · 1920 0,0
   El salto de 24,5 a 64 entre 1366 y 1440 es justo donde el texto pasa de 6 lineas a 5:
   por eso NO se puede cuadrar con otro clamp, no es lineal.

   Arreglo: `.motor__wrap` termina EXACTAMENTE donde termina la foto A (verificado: 1280
   867,3=867,3 · 1440 923,9=923,8 · 1920 1174=1174), y C es absoluta dentro de ese wrap.
   Asi que anclarla por `bottom:0` en vez de por `top` la ata al fondo de A a cualquier
   ancho, sin un solo numero magico. A 1920 no cambia nada (ya cuadraban).
   Solo de 992 para arriba: por debajo la seccion la gobierna el contenido, no el
   min-height, y el reparto de las fotos es otro. */
@media (min-width: 992px) {
  .motor__foto-c.motor__foto-c.motor__foto-c { top: auto; bottom: 0; }
}

/* --- s09 localizador: los dos desplegables del filtro (2026-08-12) -------------------
   Son elementos "Filter - Select" de Bricks, y la clase cae en el PROPIO <select> (G32):
   no hay div donde colgar el <span> del label ni el de la flecha que tenia el mock. Asi
   que la caja teal y el chevron se pintan como FONDO del select, en dos capas:
     1) el chevron, centrado dentro de la caja;
     2) la caja teal (gradiente plano), pegada al borde derecho y a toda la altura.
   El redondeo de las esquinas derechas lo da el border-radius del propio select.
   Lo de aqui es lo que el conversor no sabe mapear a un control de Bricks (appearance y
   el fondo multicapa); el resto (medidas, borde, tipografia) va en la clase global. */
.dealer-select-pais, .dealer-select-ciudad {
  --pc-sel-box: clamp(24px, 21.3441px + 0.6594vw, 34px);   /* caja de la flecha: 24 -> 34 */
  --pc-sel-chv-w: clamp(20px, 17.8738px + 0.5277vw, 28px); /* chevron: 20 -> 28 */
  --pc-sel-chv-h: clamp(10px, 8.9331px + 0.2642vw, 14px);  /* chevron: 10 -> 14 */
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-overflow: ellipsis;
  background-image:
    url('../2026/08/s09-chevron.png'),
    linear-gradient(#9fbcbf, #9fbcbf);
  background-repeat: no-repeat, no-repeat;
  background-size: var(--pc-sel-chv-w) var(--pc-sel-chv-h), var(--pc-sel-box) 100%;
  background-position:
    right calc((var(--pc-sel-box) - var(--pc-sel-chv-w)) / 2) top 50%,
    right top 50%;
}
/* Foco visible: el select es el unico control con teclado de la seccion y sin esto el
   contorno por defecto del navegador se pierde sobre el borde teal. */
.dealer-select-pais:focus-visible, .dealer-select-ciudad:focus-visible {
  outline: 2px solid #1a345c; outline-offset: 2px;
}

/* --- s09: el contenido del panel NO se mete debajo del mapa -------------------------
   El mapa va en position:absolute sobre la mitad derecha del panel (right 2,69% + ancho
   55,8%), asi que lo de la izquierda tiene que caber a su lado: no hay flujo que lo
   empuje. Con el mock no se veia porque su direccion era corta; con las de verdad, la
   primera linea se mete DEBAJO del mapa y se corta a media palabra (medido a 1440 con la
   direccion de Barcelona: 30px por debajo del mapa).
   El mapa empieza en el 41,51% del panel (100 − 2,69 de margen − 55,8 de ancho), asi que
   el contenido tiene que acabar antes. Se limita cada bloque con max-width, que se mide
   contra el ancho de contenido del panel: descontado su padding izquierdo, ese 41,51%
   equivale a un 35% en todo el rango (el 37% teorico se queda a 0-2px del mapa en los
   anchos intermedios: medido, no calculado).
   Solo en escritorio: por debajo de 992 el mapa baja al flujo y el panel usa todo su ancho.

   🔴 NO usar padding-right en % sobre el panel para esto: el porcentaje de un padding se
   calcula sobre el ancho del CONTENEDOR, no sobre el del propio elemento. Un
   `padding-right: 60,5%` puesto asi se convirtio en 773px (el 60,5% de la fila, que mide
   1278) y dejo el contenido del panel con ancho CERO: los desplegables encogidos a 48px y
   el resto invisible. */
@media (min-width: 992px) {
  .dealer__eyebrow, .dealer__agent, .dealer__contact, .dealer__filters { max-width: 35%; }
}

/* --- s09: la ficha del listado es seleccionable (el panel de la derecha la sigue) ----
   🔴 DESVIACION DEL DISENO, a contar al cliente: en el Figma las 6 fichas se pintan
   IGUALES, sin estado elegido. Con el panel ya vivo hace falta uno, o no se entiende de
   quien son los datos de la derecha. Se resuelve con colores del propio diseno (el teal
   de marca), sin anadir nada nuevo. */
.dealer-item { cursor: pointer; }
.dealer-item[aria-pressed="true"] {
  border-color: #61848c; background-color: rgba(159, 188, 191, 0.35);
}
.dealer-item:focus-visible { outline: 2px solid #1a345c; outline-offset: 2px; }

/* --- s09: telefono y correo del panel, pulsables (decision de Alvaro 2026-08-12) -----
   El diseno los pinta como texto plano y asi se mantienen a la vista: heredan color y no
   llevan subrayado hasta que se pasa por encima o se llega con el teclado. */
.dealer-line__text a { color: inherit; text-decoration: none; }
.dealer-line__text a:hover { text-decoration: underline; }
.dealer-line__text a:focus-visible { outline: 2px solid #1a345c; outline-offset: 2px; }

/* --- s09: ventanita de datos al pulsar un marcador (2026-08-12) ----------------------
   🔴 Requisito de Alvaro: no puede salirse del marco del mapa ni comerselo. El ANCHO lo
   fija el JS contra el ancho real del mapa (62%, entre 170 y 260px); el ALTO se limita
   aqui, con scroll propio si un dato larguisimo lo pidiera. El mapa mide 324px de alto en
   escritorio y solo 174 en movil, por eso el tope baja en el regimen apilado.
   Los `gm-*` son las clases internas de la ventana de Google: es la unica via para
   controlar su caja, y por eso van acotadas al mapa de esta seccion. */
.dealer-pop { font-family: 'Lexend'; color: #1a345c; }
.dealer-pop__nombre {
  font-weight: 500; font-size: 14px; line-height: 1.3; margin: 0 0 6px;
}
.dealer-pop__dato {
  font-weight: 300; font-size: 12px; line-height: 1.45; margin: 0 0 3px;
}
.dealer-pop__dato:last-child { margin-bottom: 0; }
.dealer-pop a { color: inherit; text-decoration: none; }
.dealer-pop a:hover { text-decoration: underline; }
.dealer__map .gm-style-iw-c { padding: 10px 12px; border-radius: 8px; }
.dealer__map .gm-style-iw-d { overflow: auto !important; max-height: 150px !important; }
@media (max-width: 991px) {
  .dealer__map .gm-style-iw-d { max-height: 92px !important; }
  .dealer-pop__nombre { font-size: 13px; margin-bottom: 4px; }
  .dealer-pop__dato { font-size: 11px; }
}
/* padding lateral estandar en los wraps de contenido */
.hub-hero__wrap.hub-hero__wrap.hub-hero__wrap,
.ghero__wrap.ghero__wrap.ghero__wrap,
.phero__wrap.phero__wrap.phero__wrap { padding-left: var(--pc-pad-x); padding-right: 0; }
.modelos__wrap.modelos__wrap.modelos__wrap,
.specs__wrap.specs__wrap.specs__wrap,
.equipo__wrap.equipo__wrap.equipo__wrap,
.otros__wrap.otros__wrap.otros__wrap,
.motor__wrap.motor__wrap.motor__wrap,
.cform__wrap.cform__wrap.cform__wrap,
.e404__inner.e404__inner.e404__inner,
.ventajas__grid.ventajas__grid.ventajas__grid { padding-left: var(--pc-pad-x); padding-right: var(--pc-pad-x); }
.cform__wrap.cform__wrap.cform__wrap { padding-right: 0; }
.msavoir__col.msavoir__col.msavoir__col { padding-right: var(--pc-pad-x); }
.mar__col.mar__col.mar__col { padding-right: var(--pc-pad-x); }

/* s10 formulario (compartida con la home): el panel se ancla al padding estandar por la
   derecha (el diseno lo dejaba a ~130) y la seccion gana aire inferior, tambien en movil
   (antes: 0 de padding-bottom, el catalogo tocaba el pie). */
.form__cols.form__cols.form__cols { justify-content: space-between; padding-right: var(--pc-pad-x); }
.form.form.form { padding-bottom: clamp(40px, 29.4072px + 2.635vw, 80px); }
@media (max-width: 991px) {
  /* en el regimen apilado el panel ocupa el ancho con el padding estandar a ambos lados */
  .form__cols.form__cols.form__cols { padding-left: var(--pc-pad-x); }
}

/* contacto: con el gap estandar, la foto (ancho fijo) debe poder ENCOGER para no
   desbordar en anchos intermedios (a 1440: 85+780+64+574 > 1440) */
.cform__foto.cform__foto.cform__foto { flex-shrink: 1; min-width: 0; }

/* ficha: al encoger la columna de foto, el cover centrado dejaba solo el motor en
   cuadro; se ancla el encuadre al lado del barco */
.phero__img.phero__img.phero__img { object-position: 30% center; }


/* ==== WS FORM s10 (form 8 real, issues 924d5a79 + 3fb64585) ==========================
   El shortcode [ws_form id="8"] pinta su markup wsf-* por JS: no hay elementos Bricks a
   los que enganchar clases, asi que TODO el pixel-perfect del formulario vive aqui,
   escopado bajo .form__ws.form__ws.form__ws y con las MISMAS medidas clamp() del mock que sustituye (las
   reglas .form-field* de s10-formulario.base.css quedan como referencia).
   Malla: campos 75-82 en dos columnas (A 45,1499% / B 49,9118%, hueco 4,9383%), textarea
   y consentimiento a todo el ancho, submit al 52,381%. */
.form__ws.form__ws.form__ws .wsf-form { width: 100%; }
.form__ws.form__ws.form__ws fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__ws.form__ws.form__ws .wsf-tile { padding: 0; margin: 0; }
/* 🔴 La malla del framework va por FLEX-BASIS en los .wsf-tile (un `width` pierde
   siempre contra flex-basis) y los .wsf-grid llevan margin -10px de medianil. */
.form__ws.form__ws.form__ws .wsf-sections { margin: 0; }
.form__ws.form__ws.form__ws .wsf-fields {
  display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0;
  column-gap: 4.9383%; row-gap: clamp(16px, 13.0793px + 0.7253vw, 27px); width: 100%;
}
/* 🔴 !important obligado: WS Form inyecta sus columnas en linea con !important
   (.wsf-extra-small-6{flex:0 0 50% !important;max-width:50% !important}) */
.form__ws.form__ws.form__ws .wsf-field-wrapper { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 100% !important; max-width: 100% !important; min-width: 0; position: relative; }
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="75"], .form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="77"],
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="79"], .form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="81"] { flex-basis: 45.1499% !important; max-width: 45.1499% !important; }
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="76"], .form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="78"],
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="80"], .form__ws.form__ws.form__ws .wsf-field-wrapper[data-id="82"] { flex-basis: 49.9118% !important; max-width: 49.9118% !important; }

/* etiquetas (el asterisco de requerido hereda el negro del rotulo, como en el diseno) */
.form__ws.form__ws.form__ws .wsf-label {
  padding-top: clamp(4px, 3.1979px + 0.1983vw, 7px);
  font-family: 'Lexend'; font-weight: 400;
  font-size: clamp(12px, 10.4034px + 0.3959vw, 18px);
  line-height: clamp(15px, 12.8738px + 0.5277vw, 23px);
  color: #000000; margin: 0;
}
.form__ws.form__ws.form__ws .wsf-required-wrapper strong { color: inherit; font-weight: inherit; }
/* El diseno NO pinta asterisco en la gama ni en el consentimiento (siguen siendo
   obligatorios: solo se oculta el indicador, como en el mock aprobado). Ademas el
   asterisco hacia saltar "Gama de interes preferente" a dos lineas. */
.form__ws.form__ws.form__ws [data-id="81"] .wsf-required-wrapper,
.form__ws.form__ws.form__ws [data-id="84"] .wsf-required-wrapper { display: none; }

/* pastillas (inputs y selects) */
.form__ws.form__ws.form__ws input.wsf-field:not([type="checkbox"]), .form__ws.form__ws.form__ws select.wsf-field, .form__ws.form__ws.form__ws textarea.wsf-field {
  width: 100%; height: clamp(30px, 27.609px + 0.5935vw, 39px);
  background: #ffffff; border: 1.5px solid #afb0b0; border-radius: 35px;
  padding: 0 clamp(16px, 13.8738px + 0.5277vw, 24px);
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(11px, 9.9331px + 0.2642vw, 15px);
  line-height: clamp(15px, 12.8738px + 0.5277vw, 23px);
  color: #000000; margin-top: clamp(4px, 3.7275px + 0.0665vw, 5px);
  appearance: none; -webkit-appearance: none;
}
.form__ws.form__ws.form__ws .wsf-field::placeholder { color: #acacac; opacity: 1; }
.form__ws.form__ws.form__ws textarea.wsf-field {
  height: clamp(78px, 70.5773px + 1.8452vw, 106px);
  padding-top: clamp(10px, 8.6682px + 0.33vw, 15px); resize: none;
}

/* selects: caja de flecha pegada al borde derecho (chevron compartido con s09).
   Anclada abajo: vale mientras el aviso de error este oculto (regla de mas abajo).
   🔴 El selector ESPEJA el del plugin (select:not(x3) + span, especificidad 0.6.2, que
   ademas pinta un triangulo por border): con el ambito corto el nuestro perdia. */
.form__ws.form__ws.form__ws select.wsf-field { padding-right: clamp(36px, 32.5px + 0.85vw, 48px); text-overflow: ellipsis; }
.form__ws.form__ws.form__ws select.wsf-field:has(option[data-placeholder]:checked) { color: #acacac; }
.form__ws.form__ws.form__ws select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
  position: absolute; right: 0; top: auto; bottom: 0; margin: 0; border: 0; pointer-events: none;
  width: clamp(28px, 25.8738px + 0.5277vw, 36px);
  height: clamp(30px, 27.609px + 0.5935vw, 39px);
  /* 🔴 Aqui NO va `s09-chevron.png`: ese PNG es 28x14 y esta OPACO AL 100%, con 324 de sus
     392 pixeles en #9fbcbf, o sea que no es una flecha, es LA CAJA TURQUESA ENTERA del
     localizador. En la s09 eso es correcto (ahi el turquesa es el diseno); pintado encima
     del marron de este boton se ve un recuadro azulado flotando dentro. Avisado por Alvaro
     el 13-ago. El diseno pide un triangulo BLANCO relleno (weui:arrow-filled, 15x9 sobre la
     caja de 39x44), asi que se dibuja con bordes: ni imagen ni fondo ajeno. */
  background: #3d372f;
  border-top-right-radius: 20px; border-bottom-right-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.form__ws.form__ws.form__ws select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow::after {
  /* 🔴 Centrado por POSICION, no por flex: el `display:flex` del span no gana contra la
     hoja publica de WS Form (computaba `block`) y el triangulo se iba a la esquina. */
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: clamp(5px, 4.3px + 0.17vw, 7.5px) solid transparent;
  border-right: clamp(5px, 4.3px + 0.17vw, 7.5px) solid transparent;
  border-top: clamp(6px, 5.2px + 0.2vw, 9px) solid #ffffff;
  border-bottom: 0;
}

/* consentimiento: en el mock iba FUERA de la malla con su propio margen (10-14px); dentro
   del flex el row-gap (16-27px) ya separa, asi que se compensa la diferencia en negativo */
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-type="checkbox"] {
  margin-top: clamp(-13px, -4.1464px - 0.4611vw, -6px);
  margin-left: clamp(4px, 3.4627px + 0.1324vw, 6px);
}
.form__ws.form__ws.form__ws [data-row-checkbox] { display: flex; align-items: center; }
/* position static: el framework lo saca del flujo (absolute) y pisaba el texto */
.form__ws.form__ws.form__ws input[type="checkbox"].wsf-field {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: static;
  width: 10px; height: 10px; min-height: 10px; background: #ffffff;
  border: 1px solid #e8e8e8; border-radius: 1px; margin: 0;
}
.form__ws.form__ws.form__ws input[type="checkbox"].wsf-field:checked { background: #3d372f; border-color: #3d372f; }
/* el check ::after del framework va dimensionado por sus variables (25px): fuera */
.form__ws.form__ws.form__ws input[type="checkbox"].wsf-field:checked::after { display: none; }
.form__ws.form__ws.form__ws [data-type="checkbox"] .wsf-label {
  padding-top: 0; font-weight: 300;
  font-size: clamp(9px, 8.7275px + 0.0665vw, 10px);
  line-height: clamp(15px, 12.8738px + 0.5277vw, 23px);
  margin-left: clamp(5px, 4.7275px + 0.0665vw, 6px);
}

/* boton de envio (misma compensacion de row-gap que el consentimiento) */
.form__ws.form__ws.form__ws .wsf-field-wrapper[data-type="submit"] { flex-basis: 52.381% !important; max-width: 52.381% !important; margin-top: clamp(-11px, -2.1464px - 0.4611vw, -4px); }
.form__ws.form__ws.form__ws button.wsf-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: clamp(40px, 37.609px + 0.5935vw, 49px);
  background: #3d372f; border: 0; cursor: pointer;
  border-radius: clamp(12px, 11.4627px + 0.1324vw, 14px);
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(15px, 13.1386px + 0.4618vw, 22px);
  line-height: 16px; letter-spacing: 0.0273em; color: #ffffff;
  /* 🔴 `padding: 0` era un fallo heredado: el aire lateral salia solo de que el ancho en
     porcentaje fuese MAYOR que el texto, o sea de casualidad. Medido el 13-ago: a 1440 el
     boton de la home dejaba 3px a cada lado y el de la banda CERO (los bordes tocando las
     letras). El diseno da 34 a la izquierda y 35 a la derecha sobre 297 de ancho, en los
     dos montajes. Con `box-sizing: border-box` el relleno va por dentro y no ensancha nada
     donde ya hay sitio; donde no lo hay, ahora lo reserva. */
  box-sizing: border-box;
  padding: 0 clamp(16px, 11.233px + 1.1857vw, 34px);
}

/* avisos de validacion: ocultos hasta que WS Form los activa (aria-hidden=false) */
.form__ws.form__ws.form__ws .wsf-invalid-feedback { font-family: 'Lexend'; font-weight: 300; font-size: 12px; color: #b3261e; margin-top: 4px; }
.form__ws.form__ws.form__ws .wsf-invalid-feedback[aria-hidden="true"] { display: none; }

/* regimen apilado: una sola columna, como el mock (submit a todo el ancho solo en movil) */
@media (max-width: 991px) {
  .form__ws.form__ws.form__ws .wsf-fields .wsf-field-wrapper { flex-basis: 100% !important; max-width: 100% !important; }
  .form__ws.form__ws.form__ws .wsf-fields .wsf-field-wrapper[data-type="submit"] { flex-basis: 52.381% !important; max-width: 52.381% !important; }
}
@media (max-width: 478px) {
  .form__ws.form__ws.form__ws .wsf-fields .wsf-field-wrapper[data-type="submit"] { flex-basis: 100% !important; max-width: 100% !important; }
}

/* ==== WS FORM contacto (form 9, pagina 204) ==========================================
   Mismo patron que el bloque "WS FORM s10": el shortcode [ws_form id="9"] pinta markup
   wsf-* por JS y todo el pixel-perfect vive aqui, con las medidas del mock cfield* de
   cont-c02-form.base.css (que quedan alli como referencia). Campos: 86 nombre · 87 email
   · 88 telefono · 89 pais · 90 ciudad (select) · 91 cp · 92 mensaje (area) · 93 consent
   · 95 submit. A diferencia de la s10, AQUI el asterisco de requerido SI esta en el
   diseno (labels "Nombre *" y el consentimiento acaba en ". *"): se deja visible. */
.cform__ws.cform__ws.cform__ws .wsf-form { width: 100%; }
.cform__ws.cform__ws.cform__ws fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cform__ws.cform__ws.cform__ws .wsf-tile { padding: 0; margin: 0; }
.cform__ws.cform__ws.cform__ws .wsf-sections { margin: 0; }
.cform__ws.cform__ws.cform__ws .wsf-fields {
  display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0;
  column-gap: clamp(16px, 9.3718px + 1.6476vw, 41px);
  row-gap: clamp(16px, 12.2848px + 0.9229vw, 30px); width: 100%;
}
/* dos columnas de ancho FIJO fluido (354->478), como el mock; el area, el consent y el
   submit van a fila completa. !important por las columnas en linea de WS Form. */
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 0 clamp(354px, 321.1544px + 8.1693vw, 478px) !important;
  max-width: 100% !important; min-width: 0; position: relative;
}
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper[data-id="92"],
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper[data-id="93"],
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper[data-type="submit"] { flex-basis: 100% !important; }

/* etiquetas (navy) */
.cform__ws.cform__ws.cform__ws .wsf-label {
  font-family: 'Lexend'; font-weight: 400;
  font-size: clamp(14px, 11.8738px + 0.5277vw, 22px);
  line-height: clamp(17px, 14.8738px + 0.5277vw, 25px);
  color: #1a345c; margin: 0;
}
.cform__ws.cform__ws.cform__ws .wsf-required-wrapper strong { color: inherit; font-weight: inherit; }

/* pastillas */
.cform__ws.cform__ws.cform__ws input.wsf-field:not([type="checkbox"]), .cform__ws.cform__ws.cform__ws select.wsf-field, .cform__ws.cform__ws.cform__ws textarea.wsf-field {
  width: 100%; height: clamp(34px, 30.02px + 0.9888vw, 49px);
  background: #ffffff; border: 1.6px solid #afb0b0; border-radius: 38px;
  padding: 0 clamp(16px, 13.3441px + 0.6594vw, 26px);
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(12px, 10.8536px + 0.2839vw, 16.3px);
  line-height: clamp(17px, 14.8738px + 0.5277vw, 25px);
  color: #000000; margin-top: clamp(8px, 6.9331px + 0.2642vw, 12px);
  appearance: none; -webkit-appearance: none;
}
.cform__ws.cform__ws.cform__ws .wsf-field::placeholder { color: #acacac; opacity: 1; }
.cform__ws.cform__ws.cform__ws textarea.wsf-field {
  height: clamp(96px, 84.0754px + 2.9651vw, 141px);
  padding-top: clamp(8px, 6.9331px + 0.2642vw, 12px); resize: none; border-radius: 17px;
}

/* select: caja de flecha TEAL pegada al borde (selector espejo del plugin, como en s10) */
.cform__ws.cform__ws.cform__ws select.wsf-field { padding-right: clamp(38px, 33px + 1.25vw, 57px); text-overflow: ellipsis; }
.cform__ws.cform__ws.cform__ws select.wsf-field:has(option[data-placeholder]:checked) { color: #acacac; }
.cform__ws.cform__ws.cform__ws select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
  position: absolute; right: 0; top: auto; bottom: 0; margin: 0; border: 0; pointer-events: none;
  width: clamp(30px, 26.2848px + 0.9229vw, 44px);
  height: clamp(34px, 30.02px + 0.9888vw, 49px);
  /* Mismo caso que el del form 8: el PNG del localizador traia su caja turquesa dentro. */
  background: #61848c;
  border-top-right-radius: 10px; border-bottom-right-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.cform__ws.cform__ws.cform__ws select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow::after {
  /* 🔴 Centrado por POSICION, no por flex: el `display:flex` del span no gana contra la
     hoja publica de WS Form (computaba `block`) y el triangulo se iba a la esquina. */
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: clamp(5px, 4.3px + 0.17vw, 7.5px) solid transparent;
  border-right: clamp(5px, 4.3px + 0.17vw, 7.5px) solid transparent;
  border-top: clamp(6px, 5.2px + 0.2vw, 9px) solid #ffffff;
  border-bottom: 0;
}

/* consentimiento (compensando el row-gap frente al margen propio del mock) */
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper[data-type="checkbox"] { margin-top: clamp(-10px, -2.411px - 0.3953vw, -4px); }
.cform__ws.cform__ws.cform__ws [data-row-checkbox] { display: flex; align-items: center; }
.cform__ws.cform__ws.cform__ws input[type="checkbox"].wsf-field {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: static;
  width: 12px; height: 12px; min-height: 12px; background: #ffffff;
  border: 1px solid #cfcfcf; border-radius: 2px; margin: 0;
}
.cform__ws.cform__ws.cform__ws input[type="checkbox"].wsf-field:checked { background: #61848c; border-color: #61848c; }
.cform__ws.cform__ws.cform__ws input[type="checkbox"].wsf-field:checked::after { display: none; }
.cform__ws.cform__ws.cform__ws [data-type="checkbox"] .wsf-label {
  font-weight: 300;
  font-size: clamp(10px, 9.4627px + 0.1324vw, 12px);
  line-height: clamp(15px, 13.4034px + 0.3959vw, 21px);
  color: #000000; margin-left: clamp(6px, 5.4627px + 0.1324vw, 8px);
}

/* boton de envio: pildora teal de ancho fijo (no ocupa la fila) */
.cform__ws.cform__ws.cform__ws .wsf-field-wrapper[data-type="submit"] { margin-top: clamp(-2px, 0.5297px - 0.1318vw, 0px); }
.cform__ws.cform__ws.cform__ws button.wsf-button {
  display: flex; align-items: center; justify-content: center;
  /* Ancho MINIMO del diseno (antes ancho fijo): en frances "Envoyer →" no cabia y partia en
     dos lineas. En castellano el texto es mas corto que el minimo y la pildora sale igual. */
  width: auto; min-width: clamp(110px, 100.4588px + 2.3722vw, 146px); white-space: nowrap;
  height: clamp(38px, 35.0793px + 0.7253vw, 49px);
  background: #61848c; border: 0; cursor: pointer;
  border-radius: clamp(19px, 17.4034px + 0.3959vw, 25px);
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(13px, 11.9331px + 0.2642vw, 17px);
  line-height: 1; letter-spacing: clamp(0.4px, 0.3553px + 0.0099vw, 0.54px);
  color: #ffffff;
  /* Mismo caso que el del form 8: el diseno le da 35 de relleno lateral (caja de 175 con
     un texto de 69). Aqui hoy sobra sitio, pero el aire no puede depender de eso. */
  box-sizing: border-box;
  padding: 0 clamp(16px, 10.9689px + 1.2516vw, 35px);
}

/* avisos de validacion */
.cform__ws.cform__ws.cform__ws .wsf-invalid-feedback { font-family: 'Lexend'; font-weight: 300; font-size: 12px; color: #b3261e; margin-top: 4px; }
.cform__ws.cform__ws.cform__ws .wsf-invalid-feedback[aria-hidden="true"] { display: none; }

/* ==== FASE INTERACTIVIDAD (2026-08-11) ===============================================
   Carruseles con flechas (gamas home + p05 otros), pestanas de equipamiento (p04) y
   panel del menu movil. El JS minimo vive en pacific-ui.js (mu-plugin pacific-craft-ui);
   el panel del menu se abre/cierra con interacciones NATIVAS de Bricks (data-abierta). */

/* --- flechas de carrusel: ya son <button>; reset del agente de usuario --- */
button.gama__nav, button.otros__nav { background: none; padding: 0; cursor: pointer; }
.gama__nav[aria-disabled="true"], .otros__nav[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* --- p05 otros modelos: la rejilla pasa a CARRUSEL en escritorio (>=992) -------------
   El diseno (prod-p05-otros-1920.png) children 3 tarjetas visibles + flechas laterales.
   grid-auto-flow/auto-columns no tienen control nativo en Bricks: verbatim. En movil se
   mantiene el apilado a 1 columna del settings (_gridTemplateColumns tablet 1fr). */
/* 17-sep-2026: FUERA EL CARRUSEL. La Bendita (Pere, 16 y 17-sep) pide que cada ficha
   ensene solo los modelos de su lista y sin flechas, asi que la rejilla vuelve a la de
   Bricks (clase otros__grid: repeat(3,1fr) escritorio, 1fr tablet) y el desplazamiento
   horizontal desaparece. Con listas de 1 a 3 tarjetas no hay nada que desplazar. */
section.otros { position: relative; }
.otros__nav.otros__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(30px, 18.9683px + 2.7404vw, 57px);
  height: clamp(30px, 18.9683px + 2.7404vw, 57px);
  border: 1.5px solid #61848c; border-radius: 50%;
}
.otros__nav--prev.otros__nav--prev { left: clamp(16px, 11.605px + 1.1667vw, 34px); }
.otros__nav--next.otros__nav--next { right: clamp(16px, 11.605px + 1.1667vw, 34px); }
.otros__chev.otros__chev {
  width: clamp(8px, 5.8738px + 0.5277vw, 14px);
  height: clamp(8px, 5.8738px + 0.5277vw, 14px);
  border-top: 2px solid #61848c; border-right: 2px solid #61848c;
}
.otros__chev--prev.otros__chev--prev { transform: rotate(225deg); margin-left: 4px; }
.otros__chev--next.otros__chev--next { transform: rotate(45deg); margin-right: 4px; }
/* 17-sep-2026: las flechas se retiran EN TODOS LOS ANCHOS (antes solo en movil).
   Los dos <button> siguen en la plantilla Bricks 178 (brxe-nr099c y brxe-bxlg8t) porque
   bricks/remove-element se niega a escribir mientras el arbol tenga 7 ids de 7 caracteres
   (tplcta1, oppan01, optit01, opfil01..04), que son de otra fase. display:none los saca
   tambien del arbol de accesibilidad, asi que no los anuncia ningun lector de pantalla. */
.otros__nav.otros__nav { display: none; }

/* --- p04 equipamiento: estado de las pestanas + paneles --------------------------------
   Del crop prod-p04-equipo-1920.png: linea gris #eff1f7 bajo TODA la fila de tabs, tab
   activa en navy con subrayado navy encima de la linea, inactivas en #9fbcbf. */
.equipo__tabs.equipo__tabs { position: relative; width: fit-content; padding-bottom: clamp(10px, 8.6682px + 0.33vw, 15px); }
.equipo__tabs.equipo__tabs::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: #eff1f7;
}
.equipo__tab.equipo__tab { position: relative; color: #9fbcbf; transition: color 0.2s ease; }
.equipo__tab.equipo__tab.is-activa { color: #1a345c; }
.equipo__tab.equipo__tab::after {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: calc(-1 * clamp(10px, 8.6682px + 0.33vw, 15px));
  height: 3px; background: transparent; z-index: 1;
}
.equipo__tab.equipo__tab.is-activa::after { background: #1a345c; }
/* sin JS se ve el primer panel; con JS mandan is-activa/no-activa */
.equipo__items--2.equipo__items--2, .equipo__items--3.equipo__items--3, .equipo__items--4.equipo__items--4 { display: none; }
.equipo__items.equipo__items.no-activa { display: none; }
.equipo__items.equipo__items.is-activa { display: block; }
/* barcos con menos de 4 versiones: el tab sin nombre no se pinta */
.equipo__tab.equipo__tab:empty, .equipo__tab.equipo__tab--vacia { display: none; }

/* --- menu movil: visibilidad por atributo (interaccion nativa de la hamburguesa) ------ */
.site-menu.site-menu.site-menu {
  position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; z-index: 40;
}
.site-menu.site-menu[data-abierta] { display: flex; }
@media (min-width: 992px) {
  /* en escritorio el panel no existe aunque el atributo se quedara puesto */
  .site-menu.site-menu[data-abierta] { display: none; }
}
/* pestañas con version sin contenido (pendiente del cliente): visibles, no conmutables */
.equipo__tab.equipo__tab[aria-disabled="true"] { cursor: default; opacity: 0.55; }

/* confirmacion tras el envio (los dos WS Forms): tipografia y colores de la casa
   en lugar del verde generico del plugin */
.form__ws.form__ws.form__ws .wsf-alert, .cform__ws.cform__ws.cform__ws .wsf-alert {
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(15px, 13.1386px + 0.4618vw, 22px);
  line-height: 1.4; color: #1a345c;
  background: #eff1f7; border: 0; border-radius: 14px;
  padding: clamp(16px, 13.8738px + 0.5277vw, 24px);
  margin-top: clamp(18px, 14.8145px + 0.7912vw, 30px);
}
.form__ws.form__ws.form__ws .wsf-alert p, .cform__ws.cform__ws.cform__ws .wsf-alert p { margin: 0; color: inherit; }

/* --- secciones de bucle que se quedan VACIAS (issue a7d15123) -------------------------
   🔴 En una plantilla de ARCHIVO DE TAXONOMIA las condiciones de Bricks sobre campos del
   TERMINO no se cumplen (medido 2026-08-12: `{acf_ventajas}` + empty_not seguia pintando
   la seccion en Timonier y WA & Deck, que no tienen ventajas): las condiciones se evaluan
   contra el post del bucle, no contra el termino. Como el bucle vacio SI deja de emitir
   sus hijos, la via fiable aqui es `:has()`, que mira el DOM real y no depende del
   contexto de Bricks. En la FICHA (contexto de post) las condiciones si funcionan y se
   usan esas, que son mejores: ni siquiera emiten el marcado. */
.ventajas:not(:has(.ventaja)) { display: none; }
.pgal:not(:has(.pgal__item)) { display: none; }
.otros:not(:has(.g-card)) { display: none; }
.modelos:not(:has(.g-card)) { display: none; }

/* ==== PAGINAS DE TEXTO PLANO (legales) ==============================================
   Las 3 paginas de legales no tienen contenido Bricks: las pinta WordPress dentro de
   `article#brx-content.wordpress`, sin contenedor ni aire, asi que el titulo se metia
   DEBAJO de la cabecera (que aqui no tiene hero que la sostenga) y el texto salia a
   sangre de lado a lado con la tipografia por defecto del tema.

   🔴 El selector es `body:has(#brx-content.wordpress)` y NO una lista de page-id: ese
   contenedor lo emite Bricks SOLO cuando la pagina no tiene maquetacion propia, asi que
   cualquier legal que se anada despues (o cualquier pagina de texto) queda cubierta sola.
   Cuando llegue el texto legal REAL del cliente, se pega en el editor y sale ya con esta
   maqueta: no hay que volver aqui. */
body:has(#brx-content.wordpress) #brx-content {
  /* 🔴 `width:100%` + `border-box` ademas del max-width: dentro del flex de .brx-body el
     max-width solo NO encoge y el bloque se quedaba en 900px fijos, desbordando 540px a
     360 de ancho (medido en el barrido). */
  width: 100%; box-sizing: border-box; max-width: 900px;
  margin-left: auto; margin-right: auto;
  padding-left: var(--pc-pad-x); padding-right: var(--pc-pad-x);
  /* 🔴 El minimo es 170 y no 120 porque en movil (<=478) la cabecera se APILA (logo
     centrado bajo la hamburguesa) y su bloque termina en 129px, medido: con 120 el
     titulo se metia bajo el logo. De 480 en adelante la cabecera baja a 101-129. */
  padding-top: clamp(170px, 160px + 2.6vw, 210px);
  padding-bottom: clamp(56px, 41.2px + 3.7vw, 112px);
  font-family: 'Lexend'; font-weight: 300;
  font-size: clamp(15px, 13.9px + 0.275vw, 17px);
  line-height: 1.75; color: #24231d;
}
body:has(#brx-content.wordpress) #brx-content h1 {
  font-family: 'Lexend Deca'; font-weight: 500;
  font-size: clamp(32px, 22.5px + 2.375vw, 68px);
  line-height: 1.1; letter-spacing: -0.03em; color: #1a345c;
  margin: 0 0 clamp(20px, 15.8px + 1.05vw, 36px);
}
body:has(#brx-content.wordpress) #brx-content h2 {
  font-family: 'Lexend Deca'; font-weight: 500;
  font-size: clamp(20px, 17.4px + 0.65vw, 30px);
  line-height: 1.25; letter-spacing: -0.02em; color: #1a345c;
  margin: clamp(32px, 25px + 1.75vw, 58px) 0 clamp(10px, 8.4px + 0.4vw, 16px);
}
body:has(#brx-content.wordpress) #brx-content p { margin: 0 0 1.1em; }
body:has(#brx-content.wordpress) #brx-content ul,
body:has(#brx-content.wordpress) #brx-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
body:has(#brx-content.wordpress) #brx-content li { margin-bottom: 0.4em; }
body:has(#brx-content.wordpress) #brx-content a { color: #61848c; text-decoration: underline; }
body:has(#brx-content.wordpress) #brx-content strong { font-weight: 500; }

/* La cabecera aqui va sobre fondo claro: mismo estado oscuro que en el hub, gama,
   ficha y 404 (ver bloque de arriba). */
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-nav__link { color: #24231d; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-lang { color: #3d372f; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-lang__caret { border-top-color: #3d372f; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .btn-pill { color: #3d372f; border-color: #3d372f; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-burger__bar { background-color: #24231d; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-header__logo-img { display: none; }
body:has(#brx-content.wordpress) #brx-header:not(.scrolling) .site-header__logo-img--dark { display: block; }

/* --- REDUCIR MOVIMIENTO (repaso de movimiento, 2026-08-13) ---------------------------
   Habia UN solo bloque `prefers-reduced-motion` y solo cubria la cabecera. Se quedaban
   fuera el desplazamiento suave del carrusel de "otros modelos" y el subrayado de las
   pestanas de equipamiento. Los QA visuales son ciegos al movimiento, asi que esto no
   lo canta ninguna captura: se ve leyendo el codigo.
   (El viaje de camara del mapa ya lo respetaba desde el 12-ago, en pacific-ui.js.) */
@media (prefers-reduced-motion: reduce) {
  .otros__grid.otros__grid.otros__grid { scroll-behavior: auto; }
  .dealer__scroll { scroll-behavior: auto; }
  .equipo__tab.equipo__tab { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==== s13 BANDA "EL MAR TE ESPERA" (3 paginas interiores) =============================
   Lo que no puede ir en los ajustes de la seccion: el apilado (Bricks descarta
   `_direction` en un breakpoint responsive, gotcha 11) y el formulario, que WS Form pinta
   por JS y por tanto no tiene elementos Bricks a los que enganchar clases (G21).
   Decision de Alvaro 2026-08-13 (issue 39a07c67): las interiores terminan como el Figma,
   con una sola banda, en vez de repetir las dos secciones enteras de la home. */

/* --- apilado: las dos mitades en columna por debajo de 992 --------------------------- */
@media (max-width: 991px) {
  /* 🔴 Con `.espera__wrap` a secas esta regla PIERDE contra la clase que emite Bricks
     (misma especificidad, y su hoja carga despues): medido a 402, el wrap seguia en `row`,
     el panel se comia los 402 y el formulario se iba a x=402 con 56px de ancho. Se sube la
     especificidad con el padre en vez de recurrir a !important. */
  .espera .espera__wrap.espera__wrap { flex-direction: column; }
  .espera .espera__panel.espera__panel { width: 100%; }
  .espera .espera__form.espera__form { width: 100%; flex-grow: 0; }
  /* La tarjeta deja de ser una fila con el mapa en absoluto: todo en columna. */
  .espera .espera__card.espera__card { height: auto; padding-bottom: clamp(14px, 1.1428px + 1.2953vw, 24px); }
  .espera .espera__finder.espera__finder { width: 100%; }
  /* 🔴 Y su ancho NO puede ser el 100% del panel: con el margen izquierdo de 11 encima, la
     tarjeta medía 390+11 y se salía 11px de la pantalla (el barrido lo canto a 5 anchos).
     Del diseno movil: x=23 y 358 de ancho sobre 402, o sea 21 de aire a la derecha. */
  .espera .espera__card.espera__card { width: auto; margin-left: clamp(11px, 6.2258px + 1.1864vw, 29px);
                          margin-right: clamp(21px, 15.4311px + 1.3841vw, 42px); }
}

/* --- el formulario dentro de la banda ------------------------------------------------
   Hereda TODO el pixel-perfect del bloque "WS FORM s10" (mismo form 8, mismas clases
   wsf-*), y aqui solo se corrige la malla, porque la caja es mas estrecha: 641px de
   contenido contra los ~700 de la s10. Medido en el diseno: columnas de 295 y 298 con
   48 de hueco sobre 641 -> 46,02% / 46,49% / 7,49%.
   🔴 Triple clase de ambito: los css publicos de WS Form cargan DESPUES (G21a). */
.espera__form .form__ws.form__ws.form__ws .wsf-extra-small-6 {
  flex: 0 0 46.02% !important;
  flex-basis: 46.02% !important;
  max-width: 46.02% !important;
}
.espera__form .form__ws.form__ws.form__ws .wsf-extra-small-6:nth-child(even) {
  flex-basis: 46.49% !important;
  max-width: 46.49% !important;
}
.espera__form .form__ws.form__ws.form__ws .wsf-form > .wsf-fields { column-gap: 7.49%; }
/* 🔴 El submit: en la s10 quien manda el ancho NO es el boton, es su ENVOLTORIO
   (`[data-type="submit"]` a 52,381% con !important). Poniendole el ancho al boton se
   obtiene el 46% de un envoltorio ya recortado: medido, 156px en vez de 297, y el texto
   "Solicitar informacion" partido en dos lineas. Se le pone al envoltorio, como en la s10,
   y el boton va al 100% de el. Diseno de la banda: 297 de 641 = 46,33%. */
.espera__form .form__ws.form__ws.form__ws .wsf-field-wrapper[data-type="submit"] {
  flex-basis: 46.33% !important;
  max-width: 46.33% !important;
}
.espera__form .form__ws.form__ws.form__ws button.wsf-button {
  width: 100%;
  border-radius: clamp(9px, 6.3441px + 0.6594vw, 14px);
}
/* "Descargar catalogo": 640x80 r=20 en el diseno, o sea el ancho entero de la columna. */
/* 🔒 26-ago: los ajustes de esta banda que empatan a (0,2,0) con el CSS de las clases
   globales de Bricks van con la ULTIMA clase DOBLADA. Motivo: la banda vive ahora en la
   plantilla de seccion 702 (compartida por Embarcaciones y las plantillas de gama y de
   ficha) y su CSS de Bricks se imprime DESPUES de esta hoja, asi que los empates que antes
   ganabamos por orden de carga los ganaba Bricks: los selects PAIS/CIUDAD perdian su
   width:auto (recortados a 158px) y el catalogo perdia 13px de margen. Con la clase
   doblada ganan por especificidad, que no depende del orden. 19 reglas. */
.espera__form .form__catalog.form__catalog { width: 100%; margin-top: clamp(16px, 8.0477px + 1.9769vw, 46px); }

/* --- s13: encaje del contenido en anchos intermedios ---------------------------------
   A 1920 la banda clava, pero a 1440 (la pantalla de Alvaro) se rompia por cuatro sitios:
   la direccion del distribuidor salia a palabra por linea, el rotulo de encima ("AGENTE
   SELECCIONADO" entonces, "DISTRIBUIDOR SELECCIONADO" desde el 3-sep-2026) en dos, el
   desplegable de ciudad recortado a "CIUD..." y los dos botones partidos en dos lineas.
   La causa es la misma en los cuatro: el contenido de dentro viene del componente del
   localizador de la HOME, cuyos clamp() encogen mas despacio que esta tarjeta.
   Se corrige AQUI, con el ambito de la banda, para no tocar la s09 de la home. */
/* 🔴 En la s09 de la home estos bloques llevan `max-width: 35%` para RESERVARLE el hueco al
   mapa, que ahi va en absoluto sobre el panel (gotcha G35). Dentro de la banda el mapa ya
   tiene su propia columna, asi que ese 35% no reserva nada: solo estrangula. Medido a 1440:
   la direccion del agente quedaba en 73px y salia a palabra por linea. */
.espera .dealer__contact.dealer__contact,
.espera .dealer__filters.dealer__filters,
.espera .dealer__agent.dealer__agent,
.espera .dealer__eyebrow.dealer__eyebrow { max-width: none; }
.espera .dealer-line__text.dealer-line__text { max-width: none; }
.espera .dealer__eyebrow.dealer__eyebrow,
.espera .mar__find-eyebrow.mar__find-eyebrow,
.espera .espera__find-eyebrow.espera__find-eyebrow { white-space: nowrap; }
/* Los dos desplegables: sin el ancho fijo del componente, que a 1440 recorta "CIUDAD". */
.espera .dealer-select-pais.dealer-select-pais,
.espera .dealer-select-ciudad.dealer-select-ciudad { width: auto; min-width: clamp(108px, 79.6564px + 7.0494vw, 158px); }
/* Los botones no se parten: el texto manda sobre el porcentaje. */
.espera__form .form__ws.form__ws.form__ws button.wsf-button { white-space: nowrap; }
/* El envoltorio del submit: SUELO en la proporcion del diseno (297 de 641 = 46,33%) y
   techo en lo que pida el texto. Con `max-width:none` a secas se iba al ancho entero
   (medido 641 a 1920); con el 46,33% fijo, a 1440 el texto no cabia y se partia en dos. */
.espera__form .form__ws.form__ws.form__ws .wsf-field-wrapper[data-type="submit"] {
  flex-basis: auto !important;
  max-width: none !important;
  min-width: 46.33%;
  width: fit-content;
}
/* 🔴 El catalogo NO lleva nowrap: su texto es largo (510px de los 640 en el diseno) y en
   una columna estrecha el nowrap lo sacaba de la caja, con el icono pisando las ultimas
   letras ("...PACIFIC CRAF[icono]"). Que reparta en dos lineas es mejor que desbordar. */
.espera__form .form__catalog.form__catalog { align-items: center; gap: clamp(8px, 2.4311px + 1.3841vw, 29px); }
.espera__form .form__catalog-text.form__catalog-text { white-space: normal; }

/* =====================================================================================
   PASADA DE DISENO DE VICTOR LACRUZ (17-ago) + los 3 puntos nuevos de Pere del mismo dia.
   Cada valor sale del arbol de Figma EN DISCO (refs/paginas/*.json), no de mirar el PNG.
   Lo que NO esta aqui esta medido y reportado, no olvidado.
   ===================================================================================== */

/* --- P1 (Victor 1 + Pere 1) · la proa se metia debajo del titular y de los botones -----
   NO es un error de programacion ni se arregla con una imagen mas grande: es la PROPORCION
   de la ventana. El diseno dibuja el hero a 1920x1170 (razon 1,64); desde que mide
   `100svh` (2026-08-09, peticion de Alvaro: "que se vea entera sin hacer scroll"), en un
   portatil la ventana es mucho mas baja y `object-fit:cover` recorta por vertical.
   Medido con AUDIT-2026-08-07/_hero-hueco.mjs (hueco entre el ultimo boton y la proa,
   que en el diseno es de 62px). Antes: 6 de 7 anchos de escritorio SOLAPABAN, el peor
   -136,6px justo a 1891x958 (la ventana desde la que Victor hizo su captura).

   Tres causas y tres arreglos, cada uno medido por separado:
   (a) el recorte iba anclado ABAJO, y la barca esta en la mitad inferior de la foto, asi
       que al recortar subia. Anclarlo ARRIBA la devuelve abajo (+90px a 1920x1080,
       +198 a 1891x958).
       🔒 El ancla de abajo la pidio Alvaro el 9-ago por un motivo bueno: centrado, el
       recorte se comia la barca. Por eso esto NO revierte su decision, la ACOTA: solo
       cambia de ancla mientras la ventana sea mas cuadrada que 2:1, que es exactamente
       la franja en la que anclar arriba deja la barca ENTERA (la barca ocupa hasta
       y=973 de 1170, asi que hay 197px de margen: cabe mientras el recorte sea menor).
       Por encima de 2:1 se queda anclado abajo, como lo dejo el. Verificado con capturas
       a 2000x1000 (limite exacto: la barca entra completa) y a 1920x900 (sigue abajo).
   (b) el bloque de texto caia mas bajo que en el diseno, porque su margen superior es
       fluido por ANCHO y el hero mide por ALTO. El diseno lo pone al 26,4% del alto
       (309 de 1170): con `min()` se queda en el menor de los dos, asi que nunca baja mas
       que hoy y en pantalla baja sube a su proporcion de diseno.
   (c) la entradilla partia en DOS lineas por debajo de ~1500px y empujaba los botones
       31-34px mas abajo. Su `max-width` encogia mas rapido (72,99vw) que la letra
       (0,857vw): a 1440 pedia 1170px y solo le dabamos 1088, teniendo 1289 libres.
       Con `min(1438px, 100%)` se conserva EXACTO el ancho del diseno a 1920 (1438) y solo
       parte cuando fisicamente no cabe (por debajo de ~1150px, medido).
   Resultado: los 7 anchos de escritorio libres, peor caso +14,5px (1280x800).
   Movil intacto: la regla del ancla lleva `min-width:479px` para no pisar el encuadre
   del 30% de la linea 85, que esta calculado aparte. */
@media (min-width: 479px) {
  /* 🔒 El ancla NO es fija: es la formula que deja la barca lo mas BAJA posible sin
     sacarle la popa del cuadro nunca. Asi respeta lo que pidio Alvaro el 9-ago (que el
     recorte no se coma la barca) Y devuelve el hueco bajo los botones.
       offset = alto del hero - 973 * (ancho / 1920)
     973 es la fila donde acaba la barca en la foto de 1920x1170 (medido sobre
     refs/crops/s01-hero-1920.png: ultima fila con una racha de 40px blancos poco
     saturados en x=150..820). 973/1920 = 50,677%. El `min(0px, ...)` evita que la foto
     baje del borde superior cuando no hay recorte que gastar, y el `max(clamp(...))`
     repite la misma expresion del `min-height` del hero para acertar tambien cuando gana
     el suelo y la pagina hace scroll.
     🔴 La primera version de esto era `@media (max-aspect-ratio: 2/1) { center top }` y
     tenia un agujero que encontro la comprobacion de radio de impacto: a 1891x926 (la
     ventana de Victor CON la barra de administracion de WordPress, proporcion 2,04) se
     quedaba fuera del limite y seguia solapando 106,8px. Medido en 15 ventanas: antes
     4 solapaban (peor -203,8), ahora solo 1 (1920x700, proporcion 2,74, donde el hero ya
     esta en su suelo y la pagina hace scroll) y por 6,8px. La barca entera en las 15. */
  .hero__bg {
    object-position: 50% min(0px, calc(max(clamp(480px, 400.5457px + 19.7635vw, 780px), 100svh) - 50.677vw));
  }
}
/* ACOTADO a >=479px: el movil VERTICAL (402) estaba cerrado en QA y queda intacto
   (comprobado: sigue en 161px y su QA sigue dando 36,83 exacto).
   🔴 Pero OJO, y esto lo destapo la refutacion adversaria del 17-ago: `min-width:479px`
   NO excluye el movil en HORIZONTAL (780x360 tiene 780 de ancho, asi que entra), ni las
   ventanas de escritorio muy bajas. Ahi `26.4svh` tambien muerde, y fuerte: el bloque sube
   74px a 480x360, 103px a 780x360 y 123px a 1100x400. Se deja asi A PROPOSITO, no por
   descuido: en esas ventanas la proa SIGUE tocando el texto incluso con el ascenso puesto
   (medido: -24,5 a 480x360, -32,2 a 780x360, -38,2 a 600x400), asi que quitarlo las
   empeoraria. Lo que no hay para esas medidas es referencia de diseno: el Figma no trae
   movil en horizontal, y el hero ahi ya esta en su suelo y la pagina hace scroll. */
@media (min-width: 479px) {
  .hero__content.hero__content { margin-top: min(clamp(161px, 121.7987px + 9.7503vw, 309px), 26.4svh); }
}
@media (min-width: 992px) { .hero__lead.hero__lead { max-width: min(1438px, 100%); } }

/* --- P2 (Victor 2) · las tarjetas de modelo no tenian SOMBRA --------------------------
   Cierto y era nuestro. En el Figma cada tarjeta es un rectangulo blanco con
   DROP_SHADOW rgba(0,0,0,0.13), desplazamiento 0/0, difuminado 6,1 y extension 1
   (nodos 'Rectangle 14/15/123/124/125/126' de la pagina GAMAS; el mismo efecto que ya
   llevaban los testimonios de la home). Los radios organicos por posicion ya estaban.
   Va en las DOS rejillas que usan la tarjeta: la de gama y "otros modelos" de la ficha. */
.modelos__grid .g-card,
.otros__grid .g-card { box-shadow: 0 0 6.1px 1px rgba(0, 0, 0, 0.13); }

/* --- P4a (Victor 4) · faltaban las LINEAS que separan cada caracteristica --------------
   Cierto y era nuestro. En el Figma es un rectangulo de 3px (2px en el movil de 402) en
   #eff1f7 ENCIMA de cada fila, mas uno de cierre debajo de la ultima de cada columna
   (9 lineas para 8 filas en la columna izquierda de la ficha del 750 Open). */
.specs__col .spec { border-top: clamp(2px, 1.7275px + 0.0665vw, 3px) solid #eff1f7; }
.specs__col .spec:last-child { border-bottom: clamp(2px, 1.7275px + 0.0665vw, 3px) solid #eff1f7; }

/* --- P5 (Victor 5) · las 4 caracteristicas de Savoir faire, sobre FRANJA de color ------
   Cierto y era nuestro. En el Figma es 'Rectangle 172', #f3f0ec, 322px de alto, que
   arranca en x=368 y SANGRA por la derecha (368+1923 se sale del lienzo de 1920).
   Se pinta con un pseudo-elemento de la rejilla para no tocar la estructura de Bricks:
   la seccion ya es `position:relative; overflow:hidden`, asi que la sangria se recorta
   sola. El alto sale del contenido con holgura arriba y abajo (35px en el diseno:
   la franja empieza en 1776 y el primer icono en 1811). */
/* 🔴 `z-index:0` NO es decorativo: sin el, la rejilla no crea contexto de apilamiento y el
   `z-index:-1` del pseudo-elemento lo manda DETRAS del fondo #fdfdfd de la seccion, asi que
   la franja se pinta y no se ve. Se detecto porque el QA dio 4,01 EXACTO antes y despues:
   un numero que no se mueve es que el cambio no ha entrado. */
.msavoir__grid { position: relative; z-index: 0; }
.msavoir__grid::before {
  content: ""; position: absolute; z-index: -1;
  /* aire sobre los iconos: 35px en el diseno (franja 1776, primer icono 1811) */
  top: calc(-1 * clamp(11px, 4.6366px + 1.5817vw, 35px));
  /* por abajo la franja muere en el borde de la seccion, igual que en el diseno (2098 de
     2100). Se le da la holgura del diseno y el `overflow:hidden` de .msavoir la recorta. */
  /* Pere/Alvaro 26-ago: antes -clamp(20..62px), y era una holgura FALSA: la seccion
     crece justo hasta las etiquetas (su min-height solo manda a ~1920), asi que el
     overflow recortaba la franja EN la propia etiqueta y el hueco real era 0 entre 992
     y 1512. El aire de verdad lo pone ahora el padding-bottom de .msavoir__col (mas
     abajo); esto solo tiene que sobrar siempre, el overflow lo recorta. */
  bottom: -50vw;
  /* Pere/Alvaro 26-ago: de lado a lado TAMBIEN por la izquierda. El x=368 del Figma es
     el rectangulo dibujado, pero su borde queda SIEMPRE debajo de la foto en el diseno;
     en la web, entre 992 y ~1900 la foto termina antes que la seccion (106px antes a
     1440, 242 a 992) y el canto recto quedaba a la vista con blanco a su izquierda.
     Full-bleed y que la curva de la foto (z-index 1) se dibuje encima, igual que ya
     haciamos por la derecha. */
  left: -50vw;
  /* SANGRA por la derecha: en el diseno 368+1923 se sale del lienzo de 1920, y en el
     movil de 402 la franja ocupa el ancho entero y sangra por los DOS lados.
     🔴 Un desplazamiento calculado desde el borde de la rejilla NO llega: la refutacion
     del 17-ago lo destapo y al medirlo por pixeles la franja se quedaba 47px corta a 478,
     118 a 600 y 216 a 768, dejando una banda de fondo #fdfdfd a la derecha que el Figma no
     tiene. Con -50vw sobra siempre y lo recorta el `overflow:hidden` de .msavoir. */
  right: -50vw;
  background: #f3f0ec;
}

/* --- P5b · los 4 iconos de Savoir faire caian 62px MAS ABAJO que en el Figma -----------
   Se vio al colocar la franja: quedaba 62px por debajo de donde la dibujo Victor. Medido:
   nuestro parrafo arranca 47px mas abajo que el suyo Y el aire sobre los iconos es de
   120px cuando en el diseno son 74 (su parrafo acaba en 1737 y el primer icono esta en
   1811). Se corrige el segundo, que es el que se puede tocar sin mover la columna entera:
   46 de los 62. Solo en escritorio, para no tocar el movil, que ya estaba cerrado en QA. */
@media (min-width: 992px) { .msavoir__grid.msavoir__grid { margin-top: 74px; } }

/* --- P5c · faltaban los SEPARADORES verticales entre las dos columnas de Savoir faire --
   En el Figma son 'Rectangle 184' y 'Rectangle 185': 2x32 en #a38a78, a x=1415, centrados
   sobre la linea de la etiqueta de cada fila. Victor no los nombra, pero salen en su propia
   captura y estaban igual de ausentes que la franja. Se pintan con el pseudo-elemento de
   los items de la columna IZQUIERDA (1o y 3o), a mitad del hueco de la rejilla. */
.msavoir-item { position: relative; }
.msavoir__grid .msavoir-item:nth-child(odd)::after {
  content: ""; position: absolute;
  width: clamp(1px, 0.7275px + 0.0665vw, 2px);
  height: clamp(14px, 9.2306px + 1.1857vw, 32px);
  background: #a38a78;
  right: calc(-1 * clamp(20px, 12.0477px + 1.9769vw, 50px) / 2);
  bottom: clamp(0px, -0.5303px + 0.1318vw, 2px);
}

/* --- Pere 3 · "aventura" SUBRAYADA entera ----------------------------------------------
   Su decision literal del 17-ago: "com es mou segons mida de pantalla, fiquem tota la
   paraula aventura subratllada i menys problemes". El span lo pone el titular del pie
   (plantilla 111). Grosor y color salen de la barra del Figma ('Rectangle 108', 158x4 en
   #3d372f), que es el mismo color del titular. `text-decoration` y no un pseudo-elemento
   para que siga a la palabra si parte de linea. */
.cta__title .cta-t-underline {
  text-decoration: underline;
  text-decoration-thickness: clamp(2px, 1.4699px + 0.1318vw, 4px);
  text-underline-offset: clamp(5px, 3.6752px + 0.3294vw, 10px);
  text-decoration-color: #3d372f;
  text-decoration-skip-ink: none;
}

/* --- La FRASE de debajo del nombre y el RESUMEN de las tarjetas: tolerantes al vacio -----
   Pere confirma el 17-ago que NO tienen la frase descriptiva de cada embarcacion. Hoy los
   11 campos llevan lorem ipsum, que canta a proposito (y es GATE antes de publicar).
   Esto NO es un bloqueo para nosotros: la frase la pinta el campo, asi que el dia que las
   manden entran solas sin tocar una linea. Lo unico que hacia falta era que el bloque no
   deje un hueco cuando el campo esta vacio, y eso es esto. Si prefieren no ver el lorem
   mientras, se vacia el campo y el bloque desaparece por si mismo.
   Mismo trato para el resumen de las tarjetas, que tambien esta pendiente. */
.phero__claim:empty,
.g-card__text:empty { display: none; }

/* --- Pere 3 (continuacion) · fuera la BARRA de 158x4, que ahora sobra -------------------
   Al subrayar la palabra entera quedaban DOS lineas: el subrayado bajo "aventura" y, 10px
   mas abajo y desplazada a la derecha, la barra suelta del diseno (`Rectangle 108`, 158x4
   en #3d372f). Se veia claramente mal.

   Le dijimos a Pere que esa barra era el adorno de la columna de "Yamaha Motor Europe N.V."
   porque comparten la x (721). Medido en la web, eso era solo media verdad: la columna de
   Yamaha YA tiene su propio filete (`.cta__rule--b`, 74x1 en y=377, gemelo del de la columna
   de Pacific Craft), y esta barra vive arriba pegada al titular (y=248, con la palabra
   "aventura" en y=141..254). O sea que esta debajo del titular, no con la columna, y tapa
   el ultimo 40% de la palabra sobresaliendo por la derecha: exactamente lo que Pere describe
   como "de vegades la linea surt encaixada i de vegades surt be".

   Asi que su decision ("tot subratllat i menys problemes") se cumple quitandola. Se apaga por
   CSS y no se borra de la plantilla: si prefieren la barra y no el subrayado, es una linea.
   🔴 Es una desviacion del Figma y va DICHA en el correo.

   🔴 CLASE DUPLICADA, y no es decorativo: Bricks emite `.cta__bar.brxe-div` (0,2,0) con
   `display:block`, asi que un `.cta__bar` a secas (0,1,0) PIERDE y la barra sigue viendose.
   La primera version de esta regla iba con una sola clase y no hizo nada: el medidor del pie
   la seguia listando con su caja de 158x4. Con la clase repetida se empata en especificidad
   y gana la nuestra por orden (este fichero carga despues del CSS de Bricks). Es la misma
   convencion que ya usaba el bloque movil de la linea 149. */
.cta__bar.cta__bar { display: none; }

/* --- P4b (Victor 4, resto) · faltaban los PUNTOS de cada item y los ICONOS de las 4
   pestañas de "Equipamiento y versiones". Issue MC f2c9776a. -------------------------
   Del componente 717:721 del Figma: cada item lleva una elipse de 7px (5,7 en el movil
   de 402) en #61848c, con el texto 28px a su derecha; y cada pestaña lleva su icono a la
   derecha de la etiqueta (timon de 53x53 en ESTANDAR, y 32x32 en TRENDY, NORTH SHORE y
   OPCIONAL).

   🔴 Los puntos NO se pueden poner solo con CSS: el panel es UN <p> con `white-space:
   pre-line` y un item por linea, y no existe selector para "cada linea". El truco del
   degradado repetido cada 44px se desincroniza en cuanto un item parte en dos lineas.
   Por eso el mu-plugin `pacific-craft-equipo.php` envuelve cada linea en un
   <span class="equipo__li"> y aqui solo se le pone la viñeta.

   🔴 CLASE REPETIDA en lo que pisa a Bricks (`white-space` y `padding-left` vienen del
   _cssCustom y de los ajustes de la clase global `equipo__items`). Misma convencion que
   `.cta__bar.cta__bar` mas arriba. */
.equipo__items.equipo__items.equipo__items {
  --pc-punto: clamp(5.7px, 5.3481px + 0.0863vw, 7px);
  white-space: normal;
  /* el sangrado del texto pasa a la viñeta: asi el punto cae donde lo pone el diseño
     (a la izquierda del bloque) y el texto se queda practicamente donde estaba */
  padding-left: 0;
}
.equipo__li {
  display: block;
  position: relative;
  padding-left: clamp(22.8px, 21.4153px + 0.3432vw, 28px);
  /* un item de dos lineas no se parte entre columnas (en el propio Figma hay uno asi) */
  break-inside: avoid;
}
.equipo__li::before {
  content: '';
  position: absolute;
  left: 0;
  /* la interlinea de este panel es exactamente 2em en TODO el rango fluido (44/22 y
     30/15), asi que 1em es el centro de la primera linea sin necesitar la unidad `lh` */
  top: calc(1em - var(--pc-punto) / 2);
  width: var(--pc-punto);
  height: var(--pc-punto);
  border-radius: 50%;
  background: #61848c;
}
/* 🔴 Por debajo de 768 el panel se queda en UNA columna. Con 3 columnas de ~118px el
   texto ya partia en dos lineas (medido a 402 antes de este cambio) y con la viñeta y su
   hueco no cabria nada. Ademas el Figma movil (874:999) no tiene pestañas ni columnas:
   ese bloque es un acordeon de filas a ancho completo. */
@media (max-width: 767px) {
  .equipo__items.equipo__items.equipo__items { column-count: 1; }
}

/* --- iconos de las pestañas ---------------------------------------------------------
   Van en SVG EN LINEA (no <img>) a proposito: el diseño pinta el icono de la pestaña
   activa en #1a345c y los de las inactivas en #9fbcbf, que son los mismos colores del
   texto. Con `currentColor` el icono sigue el estado el solo y no hace falta ni una
   segunda imagen ni un filtro de color. */
.equipo__tab.equipo__tab {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 6.6682px + 0.33vw, 13px);
}
.equipo__tab-icono {
  --pc-ico: clamp(20.5px, 17.4469px + 0.7582vw, 32px);
  flex: 0 0 auto;
  width: var(--pc-ico);
  height: var(--pc-ico);
  color: inherit;
  /* 🔴 El icono NO puede estirar la fila de pestañas. En el Figma el timon SOBRESALE del
     renglon del texto (asoma 15px por arriba y acaba 3px antes por abajo), no lo empuja.
     Sin estos margenes negativos la fila pasaba de 24 a 53px de alto en 1920 y arrastraba
     29px hacia abajo la linea gris y las tres columnas de items: medido, el bloque se
     alejaba del diseño (panel a +64px en vez de +35) y el QA por recorte subia de 16,09 a
     19,75 aunque cada pieza estuviera mejor colocada. El descuento es la mitad de lo que
     el icono se pasa de la interlinea de la pestaña. */
  margin-block: calc((clamp(16px, 13.8738px + 0.5277vw, 24px) - var(--pc-ico)) / 2);
}
/* el timon de ESTANDAR va en una caja de 53 (el dibujo ocupa 37,4 dentro). Va DESPUES para
   ganarle a la regla de arriba por orden: las dos tienen la misma especificidad. */
.equipo__tab-icono--estandar {
  --pc-ico: clamp(34px, 28.9607px + 1.2523vw, 53px);
}
/* El subrayado de la pestaña activa (.equipo__tab::after, left:0 right:0) pasa a abarcar
   etiqueta E icono sin tocar nada, porque el icono ya vive dentro del <p>. En el Figma es
   asi: el Rectangle 165 mide 249px y llega hasta pasado el timon. */
/* 🔴 Con los iconos, la fila de pestañas parte antes en movil (a 402 quedan 2+2 en vez de
   3+1) y se hizo visible un defecto que ya estaba: el subrayado de la pestaña activa vive
   13px por debajo de su caja (bottom -10px + 3px de alto) y el hueco entre filas era de 8,
   asi que la raya de ESTANDAR se pintaba ENCIMA de "NORTH SHORE". Se separa lo justo. */
@media (max-width: 767px) {
  .equipo__tabs.equipo__tabs { row-gap: 18px; }
}

/* --- La Marca: la rejilla de los 4 sellos se sale de la pantalla entre 992 y 1184 ----
   .msavoir__col reserva la mitad izquierda para la foto (padding-left: 50vw). Entre
   992px (donde acaba el apilado) y ~1184px eso deja a la columna derecha menos sitio
   que los 2 x 253px que piden las pistas, la caja de la rejilla se queda corta y las
   pistas se desbordan HACIA LA DERECHA, fuera de la ventana.

   🔴 El issue 4b121684 lo describia como "las 2 etiquetas se cortan entre 992 y 1024".
   Eso era el SINTOMA, no el alcance (medido el 2026-08-24): la etiqueta va centrada
   dentro de su sello, asi que solo asoma por el borde mientras es lo bastante ancha.
   El sello se sale igual hasta 1184, solo que sin que se note. Desborde real: 34px a
   992, 28 a 1024, 15 a 1100, 3 a 1168, 0 a partir de 1184.

   Arreglo: recortar el padding-left LO JUSTO en esa banda, de 44px a 992 hasta 0 a
   1200, para que la caja quepa. Como los hijos de .msavoir__col se pegan al borde
   derecho (align-items: flex-end), ensanchar la caja mueve el bloque a la izquierda y
   deja de salirse, sin tocar el ancho de las pistas.
   🔒 Se descarto minmax(0, ...) sobre las pistas, que era mas corto: encogia las pistas
   tambien donde ya cabian y movia los iconos 12px a 1920 y 32px a 1440, que son los dos
   anchos contra los que se cerro el pixel-perfect.
   🔒 Doble clase A PROPOSITO: por debajo de 992 manda la regla de apilado de arriba,
   que es de triple clase, y esta no debe pisarla. */
.msavoir__col.msavoir__col {
  padding-left: calc(clamp(201px, -0.0076px + 50.0007vw, 960px) - clamp(0px, 253.8px - 21.15vw, 44px));
}

/* --- Ficha: video de cabecera (Pere 25-ago: fotos/videos por modelo) ----------------
   El video hereda la geometria flex de la imagen del hero (clase global phero__img) y
   esta clase encaja el <video> interno en esa caja. Autoplay silencioso en bucle;
   el poster es la foto de cabecera del modelo, asi que sin JS o con el video aun
   cargando se ve exactamente lo mismo que antes. */
.phero__video { position: relative; overflow: hidden; }
.phero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Pere 26-ago · punto 10 · La Marca: la FRANJA se pintaba ENCIMA de la foto ---------
   Su captura: la banda beige corta la foto con un canto vertical recto y el bloque de
   los 4 iconos queda flotando en medio. Medido contra el Figma a 1920:

     diseno  franja y 1776..2097, borde izquierdo CURVO de x=855 (arriba) a x=576 (abajo)
     web     franja y 1702..2009, borde izquierdo RECTO en x=368, cortando la foto

   🔒 NO es una regresion reciente: esta igual en la copia ANTES-2026-08-20, o sea desde
   que se anadio la franja el 17-ago. El rectangulo del Figma SI arranca en x=368 (por eso
   se dibujo asi y la medida era correcta), pero en el diseno va DEBAJO de la foto: lo que
   dibuja ese borde curvo es el redondeo de 344px de la esquina inferior derecha de la
   foto, que ya estaba puesto y no se veia porque la franja lo tapaba.

   Arreglo: la foto pinta POR ENCIMA de la franja. `.msavoir__grid` ya crea contexto de
   apilamiento con `z-index:0` (ver P5a), asi que basta subir la foto a z-index 1.
   🔒 Solo afecta a escritorio: por debajo de 992px la regla de apilado pone la foto en
   `position:static` y el z-index no aplica a un elemento estatico.
   🔒 Comprobado que la foto NO puede tapar el texto en ningun ancho: su borde derecho va
   de 856 (a 1920) a 443 (a 992) y la columna de texto arranca en 960 y 496; la holgura
   minima es de 53px, a 992. */
.msavoir__img.msavoir__img { z-index: 1; }

/* --- Pere 26-ago · punto 10b · los 4 iconos caian 47px a la IZQUIERDA del Figma -------
   Medido sobre las etiquetas de la 2a fila a 1920, alineando por la seccion:
     diseno  centros en 1190,5 y 1640,5     web  1143,5 y 1594     -> -47px las dos
   El titular y el parrafo si estan en su sitio (±14px, ruido de render de glifos), asi
   que el desajuste es solo de la rejilla, y son dos sumandos exactos:
     21px del `margin-right` de su CSS generado
     26px del override `padding-right: var(--pc-pad-x)` (105 a 1920; el diseno usa 79)
   Se compensan JUNTOS sobre el propio margin-right, en fluido y solo de 1200 para
   arriba, para no tocar la banda 992-1200 que se cerro el 24-ago (desborde de las
   pistas) ni el movil.
   🔒 La formula es CONTINUA en el limite: a 1200 da 11,04px, exactamente lo mismo que la
   clamp original, asi que no hay salto al cruzar el media query. Comprobado:
     1200 -> 0px de desplazamiento · 1440 -> 15,7 · 1920 -> 47,0 */
@media (min-width: 1200px) {
  .msavoir__grid.msavoir__grid { margin-right: clamp(-26px, 72.7644px - 5.1437vw, 11.04px); }
}

/* --- Pere 26-ago · punto 2 · mosaico de galeria con SOLO 3 fotos ----------------------
   Pere confirma que de la gama Timonier no hay mas fotos ("per ara es queda tal qual"),
   asi que las 2 fichas Timonier se quedan en 3 y el mosaico, disenado para 4, dejaba un
   hueco abajo a la derecha. Con 3, la tercera pasa a ocupar la fila entera y hereda el
   redondeo grande de la esquina inferior derecha que llevaba la cuarta.
   🔒 Se activa SOLO si no existe la 4a, asi que las 9 fichas con 4 fotos no se tocan.
   🔒 `:has()` ya se usaba en este mismo fichero para ocultar la seccion sin fotos. */
.pgal__grid:not(:has(.pgal__item:nth-child(4))) .pgal__item:nth-child(3) {
  grid-column: 1 / 6;
  border-radius: 0 0 141px 14px;
}

/* --- Pere 26-ago · punto 7 · a las tarjetas del BLOG les faltaba la sombra del Figma ---
   "veiem que falta la linea/ sombra al voltant de cada articles segons disseny figma".
   Medido en index-1920 del Figma, perfil de gris hacia fuera del canto de la tarjeta:
     236 · 241 · 246 · 250 · 253 · 254 · 255   (izquierda, derecha y abajo, simetrico)
   O sea ~5px de alcance y 7,5% de negro pegado al canto. Una sombra CSS sin
   desplazamiento vale la mitad de su alfa justo en el canto, asi que el alfa sale 15%.
   🔒 El BLUR se midio, no se dedujo: la cuenta teorica daba 12px y al renderizarlo la cola
   llegaba 16px hacia fuera, el triple que en el Figma. Probados 5, 6 y 8 y comparado el
   perfil pixel a pixel contra el diseno, gana blur 5:
     diseno  255 254 255 252 250 246 241 236   (x 94..101, canto en 101)
     blur 5  253 253 253 252 250 247 243 237
     blur 8  252 251 250 248 245 243 240 236
   Arriba no se ve en el diseno porque la foto sobresale 10px por encima de la caja blanca
   y la tapa; con la sombra en `.bcard` sale igual sin tener que tocar nada mas.
   🔒 Doble clase para ganar a la clase global de Bricks pase lo que pase con el orden de
   carga de las hojas. */
.bcard.bcard { box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

/* --- Pere/Alvaro 26-ago · aire REAL bajo los 4 sellos de Savoir faire ------------------
   La seccion crece hasta donde llega su contenido, y el ultimo contenido son las
   etiquetas de la 2a fila: entre 992 y 1512 el hueco medido entre "Casco en V profunda"
   y el final de la franja era LITERALMENTE 0px (a 1920, 46 frente a los ~71 del diseno,
   porque ahi el min-height de la seccion aun sobraba). El aire se pone como padding del
   contenedor, que si empuja el borde de la seccion; la franja llega hasta ese borde
   porque su bottom sobra siempre (-50vw) y el overflow lo recorta.
   Formula continua de 402 a 1920: 30px en movil, ~59 a 1440, 73 a 1920 (el diseno da 71
   y se redondea a la escala del resto de clamps del bloque). */
.msavoir__col.msavoir__col { padding-bottom: clamp(30px, 18.6127px + 2.8327vw, 73px); }

/* --- Pere 27-ago · el "DESCARGAR CATALOGO" salia PEGADO al pie en las interiores --------
   Su captura: el boton del catalogo tocando la caja beige de abajo, y "a la home surt OK".
   Medido (distancia entre el borde inferior del boton y el final de la seccion, o sea el
   arranque del pie):

     ancho    /embarcaciones/ (.espera)    portada (.form)
     1920           0 px                        80 px
     1440           13                          68
     1200           19                          61
      991           25                          55
      767           31                          49
      402           40                          40

   O sea que `.form` lleva su `padding-bottom` desde que se arreglo lo mismo en la home
   ("antes: 0 de padding-bottom, el catalogo tocaba el pie") y `.espera`, que es la MISMA
   banda extraida a la plantilla de seccion 702, nunca lo tuvo. Se le pone identico, que
   ademas es la referencia que el mismo da.
   🔒 El Figma da 18 px a 1920 (boton y=4020 h=80 -> 4100; el rectangulo del pie arranca en
   4118) y la home publicada da 80. Se elige la HOME a proposito: es lo que Pere valida y
   deja las dos bandas iguales; ir al valor del diseno dejaria la interior mas apretada que
   la portada y volveria a leerse como el mismo fallo.
   🔒 Doble clase: esta banda vive en la plantilla 702 y su CSS de clases globales de Bricks
   se imprime DESPUES de esta hoja (gotcha del 26-ago), asi que los empates a (0,2,0) los
   gana Bricks. Con la clase doblada gana por especificidad, que no depende del orden.
   🔒 Queda un flat 80 a TODOS los anchos, y NO se ajusta para clavar la curva de la portada,
   aunque se podria: medida la "cola" estructural de esta banda (lo que la seccion sobresale
   por debajo del boton sin contar el padding) en 11 anchos, sale EXACTAMENTE el complemento
   del clamp de la portada, 0,1px arriba o abajo:
     402  600  767  900  991 1100 1200 1440 1600 1800 1920
      40 34,8 30,4 26,9 24,5 21,6   19 12,6  8,4  3,1    0     <- cola
      40 45,2 49,6 53,1 55,5 58,4   61 67,4 71,6 76,8   80     <- padding de la portada
      80   80   80   80   80   80   80   80   80 79,9   80     <- suma
   O sea que con `clamp(0px, -21,19px + 5,27vw, 80px)` el hueco VISIBLE seria identico al de
   la portada en todos los anchos. No se hace: a 402 ese clamp vale 0 y el aire vendria
   ENTERO de la cola, que es geometria del panel verde. El dia que el panel cambie, el movil
   vuelve a 0 px, que es justo el fallo que estamos arreglando. Con el flat, el aire nunca
   puede desaparecer y a 1920 (el ancho del diseno) coincide con la portada al pixel. El
   precio es 40px de blanco de mas en movil, que no se lee como defecto.
   Radio: 15 URLs (Embarcaciones + los 3 archivos de gama + las 11 fichas). Son 3 gamas, no
   4: los Sun Cruiser cuelgan del termino "WA & Deck". La portada NO se toca: conserva su
   variante propia con `.form`. */
.espera.espera { padding-bottom: clamp(40px, 29.4072px + 2.635vw, 80px); }

/* --- 28-ago · HERO de la HOME en MOVIL: el encuadre del Figma, por fin ------------------
   Issue MC d63f206e, que estaba BLOQUEADO desde el 13-ago con este diagnostico: "el diseno
   movil usa 21% MAS de foto por arriba y 15% por abajo de lo que contiene nuestro webp", y
   un barrido de object-position de 0 a 100% confirmando que 30% era lo mejor posible. Era
   cierto: `hero-home.webp` es la VENTANA DE ESCRITORIO de la foto, y lo que falta no esta
   dentro. No se podia arreglar moviendo el encuadre, hacia falta el ORIGINAL.
   🟢 Lo desbloquea el hallazgo de hoy: el 429 de Figma es solo del endpoint de RENDER
   (/v1/images); los originales se piden por /v1/files/<key>/images, que tiene su propia
   cuota y esta abierto. El original del hero (imageRef eb555b18..., 4096x2724) NO estaba en
   refs/figma-src/ y ahora si.
   El nodo movil (702:328 del frame RESPONSIVE HOME) usa la MISMA foto que el de escritorio
   (179:23) con otro recorte: ventana 1029x2271 en +1159+124, que cae ENTERA dentro del
   original. Activo generado a esa resolucion nativa (sin remuestrear) y con los filtros del
   fill igualados por estadistica de canal contra refs/mobile-home.png.
   Medido despues, contra el diseno a 402x888:
     el casco del barco arranca en y=479 en los dos
     tono de la banda limpia: web R69,6 G114,6 B117,8 · diseno R70,2 G114,7 B118,8
   El aspecto del activo (1029/2271 = 0,4531) es el de la caja (402/888 = 0,4527), asi que
   `cover` no recorta nada y el object-position pasa a ser irrelevante: se pone 50% 50% para
   que no mande el 30% que Bricks emite en su breakpoint movil.
   🔒 URL RELATIVA a proposito: esta hoja se sirve desde uploads/pacific-assets/, y con una
   absoluta el activo se quedaria apuntando al dominio del lab al publicar.
   🔴 Coste conocido, a resolver al publicar: `content:url()` sustituye lo que se PINTA, pero
   el navegador se sigue descargando el `src` original del <img> (124 KB de mas en movil).
   La via sin ese coste es un <picture> con <source media>, que pide tocar el markup del
   elemento de Bricks. Anotado en el checklist de publicacion.
   Radio: solo la home y solo por debajo de 479. */
@media (max-width: 478px) {
  .hero__bg.hero__bg {
    content: url("../2026/08/hero-home-movil.webp");
    object-position: 50% 50%;
  }
}


/* --- PUNTO 11 de Pere (2026-08-31): el menu principal no se ve bien sobre la foto de
   cabecera de /la-marca/ en pantallas grandes --------------------------------------

   🔴 CORREGIDO el 1-sep. La primera solucion (un velo oscuro sobre la foto, copiado del
   hero de la portada) NO servia, y se dio por buena sin comprobarlo: se verifico que el
   velo se APLICABA, no que el menu se LEYERA. Medido despues: el peor contraste pasaba de
   1,05:1 a 1,13:1, cuando el minimo exigible es 4,5:1.

   🔴 Y el motivo por el que se descarto el menu oscuro tambien era falso. Se dio por hecho
   que "el resto de la foto es oscura y un menu oscuro se perderia a la derecha", sin
   medirlo. Medido de 1200 a 3200 px, detras de los SIETE elementos de la cabecera (logo,
   los 4 enlaces, el "ES" y el boton CONTACTAR) el fondo es CLARO en todos los casos:

       texto blanco    1,03:1  ..  3,18:1   -> suspende en todos
       texto #24231d   4,96:1  .. 15,35:1   -> pasa AA en todos

   Asi que esta pagina pasa al TERCER estado de cabecera que el proyecto ya tiene (menu
   oscuro + logo oscuro), el mismo del hub, las gamas, las fichas y el 404. No es un
   invento: es la regla de mas abajo, a la que solo se le añade esta pagina.

   ⚠️ El diseño dibuja el menu en BLANCO tambien aqui, asi que esto se aparta del Figma y va
   dicho al cliente. Para mantenerlo blanco haria falta otra foto o un velo de verdad, y eso
   cambia el aspecto del hero. Lo decide el. */


/* --- PUNTOS 2 y 4 de Pere (2026-08-31): el "+" de la PORTADA -------------------------
   El desplegable en si no necesita estilos nuevos: las tarjetas de la portada reutilizan
   las clases .g-card__panel* de la pagina de gama, asi que heredan su CSS entero. Lo que
   si hace falta es lo que depende de la POSICION de cada tarjeta, que en la portada no se
   resuelve con nth-child porque cada tarjeta lleva su propia clase medida del Figma.

   1) La esquina del panel sigue a la de SU tarjeta (peticion de Victor del 25-ago): donde
      la foto tiene la esquina superior izquierda redonda, el panel tambien, o la curva se
      come el panel. Son las cuatro tarjetas cuyo radio TL es grande, medido en sus clases
      globales: open-2 (48->100px), wa-2 (43->90), wa-3 (48->100) y tim-2 (44->140). */
.boat-card__media--open-2 .g-card__panel,
.boat-card__media--wa-2   .g-card__panel,
.boat-card__media--wa-3   .g-card__panel,
.boat-card__media--tim-2  .g-card__panel {
  border-radius: 60px 14px 14px 14px;
  padding-top: clamp(18px, 14px + 1vw, 30px);
  padding-left: clamp(20px, 16px + 1vw, 32px);
}

/* 2) La Gama Open pasa de 3 tarjetas a 6, asi que la tercera deja de ser la ultima de la
      fila y necesita el hueco que antes no tenia (su clase --open-3 lleva margin-right:0
      justo porque cerraba la fila). El 1,052% es la media de los dos huecos que ya usan
      la 1a y la 2a (1,111% y 0,994%), o sea el mismo ritmo, no un valor nuevo.
      Se acota con :not(:last-child) para que la ULTIMA siga cerrando a cero. */
.gama__cards .boat-card--open-3:not(:last-child) { margin-right: 1.052%; }

/* 3) El "+" tiene que verse como pulsable ahora que lo es. */
.boat-card__plus { cursor: pointer; }
.boat-card__plus:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* --- PUNTO 3 de Pere: estado SELECCIONADO del selector de gamas ----------------------
   🔴 Este estado NO esta en el diseño: el Figma dibuja los cuatro rotulos iguales porque
   hasta ahora eran enlaces a otra pagina, no un selector. En cuanto filtran en el sitio,
   sin marca visible no hay forma de saber que has elegido.
   Se resuelve con el recurso que la propia portada ya usa para señalar: el subrayado navy
   del titular de gama (.gama__rule). Nada de color nuevo ni de fondo: es un cambio de dos
   propiedades y se deshace borrando esta regla. Queda dicho al cliente por si prefiere
   otra marca. */
.gamas-nav__link.is-activa {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

/* --- PUNTO 10: el vídeo de la cabecera de /embarcaciones/ ----------------------------
   El elemento de video de Bricks envuelve el <video> en un div, y la clase global cae en
   el ENVOLTORIO. Estas tres lineas son las que hacen que el video llene esa caja igual que
   llenaba la foto (que traia su object-fit en la propia clase).
   El fondo navy evita el destello blanco del primer fotograma mientras carga. */
.hub-hero__video { overflow: hidden; background-color: #1a345c; }
.hub-hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 🔒 Quien haya pedido "reducir movimiento" en su sistema no deberia recibir un video que
   arranca solo. No se puede impedir el autoplay desde CSS, asi que al menos se congela:
   se para la animacion del propio elemento. La pausa de verdad la hace el JS de abajo. */

/* --- Las flechas del carrusel de gama, POR ENCIMA de las tarjetas -------------------
   🔴 Defecto encontrado por Álvaro el 1-sep: en la Gama Open no se podía pasar a la
   derecha; las flechas no respondían y solo se avanzaba con la rueda del ratón.

   La causa NO era el JS. `.gama__nav` es absolute y NO llevaba z-index, mientras que
   `.boat-card__media` lleva z-index:1. En el mismo contexto de apilado, un elemento
   posicionado con z-index:1 se pinta ENCIMA de uno con z-index:auto, así que la foto de
   la tarjeta quedaba sobre la flecha: tapada y, sobre todo, sin recibir el clic.
   Medido: elementFromPoint en el centro exacto del botón devolvía IMG.boat-card__img, y
   Playwright no podía pulsarlo (el clic caducaba a los 30 s).

   🔴 Estaba así desde que se construyó la sección, pero no se notaba: con 3 tarjetas por
   gama no había nada que desplazar, las dos flechas salían en aria-disabled y nadie las
   pulsaba nunca. Al completar la Gama Open a 6 el defecto salió a la luz. Es el caso de
   libro del guardarraíl que nunca ha dicho que sí.

   z-index 3, no 2: 1 lo tiene la foto de la tarjeta y 2 el cuerpo blanco en algunas. */
.gama__nav, .otros__nav { z-index: 3; }

/* --- portada: cuerpo blanco con sombra en las 11 tarjetas de barco (2-sep-2026) ----------
   Pere (correo 2-sep): "ha saltat l'ombra de cada tarjeta ... tal i com està en el figma".
   En el Figma de la home las 8 tarjetas llevan un rectángulo blanco de fondo con
   DROP_SHADOW rgba(0,0,0,0.13), difuminado 6,1 y extensión 1 (el mismo que ya lleva
   .otros__grid .g-card), con esquinas inferiores 70 (derecha) y 20 (izquierda); en las
   Timonier 26. Las esquinas SUPERIORES copian las de la foto (.boat-card__media) para que
   el blanco no asome por detrás de la curva: en el diseño el rectángulo empieza más abajo
   justo por eso. Radio: solo la portada (las tarjetas de gama y ficha son .g-card).
   🔴 Va aquí y no en la clase global porque el radio depende de cada tarjeta. */
.boat-card.boat-card {
  background-color: #ffffff;
  box-shadow: 0 0 6.1px 1px rgba(0, 0, 0, 0.13);
  border-radius: 14px 100px 70px 20px;
}
.boat-card--open-2.boat-card { border-radius: 100px 14px 70px 20px; }
.boat-card--open-3.boat-card { border-radius: 14px 115px 70px 20px; }
.boat-card--wa-1.boat-card   { border-radius: 14px 115px 70px 20px; }
.boat-card--wa-2.boat-card   { border-radius: 90px 90px 70px 20px; }
.boat-card--wa-3.boat-card   { border-radius: 100px 14px 70px 20px; }
.boat-card--tim-1.boat-card  { border-radius: 14px 140px 70px 26px; }
.boat-card--tim-2.boat-card  { border-radius: 140px 14px 70px 26px; }
/* El carril es overflow:auto (carrusel) y recortaría la sombra por arriba y por abajo:
   8px de aire dentro, compensados fuera para que las tarjetas no se muevan ni un píxel. */
.gama__cards.gama__cards { padding-top: 8px; padding-bottom: 8px; margin-bottom: -8px; }
/* el margen superior es el de cada carril (clase global) menos los 8px de aire:
   open y wa comparten valor, tim tiene el suyo (clamp 16..53). */
.gama__cards.gama__cards,
.gama__cards--wa.gama__cards--wa { margin-top: calc(clamp(19px, 16.8738px + 0.5277vw, 27px) - 8px); }
.gama__cards--tim.gama__cards--tim { margin-top: calc(clamp(16px, 6.1939px + 2.4381vw, 53px) - 8px); }

/* --- desplegable de EMBARCACIONES en el menú (2026-09-02) -------------------------------
   Peticion del cliente tras la reunion del 2-sep. El HTML lo genera pacific-craft-menu.php
   y lo coloca el bloque 9 de pacific-ui.js.

   🔴 ACTUALIZADO 4-sep: cuando se maqueto (2-sep) el mega menu NO estaba en el Figma y se
   monto con el lenguaje del sitio (superficie #f3f0ec, a sangre). El 4-sep La Bendita mando
   su propuesta y esto pasa a seguirla. Medido sobre su PNG de 1920 (inbox/HUB/megamenu):
   panel de 1105x410 PEGADO A LA DERECHA (x=815..1920, y=132..542), fondo BLANCO, esquina
   inferior izquierda redondeada 120 px y las otras tres rectas, columnas en x=889/1177/1541
   (o sea 74 px de padding izquierdo y 56 de separacion), 106 px de margen derecho, y un
   perfil de barco detras de cada titulo de gama.
   Todo va en vw contra 1920 y con suelo a 992, que es la convencion del resto del sitio.
   Por encima de 1920 el panel NO se va al borde de la ventana: el padding-inline de
   `.nav-drop` lo devuelve al area de contenido centrada, que es donde vive la cabecera. */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 6;
  padding-inline: max(0px, calc((100% - 1920px) / 2));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
.nav-drop[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; }
.nav-drop__inner {
  width: 57.5521%;
  max-width: 1105px;
  /* 🔴 El 57,55% sale de SU diseno, que esta hecho a 1920. A 992 esos 571 px no dan para
     las tres columnas y el panel desbordaba la pantalla 25 px (medido; antes de esto era 0).
     `min-width: fit-content` deja el panel exactamente en 1105 a 1920 y solo lo ensancha
     hacia la izquierda cuando el contenido no cabe. De paso evita que un nombre de modelo
     parta en dos lineas a anchos intermedios, que hacia bailar el alto del panel. */
  min-width: fit-content;
  margin: 0 0 0 auto;
  background-color: #ffffff;
  border-radius: 0 0 0 clamp(62px, 6.25vw, 120px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  display: flex;
  gap: clamp(27.9px, 2.8125vw, 54px);   /* 56 en su diseno; 54 para que el panel clave los 1105 px */
  padding: clamp(27.4px, 2.7604vw, 53px) clamp(54.8px, 5.5208vw, 106px)
           clamp(36.2px, 3.6458vw, 70px) clamp(38.2px, 3.8542vw, 74px);
}
.nav-drop__col { display: flex; flex-direction: column; }
.nav-drop__gama {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  /* 26 px a 1920: calibrado contra su PNG, donde "Gama open" mide 148 px de ancho y la
     mayuscula 19 px de alto. Suelo a 17 px (a 992) para no volver a bajar del minimo
     legible de 12 px, que es justo lo que estamos discutiendo con ellos (issue 1bda9fff). */
  font-size: clamp(17px, 7.38px + 0.9698vw, 26px);
  line-height: 1.3;
  color: #182f51;
  text-decoration: none;
  margin-bottom: clamp(12px, 1.1979vw, 23px);
  display: inline-flex;
  align-items: center;
  gap: clamp(9.3px, 0.9375vw, 18px);
  white-space: nowrap;
}
/* El perfil de barco de cada gama. Se elige por el DESTINO del enlace y no por su posicion,
   porque las columnas salen de la taxonomia: si algun dia entra una gama nueva, saldra sin
   icono (visible y facil de arreglar) en vez de heredar el del vecino. */
.nav-drop__gama::after {
  content: "";
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 7-sep-2026: los tres pasan de PNG a 1x (que se veian borrosos en pantalla retina) a los
   SVG que mando Victor. Y con ellos se corrige un CRUCE: hasta hoy "Gama open" llevaba el
   dibujo de WA & Deck y al reves. Se ve midiendo el ancho de la tinta en su Figma
   (open 70 px, WA & Deck 53 px) contra lo que serviamos (54 y 70). Por eso ademas de la
   imagen se intercambian las cajas. Tinta de los tres: #1A345C, el navy de la marca. */
.nav-drop__gama[href*="/gama/open/"]::after {
  width: clamp(36.7px, 3.6979vw, 71px); height: clamp(8.8px, 0.8854vw, 17px);
  background-image: url("iconos/icono-gama-open.svg");
}
.nav-drop__gama[href*="/gama/wa-deck/"]::after {
  width: clamp(27.9px, 2.8125vw, 54px); height: clamp(10.3px, 1.0417vw, 20px);
  background-image: url("iconos/icono-gama-wa-deck.svg");
}
.nav-drop__gama[href*="/gama/timonier/"]::after {
  width: clamp(27.9px, 2.8125vw, 54px); height: clamp(11.4px, 1.1458vw, 22px);
  background-image: url("iconos/icono-gama-timonier.svg");
}
.nav-drop__gama:hover, .nav-drop__gama:focus-visible { text-decoration: underline; }
.nav-drop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: clamp(11px, 0.8542vw, 16.4px); }
.nav-drop__link {
  font-family: Lexend, sans-serif;
  font-weight: 400;
  /* 19 px a 1920: en su PNG "Pacific Craft 500 Open" mide 214 px y la mayuscula 14 px.
     Suelo a 14 px (a 992), por el mismo motivo que el titulo. */
  font-size: clamp(14px, 8.655px + 0.5388vw, 19px);
  line-height: 1.35;
  color: #494949;
  text-decoration: none;
}
.nav-drop__link:hover, .nav-drop__link:focus-visible { color: #61848c; }
/* Por debajo de 991 manda el menú móvil: el panel no existe ahí. */
@media (max-width: 991px) { .nav-drop { display: none; } }

/* --- menú móvil: el mismo submenú, en acordeón ---------------------------------------- */
.menu-sub__fila { display: flex; align-items: center; column-gap: 10px; }
.menu-sub__toggle {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
/* El signo, dibujado con dos barras: la vertical desaparece al abrir y queda el guion. */
.menu-sub__toggle::before, .menu-sub__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #494949;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}
.menu-sub__toggle::before { width: 13px; height: 1.5px; }
.menu-sub__toggle::after { width: 1.5px; height: 13px; }
.menu-sub__toggle[aria-expanded="true"]::after { opacity: 0; }
.menu-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  margin-top: 14px;
}
.menu-sub[data-cerrado] { display: none; }
.menu-sub__gama {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: #182f51;
  text-decoration: none;
}
.menu-sub__gama:not(:first-child) { margin-top: 8px; }
.menu-sub__link {
  font-family: Lexend, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  color: #494949;
  text-decoration: none;
}

/* --- móvil: aire por debajo del logo en la cabecera (2026-09-02) -----------------------
   Petición del cliente tras la reunión del 2-sep ("logo cortado", 3 capturas de móvil).
   Medido: por debajo de 479 la cabecera va en COLUMNA con padding 68/20/0, así que el logo
   termina EXACTAMENTE en el borde inferior de la caja (aire 0). Arriba del todo no se nota
   porque el fondo es transparente sobre la foto; en cuanto la cabecera pasa al estado fijo
   (.scrolling, con fondo blanco), la barra acaba a ras del logo y el trazo "PACIFIC CRAFT"
   queda pisando el contenido: eso es lo que se ve en sus capturas.
   El valor NO se inventa: de 479 en adelante el propio maquetado deja 21 px de aire bajo el
   logo (medido a 479, 767, 991 y 1024). Se replica ese 21. La cabecera es position:absolute,
   así que crecer 21 px no empuja nada de la página. */
@media (max-width: 478px) {
  .site-header .site-header__inner { padding-bottom: 21px; }
}

/* --- menú móvil: alto máximo y scroll propio (2026-09-02) ------------------------------
   Al añadir el submenú de EMBARCACIONES el menú pasa de 332 a 802 px de alto, y CONTACTAR
   se iba fuera de la pantalla (medido: llega a 920 en una ventana de 850, 844 y 640). Se
   llegaba haciendo scroll de la página entera, que no es lo que espera nadie en un panel
   flotante. Se le da alto máximo y scroll propio, con la barra oculta como en los carruseles.
   Los 170 px descontados son el alto de la cabecera móvil (148) más el aire de debajo. */
.site-menu.site-menu.site-menu {
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  scrollbar-width: none;
}
.site-menu.site-menu.site-menu::-webkit-scrollbar { display: none; }

/* ======================================================================================
   PÁGINA DE DISTRIBUIDORES (post 790) — 2026-09-02
   Frame de Figma: INDEX (escritorio, 1920x3912) y RESPONSIVE INDEX (móvil, 402x4603),
   exportados a mano por Álvaro porque el render de Figma está agotado hasta el 7-sep.
   Mapa de secciones y medidas: build/MAPA-DISTRIBUIDORES.md
   El localizador y el formulario son CLONES de las secciones 9 y 10 de la portada (mismos
   nombres de clase, así que heredan su CSS); lo de aquí abajo es solo lo propio de la página.
   ====================================================================================== */

/* --- hero -----------------------------------------------------------------------------
   Medido sobre el PNG: alto 884 a 1920 y 849 a 402; margen izquierdo 106 / 44; el bloque de
   texto acaba a 111 / 66 px del fondo. El titular tiene 71 px de altura de mayúscula a 1920
   (≈98 de cuerpo) con 84 de interlineado, y 36 (≈50) con 50 a 402. */
.dhero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #3d372f;
  min-height: clamp(849px, 839.73px + 2.306vw, 884px);
  padding-bottom: clamp(66px, 54.08px + 2.965vw, 111px);
}
.dhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.dhero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: clamp(44px, 27.58px + 4.085vw, 106px);
  padding-right: clamp(24px, 14.19px + 2.438vw, 61px);
}
.dhero__title {
  font-family: "Lexend Deca", Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(50px, 37.29px + 3.162vw, 98px);
  line-height: clamp(50px, 41px + 2.24vw, 84px);
  letter-spacing: clamp(-4px, -1.2097px - 0.1456vw, -1.8px);
  color: #fafafa;
  margin: 0;
}
.dhero__lead {
  font-family: Lexend, sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 14.62px + 0.593vw, 26px);
  line-height: clamp(26px, 24.68px + 0.329vw, 31px);
  color: #ffffff;
  max-width: 880px;
  margin-top: clamp(30px, 26.29px + 0.922vw, 44px);
}

/* --- bloque de las tres ventajas ------------------------------------------------------
   Tres tarjetas de 540 px con 42 de separación a 1920 (106 + 540·3 + 42·2 + 110 = 1920).
   Filete de 3 px a la izquierda en azul de marca y las esquinas grandes del sitio: la 1ª
   redondea abajo a la izquierda y la 3ª arriba a la derecha, igual que el patrón de las
   tarjetas de barco. */
.dvent {
  background-color: #ffffff;
  padding-top: clamp(28px, 21.4px + 1.64vw, 53px);
  padding-bottom: clamp(30px, 22px + 1.99vw, 60px);
}
.dvent__inner {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 2.29px + 5.4vw, 106px);
  padding-right: clamp(24px, 1.5px + 5.6vw, 110px);
}
.dvent__title {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 20.9px + 1.27vw, 45px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1f3864;
  margin: 0 0 clamp(20px, 14.7px + 1.32vw, 40px);
}
.dvent__grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(12px, 4.06px + 1.98vw, 42px);
}
.dvent-card {
  flex: 1 1 0;
  min-width: 0;
  background-color: #eff1f7;
  border-left: 3px solid #1f3864;
  padding: clamp(18px, 12.7px + 1.32vw, 38px) clamp(16px, 9.4px + 1.64vw, 41px)
           clamp(18px, 12.7px + 1.32vw, 38px) clamp(16px, 9.4px + 1.64vw, 41px);
}
.dvent-card--1 { border-bottom-left-radius: 70px; }
.dvent-card--3 { border-top-right-radius: 70px; }
.dvent-card__title {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 14.3px + 0.67vw, 27px);
  line-height: 1.25;
  color: #1f3864;
  margin: 0 0 clamp(10px, 7.3px + 0.67vw, 20px);
}
.dvent-card__text {
  font-family: Lexend, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 11.7px + 0.33vw, 18px);
  line-height: 1.55;
  color: #494949;
  margin: 0;
}
/* En móvil las tres tarjetas se apilan: a 402 no caben tres columnas de texto. */
@media (max-width: 767px) {
  .dvent__grid { flex-direction: column; }
  .dvent-card--1 { border-bottom-left-radius: 40px; }
  .dvent-card--3 { border-top-right-radius: 40px; }
}

/* --- la sección del localizador, en ESTA página ----------------------------------------
   Es la sección 9 de la portada clonada, así que hereda todo su CSS por el nombre de clase.
   Aquí el diseño la quiere distinta: fondo blanco, los dos selectores arriba de la columna
   izquierda, debajo el contador y la lista, y el mapa ocupando la columna derecha entera.
   Todo lo de este bloque va acotado a `body.page-id-790` para no tocar la portada ni la banda
   compartida, que siguen con el diseño de siempre. */
body.page-id-790 .dealer { background-color: #ffffff; }
body.page-id-790 .dealer__wrap { padding-top: 0; }

/* la columna izquierda deja de ser una tarjeta flotante: aquí va sobre el blanco */
body.page-id-790 .dealer__list {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}
body.page-id-790 .dealer__cols { align-items: flex-start; }

/* los selectores, arriba y a lo ancho de la columna */
body.page-id-790 .dealer__filters {
  display: flex;
  flex-direction: row;
  column-gap: clamp(12px, 4px + 2vw, 34px);
  margin-bottom: clamp(16px, 10px + 1.5vw, 30px);
}
body.page-id-790 .dealer__filters > * { flex: 1 1 0; min-width: 0; }

/* el contador */
body.page-id-790 .brxe-query-results-summary {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 9.9px + 0.28vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #61848c;
  margin-bottom: clamp(10px, 7px + 0.75vw, 21px);
}

/* La lista SÍ lleva scroll propio, como en la portada: el diseño dibuja cuatro fichas y
   nosotros tenemos 62, así que sin recorte la página se iba a 8.422 px de alto (medido).
   La zona de contenido mide lo que mide el mapa (724 px a 1920), y dentro la lista se queda
   con lo que sobra después de los selectores y el contador. */
body.page-id-790 .dealer__cols { align-items: stretch; column-gap: clamp(16px, 4.6px + 2.83vw, 96px); }
body.page-id-790 .dealer__list { flex: 0 0 clamp(240px, 210px + 7.5vw, 647px); display: flex; flex-direction: column; }
body.page-id-790 .dealer__detail { flex: 1 1 auto; }
body.page-id-790 .dealer__wrap { padding-left: clamp(24px, 2.29px + 5.4vw, 106px); padding-right: clamp(24px, 1.5px + 5.6vw, 104px); }
body.page-id-790 .dealer { padding-top: clamp(40px, 19.9px + 5vw, 116px); padding-bottom: clamp(32px, 21.9px + 2.5vw, 70px); }
body.page-id-790 .dealer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(320px, 214.7px + 26.2vw, 649px);
  overflow-y: auto;
  scrollbar-width: none;
}
body.page-id-790 .dealer__scroll::-webkit-scrollbar { display: none; }
/* En móvil el diseño apila: primero los filtros y la lista, después el mapa. */
@media (max-width: 767px) {
  body.page-id-790 .dealer__cols { flex-direction: column; row-gap: 20px; }
  body.page-id-790 .dealer__list { flex: 0 0 auto; width: 100%; }
  body.page-id-790 .dealer__scroll { max-height: 360px; }
}

/* la ficha: nombre grande arriba, ciudad debajo y el país arriba a la derecha */
body.page-id-790 .dealer-item {
  position: relative;
  height: auto;
  min-height: clamp(58px, 50px + 2vw, 88px);
  background-color: #ffffff;
  border: 1px solid #e1eaeb;
  border-radius: 8px;
  padding: clamp(10px, 7px + 0.75vw, 21px) clamp(14px, 10px + 1vw, 28px);
  margin-bottom: clamp(8px, 6px + 0.5vw, 15px);
}
body.page-id-790 .dealer-item[aria-pressed="true"] { background-color: #eff1f7; }
body.page-id-790 .dealer-item__name {
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 13.4px + 0.4vw, 21px);
  line-height: 1.25;
  color: #1f3864;
}
body.page-id-790 .dealer-item__head { width: 100%; }
body.page-id-790 .dealer-item__city {
  font-family: Lexend, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 10.2px + 0.2vw, 14px);
  line-height: 1.4;
  color: #61848c;
}
body.page-id-790 .dealer-item__country {
  position: absolute;
  top: clamp(10px, 7px + 0.75vw, 21px);
  right: clamp(14px, 10px + 1vw, 28px);
  font-family: Lexend, sans-serif;
  font-weight: 500;
  font-size: clamp(10px, 9.2px + 0.2vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #61848c;
}

/* el mapa, a la derecha y de la altura de la columna */
body.page-id-790 .dealer__detail { align-self: stretch; }
body.page-id-790 .dealer__map {
  height: 100%;
  min-height: clamp(280px, 180px + 25vw, 660px);
  border-radius: 14px;
  overflow: hidden;
}

/* --- correcciones medidas del localizador de esta página (2026-09-02) -------------------
   Cuatro cosas que la medición destapó y que las reglas de arriba no cubrían:
   1. el clamp del ancho de la columna daba 354 px a 1920 en vez de 647 (la pendiente estaba
      mal calculada: 7,5vw no llega, hacen falta 26,81vw);
   2. la fila de selectores no ocupaba el ancho de su columna (124 px);
   3. la columna del mapa arrastraba el padding de la portada (56 arriba, 63 a la izquierda),
      que aquí lo hace el hueco entre columnas;
   4. el mapa se salía de su columna: con las dos columnas creciendo por su contenido, la
      altura de la zona era circular. Se fija la altura de la fila (724 px a 1920, que es lo
      que mide el mapa en el diseño) y las dos columnas se estiran a ella. */
body.page-id-790 .dealer__list { flex: 0 0 clamp(240px, 132.2px + 26.81vw, 647px); }
body.page-id-790 .dealer__filters { width: 100%; }
body.page-id-790 .dealer__detail { padding: 0; }
body.page-id-790 .dealer__cols { height: clamp(280px, 162.4px + 29.25vw, 724px); }
body.page-id-790 .dealer__map { min-height: 0; height: 100%; }
body.page-id-790 .dealer__scroll { max-height: none; }
@media (max-width: 767px) {
  body.page-id-790 .dealer__cols { height: auto; }
  body.page-id-790 .dealer__map { min-height: 320px; }
}

/* Los anchos de la portada (fijos, en clamp) ganaban a las reglas de arriba: la fila de
   selectores se quedaba en 226 px y el mapa en 543 dentro de una columna de 974. Se dobla la
   clase para ganar especificidad sin recurrir a !important, que es el patrón del proyecto. */
body.page-id-790 .dealer__filters.dealer__filters { width: 100%; max-width: none; }
body.page-id-790 .dealer__map.dealer__map { width: 100%; max-width: none; height: 100%; }
body.page-id-790 .dealer__cols.dealer__cols { padding-left: 0; padding-right: 0; }
body.page-id-790 .dealer__detail.dealer__detail { width: auto; max-width: none; }

/* El hueco entre la lista y el mapa: 96 px a 1920 (medido en el diseño, 845 - 749). */
body.page-id-790 .dealer__cols { column-gap: clamp(16px, -5.2px + 5.27vw, 96px); }

/* Bricks imprime su CSS DESPUES del fichero, asi que aqui tambien hay que doblar la clase. */
body.page-id-790 .dealer__cols.dealer__cols { column-gap: clamp(16px, -5.2px + 5.27vw, 96px); }

body.page-id-790 .dealer__wrap.dealer__wrap { padding-left: clamp(24px, 2.29px + 5.4vw, 106px); padding-right: clamp(24px, 1.5px + 5.6vw, 104px); }

/* la ciudad va en minusculas: el uppercase lo hereda de la ficha de la portada. */
body.page-id-790 .dealer-item__city.dealer-item__city { text-transform: none; }

/* --- hero de Distribuidores en móvil: encuadre y corte del titular (2026-09-02) ---------
   Con `cover` centrado, la barca se iba a la derecha: la foto es apaisada (2738x1261) y en una
   ventana de 402x849 sobran 1441 px de ancho. Medido contra el diseño móvil, la ventana buena
   empieza un 55% en vez de un 50%.
   Y el salto de línea fijo tras "Encuentra" es el del diseño de ESCRITORIO; en móvil el diseño
   parte después de "tu", así que ahí se deja fluir el texto. */
@media (max-width: 478px) {
  .dhero__bg { object-position: 55% center; }
  .dhero__title br { display: none; }
}

/* El diseño MÓVIL del hero usa otro encuadre de la misma foto, no un `cover` del de escritorio:
   ahí la barca se ve un 19% más pequeña. Se ha extraído su ventana del original (934x1974 del
   4096x2302) con el mismo ajuste de tono, igual que se hizo con el hero móvil de la portada el
   28-ago. Se sirve con content:url() bajo 479. */
@media (max-width: 478px) {
  .dhero__bg { content: url('../2026/09/dist-hero-movil.webp'); object-position: center center; }
}

/* --- botón del formulario: el texto se partía en dos líneas (2026-09-02) -----------------
   🔴 Defecto PREEXISTENTE, no de esta página: sale igual en la portada. Medido: el texto mide
   230 px y el botón 281, pero con 34 de relleno a cada lado solo quedan 213 útiles, así que
   "Solicitar información" se rompe en dos renglones dentro de una caja de 49 px de alto que
   además tiene el interlineado en 16 px con letra de 22. En el diseño va en una sola línea.
   Se deja crecer el botón lo justo y se le da un interlineado coherente. */
.form .wsf-button, .espera .wsf-button, .form button[type="submit"], .espera button[type="submit"] {
  white-space: nowrap;
  width: auto;
  min-width: 281px;
  line-height: 1.2;
}
/* A 1920 el ancho seguía fijado por una regla más específica y el texto se salía de la caja:
   se dobla la clase, que es como gana el CSS propio a lo que emite Bricks (ver la nota de
   arriba sobre el orden de impresión). */
.form .wsf-button.wsf-button, .espera .wsf-button.wsf-button { width: auto; min-width: 281px; padding-left: 34px; padding-right: 34px; }

/* Margen lateral en móvil: el diseño usa 28 px en el localizador y en las ventajas (medido en
   RESPONSIVE INDEX), y 44 en el hero, que ya lo tiene. */
@media (max-width: 478px) {
  body.page-id-790 .dealer__wrap.dealer__wrap { padding-left: 28px; padding-right: 28px; }
  body.page-id-790 .dvent__inner { padding-left: 28px; padding-right: 28px; }
}
/* La lista tiene más fichas de las que caben (62 frente a las 4 que dibuja el diseño), así que
   siempre queda una cortada por abajo. Un desvanecido deja claro que hay más y que el corte es
   intencionado, en vez de parecer un fallo de maquetación. */
body.page-id-790 .dealer__list { position: relative; }
body.page-id-790 .dealer__list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
}

/* --- p05 "otros modelos" en MÓVIL: también es carrusel (2026-09-02) --------------------
   Hasta hoy en móvil se apilaban las diez tarjetas, porque el frame móvil de la ficha de
   producto era uno de los PNG que faltaban desde julio. Con RESPONSIVE PRODUCTO delante se ve
   que ahí también es un carrusel horizontal, con la tarjeta siguiente asomando por la derecha.
   Medido en el diseño a 402: la tarjeta va de x=25 a x=371 (346 de ancho), la siguiente arranca
   en 382 y asoma 20 px hasta el borde. Por eso el carril se sale del margen derecho.
   Lo que costaba el apilado: la sección medía 5.193 px en vez de los ~765 del diseño, o sea que
   la ficha de producto en móvil era un 85% más larga de lo diseñado. */
@media (max-width: 991px) {
  .otros__grid.otros__grid.otros__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(346px, 86vw);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-right: calc(-1 * clamp(24px, 2.29px + 5.4vw, 106px));
    padding-right: clamp(24px, 2.29px + 5.4vw, 106px);
  }
  .otros__grid.otros__grid::-webkit-scrollbar { display: none; }
  .otros__grid .g-card { scroll-snap-align: start; }
}

/* --- formulario en MÓVIL: una sola columna (2026-09-02) ---------------------------------
   Seis campos llevan `wsf-extra-small-6`, o sea media fila incluso en el móvil más estrecho:
   medido a 402, quedaban en 159 px con etiquetas como "Código postal" o "Gama de interés".
   El diseño móvil los pone a ancho completo. Radio: el formulario sale en la portada, en la
   banda compartida (hub, 3 gamas y 11 fichas) y en Distribuidores, así que mejora en todas.
   Se acota a 478, que es hasta donde llega el diseño móvil; de 479 en adelante las dos columnas
   ya dan 190 px o más y se quedan como están. */

/* 🔴 Aquí SÍ va !important, y es la excepción a la regla 6 del proyecto: lo que hay que vencer
   ya lo usa. WS Form emite `.wsf-extra-small-6 { flex: 0 0 50% !important }` y nuestra propia
   regla de la banda compartida emite `.espera__form .form__ws.form__ws.form__ws
   .wsf-extra-small-6 { flex: 0 0 46.02% !important }`. Contra !important solo gana otro
   !important con al menos la misma especificidad, así que la regla del móvil repite el mismo
   selector de la banda y añade el genérico para la portada y Distribuidores. */
@media (max-width: 478px) {
  .espera__form .form__ws.form__ws.form__ws .wsf-extra-small-6,
  .espera__form .form__ws.form__ws.form__ws .wsf-extra-small-6:nth-child(2n),
  .wsf-fields .wsf-extra-small-6.wsf-extra-small-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- La marca, sección del motor: el TEXTO también se apila (2026-09-02) ----------------
   El bloque de 991 hacia abajo ya pasaba las tres fotos a flujo, pero se dejó el texto con sus
   anchos de escritorio. Medido a 402, sobre un ancho útil de 354: el titular quedaba en 284, el
   "powered by Yamaha" en 200 y el párrafo en **173**, o sea a menos de la mitad y con cinco
   palabras por línea. En el diseño móvil (RESPONSIVE MARCA) los tres van a ancho completo.
   Es de las cosas que Pere pedía repasar cuando dijo "que se asemejara al máximo" al Figma. */
@media (max-width: 991px) {
  .motor__title.motor__title.motor__title,
  .motor__yamaha.motor__yamaha.motor__yamaha,
  .motor__text.motor__text.motor__text { width: 100%; max-width: 100%; }
}

/* --- s00 cabecera: FLECHITA de desplegable en EMBARCACIONES (2026-09-03) --------------
   Pedida por Pere el 3-sep: "la típica flechita que indica que es un desplegable". El menú
   ya se abría (bloque 9 de pacific-ui.js, 2-sep) pero nada lo anunciaba antes de pasar el
   ratón.

   Mecanismo COPIADO del caret del selector de idioma (.site-lang__caret): triángulo hecho
   con bordes, no un SVG ni un glifo, para que herede tamaño y transición igual que aquel.
   Única diferencia deliberada: el color va en `currentColor` en vez de repetirse. El caret
   del idioma tiene que declarar su color TRES veces (blanco sobre foto, #3d372f en las
   interiores claras, #61848c en el menú fijo); como .site-nav__link ya cambia de color en
   esos tres estados, currentColor lo sigue solo y no hay una cuarta copia que mantener.

   Solo escritorio: .site-nav lleva `display:none` en tablet_portrait, y en móvil el
   desplegable ya se abre con el signo "+" del menú lateral. */
.site-nav__link--boats { display: inline-flex; align-items: center; }
.site-nav__link--boats::after {
  content: ""; display: block; flex: 0 0 auto;
  margin-left: clamp(4px, 3.4627px + 0.1324vw, 6px);
  border-left: clamp(4px, 3.4627px + 0.1324vw, 6px) solid transparent;
  border-right: clamp(4px, 3.4627px + 0.1324vw, 6px) solid transparent;
  border-top: clamp(5px, 4.1979px + 0.1983vw, 8px) solid currentColor;
  transition: transform .2s;
}
.site-nav__link--boats[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .site-nav__link--boats::after { transition: none; }
}

/* --- tarjetas de embarcación: la FOTO ENTERA es clicable en móvil (2026-09-03) --------
   Pere, 3-sep: "darle al botón de Descúbrela en mobile cuesta un poco. ¿Puede ser que sea
   toda la foto clickable?". Medido a 402: el enlace mide 78x21 px en la portada y 106x29
   en las fichas y las gamas, cuando el mínimo usable con el dedo son 44x44.

   No se toca el HTML: la capa clicable es un ::after del propio enlace, así que sigue
   habiendo UN solo enlace por tarjeta (un lector de pantalla oye lo mismo que antes) y no
   hay enlaces anidados. Cubre la tarjeta entera, no solo la foto: el texto y el título
   llevan al mismo sitio y así el área crece de 78x21 a la tarjeta completa.

   🔴 El "+" de caracteristicas vive DENTRO de la foto, y la capa tiene que dejarlo
   accesible. Y el ancla de la capa NO es la tarjeta por defecto: en la portada
   `.boat-card__body` es `position:relative` (lo necesita para pintarse sobre la foto, porque
   sube con un margen superior negativo), asi que la capa se quedaba en 267x153 (solo el
   bloque de texto) en vez de 267x344. Medido leyendo la caja del pseudo-elemento, no a ojo.

   Por eso en movil se quita el `position` a la foto Y al cuerpo: el ancla pasa a ser la
   tarjeta; el orden de pintado se mantiene (los dos quedan estaticos y el cuerpo va despues
   en el HTML); y el "+" y su panel, que eran absolutos dentro de la foto, se posicionan
   ahora contra la tarjeta, que empieza en las mismas coordenadas (la foto es su primer hijo
   a ancho completo y la tarjeta no tiene relleno). El "+" pasa a z-index 3, el mismo que
   .g-card__panel, que va despues en el HTML y por tanto se sigue pintando encima al abrirse.
   De 992 arriba no cambia nada: ahi el raton no tiene el problema y `.gama__nav` (lo unico
   que dependia del z-index de la foto) esta oculto por diseno en movil. En las gamas y las
   fichas `.g-card` no tiene cuerpo relativo, asi que le basta con la capa. */
@media (max-width: 991px) {
  .boat-card, .g-card { position: relative; }
  .boat-card__cta::after, .g-card__cta::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
  }
  /* 🔴 SOLO EL CUERPO, nunca la foto. Historia, porque cuesta dinero repetirla:
     el 3-sep se puso `position: static` en el cuerpo Y en la foto, para que la capa clicable
     se anclara a la tarjeta entera. Pere reporto al dia siguiente un "espacio excesivo debajo
     de la foto" que la vispera no salia, y el 4-sep se revirtio TODO por precaucion, con el
     diagnostico de que no se reproducia en Chromium.
     Medido despues, con WebKit instalado y mirando la CAPTURA en vez de la caja: el defecto SI
     se reproducia en Chromium (esta en nuestras capturas de `build/DESPUES-2026-09-03/`), y lo
     causaba quitarle el `position` a la FOTO, que anula su `z-index: 1`. Sin el, el cuerpo
     (posicionado, que sube 45 px con margen negativo y va despues en el HTML) se pinta ENCIMA y
     su fondo blanco tapa los ultimos 42 px de la foto: la foto visible cae del 67,9% de la
     tarjeta al 55,8%. No es geometria (la caja da 7 px en los dos casos), es orden de pintado.
     Asi que la foto se queda `relative` con su z-index y solo se neutraliza el cuerpo: la capa
     pasa a 267x347 (la tarjeta entera, foto incluida) y el blanco sigue empezando en el 67,9%.
     Verificado por captura en Chromium Y en WebKit a 402. */
  .boat-card__body.boat-card__body { position: static; z-index: auto; }
  /* 🔴 Y la foto pierde su z-index (que NO su position) solo en movil. Sin esto, el "+" se
     queda debajo de la capa clicable y pulsarlo NAVEGA a la ficha en vez de abrir las
     caracteristicas (medido: `elementFromPoint` en el centro del "+" devolvia la capa).
     El motivo es que `.boat-card__media` con `z-index: 1` crea CONTEXTO DE APILADO: dentro
     de el el "+" vale 3, pero el contexto entero vale 1, y la capa de la tarjeta vale 2.
     Con `z-index: auto` la foto deja de crear contexto, el "+" pasa a competir de tu a tu con
     la capa (3 > 2) y gana; y la foto, que sigue posicionada, se sigue pintando por encima del
     cuerpo, que es estatico. Se comprueba pulsando: la foto navega y el "+" abre el panel. */
  .boat-card__media.boat-card__media { z-index: auto; }
  .boat-card__plus.boat-card__plus, .g-card__plus.g-card__plus { z-index: 3; }
}

/* --- tarjetas de la portada: el "+" también se puede pulsar con el dedo (2026-09-03) ---
   Gemelo del punto anterior y de la misma queja de Pere ("cuesta pulsarlo en mobile"): el
   "+" de la portada mide 18x18 px a 402 (en las gamas y las fichas ya mide 40x40, que sí se
   pulsa). Se le da area tactil de 44x44 SIN tocar su tamaño visible: el cuadrado sigue
   pintándose igual y lo que crece es una capa transparente centrada en él.
   Coste asumido: esos 44x44 de la esquina superior izquierda de la foto abren las
   características en vez de ir a la ficha. Es el reparto correcto, porque el "+" es la
   acción precisa y la foto entera queda para la otra. */
@media (max-width: 991px) {
  .boat-card__plus.boat-card__plus::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* --- buscador de distribuidores: los dos desplegables SE APILAN en pantallas de 375 px ---
   Salido del QA de la tanda del 3-sep, no lo pidio Pere. Defecto PREEXISTENTE (no lo causa
   nada de esta tanda: `.dealer__filters` y los dos `select` no se han tocado). Medido a 375:
   el bloque arranca en x=55 y los dos desplegables suman 344 px (108 + 13 de hueco + 223),
   asi que el ultimo termina en 399 y la pagina entera se puede desplazar 24 px a lo ancho.
   Sale en el hub y en las tres gamas. De 402 en adelante (que es el ancho del diseno movil)
   no pasa, por eso no habia aparecido: el barrido anterior empezaba en 402.
   375 px es un iPhone SE y 360 un Android corriente, asi que se arregla dejando que la fila
   pase a dos lineas cuando no cabe, en vez de fijar anchos nuevos. */
@media (max-width: 401px) {
  .dealer__filters.dealer__filters { flex-wrap: wrap; row-gap: clamp(8px, 5.8738px + 0.5277vw, 16px); }
  .dealer__filters.dealer__filters > .brxe-filter-select { flex: 1 1 100%; width: 100%; }
}

/* --- s00 cabecera: el logo no se encoge para hacer sitio a la flechita (2026-09-03) -----
   Efecto colateral de la flechita de EMBARCACIONES, medido y no previsto: al ensanchar el menu
   17,7 px, la fila de la cabecera se los quitaba al LOGO. Entre 992 y ~1100 px la caja del logo
   pasaba de 157,5 a 139,7 px (un 11% menos). No llegaba a deformarlo (lleva `object-fit:contain`,
   que lo protege) pero si a encogerlo, y el logo del cliente no puede menguar porque crezca un
   menu. De 1200 en adelante no pasaba, porque ahi ya sobra sitio.
   Se arregla impidiendo que el logo ceda ancho, no quitando la flechita. */
.site-header__logo, .site-header__logo-img { flex-shrink: 0; }

/* --- heros a sangre en movil: el max-width los estaba recortando (2026-09-04) --------
   Pere, 4-sep: "podemos hacer que los videos se vean de punta a punta (ahora queda un
   pequeno espacio en la derecha)". Medido a 402: el hero rendia 378 px en un viewport de
   402, o sea 24 px de hueco a la derecha, en las 11 fichas Y en las 3 paginas de gama (no
   solo en las 7 con video: las de foto igual; el lo nombro por la que miro).
   La regla `width: calc(100% + 24px)` de arriba SI gana, pero un `max-width: 100%` heredado
   la recortaba al ancho del contenedor. Se ve en la caja computada (378 con width declarado
   402) y NO en la hoja de estilos, porque ninguna regla propia declara ese max-width. */
@media (max-width: 991px) {
  .phero__img.phero__img.phero__img,
  .ghero__img.ghero__img.ghero__img,
  .hub-hero__img.hub-hero__img.hub-hero__img,
  .hub-hero__video.hub-hero__video.hub-hero__video { max-width: none; }
}

/* --- heros a sangre en movil, 2a parte: el margen IZQUIERDO con la misma variable
   que el padding (2026-09-05) -------------------------------------------------------
   Pere, 5-sep: "el generico de gama (embarcaciones) me sale ahora hacia la derecha, con
   un espacio blanco en la izquierda en la version mobile". Causa: el padding-left del
   wrap es var(--pc-pad-x) (24 px a 402, 55 a 991) y el margen negativo que lo compensa
   era un NUMERO FIJO en la clase global de Bricks (-14 en el hub, -24 en gamas y fichas).
   En el hub descuadraba 10 px ya a 402 (el blanco de la izquierda existia antes del 4-sep;
   al quitar el de la derecha se quedo solo y se ve). En gamas y fichas cuadraba SOLO a
   402 y se abria de 430 arriba (1,5 px a 430, 31 a 991), que es lo que el barrido de 7
   anchos no vio. Medido a 632 anchos seguidos (360-991) en Chromium y WebKit.
   Arreglo: margen y ancho con la misma variable que el padding, en las 5 clases, para
   que no vuelva a descuadrarse si cambia el padding. Ancho = 100% + pad (el wrap no
   lleva padding-right). */
@media (max-width: 991px) {
  .phero__img.phero__img.phero__img,
  .ghero__img.ghero__img.ghero__img,
  .hub-hero__img.hub-hero__img.hub-hero__img,
  .hub-hero__video.hub-hero__video.hub-hero__video {
    margin-left: calc(var(--pc-pad-x) * -1);
    width: calc(100% + var(--pc-pad-x));
  }
}

/* --- marca: las 3 fotos del motor, en carrusel en movil (2026-09-04) -----------------
   Pere, 4-sep: "la idea es que las 3 fotos que aparecen en Nuestro motor se muevan hacia
   la derecha en carrusel". Antes iban apiladas y, ademas, la primera SE SALIA 31 px de la
   pantalla (medido a 402: x=79 + 354 de ancho = 433 sobre un viewport de 402), porque el
   apilado le daba width:100% pero no le quitaba el margin-left del mosaico de escritorio.
   Por eso la veia cortada por la derecha en su captura.

   Se copia el MECANISMO que ya usan las gamas (`.gama__cards`: fila flex con overflow-x
   auto y la barra de scroll oculta), no se escribe uno nuevo. Las fotos son hijas de un
   contenedor propio creado el 4-sep (`#brxe-mtrfts`), porque antes colgaban del mismo
   wrap que el titulo y el texto y no se podia desplazar solo la fila.

   De 992 arriba no cambia NADA: el contenedor es `display: contents`, asi que desaparece
   de la maquetacion y el mosaico absoluto sigue anclado al `.motor__wrap` (que es el
   `position: relative`) exactamente igual que antes. */
@media (min-width: 992px) {
  .motor__wrap > .brxe-div { display: contents; }
}
@media (max-width: 991px) {
  .motor__wrap > .brxe-div {
    display: flex; flex-direction: row; align-items: flex-start;
    width: 100%; margin-top: 12px;
    gap: clamp(8px, 5.3441px + 0.6594vw, 12px);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .motor__wrap > .brxe-div::-webkit-scrollbar { display: none; }
  .motor__foto-a.motor__foto-a.motor__foto-a,
  .motor__foto-b.motor__foto-b.motor__foto-b,
  .motor__foto-c.motor__foto-c.motor__foto-c {
    position: static; flex: 0 0 auto;
    width: 82%; height: auto; aspect-ratio: 4 / 3;
    margin: 0; scroll-snap-align: start;
  }
}

/* --- suelo de 12 px en rotulos y etiquetas (2026-09-05) ------------------------------
   Lo pedimos nosotros el 4-sep y lo aprobo Pere ese mismo dia a las 12:50: "Si recomendais
   un minimo de 12 px en rotulos y etiquetas, adelante!". Antes de esto, medido a 402 px:
   50 clases por debajo de 12, la peor a 6 px (el rotulo de las cifras del hero y el pie del
   buscador de distribuidores); a 1440 eran 12 clases, la peor a 8,7.

   Se aplica como SUELO, no como tamano nuevo: `max(12px, <el clamp que ya tenia>)`. Asi el
   escalado del Figma se conserva intacto en todos los anchos donde ya pasaba de 12, y solo
   se levanta el tramo que quedaba por debajo. Es reversible borrando este bloque entero.
   Triple clase porque Bricks imprime SUS clases globales despues de este fichero. */
.boat-card__cta.boat-card__cta.boat-card__cta { font-size: max(12px, clamp(7.93px, 4.8738px + 0.5277vw, 15px)); }
.boat-card__text.boat-card__text.boat-card__text { font-size: max(12px, clamp(11.33px, 7.0793px + 0.7253vw, 21px)); }
.btn.btn.btn { font-size: max(12px, clamp(8.89px, 7.2643px + 0.4032vw, 15px)); }
.cform__dealer.cform__dealer.cform__dealer { font-size: max(12px, clamp(10px, 8.6682px + 0.33vw, 15px)); }
.cta__legal-link.cta__legal-link.cta__legal-link { font-size: max(12px, clamp(8.12px, 6.82px + 0.3221vw, 13px)); }
.dealer-item__city.dealer-item__city.dealer-item__city { font-size: max(12px, clamp(13px, 11.9331px + 0.2642vw, 17px)); }
.dealer-item__country.dealer-item__country.dealer-item__country { font-size: max(12px, clamp(9px, 8.1979px + 0.1983vw, 12px)); }
.dealer-item__name.dealer-item__name.dealer-item__name { font-size: max(12px, clamp(8.5px, 7.8303px + 0.1653vw, 11px)); }
.dealer-select-ciudad.dealer-select-ciudad.dealer-select-ciudad { font-size: max(12px, clamp(10px, 8.6682px + 0.33vw, 15px)); }
.dealer-select-pais.dealer-select-pais.dealer-select-pais { font-size: max(12px, clamp(10px, 8.6682px + 0.33vw, 15px)); }
.dealer__eyebrow.dealer__eyebrow.dealer__eyebrow { font-size: max(12px, clamp(9.5px, 8.3007px + 0.2971vw, 14px)); }
.dealer__foot-text.dealer__foot-text.dealer__foot-text { font-size: max(12px, clamp(6px, 4.9331px + 0.2642vw, 10px)); }
.dealer__list-label.dealer__list-label.dealer__list-label { font-size: max(12px, clamp(8.5px, 7.0358px + 0.363vw, 14px)); }
.espera__find-eyebrow.espera__find-eyebrow.espera__find-eyebrow { font-size: max(12px, clamp(10.26px, 9.2619px + 0.247vw, 14px)); }
.espera__find-lead.espera__find-lead.espera__find-lead { font-size: max(12px, clamp(10.26px, 8.9971px + 0.3129vw, 15px)); }
.g-card__cta.g-card__cta.g-card__cta { font-size: max(12px, clamp(11.22px, 8.5418px + 0.3366vw, 15px)); }
.gama__all-label.gama__all-label.gama__all-label { font-size: max(12px, clamp(10px, 7.3441px + 0.6594vw, 20px)); }
.gama__eyebrow.gama__eyebrow.gama__eyebrow { font-size: max(12px, clamp(10px, 8.1386px + 0.4618vw, 17px)); }
.gamas-nav__link.gamas-nav__link.gamas-nav__link { font-size: max(12px, clamp(8.67px, 6.7212px + 0.4835vw, 16px)); }
.ghero-fact__label.ghero-fact__label.ghero-fact__label { font-size: max(12px, clamp(9.6px, 8.1093px + 0.3696vw, 15.2px)); }
.hero-stat__label.hero-stat__label.hero-stat__label { font-size: max(12px, clamp(6px, 4.1386px + 0.4618vw, 13px)); }
.hub-banda__cta.hub-banda__cta.hub-banda__cta { font-size: max(12px, clamp(8.14px, 6.0508px + 0.5184vw, 16px)); }
.phero-fact__label.phero-fact__label.phero-fact__label { font-size: max(12px, clamp(9px, 7.6682px + 0.33vw, 14px)); }
.phero__cta.phero__cta.phero__cta { font-size: max(12px, clamp(10px, 8.4034px + 0.3959vw, 16px)); }
.pilar__text.pilar__text.pilar__text { font-size: max(12px, clamp(9.59px, 6.2959px + 0.8182vw, 22px)); }
.specs__pdf.specs__pdf.specs__pdf { font-size: max(12px, clamp(11px, 9.4034px + 0.3959vw, 17px)); }

/* Los tres trozos del autor de una opinion (ciudad, separador y resto), que viven aqui y no
   en una clase global. */
.exp-card__author .exp-a-city.exp-a-city,
.exp-card__author .exp-a-sep.exp-a-sep,
.exp-card__author .exp-a-rest.exp-a-rest { font-size: max(12px, clamp(9px, 7.4034px + 0.3959vw, 15px)); }

/* La casilla de "He leido y acepto la Politica de Privacidad" iba a 9 px. Es texto legal que
   el visitante tiene que poder leer ANTES de marcarla, asi que este es el que menos discusion
   admite de los 26. Va en los dos formularios (portada y contacto). */
.form__ws.form__ws.form__ws [data-type="checkbox"] .wsf-label,
.cform__ws.cform__ws.cform__ws [data-type="checkbox"] .wsf-label,
.form__ws.form__ws.form__ws .wsf-text-danger,
.cform__ws.cform__ws.cform__ws .wsf-text-danger { font-size: max(12px, clamp(9px, 8.7275px + 0.0665vw, 10px)); }

/* Los <option> de los dos desplegables del buscador de distribuidores: Bricks les pone
   `depth-0` y `placeholder`, no una clase nuestra. */
.dealer-select-pais option, .dealer-select-ciudad option { font-size: max(12px, clamp(10px, 8.6682px + 0.33vw, 15px)); }

/* 🔴 LO QUE NO SE TOCA: la letra pequena del mapa ("Map data (c) Google", "Report a map error",
   la escala en km) es interfaz de Google dentro de su iframe/contenedor. No es texto nuestro,
   reescribirla no nos corresponde y ademas se regenera con su script. Queda fuera a proposito. */

/* --- buscador de distribuidores: los dos desplegables, al subir a 12 px (2026-09-05) ----
   🔴 REGRESION DEL SUELO DE 12 PX, cazada por el QA de 91 vistas. Los `<option>` pasaron de
   10 a 12 px, el `<select>` se ensancha con su contenido, y entre ~376 y ~479 px los dos ya
   no caben en la fila: a 402 la fila acababa en 428 sobre un viewport de 402 (26 px fuera) y
   a 430 sobrraban 5. Afectaba a 5 paginas, porque el bloque "El mar te espera" con este
   buscador sale en el hub, en las tres gamas y en las once fichas.
   Por debajo de 376 no pasaba: ahi ya se apilaban. Es el mismo desborde que se arreglo el
   3-sep a 375 px, reaparecido una franja mas arriba y por otra causa.
   Arreglo: que puedan repartirse el ancho y apilarse cuando no quepan, en vez de forzar la
   fila. De 480 arriba no cambia nada (medido: 113/254 a 479 y 480, 122/256 a 600). */
@media (max-width: 991px) {
  .dealer__filters { flex-wrap: wrap; }
  .dealer__filters > .dealer-select-pais,
  .dealer__filters > .dealer-select-ciudad { flex: 1 1 auto; max-width: 100%; }
}

/* --- ficha de /distribuidores/ con la MISMA info que el panel de la portada (2026-09-10)
   Peticion de Pere del 10-sep: "en la info de distribuidores deberia aparecer la misma info
   que sale en la home ... Nombre del distribuidor mas grande, Direccion completa, Telefono,
   Correo electronico". Se reusan las clases del panel de la portada (.dealer-line,
   .dealer-line__icon, .dealer-line__text y sus modificadores) para que la jerarquia sea la
   misma, y aqui solo se COMPACTAN, porque en la portada viven en un panel ancho y aqui van
   dentro de una ficha de lista que se repite 70 veces.

   🔴 Y de paso se arregla la causa de fondo de "el nombre pequeno": el bloque del suelo de
   12 px (5-sep) escribe `.dealer-item__name` con TRIPLE clase (0,3,0), que gana a
   `body.page-id-790 .dealer-item__name` (0,2,1). Resultado medido hoy a 1440: el nombre
   salia a 12 px y la ciudad a 15,7, o sea justo al reves de lo que pedia el CSS de esta
   pagina (nombre 15-21, ciudad 11-14). Se recupera con 0,4,1, conservando el suelo de
   12 px que Pere aprobo el 4-sep. La PORTADA no se toca: alli la ficha sigue igual y el
   nombre grande vive en el panel de la derecha. */
body.page-id-790 .dealer-item__name.dealer-item__name.dealer-item__name {
  font-size: max(12px, clamp(15px, 13.4px + 0.4vw, 21px));
  font-weight: 500;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: clamp(6px, 4.4px + 0.4vw, 10px);
  padding-right: clamp(60px, 40px + 3vw, 110px);   /* el pais va absoluto arriba a la derecha */
}
body.page-id-790 .dealer-item { align-items: flex-start; }
body.page-id-790 .dealer-item__contact { width: 100%; row-gap: clamp(4px, 3.2px + 0.2vw, 7px); }
body.page-id-790 .dealer-item .dealer-line { margin-top: 0; align-items: flex-start; }
body.page-id-790 .dealer-item .dealer-line__icon.dealer-line__icon {
  width: clamp(13px, 12.2px + 0.2vw, 16px);
  height: clamp(13px, 12.2px + 0.2vw, 16px);
  margin: 2px 0 0 0;
  object-fit: contain;
}
body.page-id-790 .dealer-item .dealer-line__text.dealer-line__text {
  max-width: none;
  margin-left: clamp(7px, 6.2px + 0.2vw, 10px);
  font-size: max(12px, clamp(12.5px, 12.1px + 0.1vw, 14px));
  line-height: 1.35;
  color: #3c4d66;
}
/* lo que no tiene dato no deja un icono suelto (mismo criterio que el panel de la portada) */
body.page-id-790 .dealer-item .dealer-line:has(.dealer-line__text:empty) { display: none; }

/* 🔴 El pais NO puede seguir en posicion absoluta ahora que el nombre es grande: medido a
   402 px, "Pornichet Plaisance Service" se metia 12,2 px por debajo de "FRANCIA" (y 54,2 a
   360). Un padding-right fijo no lo arregla, porque el hueco que hace falta depende de lo
   largo que sea el pais. Nombre y pais vuelven a compartir la FILA .dealer-item__head, que
   es para lo que existe, y asi el solape es imposible por construccion. */
body.page-id-790 .dealer-item__head.dealer-item__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: clamp(8px, 6.4px + 0.4vw, 14px);
  width: 100%;
  margin-bottom: clamp(6px, 4.4px + 0.4vw, 10px);
}
body.page-id-790 .dealer-item__name.dealer-item__name.dealer-item__name {
  padding-right: 0;
  margin-bottom: 0;
  min-width: 0;
  flex: 1 1 auto;
}
body.page-id-790 .dealer-item__country.dealer-item__country {
  position: static;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  align-self: baseline;
}

/* 🔴 Y el alto real de la lista en movil no lo decidia su max-height, sino su PADRE: la
   regla `body.page-id-790 .dealer__list { flex: 0 0 clamp(240px,...,647px) }` se escribio
   para fijar el ANCHO de la columna en escritorio, pero en movil `.dealer__cols` pasa a
   `flex-direction: column` y ese mismo `flex-basis` se convierte en un ALTO de 240 px. La
   media query que lo soltaba (`flex: 0 0 auto`) esta ANTES en el fichero, asi que perdia.
   Preexistente desde el 2-sep; se notaba poco con fichas de 58 px y mucho con las de 105. */
@media (max-width: 767px) {
  body.page-id-790 .dealer__list.dealer__list { flex: 0 0 auto; width: 100%; height: auto; }
}

/* 🔴 Y lo que de verdad fijaba el alto no era ninguna regla del fichero: es la CLASE GLOBAL
   de Bricks `dealer__scroll`, que lleva `height: clamp(184px, ..., 312px)`. Bricks imprime
   su CSS DESPUES de pacific-sections.css (gotcha 23 del proyecto), asi que un `max-height`
   nuestro no puede nada contra un `height` suyo. Se suelta el alto y se limita con
   max-height, solo en esta pagina y solo en movil. */
@media (max-width: 767px) {
  body.page-id-790 .dealer__scroll.dealer__scroll {
    height: auto;
    max-height: clamp(260px, 236px + 6vw, 320px);
    flex: 1 1 auto;
  }
}

/* 28-sep-2026: el suelo de 12 px de arriba subio la letra de los rotulos de las cifras de la
   portada (+25 anos, 3 gamas...) y dejo su interlineado escalado para 6 px (6,19 px a 390 px):
   en movil, cuando el rotulo parte en dos lineas, las lineas se pisaban (ES, FR y EN). Solo en
   movil, que es donde parte: en tableta y escritorio va en una linea y se queda como estaba. */
@media (max-width: 767px) {
  .hero-stat__label.hero-stat__label.hero-stat__label { line-height: 1.15; }
}

/* 2-oct-2026: dos efectos del suelo de 12 px que salieron al pasar el QA por idiomas.
   1. Pestañas de gama (Ver todas / Gama Open...): en movil parten en dos lineas con interlineado 1,
      y el subrayado de la activa (0,5 em por debajo) cruzaba la segunda linea. Pasaba tambien en
      castellano. Solo en movil, que es donde parten.
   2. Boton de las tarjetas (Descubrela / Decouvrez-le / Discover): ancho fijo de 78 px en movil y el
      texto media 79 px en castellano; en frances partia en dos lineas y se cortaba. Ancho
      automatico con el MISMO minimo de antes, sin partir linea. */
@media (max-width: 767px) {
  .gamas-nav__link.gamas-nav__link.gamas-nav__link { line-height: 1.5; }
  .gamas-nav__link.is-activa { text-underline-offset: 0.2em; }
}
.boat-card__cta.boat-card__cta.boat-card__cta {
  width: auto;
  min-width: clamp(78px, 55.7473px + 5.5343vw, 162px);
  padding-inline: 0.6em;
  white-space: nowrap;
}

/* 2-oct-2026: la raya bajo la palabra en negrita del titular de gama (Gama OPEN) tiene un margen
   izquierdo fijo, medido para "Gama ". En frances "Gamme " es mas ancho y la raya empezaba 27, 39 y
   51 px antes que la palabra (a 390, 834 y 1440). El desfase es 0,83 veces el tamano de letra del
   titular en todos los anchos, asi que se suma eso, con la misma escala fluida. Solo frances. */
html[lang^="fr"] .gama__rule.gama__rule {
  margin-left: calc(clamp(117px, 82.0358px + 8.6963vw, 249px) + clamp(30.7px, 21.25px + 2.3517vw, 66.4px));
}
html[lang^="fr"] .gama__rule.gama__rule--wa {
  margin-left: calc(clamp(120px, 85.3007px + 8.6304vw, 251px) + clamp(30.7px, 21.25px + 2.3517vw, 66.4px));
}
/* Por debajo de 390 px "Gamme Wa & Deck" no cabe en una linea (en castellano si): la palabra en
   negrita baja ENTERA a la segunda linea y la raya empieza donde empieza esa linea. */
@media (max-width: 389.98px) {
  html[lang^="fr"] .gama__title--wa .gama-t-strong { white-space: nowrap; }
  html[lang^="fr"] .gama__rule.gama__rule--wa { margin-left: 0; }
}