/* ==========================================================================
   Caldarium · componentes del sitio público (propuesta B).
   Hereda TODO de tokens.css: aquí no hay colores, tamaños de letra, radios
   ni sombras a pelo salvo los anotados. Los nombres de las piezas son los de
   la maqueta B (07_WIRE/…/opcion-b) cuando la pieza existe allí.
   Cortes: los de tokens.css (1180 / 860 / 560), ninguno más.
   ========================================================================== */

/* ---------- Saltar al contenido ---------- */
.saltar { position: absolute; left: var(--e-3); top: -100px; z-index: 100; padding: var(--e-2) var(--e-3); background: var(--color-primario); color: var(--color-tinta); }
.saltar:focus { top: var(--e-3); }

/* ==========================================================================
   CABECERA — sobre la foto del hero; en páginas sin hero, sólida
   ========================================================================== */
.cabecera { position: absolute; inset: 0 0 auto 0; z-index: 50; color: var(--color-blanco); }
.cabecera--solida { position: relative; background: var(--color-tinta); }
.cabecera__fila {
  max-width: calc(var(--ancho-max) + 2 * var(--margen-lateral)); margin-inline: auto;
  padding: 1.25rem var(--margen-lateral);
  display: flex; align-items: center; gap: var(--e-5);
}
.cabecera__logo { display: flex; align-items: center; flex: none; min-height: var(--toque); }
.cabecera__logo img { width: 150px; }
.cabecera__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--toque); font-size: var(--texto-xs); font-weight: 600; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
.cabecera__tel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primario); }

.menu { margin-left: auto; display: flex; align-items: center; gap: var(--e-5); }
.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.9rem, .2rem + 1.3vw, 2rem); }
.menu__lista a, .menu__grupo > button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--toque);
  font: inherit; font-size: var(--texto-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; position: relative;
}
.menu__lista > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--color-primario); transform: scaleX(0); transform-origin: left; transition: transform var(--transicion); }
.menu__lista > li > a:hover::after, .menu__lista > li > a[aria-current]::after { transform: scaleX(1); }
.menu__grupo { position: relative; }
.menu__grupo > button::after { content: ""; width: 6px; height: 6px; border: solid var(--color-primario); border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-2px); }
.menu__sub {
  list-style: none; margin: 0; padding: var(--e-2) 0; position: absolute; left: -1rem; top: 100%; min-width: 15rem;
  background: var(--color-tinta); border-top: 2px solid var(--color-primario); border-radius: 0 0 var(--radio-foto) var(--radio-foto);
  box-shadow: var(--sombra); visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.menu__grupo:hover .menu__sub, .menu__grupo:focus-within .menu__sub, .menu__grupo--abierto .menu__sub { visibility: visible; opacity: 1; transform: none; }
.menu__sub a { display: flex; padding: 0 1rem; letter-spacing: .1em; text-transform: none; font-size: var(--texto-s); }
.menu__sub a:hover { color: var(--color-primario); }
.menu__pie { display: none; }
.hamburguesa { display: none; }

/* ==========================================================================
   HERO DE PORTADA y CABECERA DE PÁGINA
   ========================================================================== */
.hero {
  position: relative; min-height: max(100svh, 720px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--color-tinta); color: var(--color-blanco); overflow: hidden; isolation: isolate;
}
.hero--pagina { min-height: clamp(520px, 30vw + 300px, 760px); }
.hero__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.hero:not(.hero--pagina) .hero__foto { animation: acercar 18s ease-out both; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,26,26,.78) 0%, rgba(26,26,26,0) 22%),
    linear-gradient(90deg, rgba(26,26,26,.95) 0%, rgba(26,26,26,.86) 36%, rgba(26,26,26,.35) 62%, rgba(26,26,26,.08) 82%),
    linear-gradient(0deg, rgba(26,26,26,.95) 0%, rgba(26,26,26,0) 38%);
}
.hero__contenido { padding-top: 8rem; padding-bottom: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
.hero h1 { color: var(--color-blanco); margin-bottom: var(--e-5); max-width: 16ch; }
/* El h1 de portada es el único que usa el paso grande de la escala. */
.hero__titulo { font-size: var(--titulo-h1); line-height: .92; letter-spacing: -.025em; max-width: 12ch; animation: subir 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero__sello { display: inline-flex; margin-bottom: var(--e-4); padding: .45rem .9rem; border: 1px solid var(--color-linea-clara); border-radius: var(--radio); font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primario); }
.hero__texto { max-width: 34rem; font-size: var(--texto-l); color: var(--color-texto-claro); }
.hero__texto:last-of-type { margin-bottom: var(--e-5); }
.hero__cifras {
  list-style: none; margin: var(--e-6) 0 0; padding: var(--e-4) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--e-3) var(--e-5);
  border-top: 1px solid var(--color-linea-clara); position: relative;
}
.hero__cifras::before { content: ""; position: absolute; top: -1px; left: 0; width: 6rem; height: 2px; background: var(--color-primario); }
.hero__cifras b { display: block; font-family: var(--fuente-titulos); font-weight: 300; font-size: var(--titulo-h3); line-height: 1.1; color: var(--color-blanco); font-variant-numeric: lining-nums; }
.hero__cifras span { font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primario); }

@keyframes subir { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Título de página sin foto (blog, entradas, etiquetas) */
.titulo-pagina { background: var(--color-tinta); color: var(--color-texto-claro); padding-block: var(--e-7) var(--e-6); }
.titulo-pagina h1 { color: var(--color-blanco); max-width: 20ch; }
.titulo-pagina p:last-child { margin-bottom: 0; }

/* ==========================================================================
   COLECCIONES (tarjetas en columnas, como el original; la primera, oscura)
   ========================================================================== */
.colecciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.coleccion { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5) var(--e-4); background: var(--color-fondo); border-radius: var(--radio-foto); border-top: 2px solid transparent; transition: border-color var(--transicion), transform var(--transicion); }
.coleccion:hover { border-top-color: var(--color-primario); transform: translateY(-4px); }
.coleccion--destacada { background: var(--color-tinta); color: var(--color-texto-claro); border-top-color: var(--color-primario); }
.coleccion--destacada h3, .coleccion--destacada .coleccion__modelos { color: var(--color-blanco); }
.coleccion--destacada .enlace-flecha { color: var(--color-blanco); }
.coleccion__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); min-height: 2.6rem; }
.coleccion__nombre { margin: 0; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primario-hondo); }
.coleccion--destacada .coleccion__nombre { color: var(--color-primario); }
.coleccion__distintivo { flex: none; padding: .25rem .6rem; background: var(--color-primario); color: var(--color-tinta); border-radius: var(--radio); font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.coleccion h3 { font-size: var(--titulo-h3); font-weight: 300; }
.coleccion__para { margin: 0; font-family: var(--fuente-titulos); font-style: italic; font-size: var(--titulo-h4); line-height: 1.25; color: var(--color-primario-hondo); }
.coleccion--destacada .coleccion__para { color: var(--color-primario); }
.coleccion__texto { margin: 0; font-size: var(--texto-s); flex: 1; }
.coleccion__modelos { margin: 0; padding-top: var(--e-2); border-top: 1px solid var(--color-linea); font-size: var(--texto-xs); font-weight: 500; letter-spacing: .06em; color: var(--color-tinta); }
.coleccion--destacada .coleccion__modelos { border-color: var(--color-linea-clara); }
.coleccion .enlace-flecha { align-self: flex-start; }

/* ==========================================================================
   FOTO + TEXTO (el bloque más repetido del sitio)
   ========================================================================== */
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.par--invertido > :first-child { order: 2; }
/* En media columna el h2 grande se parte en tres líneas y pesa más que el
   texto y la foto de al lado: paso propio de la escala, sin tope de ancho. */
.par__texto h2 { font-size: var(--titulo-h2-media); margin-bottom: var(--e-4); }
.par__texto .acciones { margin-top: var(--e-5); }

/* Lista con marca naranja (icon-list del WP) */
.lista-marca { list-style: none; margin: var(--e-4) 0; padding: 0; border-top: 1px solid var(--color-linea); }
.lista-marca li { position: relative; padding: .8rem 0 .8rem 1.75rem; border-bottom: 1px solid var(--color-linea); font-size: var(--texto-s); }
.lista-marca li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 10px; height: 2px; background: var(--color-primario); }
.seccion--oscura .lista-marca, .seccion--oscura .lista-marca li { border-color: var(--color-linea-clara); }

/* Cita destacada */
.cita { margin: var(--e-5) 0; padding-left: 1.5rem; border-left: 2px solid var(--color-primario); font-family: var(--fuente-titulos); font-style: italic; font-weight: 300; font-size: var(--titulo-cita); line-height: 1.3; color: var(--color-tinta); max-width: 30rem; }
.seccion--oscura .cita, .seccion--grafito .cita { color: var(--color-blanco); }

/* ==========================================================================
   RASGOS (icono + número + título + texto; image-box e icon-box del WP)
   ========================================================================== */
.rasgos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--hueco-rejilla); }
.rasgo { padding-top: var(--e-4); border-top: 1px solid var(--color-linea); }
.rasgo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.rasgo__icono { width: 56px; height: 56px; object-fit: contain; }
.rasgo__num { font-family: var(--fuente-titulos); font-style: italic; font-size: var(--titulo-h3); line-height: 1; color: var(--color-primario); font-variant-numeric: lining-nums; }
.rasgo h3 { font-size: var(--titulo-h4); margin-bottom: var(--e-2); }
.rasgo p { font-size: var(--texto-s); margin: 0; }
.seccion--oscura .rasgo { border-color: var(--color-linea-clara); }

/* ==========================================================================
   CIFRAS (barras de consumo / progreso del WP)
   ========================================================================== */
.barras { display: flex; flex-direction: column; gap: var(--e-4); }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem var(--e-3); font-size: var(--texto-s); }
.barra__nombre { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.barra__valor { font-family: var(--fuente-titulos); font-weight: 500; font-size: var(--titulo-h4); line-height: 1.1; color: var(--color-primario); white-space: nowrap; font-variant-numeric: lining-nums; }
.barra::after { content: ""; grid-column: 1 / -1; height: 10px; width: calc(100% * var(--v, 1)); min-width: 10px; background: var(--color-primario); border-radius: 5px; }

/* ==========================================================================
   PRODUCTOS DESTACADOS (foto + nombre + botón)
   ========================================================================== */
.productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--hueco-rejilla); }
.producto { display: flex; flex-direction: column; gap: var(--e-3); }
.producto .foto { aspect-ratio: 10 / 7; }
.producto__nombre { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-tinta); margin: 0; }

/* ==========================================================================
   PASOS (proceso numerado, de la maqueta B)
   ========================================================================== */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--e-4); position: relative; }
.paso { position: relative; padding-top: 4rem; }
.paso::before { content: ""; position: absolute; top: 1.4rem; left: 2.8rem; right: calc(-1 * var(--e-4)); height: 1px; background: linear-gradient(90deg, var(--color-primario), rgba(255,159,10,.15)); }
.paso:last-child::before { display: none; }
.paso__num { position: absolute; top: 0; left: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-primario); color: var(--color-primario); font-family: var(--fuente-titulos); font-size: var(--titulo-h4); font-weight: 500; font-variant-numeric: lining-nums; }
.paso:last-child .paso__num { background: var(--color-primario); color: var(--color-tinta); }
.paso h3 { font-size: var(--titulo-h4); margin-bottom: var(--e-2); }
.paso p { font-size: var(--texto-s); margin: 0; }

/* ==========================================================================
   GALERÍA (mosaico de la maqueta B) y CARRUSEL (scroll-snap, sin JS)
   ========================================================================== */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 14vw, 250px); gap: clamp(.6rem, .4rem + .6vw, 1rem); }
.mosaico__pieza { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio-foto); background: var(--color-crema); }
.mosaico__pieza--grande { grid-column: span 2; grid-row: span 2; }
.mosaico__pieza--ancha { grid-column: span 2; }
.mosaico__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.mosaico__pieza:hover img { transform: scale(1.04); }

.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85%, 26rem), 1fr); gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-3); -webkit-overflow-scrolling: touch; }
.carrusel > * { scroll-snap-align: start; }

/* ==========================================================================
   TABLA COMPARATIVA (sobre la tabla base)
   ========================================================================== */
.tabla--comparativa th:first-child, .tabla--comparativa td:first-child { min-width: 14rem; }
.tabla--comparativa th:not(:first-child), .tabla--comparativa td:not(:first-child) { text-align: center; }
.tabla--comparativa thead th:nth-child(2) { background: var(--color-primario); color: var(--color-tinta); }
.si { color: var(--color-primario-hondo); font-weight: 600; }
.no { color: var(--color-grafito); opacity: .5; }

/* ==========================================================================
   VÍDEO con portada: el reproductor de YouTube no se pide hasta pulsar
   ========================================================================== */
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radio-foto); overflow: hidden; background: var(--color-tinta); cursor: pointer; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity var(--transicion), transform 1s cubic-bezier(.2,.7,.2,1); }
.video:hover img { opacity: 1; transform: scale(1.03); }
.video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-primario) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%231A1A1A'/%3E%3C/svg%3E") 55% 50% / 30px no-repeat; box-shadow: 0 0 0 10px rgba(255,159,10,.25); transition: transform var(--transicion); }
.video:hover::after { transform: translate(-50%, -50%) scale(1.08); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Ventana (las 14 de Popup Maker pasan a <dialog>) */
.ventana { width: min(100% - 2 * var(--margen-lateral), 960px); padding: 0; border: 0; border-radius: var(--radio-foto); background: var(--color-tinta); color: var(--color-texto-claro); }
.ventana::backdrop { background: rgba(17,17,17,.85); }
.ventana__cerrar { position: absolute; right: var(--e-2); top: var(--e-2); z-index: 2; width: var(--toque); height: var(--toque); border: 0; border-radius: 50%; background: var(--color-tinta); color: var(--color-blanco); font-size: 1.5rem; cursor: pointer; }

/* ==========================================================================
   BANDA FINAL (llamada a la acción) y sellos
   ========================================================================== */
.banda { background: var(--color-primario); color: var(--color-tinta); padding-block: var(--e-7); }
.banda h2 { color: var(--color-tinta); max-width: 18ch; margin-bottom: var(--e-4); }
.banda h2 em { color: var(--color-blanco); }
.banda .antetitulo { color: var(--color-tinta); }
.banda .antetitulo::before { background: var(--color-tinta); }
.sellos { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--texto-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sellos li::before { content: "✓"; margin-right: .5rem; }

/* ==========================================================================
   BLOG: tarjetas, metadatos, etiquetas, paginación
   ========================================================================== */
.entradas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 1rem + 3vw, 4rem) var(--hueco-rejilla); }
.entrada, .entrada__enlace { display: flex; flex-direction: column; gap: .9rem; text-decoration: none; color: inherit; }
.entrada__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radio-foto); background: var(--color-crema); }
.entrada__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.entrada__enlace:hover .entrada__foto img { transform: scale(1.04); }
.entrada__meta { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-grafito); margin: 0; }
.entrada__titulo { font-size: var(--titulo-h4); }
.entrada__leer { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-tinta); display: inline-flex; gap: .6rem; min-height: var(--toque); align-items: center; }
.entrada__leer::after { content: "→"; color: var(--color-primario); transition: transform var(--transicion); }
.entrada__enlace:hover .entrada__leer::after { transform: translateX(5px); }

.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.etiquetas a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-3); border: 1px solid var(--color-linea); border-radius: var(--radio); font-size: var(--texto-xs); font-weight: 500; letter-spacing: .08em; text-decoration: none; transition: border-color var(--transicion), color var(--transicion); }
.etiquetas a:hover { border-color: var(--color-primario); color: var(--color-primario-hondo); }

.paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.paginacion a, .paginacion span { display: inline-grid; place-items: center; min-width: var(--toque); min-height: var(--toque); padding: 0 var(--e-3); border: 1px solid var(--color-linea); border-radius: var(--radio); font-size: var(--texto-s); text-decoration: none; }
.paginacion [aria-current] { background: var(--color-tinta); border-color: var(--color-tinta); color: var(--color-blanco); }
.paginacion a:hover { border-color: var(--color-primario); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie { background: var(--color-noche); color: var(--color-texto-claro); padding-block: var(--e-6); font-size: var(--texto-s); }
.pie__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); align-items: center; }
.pie__marca img { width: 150px; margin-bottom: var(--e-3); }
.pie__nombre { margin: 0; font-family: var(--fuente-titulos); font-size: var(--titulo-h4); letter-spacing: .04em; text-transform: uppercase; color: var(--color-blanco); }
.pie__lema { margin: 0; text-align: center; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .1em; color: var(--color-blanco); }
.pie__derecha { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-2); }
.pie__derecha p { margin: 0; font-size: var(--texto-xs); letter-spacing: .06em; }

/* WhatsApp flotante. El verde es el de la marca WhatsApp: excepción a la paleta. */
.whatsapp { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 40; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #25D366; box-shadow: var(--sombra); transition: transform var(--transicion); }
.whatsapp:hover { transform: scale(1.06); }
.whatsapp svg { width: 30px; height: 30px; fill: var(--color-blanco); }


/* ==========================================================================
   PIEZAS DE LA PORTADA Y AFINES
   ========================================================================== */
/* Foto/medio al lado del texto */
.par--arriba { align-items: start; }
.par__media { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.par__media > img { border-radius: var(--radio-foto); }
.par__logo { width: min(240px, 60%); }
.nota-media { padding-left: var(--e-4); border-left: 2px solid var(--color-primario); }
.nota-media h3 { font-size: var(--titulo-h4); margin-bottom: var(--e-2); }
.nota-media .hero__sello { margin-bottom: var(--e-3); }

/* Variantes de rasgos */
.rasgos--estrella { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: var(--e-5) 0; }
.rasgos--estrella .rasgo { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 var(--e-3); padding: var(--e-4); border: 1px solid var(--color-linea-clara); background: rgba(253,253,253,.03); border-radius: var(--radio-foto); }
.rasgos--estrella .rasgo > :not(.rasgo__estrella) { grid-column: 2; }
.rasgo__estrella { grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; margin-top: .2rem; }
.rasgos--separados { margin-top: var(--e-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--e-3); }
.rasgos--separados .rasgo { padding: var(--e-5) var(--e-4); background: var(--color-crema); border: 0; border-radius: var(--radio-foto); }
.rasgos--pilares { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); text-align: center; }
.rasgos--pilares .rasgo { border-top: 0; display: flex; flex-direction: column; align-items: center; }
.rasgos--pilares .rasgo__icono { width: 72px; height: 72px; margin-bottom: var(--e-3); }
.rasgos--pilares h3 { font-size: var(--titulo-h3); font-weight: 300; }
.rasgo__ante { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primario-hondo); margin-bottom: var(--e-2); }
.encabezado--centro :is(h1, h2) + p { margin-inline: auto; }
.acciones--centro { justify-content: center; margin-top: var(--e-6); }

/* Sección con foto de fondo apagada, y sección con adorno */
.seccion--foto { position: relative; isolation: isolate; overflow: hidden; }
.seccion__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.seccion--adorno { position: relative; isolation: isolate; overflow: hidden; }
.seccion__adorno { position: absolute; z-index: -1; width: min(560px, 70vw); right: -8%; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; }
.aparte { margin-top: var(--e-6); }

/* Tabla en caja con marco (Energy Smart) */
.tabla-caja--marco { padding: var(--e-3) var(--e-4); background: rgba(17,17,17,.75); border: 1px solid var(--color-primario); border-radius: var(--radio-foto); }

/* Tabla sobre fondo oscuro */
.tabla--oscura { color: var(--color-texto-claro); }
.tabla--oscura th { color: var(--color-blanco); }
.tabla--oscura td { border-bottom-color: var(--color-linea-clara); }
.tabla--oscura td:first-child { color: var(--color-blanco); font-weight: 600; }

/* Reseñas de Google: mismo aspecto que el widget de Trustindex del WP
   (tarjeta gris, foto, «hace X meses», G de Google, 5 estrellas, sello
   azul, texto a 4 líneas con «Leer más», 4 por vista con flechas y 1 en
   móvil con barra). Los colores de Google y de Trustindex son de esas
   marcas: excepción a la paleta. */
.resenas { position: relative; }
.resenas__pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--e-3)) / 4); gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.resenas__pista::-webkit-scrollbar { display: none; }
.resena { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; background: #f4f4f4; border-radius: 10px; font-size: var(--texto-s); color: #000; }
.resena__cabeza { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: .75rem; align-items: center; }
.resena__foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.resena__nombre { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resena__fecha { margin: 0; font-size: .8rem; color: #6b6b6b; line-height: 1.3; min-height: 1em; }
.resena__plataforma { align-self: start; }
.resena__google { width: 20px; height: 20px; display: block; }
.resena__estrellas { margin: 0; height: 17px; display: flex; align-items: center; gap: .4rem; }
.resena__estrellas::before { content: ""; width: 89px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89 17'%3E%3Cg fill='%23F6BB06'%3E%3Cpath id='e' d='M8.5 0l2.6 5.5 6 .7-4.4 4.1 1.1 5.9-5.3-2.9-5.3 2.9 1.1-5.9L0 6.2l6-.7z'/%3E%3Cuse href='%23e' x='18'/%3E%3Cuse href='%23e' x='36'/%3E%3Cuse href='%23e' x='54'/%3E%3Cuse href='%23e' x='72'/%3E%3C/g%3E%3C/svg%3E") no-repeat; }
.resena__verificada { width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M12 1l2.6 2.3 3.4-.4 1 3.3 3 1.7-1 3.3 1 3.3-3 1.7-1 3.3-3.4-.4L12 23l-2.6-2.3-3.4.4-1-3.3-3-1.7 1-3.3-1-3.3 3-1.7 1-3.3 3.4.4z'/%3E%3Cpath fill='%23fff' d='M10.5 15.6l-3.3-3.3 1.4-1.4 1.9 1.9 4.8-4.8 1.4 1.4z'/%3E%3C/svg%3E") no-repeat center / contain; }
.resena__texto { line-height: 1.6; }
.resena__texto p { margin: 0; }
.resena:not(.resena--abierta) .resena__texto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.resena__mas { align-self: flex-start; padding: 0; min-height: 0; background: none; border: 0; font: inherit; font-size: var(--texto-s); color: #6b6b6b; cursor: pointer; }
.resena__mas:hover { text-decoration: underline; }
.resenas__flecha { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; }
.resenas__flecha::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid #222; border-width: 0 0 2px 2px; transform: translate(-30%, -50%) rotate(45deg); }
.resenas__flecha--sig::before { transform: translate(-70%, -50%) rotate(-135deg); }
.resenas__flecha--ant { left: -17px; }
.resenas__flecha--sig { right: -17px; }
.resenas__flecha[disabled] { display: none; }
.resenas__barra { display: none; width: 150px; height: 3px; margin: var(--e-4) auto 0; background: #d9d9d9; border-radius: 3px; overflow: hidden; }
.resenas__barra span { display: block; height: 100%; width: var(--ancho, 16%); margin-left: var(--desde, 0); background: #555; border-radius: 3px; transition: margin var(--transicion); }
.resenas__verificado { display: flex; justify-content: flex-end; margin: var(--e-3) 0 0; }
.resenas__verificado span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; background: #1b7a55; color: #fff; border-radius: 3px; font-size: .78rem; font-weight: 600; }
.resenas__verificado span::after { content: "i"; display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 700; }

/* Galería: rejilla uniforme (portfolio) */
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.galeria > a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radio-foto); background: var(--color-crema); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.galeria > a:hover img { transform: scale(1.04); }

/* Productos como tarjetas, centrados */
.productos--tarjetas { gap: var(--e-3); }
.productos--tarjetas .producto { align-items: center; text-align: center; padding: var(--e-4); background: var(--color-crema); border-radius: var(--radio-foto); }
.productos--tarjetas .foto { width: 100%; }
.productos--tarjetas .producto { gap: var(--e-3); }
.productos--tarjetas .producto p { margin: 0; font-size: var(--texto-s); }
.rejilla-3.productos--tarjetas .producto { display: flex; flex-direction: column; }

/* Sección con foto a sangre (showroom en la portada) */
.hero--seccion { min-height: clamp(480px, 30vw + 260px, 680px); }
.hero--seccion h2 { color: var(--color-blanco); max-width: 14ch; margin-bottom: var(--e-4); }
.hero--seccion .antetitulo { color: var(--color-blanco); }
.hero--centro { text-align: center; }
.hero--centro .hero__contenido { padding-top: var(--e-7); display: flex; flex-direction: column; align-items: center; }
.hero--centro .antetitulo, .hero--centro .acciones { justify-content: center; }
.hero--centro h2 { max-width: 20ch; }
.hero--centro .hero__velo { background: rgba(26,26,26,.72); }

.faq__respuesta ul { margin: 0 0 var(--e-3); }

/* Entradas con y sin foto (el WP solo tiene destacada en algunas) */
.entrada a { text-decoration: none; }
.entrada__titulo a:hover { color: var(--color-primario-hondo); }
.entrada__meta a:hover { color: var(--color-primario-hondo); }
.entradas .entrada { padding: var(--e-5); background: var(--color-blanco); border-radius: var(--radio-foto); border-top: 2px solid var(--color-primario); }
.entradas .entrada__foto { margin: calc(-1 * var(--e-5)) calc(-1 * var(--e-5)) 0; border-radius: var(--radio-foto) var(--radio-foto) 0 0; }
.entrada__leer { align-self: flex-start; }
.producto__nombre { font-family: var(--fuente-texto); }


/* ==========================================================================
   FORMULARIOS (los de Contact Form 7 del WP, con su mismo receptor)
   ========================================================================== */
.campo__error { font-size: var(--texto-xs); color: #b42318; }
.campo [aria-invalid=true] { border-bottom-color: #b42318; }
.formulario--claro .campo :is(input, textarea, select) { background: var(--color-blanco); border: 1px solid var(--color-linea); padding-inline: var(--e-3); border-radius: var(--radio); }
.formulario--claro .campo :is(input, textarea, select):focus { border-color: var(--color-primario); }
.formulario__aviso[hidden] { display: none; }
.formulario__titulo { grid-column: 1 / -1; font-size: var(--titulo-h3); font-weight: 300; margin-bottom: var(--e-2); }
.formulario--panel .formulario__titulo { color: var(--color-blanco); }
.formulario--panel .formulario__aviso { background: var(--color-grafito); color: var(--color-blanco); }
.formulario--panel .campo select option { color: var(--color-tinta); }
.galeria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-5); }
.galeria--3 > a { aspect-ratio: 4 / 3; }

/* Vías de contacto con icono (dibujo, no contenido) */
.vias { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); font-size: var(--texto-s); }
.vias li { position: relative; padding-left: 2rem; }
.vias li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; background: var(--color-primario); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.vias a { text-decoration: none; }
.vias a:hover { color: var(--color-primario-hondo); }
.via--lugar { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.via--telefono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.via--correo { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.via--horario { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V7h-2v6.4l4.5 2.7 1-1.7z'/%3E%3C/svg%3E"); }

.seccion--404 { min-height: 60vh; display: grid; align-items: center; }

/* Mapa a lo ancho */
.mapa { display: block; width: 100%; height: clamp(320px, 30vw, 450px); border: 0; filter: grayscale(.35); }

/* ==========================================================================
   BLOG: ENTRADA, LISTADOS Y «MORE ARTICLES»
   ========================================================================== */
.titulo-pagina--entrada { text-align: center; padding-block: var(--e-7); }
.titulo-pagina--entrada h1 { max-width: 24ch; margin-inline: auto; font-size: var(--titulo-h2); }
.titulo-pagina--entrada .antetitulo { justify-content: center; }
.titulo-pagina__meta { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5); font-size: var(--texto-xs); letter-spacing: .08em; }
.titulo-pagina--foto { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 4rem + 8vw, 11rem); }
.titulo-pagina__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.titulo-pagina--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(26,26,26,.62); }
.titulo-pagina--listado h1 { font-size: var(--titulo-h2); }

/* Cuerpo de la entrada: ancho de lectura amplio, como el original, con
   las imágenes alineadas a un lado o al centro según venían en el WP. */
.prosa--entrada { max-width: 60rem; margin-inline: auto; }
.prosa--entrada::after { content: ""; display: block; clear: both; }
.prosa--entrada img { display: block; height: auto; border-radius: var(--radio-foto); }
.prosa--entrada .alinea-derecha { float: right; width: min(55%, 560px); margin: .3rem 0 var(--e-4) var(--e-5); }
.prosa--entrada .alinea-izquierda { float: left; width: min(55%, 560px); margin: .3rem var(--e-5) var(--e-4) 0; }
.prosa--entrada .alinea-centro { margin: var(--e-5) auto; }
.prosa--entrada ol, .prosa--entrada ul { padding-left: 1.4em; }
.prosa--entrada li + li { margin-top: var(--e-2); }
.prosa--entrada table { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.prosa--entrada :is(td, th) { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--color-linea); text-align: left; vertical-align: top; }
.prosa--entrada .video { margin: var(--e-5) 0; }

/* Entrada en HTML propio (Spa vs. Piscina): sus piezas, con la composición del WP */
.prosa--propia .intro-text { font-size: var(--texto-l); padding-left: var(--e-4); border-left: 2px solid var(--color-primario); }
.prosa--propia .section-h2 { font-size: var(--titulo-h3); font-weight: 500; }
.prosa--propia .section-h3 { font-size: var(--titulo-h4); margin-top: var(--e-5); }
.prosa--propia .benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.prosa--propia .benefit-card { padding: var(--e-4); background: var(--color-crema); border-radius: var(--radio-foto); font-size: var(--texto-s); }
.prosa--propia .benefit-card > * + * { margin-top: var(--e-2); }
.prosa--propia .icon { display: block; font-size: 1.4rem; }
.prosa--propia .comparison-table th { font-size: var(--texto-xs); letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid var(--color-primario); }
.prosa--propia .check { color: var(--color-primario-hondo); font-weight: 600; }
.prosa--propia .cross { color: var(--color-grafito); }
.prosa--propia .tip-box { padding: var(--e-4); background: var(--color-crema); border-left: 3px solid var(--color-primario); border-radius: var(--radio-foto); font-size: var(--texto-s); }
.prosa--propia .error-list { list-style: none; padding: 0; }
.prosa--propia .error-list li { position: relative; padding-left: 2.5rem; font-size: var(--texto-s); }
.prosa--propia .err-num { position: absolute; left: 0; top: -.2rem; font-family: var(--fuente-titulos); font-size: var(--titulo-h4); color: var(--color-primario); font-variant-numeric: lining-nums; }
.prosa--propia .cta-block { margin-top: var(--e-6); padding: var(--e-6) var(--e-5); text-align: center; background: var(--color-tinta); color: var(--color-texto-claro); border-radius: var(--radio-foto); }
.prosa--propia .cta-block :is(h2, h3) { color: var(--color-blanco); }
.prosa--propia .cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: var(--e-4); }
.prosa .boton--primario { color: var(--color-tinta); }
.prosa .boton { text-decoration: none; }
.prosa--propia .cta-btns .boton--borde { border-color: rgba(253,253,253,.55); color: var(--color-blanco); }
.prosa--propia .seo-snippet { font-size: var(--texto-xs); color: var(--color-grafito); }

/* Listados: una fila por entrada, foto a la izquierda si la tiene */
.filas { display: flex; flex-direction: column; gap: var(--e-3); max-width: 64rem; margin-inline: auto; }
.fila { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: var(--e-5); padding: var(--e-5); background: var(--color-blanco); border-radius: var(--radio-foto); border-top: 2px solid var(--color-primario); }
.fila--texto { grid-template-columns: minmax(0, 1fr); }
.fila__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio-foto); align-self: start; }
.fila__foto img { width: 100%; height: 100%; object-fit: cover; }
.fila__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.fila__titulo { font-size: var(--titulo-h4); font-weight: 500; }
.fila__titulo a, .entrada__meta a { text-decoration: none; }
.fila__titulo a:hover { color: var(--color-primario-hondo); }
.fila__extracto { margin: 0; font-size: var(--texto-s); }
.fila .entrada__leer { text-decoration: none; }

/* «More articles»: carrusel de tarjetas con flechas */
.deslizador { position: relative; }
.deslizador__pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--e-3)) / 4); gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.deslizador__pista::-webkit-scrollbar { display: none; }
.deslizador__pista > * { scroll-snap-align: start; }
.deslizador .entrada { padding: var(--e-4); background: var(--color-blanco); border-radius: var(--radio-foto); border-top: 2px solid var(--color-primario); }
.deslizador .entrada__foto { margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) 0; border-radius: var(--radio-foto) var(--radio-foto) 0 0; }
.deslizador__flecha { position: absolute; top: 50%; z-index: 2; width: var(--toque); height: var(--toque); margin-top: calc(var(--toque) / -2); border: 0; border-radius: 50%; background: var(--color-tinta); cursor: pointer; }
.deslizador__flecha::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid var(--color-primario); border-width: 0 0 2px 2px; transform: translate(-30%, -50%) rotate(45deg); }
.deslizador__flecha--sig::before { transform: translate(-70%, -50%) rotate(-135deg); }
.deslizador__flecha--ant { left: calc(var(--toque) / -2); }
.deslizador__flecha--sig { right: calc(var(--toque) / -2); }
.deslizador__flecha[disabled] { display: none; }


/* ==========================================================================
   PIEZAS DE LAS PÁGINAS INTERIORES
   ========================================================================== */
/* Foto con sello encima (Swim Spas: «Piscina + spa en uno») */
.foto--sello { position: relative; overflow: visible; background: none; }
.foto--sello img { border-radius: var(--radio-foto); }
.foto--sello figcaption { position: absolute; left: var(--e-4); bottom: var(--e-4); margin: 0; background: var(--color-primario); color: var(--color-tinta); border: 0; }
.foto--alta { aspect-ratio: 4 / 5; }

/* Notas apiladas con rótulo (comparaciones cortas) */
.notas { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-5); }
.nota { padding: var(--e-4); background: var(--color-blanco); border-left: 2px solid var(--color-primario); border-radius: var(--radio-foto); font-size: var(--texto-s); }
.nota p:last-child { margin: 0; }

/* Rasgos en tres columnas, solo rótulo y texto */
.rasgos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rasgos--tres .rasgo p:last-child { font-size: var(--texto-s); }

/* Fila de fotos a sangre del contenedor */
.galeria--fila { padding-block: var(--e-3); }
.galeria--fila > figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio-foto); }
.galeria--fila img { width: 100%; height: 100%; object-fit: cover; }

/* Series (Swim Spas): tarjeta con banda oscura arriba */
.series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.serie { display: flex; flex-direction: column; background: var(--color-blanco); border-radius: var(--radio-foto); overflow: hidden; }
.serie__cabeza { padding: var(--e-4); background: var(--color-tinta); color: var(--color-blanco); border-bottom: 2px solid var(--color-primario); }
.serie__cabeza h3 { color: var(--color-blanco); font-weight: 300; }
.serie__nombre { margin: 0 0 var(--e-2); font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primario); }
.serie__cuerpo { padding: var(--e-4); font-size: var(--texto-s); }
.serie__lista, .sellos--estrella { list-style: none; padding: 0; margin: var(--e-3) 0 0; }
.serie__lista li { display: flex; gap: var(--e-2); align-items: flex-start; padding: .45rem 0; border-top: 1px solid var(--color-linea); }
.serie__lista .rasgo__estrella, .sellos--estrella .rasgo__estrella { width: 1rem; height: 1rem; margin-top: .25rem; flex: none; }

/* Pasos en caja (Swim Spas, sobre oscuro) */
.pasos--cajas { gap: var(--e-3); }
.pasos--cajas .paso { padding: var(--e-5) var(--e-4); background: rgba(253,253,253,.05); border: 1px solid var(--color-linea-clara); border-radius: var(--radio-foto); text-align: center; }
.pasos--cajas .paso::before { display: none; }
.pasos--cajas .paso__num { position: static; width: auto; height: auto; margin: 0 auto var(--e-3); border: 0; display: block; background: none; font-size: var(--titulo-h2); font-weight: 300; }
.pasos--cajas .paso:last-child .paso__num { background: none; color: var(--color-primario); }

/* Sellos: centrados con rótulo; o con estrella */
.sellos--centro { justify-content: center; gap: var(--e-4) var(--e-7); margin-top: var(--e-6); text-transform: none; letter-spacing: 0; font-weight: 400; }
.sellos--centro li { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); text-align: center; font-family: var(--fuente-titulos); font-size: var(--titulo-h4); }
.sellos--centro li::before { display: none; }
.sellos--centro b { font-family: var(--fuente-texto); font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primario); }
.sellos--estrella { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: center; gap: var(--e-2) var(--e-6); margin-top: var(--e-5); font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sellos--estrella li { display: flex; gap: var(--e-2); }
.sellos--estrella li::before { display: none; }

/* Caja oscura con texto y foto (Bañera fría) */
.caja-oscura { padding: var(--e-5); background: var(--color-tinta); color: var(--color-texto-claro); border-radius: var(--radio-foto); gap: var(--e-4); align-items: center; }
.caja-oscura h3 { color: var(--color-blanco); font-size: var(--titulo-h3); font-weight: 300; margin-bottom: var(--e-3); }
.caja-oscura p { font-size: var(--texto-s); }
.par__imagen { margin-top: var(--e-4); border-radius: var(--radio-foto); }
.hero__texto--ancho { max-width: 52rem; margin-inline: auto; font-size: var(--texto-base); }
.faq--compacta .faq__pregunta { font-size: var(--texto-xs); font-family: var(--fuente-texto); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; min-height: 52px; padding-block: var(--e-3); }

/* Modelos: cabecera de colección (texto y foto a medias) y fichas */
.coleccion-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--color-crema); scroll-margin-top: var(--e-6); }
.coleccion-cabeza__texto { padding: var(--e-7) var(--margen-lateral); align-self: center; max-width: 40rem; }
.coleccion-cabeza__texto h2 { margin: var(--e-4) 0; }
.coleccion-cabeza__texto .hero__sello { margin: 0; color: var(--color-primario-hondo); border-color: var(--color-primario); }
.coleccion-cabeza__foto { min-height: 360px; }
.coleccion-cabeza__foto img { width: 100%; height: 100%; object-fit: cover; }
.fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--hueco-rejilla); }
.ficha { display: flex; flex-direction: column; gap: var(--e-3); font-size: var(--texto-s); }
.ficha__foto { aspect-ratio: 1; overflow: hidden; border-radius: var(--radio-foto); background: var(--color-blanco); }
.ficha__foto img { width: 100%; height: 100%; object-fit: contain; }
.ficha__miniaturas { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.ficha__miniatura { width: 56px; height: 56px; padding: 0; border: 1px solid var(--color-linea); border-radius: var(--radio); background: var(--color-blanco); cursor: pointer; overflow: hidden; }
.ficha__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.ficha__miniatura--activa { border-color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario); }
.ficha__video { align-self: flex-start; }
.ficha__nombre { font-size: var(--titulo-h3); font-weight: 300; color: var(--color-primario-hondo); }
.ficha__datos { list-style: none; margin: 0; padding: 0; }
.ficha__datos li { padding: .3rem 0; border-bottom: 1px solid var(--color-linea); }
.ficha__rotulo { margin: var(--e-2) 0 0; font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ficha__acabados { width: min(100%, 287px); height: auto; }
.ventana .video { border-radius: 0; }

/* Mitades: texto y foto a sangre, alternando (Experiences) */
.mitades { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--color-crema); }
.mitades--invertida > .mitades__foto { order: -1; }
.mitades__texto { padding: var(--e-7) var(--margen-lateral); align-self: center; max-width: 40rem; }
.mitades__texto h3 { font-size: var(--titulo-h3); font-weight: 300; margin-bottom: var(--e-4); }
.mitades__foto { min-height: 420px; }
.mitades__foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria--tira { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
.galeria--tira > a { aspect-ratio: 1; border-radius: 0; }

.entradilla-grande { font-family: var(--fuente-titulos); font-size: var(--titulo-h3); line-height: 1.3; color: var(--color-tinta); max-width: 40ch; margin: 0 auto var(--e-4); }
.producto__estrella { width: 22px; height: 22px; }
.entradilla-grande--ancha { max-width: 60ch; font-size: var(--titulo-h4); }
.rejilla--arriba { align-items: stretch; }
.imagen-centro { max-width: 52rem; margin-inline: auto; }
.caja-oscura ul { font-size: var(--texto-s); }
.productos--izquierda .producto { align-items: flex-start; text-align: left; }
.producto__titulo { font-size: var(--titulo-h3); font-weight: 300; }
.par__texto h2.aparte { margin-top: var(--e-6); }
.par__texto .antetitulo.aparte { margin-top: var(--e-6); }
.producto__nombre a { text-decoration: none; }
.producto__nombre a:hover { color: var(--color-primario-hondo); }
.par__texto h3.aparte { margin: var(--e-5) 0 var(--e-3); }

/* Tarjeta de horario del showroom */
.horario { padding: var(--e-5); background: var(--color-blanco); border-radius: var(--radio-foto); border-top: 2px solid var(--color-primario); box-shadow: var(--sombra); text-align: center; font-size: var(--texto-s); }
.horario h3 { margin-bottom: var(--e-3); }
.horario__dias { display: grid; grid-template-columns: 1fr 1fr; margin: var(--e-4) 0; padding-block: var(--e-3); border-block: 1px solid var(--color-linea); }
.horario__dias dt { font-size: var(--texto-xxs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.horario__dias dd { margin: var(--e-1) 0 0; font-family: var(--fuente-titulos); font-size: var(--titulo-h4); color: var(--color-tinta); font-variant-numeric: lining-nums; }
.horario__tel { margin: var(--e-3) 0 0; }
.horario__tel a { color: var(--color-primario-hondo); }

/* ==========================================================================
   RESPUESTA
   ========================================================================== */
@media (max-width: 1180px) {
  .colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resenas__pista, .deslizador__pista { grid-auto-columns: calc((100% - 2 * var(--e-3)) / 3); }
  .series, .rasgos--tres, .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prosa--propia .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabecera__tel { display: none; }
}

@media (max-width: 860px) {
  .cabecera__fila { gap: var(--e-3); }
  .cabecera__logo img { width: 124px; }
  .hamburguesa {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    width: 48px; height: 48px; margin-left: auto; padding: 0; background: transparent; border: 1px solid rgba(253,253,253,.35); border-radius: var(--radio); cursor: pointer; position: relative; z-index: 2;
  }
  .hamburguesa span { display: block; width: 22px; height: 2px; background: var(--color-blanco); transition: transform var(--transicion), opacity var(--transicion); }
  .cabecera--abierta .hamburguesa span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .cabecera--abierta .hamburguesa span:nth-child(2) { opacity: 0; }
  .cabecera--abierta .hamburguesa span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu {
    position: fixed; inset: 0; z-index: 1; margin: 0; padding: 6.5rem var(--margen-lateral) var(--e-5);
    background: var(--color-tinta); flex-direction: column; align-items: stretch; justify-content: space-between;
    visibility: hidden; opacity: 0; transition: opacity var(--transicion), visibility var(--transicion); overflow-y: auto;
  }
  .cabecera--abierta .menu { visibility: visible; opacity: 1; }
  .cabecera--abierta .cabecera__logo { position: relative; z-index: 2; }
  .menu__lista { flex-direction: column; gap: 0; }
  .menu__lista > li > a, .menu__grupo > button { display: flex; width: 100%; min-height: 56px; font-family: var(--fuente-titulos); font-size: var(--titulo-h3); font-weight: 300; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--color-linea-clara); }
  .menu__grupo > button { justify-content: space-between; }
  .menu__lista > li > a::after { display: none; }
  .menu__sub { position: static; display: none; visibility: visible; opacity: 1; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--e-3) var(--e-3); }
  .menu__grupo--abierto .menu__sub { display: block; }
  .menu__sub a { min-height: var(--toque); }
  .menu__pie { display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-5); }
  .menu > .boton { display: none; }

  .hero__velo { background: linear-gradient(0deg, rgba(26,26,26,.97) 0%, rgba(26,26,26,.88) 55%, rgba(26,26,26,.7) 100%); }
  .par { grid-template-columns: minmax(0, 1fr); }
  .par--invertido > :first-child { order: 0; }
  .paso::before { display: none; }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 30vw, 220px); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resenas__pista { grid-auto-columns: 100%; }
  .deslizador__pista { grid-auto-columns: 85%; }
  .series, .rasgos--tres { grid-template-columns: minmax(0, 1fr); }
  .coleccion-cabeza, .mitades { grid-template-columns: minmax(0, 1fr); }
  .mitades--invertida > .mitades__foto { order: 0; }
  .mitades__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .galeria--tira { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coleccion-cabeza__foto { min-height: 0; aspect-ratio: 16 / 9; }
  .galeria--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deslizador__flecha { display: none; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-4); }
  .prosa--entrada :is(.alinea-derecha, .alinea-izquierda) { float: none; width: 100%; margin: var(--e-4) 0; }
  .resenas__flecha { display: none; }
  .resenas__barra { display: block; }
  .resenas__verificado { justify-content: center; }
  .pie__fila { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .pie__marca img { margin-inline: auto; }
  .pie__derecha { align-items: center; }
}

@media (max-width: 560px) {
  .hero .acciones .boton { width: 100%; }
  .mosaico__pieza--grande, .mosaico__pieza--ancha { grid-column: 1 / -1; }
  .colecciones, .fichas { grid-template-columns: minmax(0, 1fr); }
  .sellos--estrella { grid-template-columns: minmax(0, 1fr); }
  .prosa--propia .benefit-grid { grid-template-columns: minmax(0, 1fr); }
}