/* =========================================================
   Pool Piscinas — estilos
   Colores, tipografías y medidas se ajustan en :root
   ========================================================= */

:root {
  /* Paleta: verde profundo, blancos cálidos y salvia */
  --verde-900: #16261d;
  --verde-800: #1c2f24;      /* verde profundo principal */
  --verde-700: #2a4133;
  --verde-500: #53695a;
  --salvia: #e7ece4;
  --crema: #f8f6f1;          /* fondo general */
  --blanco: #ffffff;
  --terracota: #b8674a;
  --tinta: #1b231e;
  --texto: #34403a;
  --texto-suave: #5e6a63;
  --linea: rgba(28, 47, 36, 0.14);
  --linea-fuerte: rgba(28, 47, 36, 0.32);
  --linea-clara: rgba(248, 246, 241, 0.24);
  --crema-suave: rgba(248, 246, 241, 0.72);
  --sombra: 0 14px 40px rgba(28, 47, 36, 0.08);

  --serif: "Playfair Display", "Didot", "Bodoni 72", serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ancho: 1240px;
  --seccion: clamp(56px, 7vw, 104px);
  --radio-l: 28px;
  --radio-m: 20px;
  --radio-s: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-bottom: el foco con teclado nunca queda debajo del botón flotante */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; scroll-padding-bottom: 88px; }
body {
  margin: 0; background: var(--crema); color: var(--texto);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--verde-800); color: var(--crema); padding: 10px 16px; text-decoration: none; }
.saltar:focus { top: 12px; }
.nowrap { white-space: nowrap; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ancla { position: relative; top: 0; display: block; height: 0; }

/* ---------- Tipografía ---------- */
.sobretitulo {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--verde-500); margin-bottom: 1rem;
}
.sobretitulo--claro { color: var(--crema-suave); }
.titulo-seccion, .portada__titulo, .pasos__titulo {
  font-family: var(--serif); font-weight: 400; color: var(--verde-800); letter-spacing: -0.02em; line-height: 1;
}
.titulo-seccion { font-size: clamp(2.3rem, 4.4vw, 3.9rem); }
.titulo-seccion em, .portada__titulo em { display: block; font-style: italic; }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  min-height: 52px; padding: 0 1.7em;
  background: var(--verde-800); color: var(--crema);
  border: 1px solid var(--verde-800); border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.boton:hover { background: var(--verde-700); border-color: var(--verde-700); }
.boton:active { transform: translateY(1px); }
.boton--claro { background: var(--crema); color: var(--verde-800); border-color: var(--crema); }
.boton--claro:hover { background: var(--blanco); border-color: var(--blanco); }
.boton--ancho { width: 100%; }
.icono { width: 1.15em; height: 1.15em; flex: none; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.55em; padding: 0.35em 0;
  font-size: 0.9375rem; font-weight: 500; color: var(--verde-800); text-decoration: none;
  border-bottom: 1px solid var(--linea-fuerte); transition: border-color .3s var(--ease);
}
.enlace-flecha::after { content: "↓"; transition: transform .3s var(--ease); }
.enlace-flecha:hover { border-color: var(--verde-800); }
.enlace-flecha:hover::after { transform: translateY(3px); }

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 246, 241, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .3s var(--ease);
}
.cabecera.es-solida { box-shadow: 0 1px 0 var(--linea); }
.cabecera__interior {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  max-width: calc(var(--ancho) + var(--gutter) * 2); margin-inline: auto; padding: 12px var(--gutter);
}
.marca { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.marca__monograma { width: 42px; height: auto; }
.marca__palabra { width: 104px; height: auto; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 32px); }
.nav a { position: relative; font-size: 0.9375rem; font-weight: 500; color: var(--verde-800); text-decoration: none; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.activo::after { transform: scaleX(1); }
/* "Consultar": único acceso con forma de botón en la cabecera */
.nav { align-items: center; }
.nav .nav__consultar { padding: 8px 18px; border: 1px solid var(--verde-800); border-radius: 999px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.nav .nav__consultar::after { display: none; }
.nav .nav__consultar:hover, .nav .nav__consultar.activo { background: var(--verde-800); color: var(--crema); }

/* Selector de idioma ES / EN */
.idioma { display: flex; align-items: center; gap: 2px; }
.idioma__opcion {
  min-width: 36px; min-height: 36px; padding: 0 6px; background: none; border: 0; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; color: var(--texto-suave);
  text-decoration: underline transparent; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s;
}
.idioma__opcion[aria-pressed="true"] { color: var(--verde-800); text-decoration-color: var(--verde-800); }
.idioma__opcion:hover { color: var(--verde-800); }
.idioma__barra { color: var(--linea-fuerte); font-size: 0.8125rem; }

/* =========================================================
   1. PORTADA — imagen intervenida por la tipografía
   El titular cruza del fondo crema a la foto: verde sobre crema, crema sobre la imagen
   (el punto de corte lo calcula main.js). La foto se muestra entera: la piscina nunca se recorta.
   ========================================================= */
.portada { position: relative; padding-top: clamp(8px, 1.5vw, 20px); }
.portada__grilla {
  --w: min(var(--ancho), 100% - 2 * var(--gutter));
  position: relative; display: grid; align-items: center;
  grid-template-columns: calc((100% - var(--w)) / 2) calc(var(--w) * 0.26) calc(var(--w) * 0.02) 1fr;
}
.portada__texto { position: relative; z-index: 2; grid-column: 2; grid-row: 1; padding-block: clamp(24px, 3vw, 40px); }
.portada__titulo {
  --corte-x: 100%;
  width: max-content; max-width: none;
  font-size: clamp(3.2rem, 8.6vw, 8.6rem); line-height: 0.9; letter-spacing: -0.025em; margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--verde-800) var(--corte-x), var(--crema) var(--corte-x));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 20px rgba(12, 22, 16, 0.14));
}
.portada__imagen { position: relative; grid-column: 4; grid-row: 1; align-self: center; }
.portada__imagen img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; }
/* Sombra muy suave donde entra el titular, para que se lea sobre la foto */
.portada__imagen::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 22, 16, 0.42), rgba(12, 22, 16, 0) 42%);
}

/* Recurso editorial: texto vertical en el margen */
.portada__vertical {
  position: absolute; z-index: 2; top: 50%; left: max(10px, calc((100% - min(var(--ancho), 100% - 2 * var(--gutter))) / 2 - 38px));
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: 0.625rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--verde-500); white-space: nowrap;
}

/* =========================================================
   PUENTE — entre la portada y el 6 × 3, sobre el fondo marfil. Editorial, a la izquierda:
   línea corta y etiqueta; frase con cursiva; bajada con una línea vertical fina.
   En escritorio, dos columnas (etiqueta a la izquierda; frase y bajada a la derecha).
   ========================================================= */
.puente { padding: clamp(64px, 7vw, 104px) 0 clamp(4px, 1vw, 12px); }
.puente__interior { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.puente__linea { grid-column: 1; grid-row: 1; display: block; width: 48px; height: 1px; margin: 0 0 18px; background: var(--verde-800); }
/* Las tres ideas con el mismo peso: mismo color, tamaño y grosor */
.puente__etiqueta { grid-column: 1; grid-row: 2; align-self: start; font-size: 0.6875rem; font-weight: 500; line-height: 2; letter-spacing: 0.22em; text-transform: uppercase; color: var(--verde-700); }
/* Cada idea entera; el punto queda al final de la línea si corta */
.puente__etiqueta span { white-space: nowrap; }
.puente__etiqueta span:not(:last-child)::after { content: "\00a0·"; }
.puente__titulo { grid-column: 2; grid-row: 1 / 3; font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--verde-800); }
.puente__titulo em { display: block; font-style: italic; }
.puente__bajada { grid-column: 2; grid-row: 3; max-width: 26rem; margin-top: 14px; padding-left: 16px; border-left: 1px solid var(--linea-fuerte); font-size: 1.0625rem; line-height: 1.5; color: var(--texto-suave); }

/* =========================================================
   2. MODELO 6 × 3 — lámina arquitectónica sobre verde
   ========================================================= */
.seccion { padding-block: var(--seccion); }
.modelo__panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "cabeza lamina" "info lamina" "respaldo respaldo";
  column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(24px, 3vw, 36px);
  padding: clamp(28px, 5vw, 64px); background: var(--verde-800); color: var(--crema-suave);
  border-radius: var(--radio-l);
}

/* Título: MODELO / 6 × 3 / METROS */
.modelo__cabeza { grid-area: cabeza; }
.modelo__titulo { display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; margin-bottom: 1.2rem; }
.modelo__etiqueta, .modelo__metros { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase; color: var(--crema-suave); }
.modelo__medida {
  font-family: var(--sans); font-weight: 200; font-size: clamp(5rem, 10vw, 8.6rem); line-height: 0.92;
  letter-spacing: -0.02em; color: var(--crema); margin: 0.12em 0 0.08em -0.04em;
}
.modelo__por { display: inline-block; font-size: 0.46em; vertical-align: 0.42em; margin: 0 0.1em; }
.modelo__tipo { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--crema); }
.modelo__tipo::before { content: ""; width: 36px; height: 1px; background: var(--crema-suave); }

.modelo__info { grid-area: info; align-self: start; }
/* Elementos solo para celular (en escritorio la misma información ya está en otro lugar) */
.solo-movil { display: none; }
/* El "5" de la garantía: en escritorio lo muestra el sello; en celular va en el texto */
.garantia__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marca--clara { display: none; }
[data-ampliable] img { cursor: zoom-in; }
.modelo__bajada { max-width: 27rem; margin-bottom: 1.3rem; color: var(--crema); }

.beneficios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5rem; }
.beneficios li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 1px solid var(--linea-clara); border-radius: 999px; font-size: 0.875rem; color: var(--crema);
}
.beneficios li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--crema); }

.sellos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 18px 0; margin-bottom: 0; border-top: 1px solid var(--linea-clara); border-bottom: 1px solid var(--linea-clara); }
.sello { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.sello__marca { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--linea-clara); color: var(--crema); }
.sello__marca--numero { font-family: var(--serif); font-size: 1.8rem; line-height: 1; }
.sello__marca svg { width: 24px; height: 24px; }
.sello__texto { font-family: var(--serif); font-size: 1.1rem; line-height: 1.15; color: var(--crema); }
.sello__detalle { display: block; margin-top: 4px; font-family: var(--sans); font-size: 0.78rem; line-height: 1.35; color: var(--crema-suave); }

/* Lámina */
.lamina { grid-area: lamina; position: relative; align-self: center; }
.lamina__tabs { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: clamp(18px, 2.4vw, 28px); border: 1px solid var(--linea-clara); border-radius: 999px; }
.lamina__tab { min-height: 34px; padding: 0 16px; background: none; border: 0; border-radius: 999px; cursor: pointer; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--crema-suave); transition: background-color .25s, color .25s; }
.lamina__tab[aria-pressed="true"] { background: var(--crema); color: var(--verde-800); }
.lamina__vista--volumen { display: none; }
.lamina[data-vista="volumen"] .lamina__vista--planta { display: none; }
.lamina[data-vista="volumen"] .lamina__vista--volumen { display: block; }
.lamina__vista--volumen img { width: 100%; }

.lamina__vista--planta { display: grid; grid-template-columns: auto 1fr; align-items: end; }
.plano { position: relative; width: clamp(210px, 21vw, 280px); margin: 6px 0 44px 46px; }
.plano__render { width: 100%; }

/* Cotas: líneas finas completas, con ambos extremos y margen */
.cota { position: absolute; color: rgba(248, 246, 241, 0.75); font-size: 0.75rem; letter-spacing: 0.16em; background: currentColor; }
.cota span { position: absolute; top: 50%; left: 50%; padding: 3px 7px; background: var(--verde-800); color: var(--crema); white-space: nowrap; transform: translate(-50%, -50%); }
.cota--largo { left: -30px; top: 2.8%; bottom: 3.4%; width: 1px; }
.cota--largo span { transform: translate(-50%, -50%) rotate(-90deg); }
.cota--largo::before, .cota--largo::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: currentColor; }
.cota--largo::before { top: 0; } .cota--largo::after { bottom: 0; }
.cota--ancho { left: 14.7%; right: 14.6%; bottom: -26px; height: 1px; }
.cota--ancho::before, .cota--ancho::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor; }
.cota--ancho::before { left: 0; } .cota--ancho::after { right: 0; }

/* Anotaciones: punto sobre la pieza, línea fina y texto a la derecha */
.anotacion { position: absolute; left: var(--x); top: var(--y); width: calc(100% - var(--x) + 34px); height: 1px; background: rgba(248, 246, 241, 0.7); }
.anotacion::before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 3px rgba(28, 47, 36, 0.35); }
.anotacion__num { display: none; }
.anotacion__texto { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 0.9375rem; color: var(--crema); }
.leyenda { display: none; }

.esquema { justify-self: end; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 44px 24px; }
.esquema img { width: 58px; height: auto; opacity: 0.9; }
.esquema figcaption { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--crema-suave); white-space: nowrap; }

/* Respaldo del fabricante: sello discreto al pie del bloque del modelo, solo tipografía.
   Sin enlace: Fiberglass respalda el producto; la consulta la recibe Pool Piscinas. */
.sello-fg {
  grid-area: respaldo; padding-top: clamp(20px, 2.4vw, 26px); border-top: 1px solid var(--linea-clara); color: var(--crema);
}
.sello-fg__etiqueta { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crema-suave); }
.sello-fg__dato { margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--crema); }
.sello-fg__rasgos { margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--crema-suave); }
/* Cada rasgo queda entero en su línea: el corte nunca deja un punto al inicio */
.sello-fg__rasgos span { white-space: nowrap; }
/* Estándares del fabricante: línea informativa, un nivel más abajo (no son sellos ni certificaciones) */
.sello-fg__normas { margin-top: 3px; font-size: 0.75rem; line-height: 1.45; color: rgba(248, 246, 241, 0.6); text-wrap: pretty; }
.sello-fg__dato, .instalacion__intro, .instalacion__grupo dd, .instalacion__nota { text-wrap: pretty; }

/* Otras opciones: todas las medidas juntas. Botones que eligen la medida en la consulta */
.opciones { margin-top: clamp(28px, 3.6vw, 44px); padding-bottom: clamp(8px, 1vw, 12px); }
.opciones__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 16px; }
.opciones__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--verde-800); }
.opciones__titulo em { font-style: italic; }
.opciones__ayuda { font-size: 0.875rem; color: var(--texto-suave); }
.medidas-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.medida-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 76px; padding: 10px 8px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s); background: var(--blanco); color: var(--verde-800);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.medida-chip:hover { border-color: var(--verde-800); transform: translateY(-1px); }
.medida-chip__num { font-family: var(--sans); font-weight: 300; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; }
.medida-chip__num span { margin: 0 0.12em; font-size: 0.7em; }
.medida-chip__m { font-size: 0.75rem; color: var(--texto-suave); }
.medida-chip__tag { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-500); }
.medida-chip--destacada { border-color: var(--verde-800); box-shadow: inset 0 0 0 1px var(--verde-800); }
/* Personalizada: diferenciación moderada (fondo salvia, cursiva) */
.medida-chip--personalizada { background: var(--salvia); border-style: dashed; }
.medida-chip__texto { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.1; }
.medida-chip[aria-pressed="true"] { background: var(--verde-800); border-color: var(--verde-800); color: var(--crema); }
.medida-chip[aria-pressed="true"] .medida-chip__m, .medida-chip[aria-pressed="true"] .medida-chip__tag { color: var(--crema-suave); }
/* "¿No sabés qué medida elegir? · Necesito asesoramiento": discreto, debajo de las medidas */
.asesoria { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 14px; font-size: 0.9375rem; color: var(--texto-suave); }
.asesoria__boton {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: 999px; background: none;
  font-size: 0.875rem; font-weight: 500; color: var(--verde-800);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.asesoria__boton:hover { border-color: var(--verde-800); }
.asesoria__boton[aria-pressed="true"] { background: var(--verde-800); border-color: var(--verde-800); color: var(--crema); }
.asesoria__boton[aria-pressed="true"]::before { content: "✓"; font-size: 0.8125rem; }
.opciones__personalizada { max-width: 46rem; margin-top: 16px; font-size: 0.9375rem; line-height: 1.55; color: var(--texto-suave); }
.opciones__personalizada span:first-child { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--verde-800); }

/* =========================================================
   INSTALACIÓN ESTÁNDAR — editorial: tipografía, aire y líneas finas (sin cajas ni íconos)
   ========================================================= */
.instalacion { padding-top: 0; padding-bottom: clamp(56px, 6vw, 88px); }
.instalacion__grilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.instalacion .titulo-seccion { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.instalacion__intro { max-width: 26rem; margin-top: 1.2rem; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); }
.instalacion__grupos { margin: 0; border-top: 1px solid var(--linea-fuerte); }
.instalacion__grupo { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: 4px 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.instalacion__grupo dt { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.2; color: var(--verde-800); }
.instalacion__grupo dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--texto); }
.instalacion__nota { max-width: 40rem; margin-top: 16px; font-size: 0.8125rem; line-height: 1.55; color: var(--texto-suave); }

/* =========================================================
   EXTRAS OPCIONALES — sección propia, sobre fondo claro
   ========================================================= */
.modelo { padding-bottom: clamp(48px, 5vw, 72px); }
.extras { padding-top: 0; }
.extras__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.extras .titulo-seccion { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
.extras .titulo-seccion em { display: inline; }
.extras__nota { max-width: 26rem; font-size: 0.9375rem; line-height: 1.5; color: var(--texto-suave); }
.extras__nota strong { display: block; margin-top: 2px; font-weight: 500; color: var(--verde-800); }
.extras__galeria { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.extra { display: flex; flex-direction: column; min-width: 0; }
.extra__ampliar { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radio-s); overflow: hidden; }
.extra__ampliar img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1s var(--ease); }
.extra__ampliar:hover img { transform: scale(1.03); }
/* El borde (render 3:2) se recorta solo en la web: se conserva el lado izquierdo (asiento, escalones y losetas) */
.extra--ancho .extra__ampliar img { object-position: left center; }
.extra__nombre { margin-top: 12px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; color: var(--verde-800); }
.extra__detalle { margin-top: 4px; padding-bottom: 14px; font-size: 0.8125rem; line-height: 1.45; color: var(--texto-suave); }
/* El nombre y la descripción también suman el extra (main.js); la foto solo se amplía */
.extra__nombre, .extra__detalle { cursor: pointer; }
/* "Agregar a mi consulta" → "✓ En mi consulta": acción explícita, con zona táctil amplia.
   Contorno fino sin elegir; verde lleno una vez en la consulta */
.extra__elegir {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--linea-fuerte); border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--verde-800);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.extra__elegir::before { content: "+"; font-size: 1.05rem; font-weight: 300; line-height: 1; }
.extra__elegir:hover { border-color: var(--verde-800); }
.extra__elegir[aria-pressed="true"] { background: var(--verde-800); border-color: var(--verde-800); color: var(--crema); }
.extra__elegir[aria-pressed="true"]::before { content: "✓"; font-size: 0.8125rem; font-weight: 500; }
.extra .extra__elegir { width: 100%; margin-top: auto; padding: 0 10px; }
/* Sobre fondo verde (macetas): botón claro, acción principal del bloque. Ya en la consulta,
   pasa a contorno claro con ✓ (el lleno claro queda para la acción pendiente) */
.extra__elegir--claro { background: var(--crema); border-color: var(--crema); color: var(--verde-800); box-shadow: 0 6px 18px rgba(12, 22, 16, 0.22); }
.extra__elegir--claro:hover { background: var(--blanco); border-color: var(--blanco); }
.extra__elegir--claro[aria-pressed="true"] { background: none; border-color: rgba(248, 246, 241, 0.6); color: var(--crema); box-shadow: none; }
.extra__elegir--claro[aria-pressed="true"]:hover { border-color: var(--crema); }

/* Carrilera para natación: sección propia */
.carrilera { padding-top: 0; }
.carrilera__panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; gap: clamp(28px, 4vw, 56px); padding: clamp(18px, 2vw, 24px); background: var(--salvia); border-radius: var(--radio-l); }
.carrilera__imagen { overflow: hidden; border-radius: var(--radio-m); }
.carrilera__imagen img { width: 100%; aspect-ratio: 1672 / 941; object-fit: cover; }
.carrilera__texto { padding-right: clamp(8px, 2vw, 28px); }
.carrilera .titulo-seccion { font-size: clamp(2.2rem, 3.6vw, 3.3rem); }
.carrilera__bajada { margin: 1.1rem 0 1.4rem; max-width: 20rem; }

/* =========================================================
   3. INSPIRACIÓN — mosaico compacto de ambientes
   ========================================================= */
.inspiracion { padding-top: 0; }
.inspiracion__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 40px; margin-bottom: clamp(22px, 3vw, 34px); }
.inspiracion__nota { max-width: 24rem; font-size: 0.9375rem; color: var(--texto-suave); }
.mosaico { display: grid; grid-template-columns: 2.06fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.mosaico__item {
  position: relative; display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden; border-radius: var(--radio-m);
}
.mosaico__item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaico__item:hover img { transform: scale(1.025); }
.mosaico__item:focus-visible { outline-offset: 4px; }
.mosaico__grande { grid-row: span 2; }
/* Marco blanco interior muy fino, solo en la imagen principal: sigue las esquinas del contenedor */
.mosaico__grande::after {
  --marco: clamp(8px, 1.1vw, 14px);
  content: ""; position: absolute; inset: var(--marco); pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: calc(var(--radio-m) - var(--marco));
}
/* La imagen nocturna se ve en el visor (y en la fila deslizable del celular) */
.mosaico__extra { display: none; }
.mosaico__pie { display: flex; justify-content: flex-start; margin-top: 14px; }
.mosaico__ver {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 2px;
  background: none; border: 0; border-bottom: 1px solid var(--linea-fuerte); cursor: pointer;
  font-size: 0.9375rem; font-weight: 500; color: var(--verde-800); transition: border-color .3s var(--ease);
}
.mosaico__ver svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
.mosaico__ver:hover { border-color: var(--verde-800); }
.mosaico__ver:hover svg { transform: translateX(3px); }

/* ---------- Visor de la galería ---------- */
.visor {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--verde-900); color: var(--crema);
}
.visor::backdrop { background: rgba(16, 28, 21, 0.6); }
.visor[open] { display: flex; flex-direction: column; animation: panel-in .3s var(--ease); }
.visor__escena { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; padding: 64px clamp(16px, 7vw, 110px) 12px; touch-action: pan-y; }
.visor__img { max-width: min(100%, 1400px); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: var(--radio-s); user-select: none; -webkit-user-drag: none; }
.visor__escena:focus { outline: none; }
.visor__nav {
  position: absolute; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: 26px;
  border: 1px solid rgba(248, 246, 241, 0.35); border-radius: 50%; background: rgba(16, 28, 21, 0.55);
  color: var(--crema); cursor: pointer; transform: translateY(-50%); transition: background-color .2s, border-color .2s;
}
.visor__nav:hover { background: rgba(248, 246, 241, 0.14); border-color: var(--crema); }
.visor__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.visor__nav--prev { left: clamp(10px, 2.4vw, 36px); }
.visor__nav--next { right: clamp(10px, 2.4vw, 36px); }
.visor__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
.visor__leyenda { flex: 1 1 100%; order: -1; text-align: center; font-size: 0.875rem; color: var(--crema); }
.visor__leyenda:empty { display: none; }
.visor--una .visor__nav, .visor--una .visor__puntos { display: none; }
.visor__contador { min-width: 56px; font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--crema-suave); }
.visor__puntos { display: flex; gap: 4px; }
.visor__punto { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.visor__punto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(248, 246, 241, 0.35); }
.visor__punto[aria-current="true"]::before { background: var(--crema); transform: scale(1.3); }
.visor__cerrar { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--crema); cursor: pointer; }
.visor__cerrar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.visor-abierto { overflow: hidden; }


/* =========================================================
   PROCESO Y CONSULTA — único lugar donde se arma la selección
   ========================================================= */
.consultar__grilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.consultar__intro { position: sticky; top: 110px; }
.consultar .titulo-seccion { margin-bottom: clamp(24px, 3vw, 36px); }
.pasos { display: grid; gap: 0; border-top: 1px solid var(--linea-fuerte); }
.paso { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.paso__num { font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1; color: var(--verde-500); }
.paso p { font-size: 1rem; line-height: 1.5; color: var(--tinta); }

.consulta {
  padding: clamp(24px, 3.2vw, 40px); background: var(--blanco); border-radius: var(--radio-l); box-shadow: var(--sombra);
}
.consulta:focus { outline: none; }
.consulta__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; color: var(--verde-800); }
.consulta__bajada { margin-top: 6px; font-size: 0.9375rem; color: var(--texto-suave); }
.guia__pregunta { display: block; margin: 1.4rem 0 0.6rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-500); }
.guia__opcional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--texto-suave); }
/* Consulta final: todas las opciones en pastillas chicas (3 por fila donde entran); medida y
   extras solo con Piscina, cantidad solo con Macetas. Es la misma selección que la bandeja. */
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla {
  min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--linea-fuerte); border-radius: 999px; background: none;
  font-family: var(--sans); font-size: 0.875rem; color: var(--verde-800); letter-spacing: 0.01em;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pastilla:hover { border-color: var(--verde-800); }
.pastilla[aria-pressed="true"] { background: var(--verde-800); border-color: var(--verde-800); color: var(--crema); }
.guia__paso { margin-top: 2px; padding-left: 12px; border-left: 1px solid var(--linea-fuerte); }
.guia__paso:not([hidden]) { animation: guia-in .35s var(--ease); }

/* Bandeja: lo elegido en pastillas; la pastilla entera quita la opción */
.bandeja__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.bandeja__lista button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 16px; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px; background: var(--salvia);
  font-family: var(--sans); font-size: 0.9375rem; color: var(--verde-800); letter-spacing: 0.01em;
  transition: border-color .25s var(--ease);
}
.bandeja__lista button:hover { border-color: var(--verde-800); }
.guia__cantidad .campo { max-width: 9rem; }
.bandeja__lista svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes guia-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.campo {
  display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-s);
  background: var(--crema); font: inherit; font-size: 1rem; color: var(--tinta); resize: vertical;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.campo:hover { border-color: var(--verde-500); }
.campo:focus { outline: none; border-color: var(--verde-800); background: var(--blanco); box-shadow: 0 0 0 3px rgba(28, 47, 36, 0.12); }
.campo::placeholder { color: #8a948e; }
textarea.campo { min-height: 72px; }
.guia__final { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.guia__aviso { margin-top: 10px; font-size: 0.8125rem; color: var(--texto-suave); text-align: center; }
[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Preguntas frecuentes ---------- */
.preguntas { padding-top: 0; }
.preguntas__grilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.preguntas .titulo-seccion { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.preguntas__lista { border-top: 1px solid var(--linea-fuerte); }
.pregunta { border-bottom: 1px solid var(--linea-fuerte); }
.pregunta summary {
  position: relative; display: block; padding: 18px 40px 18px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; color: var(--verde-800);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; transition: transform .3s var(--ease); }
.pregunta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pregunta p { max-width: 40rem; padding: 0 0 20px; font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Quiénes somos y contacto ---------- */
.equipo { padding-top: 0; }
.equipo__panel { padding: clamp(28px, 4.4vw, 60px); background: var(--salvia); border-radius: var(--radio-l); text-align: center; }
.equipo__cabeza .titulo-seccion { font-size: clamp(2.1rem, 3.6vw, 3.2rem); }
.equipo__cabeza .titulo-seccion em { display: inline; }
.equipo__texto { max-width: 34rem; margin: 0.9rem auto 0; font-size: 1.0625rem; color: var(--texto); }
.equipo__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: clamp(20px, 4vw, 56px); margin: clamp(28px, 3.6vw, 44px) 0; }
.persona { display: flex; flex-direction: column; align-items: center; }
.persona__foto { width: 100%; max-width: 200px; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(180deg, #f4f4f1, #dcdfd8); object-fit: cover; object-position: center bottom; }
.persona__nombre { margin-top: 14px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--verde-800); }
.persona__rol { margin-top: 2px; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave); }
.contacto { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--linea-fuerte); }
.contacto__numero { font-size: 0.9375rem; color: var(--texto-suave); }
.contacto__numero a { font-weight: 500; color: var(--verde-800); text-decoration: none; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.contacto__numero a:hover { border-color: var(--verde-800); }

/* ---------- Pie ---------- */
.pie { background: var(--verde-900); color: rgba(248, 246, 241, 0.7); padding: 40px 0 calc(96px + env(safe-area-inset-bottom)); font-size: 0.8125rem; }
.pie__grilla { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; align-items: flex-end; }
.pie__marca img { width: 129px; height: auto; }
.pie__marca p { margin-top: 14px; font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(248, 246, 241, 0.6); }
.pie__legal { max-width: 32rem; color: rgba(248, 246, 241, 0.55); text-align: right; }

/* ---------- Botón flotante: único acceso rápido, visible durante todo el recorrido ----------
   Sin nada elegido: "Consultanos" (WhatsApp). Con algo elegido: "Tu consulta · 3 ︿", una bandeja
   que se despliega en el mismo lugar (encabezado verde = el mismo botón, lista y WhatsApp debajo). */
.flotante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end;
  transition: opacity .3s var(--ease), visibility .3s;
}
.flotante__wa, .bandeja__cabeza {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 15px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--verde-800); color: var(--crema); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
  /* Contorno claro: se distingue también sobre los bloques verdes */
  box-shadow: 0 8px 26px rgba(22, 38, 29, 0.3), 0 0 0 1px rgba(248, 246, 241, 0.3);
}
.flotante__wa .icono { width: 21px; height: 21px; }
.bandeja { display: none; }
.flotante--consulta .flotante__wa { display: none; }
.flotante--consulta .bandeja { display: block; }
.bandeja__cabeza { gap: 10px; padding: 0 16px 0 20px; }
.bandeja__chevron { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }

/* Abierta: tarjeta liviana, nunca a pantalla completa (la lista se desplaza si es larga) */
.flotante--abierto .bandeja {
  width: min(340px, calc(100vw - 28px)); overflow: hidden; border-radius: var(--radio-m); background: var(--blanco);
  box-shadow: 0 18px 50px rgba(22, 38, 29, 0.24), 0 0 0 1px var(--linea);
}
.flotante--abierto .bandeja__cabeza { width: 100%; justify-content: space-between; border-radius: 0; box-shadow: none; }
.flotante--abierto .bandeja__chevron { transform: rotate(180deg); }
.bandeja__cuerpo { padding: 4px 16px 16px; animation: guia-in .3s var(--ease); }
/* Bandeja: pastillas más chicas que en el resumen. Con muchas opciones la lista se limita
   a tres líneas y media (la media línea avisa que hay más) y se desplaza dentro de la bandeja */
.bandeja__lista { gap: 6px; max-height: min(160px, 22svh); padding: 12px 0 2px; overflow-y: auto; overscroll-behavior: contain; }
.bandeja__lista button { min-height: 38px; padding: 0 10px 0 13px; gap: 6px; font-size: 0.875rem; }
.bandeja__lista svg { width: 14px; height: 14px; }
.bandeja__seguir {
  display: block; margin: 4px auto 6px; min-height: 40px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font-size: 0.875rem; color: var(--texto-suave); text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 5px;
}
.bandeja__seguir:hover { color: var(--verde-800); }
.bandeja__wa { min-height: 48px; }

/* Señal suave al sumar o quitar algo */
.bandeja__cabeza--pulso { animation: flotante-pulso .6s var(--ease); }
@keyframes flotante-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.045); box-shadow: 0 8px 26px rgba(22, 38, 29, 0.3), 0 0 0 5px rgba(28, 47, 36, 0.14); } 100% { transform: scale(1); } }
/* Siempre visible durante el recorrido. Solo se oculta con la galería a pantalla completa
   y, en celular, mientras el teclado está abierto (main.js) */
.visor-abierto .flotante { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
@media (pointer: coarse) { .escribiendo .flotante { opacity: 0; visibility: hidden; pointer-events: none; } }


/* ---------- Aparición suave ---------- */
.js .revelar { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}

/* =========================================================
   3. MACETAS
   ========================================================= */
.macetas { padding-top: 0; }
.macetas__panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(32px, 5vw, 64px); background: var(--verde-800); color: rgba(248, 246, 241, 0.84);
  border-radius: var(--radio-l); overflow: hidden;
}
.macetas .titulo-seccion { color: var(--crema); }
.macetas__bajada { margin: 1.2rem 0 1.3rem; max-width: 27rem; }
/* Tres características con íconos de línea */
.rasgos-macetas { display: grid; gap: 9px; margin-bottom: 1.5rem; }
.rasgos-macetas li { display: flex; align-items: center; gap: 11px; font-size: 0.9375rem; color: var(--crema); }
.rasgos-macetas svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--crema-suave); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Mención para proyectos: pequeña, al pie del texto */
.macetas__proyectos { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--linea-clara); max-width: 27rem; font-size: 0.8125rem; line-height: 1.5; color: var(--crema-suave); }
.macetas__proyectos span { color: var(--crema); }

/* Escalas de referencia: cuatro dibujos de línea, de una maceta chica a una de gran formato */
.escalas { margin: 0 0 1.4rem; }
.escalas__fila { display: flex; align-items: flex-end; gap: 22px; padding-bottom: 10px; }
.escala { fill: none; stroke: var(--crema); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.escala path { vector-effect: non-scaling-stroke; }
.escala--1 { width: 26px; height: 26px; }
.escala--2 { width: 36px; height: 40px; }
.escala--3 { width: 48px; height: 56px; }
.escala--4 { width: 62px; height: 78px; }
.escalas__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.escalas__item span { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--crema); white-space: nowrap; }
.escalas figcaption { margin-top: 8px; font-size: 0.78rem; color: var(--crema-suave); }
.macetas .extra__elegir { margin-top: 1rem; }

/* Tonos: muestra informativa debajo de la foto, no botones. Una fila centrada de círculos chicos,
   sin hover, cursor ni foco; los nombres quedan solo para lectores de pantalla */
.colores { display: flex; justify-content: center; gap: 10px; margin-top: 16px; pointer-events: none; user-select: none; }
.colores span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.colores b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.colores__nota { margin-top: 8px; font-size: 0.75rem; text-align: center; color: rgba(248, 246, 241, 0.6); }

.macetas__imagen { position: relative; border-radius: var(--radio-m); overflow: hidden; }
.macetas__imagen img { width: 100%; height: auto; }

/* Marco editorial: línea blanca fina por dentro de la foto de macetas (solo escritorio).
   Margen medido sobre el render horizontal: ~2 % pasa por encima de las hojas del árbol
   sin cruzarlas y lejos de las macetas. En celular se omite: en la foto vertical el árbol
   llega al borde superior y la maceta oliva queda pegada al borde izquierdo. */
@media (min-width: 861px) {
  .macetas__imagen::after {
    content: ""; position: absolute; pointer-events: none;
    inset: 2.2% 1.5%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: calc(var(--radio-m) - 9px);
  }
}


/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1180px) {
  .portada__grilla { grid-template-columns: calc((100% - var(--w)) / 2) calc(var(--w) * 0.3) calc(var(--w) * 0.02) 1fr; }
}
@media (max-width: 1080px) {
  .modelo__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nav { gap: 16px; }
  .nav a:not(.nav__consultar) { font-size: 0.875rem; }
  .medidas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extras__galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anotacion__texto { font-size: 0.8125rem; }
  .esquema { display: none; }
}

/* =========================================================
   Móvil y tablet vertical — composición propia, con los mismos recursos
   gráficos del escritorio: cambios de escala, cursivas, etiquetas y un
   texto vertical por bloque como máximo.
   ========================================================= */
@media (max-width: 860px) {
  body { font-size: 1rem; }
  .solo-escritorio { display: none; }
  .cabecera__interior { padding-block: 6px; gap: 14px; }
  .marca { gap: 10px; min-height: 44px; }
  .marca__monograma { width: 34px; }
  .marca__palabra { width: 92px; }
  .nav { display: none; }
  .idioma__opcion { min-width: 44px; min-height: 44px; }
  .seccion { padding-block: 48px; }

  /* 1 · PORTADA — foto vertical propia del celular, con el encabezado transparente sobre el cielo.
     La foto se acorta en pantallas bajas (se recorta cielo, nunca la piscina) para que la propuesta
     y "Consultar mi proyecto" entren en la primera pantalla. */
  .cabecera:not(.es-solida) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cabecera:not(.es-solida) .marca > img:not(.marca--clara) { display: none; }
  .cabecera:not(.es-solida) .marca--clara { display: block; }
  .cabecera:not(.es-solida) .idioma__opcion { color: rgba(248, 246, 241, 0.78); }
  .cabecera:not(.es-solida) .idioma__opcion[aria-pressed="true"] { color: var(--crema); text-decoration-color: var(--crema); }
  .cabecera:not(.es-solida) .idioma__barra { color: rgba(248, 246, 241, 0.45); }
  .portada { padding-top: 0; margin-top: -56px; }
  .portada__grilla { grid-template-columns: 1fr; grid-template-rows: 72px auto 1fr; }
  .portada__texto { display: contents; }
  .portada__imagen { grid-column: 1; grid-row: 1 / 4; }
  .portada__imagen img { width: 100%; height: clamp(360px, calc(100svh - 236px), 133.4vw); aspect-ratio: auto; object-fit: cover; object-position: 50% 100%; }
  .portada__imagen::before {
    background:
      radial-gradient(ellipse 85% 30% at 30% 22%, rgba(12, 22, 16, 0.34), rgba(12, 22, 16, 0) 72%),
      linear-gradient(180deg, rgba(12, 22, 16, 0.48) 0%, rgba(12, 22, 16, 0.2) 30%, rgba(12, 22, 16, 0) 50%);
  }
  .portada__titulo {
    grid-row: 2; grid-column: 1; z-index: 2; width: auto; margin: 0 var(--gutter);
    font-size: 1.45rem; line-height: 1.05; letter-spacing: 0; color: var(--crema);
    background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none;
    text-shadow: 0 1px 16px rgba(12, 22, 16, 0.4);
  }
  .portada__titulo em { display: block; margin-top: 0.04em; font-size: clamp(2.7rem, 13vw, 3.4rem); line-height: 0.95; letter-spacing: -0.02em; }
  .portada__vertical { display: none; }

  /* PUENTE: una columna, más aire */
  .puente { padding: 52px 0 0; }
  .puente__interior { display: block; }
  .puente__linea { margin-bottom: 16px; }
  .puente__etiqueta { font-size: 0.625rem; letter-spacing: 0.2em; }
  .puente__titulo { margin-top: 12px; font-size: clamp(2.2rem, 10vw, 2.7rem); }
  .puente__bajada { margin-top: 16px; font-size: 1rem; }

  /* 2 · MODELO 6 × 3 */
  .modelo { padding-bottom: 28px; }
  .modelo__panel { display: flex; flex-direction: column; padding: 22px 18px 24px; border-radius: var(--radio-m); }
  .modelo__info { display: contents; }
  .modelo__cabeza { order: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: end; }
  .modelo__titulo { display: contents; }
  .modelo__etiqueta { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; font-size: 0.625rem; letter-spacing: 0.3em; }
  .modelo__medida { grid-column: 1; grid-row: 2; margin: 0 0 0 -0.03em; font-size: clamp(3.3rem, 16.5vw, 4.1rem); line-height: 0.95; }
  .modelo__m { display: inline; margin-left: 0.14em; font-size: 0.36em; letter-spacing: 0.02em; }
  .modelo__metros { display: none; }
  .modelo__tipo { grid-column: 2; grid-row: 2; margin: 0 0 0.5em; font-size: 1rem; line-height: 1.2; }
  .modelo__tipo::before { display: none; }

  /* Dos vistas en la misma caja 4:3 (axonométrica / planta con cotas y anotaciones) */
  .lamina { display: none; }
  .vistas { order: 2; position: relative; display: block; margin-top: 4px; }
  .vistas__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vistas__pista::-webkit-scrollbar { display: none; }
  .vistas__vista { position: relative; flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always; }
  .vistas__vista > img { width: 100%; height: 100%; object-fit: contain; }
  .vistas__flecha {
    position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px;
    padding: 0; border: 0; background: none; color: var(--crema); cursor: pointer; transition: opacity .25s var(--ease);
  }
  .vistas__flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .vistas__flecha--next { right: -12px; }
  .vistas__flecha--prev { left: -12px; }
  .vistas__flecha:disabled { opacity: 0; pointer-events: none; }

  /* Planta vertical a la izquierda, anotaciones a la derecha (medidas en % de la caja 4:3) */
  .pv { position: absolute; inset: 0; container-type: inline-size; }
  .pv__planta { position: absolute; left: 13%; top: 2%; height: 88%; width: auto; }
  .pv-cota { position: absolute; background: rgba(248, 246, 241, 0.72); color: var(--crema); font-size: 0.75rem; letter-spacing: 0.1em; }
  .pv-cota span { position: absolute; left: 50%; top: 50%; white-space: nowrap; background: var(--verde-800); transform: translate(-50%, -50%); }
  .pv-cota::before, .pv-cota::after { content: ""; position: absolute; background: currentColor; opacity: 0.72; }
  .pv-cota--largo { left: calc(19.5% - 12px); top: 4.5%; bottom: 13%; width: 1px; }
  .pv-cota--largo span { padding: 5px 1px; }
  .pv-cota--largo::before, .pv-cota--largo::after { left: -5px; width: 11px; height: 1px; }
  .pv-cota--largo::before { top: 0; } .pv-cota--largo::after { bottom: 0; }
  .pv-cota--ancho { left: 19.5%; width: 31.1%; top: calc(87% + 9px); height: 1px; }
  .pv-cota--ancho span { padding: 0 6px; }
  .pv-cota--ancho::before, .pv-cota--ancho::after { top: -5px; width: 1px; height: 11px; }
  .pv-cota--ancho::before { left: 0; } .pv-cota--ancho::after { right: 0; }
  .pv-anot { position: absolute; left: calc(var(--x) * 1cqw); top: var(--y); width: calc((55 - var(--x)) * 1cqw); height: 1px; background: rgba(248, 246, 241, 0.72); }
  .pv-anot::before { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 3px rgba(28, 47, 36, 0.35); }
  .pv-anot__texto { position: absolute; left: calc(100% + 8px); top: 50%; width: calc(45cqw - 8px); transform: translateY(-50%); font-size: 0.8125rem; line-height: 1.25; color: var(--crema); }

  /* Características en dos líneas; garantía compacta; exportación como texto secundario */
  .modelo__bajada, .beneficios { display: none; }
  .modelo__resumen { order: 3; display: block; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--linea-clara); font-size: 1rem; line-height: 1.45; color: var(--crema); }
  .modelo__resumen span { display: block; }
  .modelo__resumen span + span { margin-top: 2px; color: var(--crema-suave); }
  .sellos { order: 4; display: block; margin: 16px 0 0; padding: 0; border: 0; }
  .sello:first-child { display: block; }
  .sello:first-child .sello__marca { display: none; }
  .sello__texto { font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.3; }
  .garantia__num { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .sello__detalle { margin-top: 2px; font-weight: 400; }
  .sello + .sello { display: block; margin-top: 10px; }
  .sello + .sello .sello__marca { display: none; }
  .sello + .sello .sello__texto { font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--crema-suave); }
  .sello + .sello .sello__detalle { display: inline; margin: 0; font-size: inherit; }
  .sello + .sello .sello__detalle::before { content: "· "; }

  /* Sello Fiberglass: solo texto, etiqueta arriba y el resto a todo el ancho; nada compite con la piscina */
  .sello-fg { order: 8; margin-top: 4px; padding-top: 20px; }
  .sello-fg__dato { margin-top: 6px; }
  .sello-fg__etiqueta { font-size: 0.625rem; letter-spacing: 0.16em; }
  .sello-fg__dato { font-size: 0.875rem; line-height: 1.35; }
  .sello-fg__rasgos { font-size: 0.75rem; line-height: 1.4; }
  .sello-fg__normas { margin-top: 5px; font-size: 0.71875rem; line-height: 1.45; }

  /* Instalación estándar: una columna, grupos con nombre arriba y descripción debajo */
  .instalacion { padding-bottom: 44px; }
  .instalacion__grilla { grid-template-columns: 1fr; gap: 20px; }
  .instalacion .titulo-seccion { font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
  .instalacion .titulo-seccion em { display: inline; }
  .instalacion__intro { margin-top: 0.8rem; font-size: 0.9375rem; }
  .instalacion__grupo { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  .instalacion__grupo dt { font-size: 1.125rem; }
  .instalacion__grupo dd { font-size: 0.9375rem; line-height: 1.5; }
  .instalacion__nota { margin-top: 12px; font-size: 0.75rem; }

  /* Medidas: 3 × 2, Personalizada como sexta opción */
  .opciones { margin-top: 28px; }
  .opciones__cabeza { display: block; margin-bottom: 12px; }
  .opciones__titulo { font-size: 1.6rem; }
  .opciones__ayuda { margin-top: 4px; font-size: 0.8125rem; }
  .medidas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .medida-chip { min-height: 68px; padding: 8px 4px; }
  .medida-chip__num { font-size: 1.3rem; }
  .medida-chip__tag { font-size: 0.5625rem; letter-spacing: 0.08em; }
  .medida-chip__texto { font-size: 1.05rem; }
  .opciones__personalizada { font-size: 0.875rem; }

  /* Extras: 2 columnas; el borde, a lo ancho. La descripción se lee al ampliar */
  .extras { padding-top: 20px; }
  .extras__cabeza { display: block; margin-bottom: 16px; }
  .extras .titulo-seccion { font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .extras__nota { margin-top: 8px; font-size: 0.875rem; }
  .extras__galeria { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .extra--ancho { grid-column: 1 / -1; }
  .extra--ancho .extra__ampliar img { aspect-ratio: 2 / 1; }
  .extra__nombre { margin-top: 8px; font-size: 1.0625rem; }
  .extra__detalle { display: none; }
  .extra--ancho .extra__detalle { display: block; font-size: 0.8125rem; }
  .extra__nombre { padding-bottom: 10px; }
  .extra--ancho .extra__nombre { padding-bottom: 0; }
  .extra .extra__elegir { padding: 0 6px; }

  .carrilera { padding-bottom: 36px; }
  .carrilera__panel { grid-template-columns: 1fr; gap: 18px; padding: 12px 12px 24px; border-radius: var(--radio-m); }
  .carrilera__texto { padding: 0 8px; }
  .carrilera .titulo-seccion { font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .carrilera__bajada { margin: 0.8rem 0 1rem; }

  /* 3 · GALERÍA — fila deslizable con índice */
  .inspiracion { padding-top: 8px; padding-bottom: 20px; }
  .inspiracion__cabeza { display: block; margin-bottom: 14px; }
  .inspiracion__cabeza .sobretitulo { display: none; }
  .inspiracion__nota { margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; }
  .inspiracion .titulo-seccion { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
  .mosaico { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .mosaico::-webkit-scrollbar { display: none; }
  .mosaico__item { flex: 0 0 91%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .mosaico__item img { height: auto; }
  .mosaico__extra { display: block; }
  .mosaico__control { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
  .mosaico__indice { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; color: var(--verde-800); }
  .mosaico__indice i { position: relative; width: 56px; height: 1px; background: var(--linea-fuerte); }
  .mosaico__indice b { position: absolute; left: 0; top: 0; height: 1px; width: 25%; background: var(--verde-800); transition: width .3s var(--ease); }
  .mosaico__modelo { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--texto-suave); }
  .mosaico__pie { display: none; }
  .mosaico__ampliar {
    display: grid; place-items: center; position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px;
    border-radius: 50%; background: rgba(16, 28, 21, 0.5); color: var(--crema); pointer-events: none;
  }
  .mosaico__ampliar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .visor__escena { padding: 60px 12px 64px; }
  .visor__nav { top: auto; bottom: 0; width: 46px; height: 46px; margin: 0; transform: none; }
  .visor__img { max-height: calc(100dvh - 200px); }

  /* 4 · MACETAS — imagen junto al título */
  .macetas__panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 28px 20px 24px; border-radius: var(--radio-m); }
  .macetas__texto { display: contents; }
  .macetas .sobretitulo { order: 1; }
  .macetas .titulo-seccion { order: 2; font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .macetas .titulo-seccion em { padding-left: 1.2em; font-size: 0.9em; }
  .macetas__visual { order: 3; margin-top: 18px; }
  .macetas__bajada { order: 4; margin: 16px 0 14px; }
  .rasgos-macetas { order: 5; margin-bottom: 18px; }
  .escalas { order: 6; margin-bottom: 16px; }
  .escalas__fila { justify-content: space-between; gap: 8px; }
  .colores { margin-top: 12px; gap: 9px; }
  .colores span { width: 18px; height: 18px; }
  .colores__nota { margin-top: 6px; }
  .macetas__proyectos { order: 9; margin-top: 18px; }
  .macetas .extra__elegir { order: 10; align-self: flex-start; margin-top: 16px; }

  /* 5 · PROCESO Y CONSULTA */
  .consultar__grilla { grid-template-columns: 1fr; gap: 24px; }
  .consultar__intro { position: static; }
  .consultar .titulo-seccion { font-size: clamp(2rem, 9.5vw, 2.5rem); margin-bottom: 18px; }
  .consultar .titulo-seccion em { display: inline; }
  .paso { grid-template-columns: 44px 1fr; padding: 12px 0; }
  .paso__num { font-size: 1.6rem; }
  .paso p { font-size: 0.9375rem; }
  .consulta { margin-inline: calc(-1 * var(--gutter) + 8px); padding: 22px 16px 20px; border-radius: var(--radio-m); }
  .consulta .guia__pregunta { margin: 1.1rem 0 0.5rem; }
  .pastillas { gap: 6px; }
  /* Celular: ¿Qué te interesa? y Medida, 3 por fila; "Necesito asesoramiento" en su propia fila */
  .pastillas--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pastilla--fila { grid-column: 1 / -1; }
  .pastilla { padding: 0 10px; }
  .guia__paso { padding-left: 10px; }

  .preguntas__grilla { grid-template-columns: 1fr; gap: 16px; }
  .pregunta summary { font-size: 1rem; padding: 16px 36px 16px 0; }

  /* Quiénes somos: tres columnas también en celular, retratos de cabeza y hombros */
  .equipo__panel { padding: 30px 14px 28px; border-radius: var(--radio-m); }
  .equipo__cabeza .titulo-seccion { font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .equipo__texto { font-size: 0.9375rem; padding-inline: 6px; }
  .equipo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
  .persona__foto { max-width: 112px; }
  .persona__nombre { margin-top: 10px; font-size: 1.0625rem; }
  .persona__nombre span { display: block; }
  .persona__rol { font-size: 0.625rem; letter-spacing: 0.12em; }

  .pie__legal { text-align: left; }
  .pie { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .flotante { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }

}

/* Celulares angostos (360): la etiqueta del bloque puente entra en una sola línea */
@media (max-width: 374px) {
  .puente__etiqueta { letter-spacing: 0.13em; }
}