/* Full Plastic · estilos del sitio
   Colores y tipografías de la marca: ver plan/09-sitio-web.md.
   Para cambiar un color en todo el sitio, cámbialo solo aquí en :root. */

:root {
  /* Marca */
  --azul: #0E76BC;
  --azul-oscuro: #0B578B;
  --verde: #8DC63F;
  --verde-hover: #7DB530;
  --verde-texto: #4F7D1A;      /* verde legible sobre fondo blanco */
  --verde-suave: #E3F1D0;

  /* Fondos */
  --blanco: #FFFFFF;
  --marino: #0A2F4D;
  --marino-profundo: #072238;
  --gris-claro: #EEF3F6;
  --gris-medio: #E4EBF0;
  --foto-oscura: #2E3D49;

  /* Texto y líneas */
  --texto: #12263A;
  --texto-suave: #3F5566;
  --texto-sobre-oscuro: #CFE3F1;
  --texto-foto: #AFC0CC;
  --borde: #D5DEE5;
  --borde-campo: #B9CBD8;

  --fuente-titulos: "Bai Jamjuree", Arial, sans-serif;
  --fuente-texto: "Public Sans", Arial, sans-serif;

  --ancho: 1200px;
  --radio: 4px;
}

/* ---------- Base ---------- */

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

html {
  color-scheme: light;
}

body {
  margin: 0;
  overflow-wrap: break-word; /* una palabra o dirección muy larga se corta antes de salirse de la pantalla */
  font-family: var(--fuente-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.15;
  color: var(--marino);
}

h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }

p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
}

address {
  font-style: normal;
}

a {
  color: var(--azul-oscuro);
}

a:hover {
  color: var(--azul);
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Estructura ---------- */

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

.seccion {
  padding-block: 56px;
}

.seccion--gris {
  background: var(--gris-claro);
}

.seccion--oscura {
  background: var(--marino);
  color: var(--blanco);
}

.seccion--oscura h2 {
  color: var(--blanco);
}

.seccion--oscura p {
  color: var(--texto-sobre-oscuro);
}

.pila {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pila--chica { gap: 8px; }
.pila--grande { gap: 32px; }

.columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.columnas > * {
  flex: 2 1 380px;
  min-width: 0;
}

.columnas > .columnas__principal {
  flex: 3 1 560px;
}

.seccion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.seccion__encabezado a {
  font-weight: 700;
}

.texto-suave {
  color: var(--texto-suave);
}

.bajada {
  max-width: 40em;
  font-size: 19px;
  color: var(--texto-suave);
}

.lista {
  padding-left: 20px;
  line-height: 1.9;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--radio);
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Verde: solo para la acción de cotizar. Texto oscuro, nunca blanco. */
.boton--cotizar {
  background: var(--verde);
  color: var(--marino-profundo);
}

.boton--cotizar:hover {
  background: var(--verde-hover);
  color: var(--marino-profundo);
}

.boton--azul {
  background: var(--azul);
  color: var(--blanco);
}

.boton--azul:hover {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.boton--contorno {
  background: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--texto-sobre-oscuro);
}

.boton--contorno:hover {
  color: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--blanco);
}

.boton--linea {
  background: transparent;
  color: var(--azul-oscuro);
  box-shadow: inset 0 0 0 1px var(--azul-oscuro);
}

.boton--linea:hover {
  color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
}

.boton--chico {
  padding: 10px 18px;
  font-size: 15px;
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Barra superior y cabecera ---------- */

.barra-superior {
  background: var(--marino-profundo);
  color: var(--texto-sobre-oscuro);
  font-size: 14px;
}

.barra-superior .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 8px;
}

.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.cabecera .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-block: 14px;
}

.cabecera__logo img {
  width: auto;
  height: 56px;
}

.cabecera__menu {
  flex-grow: 1;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0;
  list-style: none;
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 600;
}

.menu a {
  color: var(--texto);
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--azul);
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.barra-superior .barra-superior__whatsapp {
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
}

.barra-superior .barra-superior__whatsapp:hover {
  text-decoration: underline;
}

/* Menú plegable bajo 1000 px de ancho. El botón "Menú" llega como enlace a #menu-principal:
   sin JavaScript el menú se abre con :target. sitio.js lo cambia por un botón con aria-expanded.
   El menú parte oculto desde el CSS para que la página no salte al cargar. */
.cabecera__abrir {
  display: none;
}

@media (min-width: 1000px) {
  /* El menú ocupa el espacio entre el logo y Cotizar; si no cabe en una línea, usa dos */
  .cabecera__menu {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 1000px) and (max-width: 1099px) {
  .menu {
    gap: 8px 18px;
    font-size: 16px;
  }
}

@media (max-width: 999px) {
  /* El correo sigue en el pie de página */
  .barra-superior a[href^="mailto:"] {
    display: none;
  }

  .cabecera .contenedor {
    gap: 12px 8px;
    padding-block: 12px;
  }

  .cabecera__logo {
    margin-right: auto;
  }

  .cabecera__abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    color: var(--marino);
    font: 700 16px/1 var(--fuente-titulos);
    text-decoration: none;
    cursor: pointer;
  }

  .cabecera__abrir:hover {
    border-color: var(--azul);
    color: var(--azul);
  }

  /* Ícono de tres líneas que pasa a una X cuando el menú está abierto */
  .cabecera__icono,
  .cabecera__icono::before,
  .cabecera__icono::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .cabecera__icono {
    position: relative;
  }

  .cabecera__icono::before,
  .cabecera__icono::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .cabecera__icono::before {
    top: -6px;
  }

  .cabecera__icono::after {
    top: 6px;
  }

  .cabecera__abrir[aria-expanded="true"] .cabecera__icono {
    background-color: transparent;
  }

  .cabecera__abrir[aria-expanded="true"] .cabecera__icono::before {
    transform: translateY(6px) rotate(45deg);
  }

  .cabecera__abrir[aria-expanded="true"] .cabecera__icono::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .cabecera__menu {
    display: none;
    order: 1;
    flex-basis: 100%;
  }

  a.cabecera__abrir ~ .cabecera__menu:target,
  .cabecera__abrir[aria-expanded="true"] ~ .cabecera__menu {
    display: block;
  }

  .menu {
    flex-direction: column;
    gap: 0;
  }

  .menu a {
    display: block;
    padding-block: 12px;
    border-top: 1px solid var(--borde);
  }

  .menu a[aria-current="page"] {
    text-underline-offset: 6px;
  }
}

@media (max-width: 560px) {
  .barra-superior .contenedor {
    justify-content: center;
    padding-block: 0;
  }

  .barra-superior .barra-superior__whatsapp {
    display: inline-block;
    padding-block: 10px;
  }

  .cabecera__logo {
    padding-block: 4px;
  }

  .cabecera__logo img {
    height: 36px;
  }

  .cabecera__abrir {
    gap: 6px;
    min-height: 44px;
    padding: 0 10px;
  }

  .cabecera .boton--cotizar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 16px;
  }
}

/* En pantallas de 320 px el botón queda solo con el ícono; "Menú" lo siguen leyendo los lectores de pantalla */
@media (max-width: 359px) {
  .cabecera__abrir {
    position: relative;
    justify-content: center;
    width: 44px;
    padding: 0;
  }

  .cabecera__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera__icono,
  .cabecera__icono::before,
  .cabecera__icono::after {
    transition: none;
  }
}

/* ---------- Fotos ---------- */

/* Marco para fotos que faltan. Se reemplaza por <img> cuando llegue la foto real. */
.foto-pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: 16px;
  background: var(--gris-medio);
  border: 1px dashed var(--borde-campo);
  color: var(--texto-suave);
  font-size: 14px;
  text-align: center;
}

.foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Para dibujos y fotos de antes y después: se ve la imagen entera */
.foto--entera {
  object-fit: contain;
  background: var(--gris-medio);
}

/* Para fotos verticales donde lo importante queda en la parte de arriba */
.foto--arriba {
  object-position: center 25%;
}

/* Recuadro de igual tamaño para las fotos de las líneas de producto (Inicio y Productos).
   Las fotos de producto tienen fondo blanco: con "multiply" ese blanco toma el gris del recuadro
   y todas se ven del mismo tamaño, sin bordes. La foto real (--real) llena su recuadro. */
.marco-foto {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gris-claro);
  isolation: isolate;
}

.marco-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.marco-foto--real img {
  object-fit: cover;
  mix-blend-mode: normal;
}

/* ---------- Portada ---------- */

/* Texto a la izquierda y foto real a la derecha, sin filtros encima */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--borde);
}

.portada__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding-block: 56px;
  padding-right: 48px;
  padding-left: max(24px, calc((100vw - var(--ancho)) / 2 + 24px));
}

.portada__bajada {
  font-size: 19px;
  line-height: 1.5;
}

.portada__foto {
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: 560px;
  object-fit: cover;
  object-position: center 35%;
}

.portada .botones {
  margin-top: 8px;
}

/* ---------- Formularios ---------- */

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
}

.campo--completo {
  grid-column: 1 / -1;
}

.campo input,
.campo select,
.campo textarea,
.chat__escribir input {
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--borde-campo);
  border-radius: 3px;
  background: var(--blanco);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}

.campo textarea {
  height: auto;
  padding: 10px;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
}

.formulario p {
  color: var(--texto-suave);
}

.nota {
  font-size: 14px;
  color: var(--texto-suave);
}

/* ---------- Cotizador ---------- */

.banda-cotizar {
  padding-block: 32px;
  background: var(--gris-claro);
  border-bottom: 1px solid var(--borde);
}

.banda-cotizar h2 {
  font-size: 24px;
}

.cotizador {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr auto;
  align-items: end;
  gap: 14px;
}

.resultado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-campo);
}

.resultado div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.resultado dt {
  color: var(--texto-suave);
}

.resultado dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tablas ---------- */

.tabla-envoltura {
  position: relative; /* los textos ocultos de la tabla quedan dentro de su recuadro y no ensanchan la página */
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.tabla th {
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--marino);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.tabla td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla td:first-child {
  font-weight: 700;
}

.tabla__foto {
  width: 88px;
}

.tabla__foto img {
  width: 72px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.tabla .derecha {
  padding-right: 0;
  text-align: right;
}

.tabla a {
  font-weight: 700;
}

/* ---------- Fullsito ---------- */

.chat {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
  line-height: 1.3;
}

.chat__cabecera strong {
  display: block;
}

.chat__cabecera span {
  font-size: 13px;
  color: var(--texto-suave);
}

.chat__mensajes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.mensaje {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 10px;
}

.mensaje--fullsito {
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  background: var(--gris-claro);
}

.chat__escribir {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--borde);
}

.chat__escribir input {
  flex-grow: 1;
  min-width: 0;
  font-size: 15px;
}

/* Botón fijo en todas las páginas */
.fullsito {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 20;
}

.fullsito summary {
  padding: 10px 18px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.fullsito summary::-webkit-details-marker {
  display: none;
}

.fullsito .chat {
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 380px;
  max-width: calc(100vw - 48px);
  border-radius: var(--radio) var(--radio) 0 0;
}

/* ---------- Información técnica y calculadoras ---------- */

.lista-tecnica {
  display: flex;
  flex-direction: column;
  max-width: 48em;
  padding: 0;
  list-style: none;
}

.lista-tecnica li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 18px;
  border-bottom: 1px solid var(--borde);
}

.lista-tecnica li:first-child {
  border-top: 1px solid var(--borde);
}

.lista-tecnica h3 {
  font-size: 20px;
}

.lista-tecnica p {
  color: var(--texto-suave);
}

.calculadora {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: 40px;
}

.calculadora__datos {
  padding: 24px;
  border: 1px solid var(--borde);
}

.calculadora__fittings {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Las cantidades de fittings quedan en dos columnas también en celular, para acortar el formulario */
.formulario .calculadora__fittings .campos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calculadora__fittings legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
}

.resultado-calculo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding-block: 16px;
  border-block: 1px solid var(--borde);
}

.resultado-calculo dt {
  color: var(--texto-suave);
  font-size: 14px;
}

.resultado-calculo dd {
  font-family: var(--fuente-titulos);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tabla td.sin-corte {
  white-space: nowrap;
}

.tabla .fila-actual td {
  background: var(--verde-suave);
}

.tabla caption {
  padding-bottom: 6px;
  font-weight: 700;
  text-align: left;
}

.texto-tecnico {
  max-width: 44em;
}

/* Figuras técnicas de las calculadoras: dibujo en SVG y fórmulas al lado */
.figura-tecnica {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 20px 24px;
  align-items: center;
  padding: 20px;
  background: var(--blanco);
  border: 1px solid var(--borde);
}

.figura-tecnica--ancha {
  grid-template-columns: minmax(0, 1fr);
}

.figura-tecnica svg {
  display: block;
  width: 100%;
  height: auto;
}

.figura-tecnica--ancha svg {
  max-width: 560px;
}

.figura-tecnica figcaption {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--texto-suave);
}

.fig-pared { fill: var(--azul); }
.fig-interior { fill: var(--gris-claro); }
.fig-cota { stroke: var(--marino); stroke-width: 1.5; }
.fig-cota--clara { stroke: var(--marino); }
.fig-cota-guia { stroke: var(--borde-campo); stroke-width: 1; stroke-dasharray: 4 3; }
.fig-flecha { fill: var(--marino); }
.fig-texto { font-family: var(--fuente-titulos); font-size: 18px; font-weight: 700; fill: var(--marino); }
.fig-tubo { stroke: var(--azul); stroke-width: 12; }
.fig-pieza { stroke: var(--marino); stroke-width: 18; }
.fig-sin-relleno { fill: none; }
.fig-flange { fill: var(--marino); }
.fig-corte { stroke: var(--blanco); stroke-width: 2; }
.fig-union { fill: var(--verde); stroke: var(--blanco); stroke-width: 2; }
.fig-numero circle { fill: var(--marino); }
.fig-numero text { font-family: var(--fuente-titulos); font-size: 14px; font-weight: 700; fill: var(--blanco); }

.formula {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulos);
  font-size: 19px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--marino);
}

.fraccion {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  font-size: 15px;
}

.fraccion > span:first-child {
  padding: 0 6px 4px;
  border-bottom: 2px solid currentColor;
}

.fraccion > span:last-child {
  padding: 4px 6px 0;
}

.formulas-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.leyenda-figura {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 24px;
  margin: 0;
  padding-left: 1.3em;
  font-size: 15px;
}

@media (max-width: 560px) {
  .figura-tecnica {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .figura-tecnica svg {
    max-width: 260px;
  }

  .figura-tecnica--ancha svg {
    max-width: 100%;
  }
}

.normas__lista {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 24px;
}

.normas__lista dt {
  font-weight: 700;
  white-space: nowrap;
}

.normas__lista dd {
  color: var(--texto-suave);
}

@media (max-width: 560px) {
  .normas__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .normas__lista dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 900px) {
  .calculadora {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .calculadora__datos {
    padding: 16px;
  }

  .resultado-calculo dd {
    font-size: 20px;
  }
}

/* ---------- Código en las tablas de medidas ---------- */

.tabla td.tabla__codigo {
  padding-right: 20px;
  font-weight: 400;
}

/* El código en texto y, a su lado, "+ Agregar" en el verde de cotizar. Todo el botón agrega la pieza */
.codigo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.codigo__accion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--verde-suave);
  color: var(--marino-profundo);
  font-size: 13px;
}

.codigo:hover .codigo__accion {
  background: var(--verde);
}

.codigo__signo {
  width: 0.9em;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.codigo--agregado .codigo__accion,
.codigo--agregado:hover .codigo__accion {
  background: var(--verde);
}

/* ---------- Lista de cotización (reemplaza el botón fijo de consulta) ---------- */

.cot {
  position: fixed;
  right: 24px;
  bottom: 0;
  z-index: 20;
}

/* Más ancho y alto que un botón común, para que se note en la esquina.
   El borde blanco lo separa de las franjas azules del sitio, que son del mismo color. */
.cot__abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 280px;
  padding: 14px 32px;
  border: 2px solid var(--blanco);
  border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.cot__abrir:hover {
  background: var(--azul-oscuro);
}

.cot__abrir--aviso,
.cot__abrir--aviso:hover {
  background: var(--verde);
  color: var(--marino-profundo);
}

.cot__cuenta {
  min-width: 26px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cot__cuenta:empty {
  display: none;
}

.cot__panel {
  position: absolute;
  right: 0;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: calc(100vw - 48px);
  height: min(660px, calc(100vh - 110px));
  border: 1px solid var(--borde);
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--blanco);
}

.cot__panel[hidden] {
  display: none;
}

.cot__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--borde);
  line-height: 1.3;
}

.cot__cabecera strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 17px;
}

.cot__cabecera span {
  font-size: 13px;
  color: var(--texto-suave);
}

.cot__cerrar,
.cot__enlace {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--azul-oscuro);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.cot__cerrar:hover,
.cot__enlace:hover {
  color: var(--azul);
}

.cot__conversacion {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.5;
}

.cot__msj {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 8px;
}

.cot__msj--fp {
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  background: var(--gris-claro);
}

.cot__msj--cliente {
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  background: var(--azul);
  color: var(--blanco);
}

.cot__lista {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.cot__lista table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.cot__lista th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--marino);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.cot__lista td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.cot__lista tbody tr:last-child td {
  border-bottom: 0;
}

.cot__lista td:first-child {
  font-weight: 700;
  white-space: nowrap;
}

.cot__lista a {
  color: var(--texto);
  font-weight: 400;
}

.cot__lista input {
  width: 64px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--borde-campo);
  border-radius: 3px;
  font: inherit;
  font-size: 15px;
}

.cot__lista .cot__enlace {
  padding: 4px 0;
  font-size: 13px;
}

.cot__editar {
  margin: 0 8px 4px;
}

/* Basurero en la fila de títulos, sobre la columna "Quitar": vacía la lista de una vez */
.cot__lista .cot__vaciar-celda {
  padding: 2px 4px;
  border-bottom: 1px solid var(--marino);
  text-align: right;
  vertical-align: middle;
}

.cot__vaciar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--azul-oscuro);
  cursor: pointer;
}

.cot__vaciar:hover {
  background: var(--gris-claro);
  color: var(--azul);
}

.cot__entrada {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--borde);
}

.cot__entrada form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cot__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px auto;
  align-items: end;
  gap: 8px;
}

.cot__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.cot__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.cot__campo input {
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--borde-campo);
  border-radius: 3px;
  background: var(--blanco);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}

.cot__fila .boton {
  height: 42px;
}

.cot__sugerencias {
  position: absolute;
  right: 18px;
  bottom: calc(100% - 4px);
  left: 18px;
  max-height: 280px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--blanco);
  list-style: none;
}

.cot__sugerencias li {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}

.cot__sugerencias strong {
  display: block;
  color: var(--azul-oscuro);
  font-size: 13px;
}

.cot__sugerencias li:hover,
.cot__sugerencias li[aria-selected="true"] {
  background: var(--gris-claro);
}

.cot__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cot__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cot__error {
  color: #A3271C;
  font-size: 14px;
}

.cot__error:empty {
  display: none;
}

.cot__seguir {
  width: 100%;
}

.cot__seguir[hidden],
.cot__especial[hidden] {
  display: none;
}

/* Pieza que no está en el catálogo: se agrega aparte y la cotiza un vendedor */
.cot__especial {
  width: 100%;
  margin-bottom: 8px;
}

.cot__nota {
  display: block;
  color: var(--texto-suave);
  font-size: 12px;
}

@media (max-width: 620px) {
  .cot {
    right: 12px;
  }

  .cot__panel {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    border-radius: 0;
  }

  .cot__campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .cot,
  .tabla__codigo {
    display: none;
  }
}

/* ---------- Sedes ---------- */

.sede {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.sede .foto {
  aspect-ratio: 4 / 3;
}

/* Trabajos de la portada: una foto ancha y dos angostas */
.galeria {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.galeria img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.galeria figcaption {
  margin-top: 6px;
  font-size: 14px;
  color: var(--texto-suave);
}

/* Videos de YouTube: se muestra la portada guardada en el sitio y el video se carga al hacer clic */
.videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.video figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--texto-suave);
}

.video__portada,
.video__marco {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--marino-profundo);
}

.video__portada img,
.video__marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video__boton {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 50px;
  margin: -25px 0 0 -36px;
  background: var(--marino);
  border-radius: var(--radio);
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.video__boton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--blanco);
}

.video__portada:hover .video__boton,
.video__portada:focus-visible .video__boton {
  opacity: 1;
  background: var(--azul);
}

/* Espacio reservado para un video que todavía no existe */
.video__espacio {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--borde-campo);
  background: var(--blanco);
  color: var(--texto-suave);
  font-weight: 600;
  text-align: center;
}

.video--ficha {
  max-width: 560px;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .videos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Galería dentro de una ficha de productos */
.galeria--suelta {
  margin-block: 24px 8px;
}

.galeria--suelta img {
  height: 260px;
}

/* Cierre de la portada */
.seccion--cierre {
  border-top: 1px solid var(--borde);
  padding-block: 40px;
}

/* Los datos (WhatsApp y correo, con ícono) toman el ancho que necesitan: en un tercio fijo el
   correo quedaba bajo el botón en pantallas de unos 1.000 px */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 40px;
}
.sedes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 40px;
}

.datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
}

.datos dt {
  color: var(--texto-suave);
}

.datos dd {
  font-weight: 600;
}

/* Íconos de los datos de contacto, del tamaño del texto. Son de Material Icons (Google, licencia
   Apache 2.0), salvo el de WhatsApp, de Simple Icons (CC0). Se dibujan como máscara para tomar el
   color que se les da: azul sobre fondo claro y blanco sobre la portada azul. */
.datos dt[data-icono]::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  vertical-align: -0.2em;
  background: var(--azul);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

.p-portada__azul .datos dt[data-icono]::before {
  background: var(--blanco);
}

@media (forced-colors: active) {
  .datos dt[data-icono]::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

.datos dt[data-icono="direccion"] {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.datos dt[data-icono="horario"] {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.datos dt[data-icono="whatsapp"] {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}

.datos dt[data-icono="correo"] {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.95c-5.52 0-10 4.48-10 10s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8 8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57v-1.43c0-2.76-2.24-5-5-5s-5 2.24-5 5 2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47.65.89 1.77 1.47 2.96 1.47 1.97 0 3.5-1.6 3.5-3.57v-1.43c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E");
}

.datos dt[data-icono="despacho"] {
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

/* ---------- Páginas interiores ---------- */

.migas {
  padding-block: 16px 0;
  font-size: 14px;
  color: var(--texto-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.migas li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--borde-campo);
}

.encabezado-pagina {
  padding-block: 24px 56px;
  border-bottom: 1px solid var(--borde);
}

/* Catálogo: índice a la izquierda, familias a la derecha */
.catalogo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.catalogo__indice {
  position: sticky;
  top: 24px;
}

.catalogo__indice ul {
  padding: 0;
  list-style: none;
  line-height: 2.1;
}

.catalogo__indice a {
  color: var(--texto);
  text-decoration: none;
}

.catalogo__indice a:hover {
  color: var(--azul);
}

.familias {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.familia {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 24px;
}

/* Foto de la pieza junto al título de cada familia */
.familia__encabezado {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.familia__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--blanco);
  border: 1px solid var(--borde);
}

.familia__foto figcaption {
  font-size: 13px;
  color: var(--texto-suave);
}

/* Trabajos a medida: foto a la izquierda, texto a la derecha */
.trabajos {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.trabajo {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding-block: 28px;
  border-bottom: 1px solid var(--borde);
}

.trabajo:first-child {
  border-top: 1px solid var(--borde);
}

.pasos {
  display: grid;
  gap: 12px;
  padding-left: 24px;
}

.pasos li {
  padding-left: 6px;
}

/* ---------- Pie ---------- */

.pie {
  background: var(--marino-profundo);
  color: var(--texto-sobre-oscuro);
  font-size: 15px;
  line-height: 1.7;
}

.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-block: 48px 96px;
}

.pie a {
  color: inherit;
}

.pie img {
  width: auto;
  height: 56px;
}

.pie ul {
  padding: 0;
  list-style: none;
}

/* Derechos reservados: última fila del pie, a todo el ancho */
.pie .pie__derechos {
  flex-basis: 100%;
  padding-top: 20px;
  border-top: 1px solid rgba(207, 227, 241, 0.25);
  font-size: 14px;
}

/* ---------- Pantallas angostas ---------- */

@media (max-width: 900px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }

  .seccion { padding-block: 40px; }

  .catalogo,
  .trabajo,
  .portada,
  .sede,
  .galeria,
  .contacto,
  .cotizador,
  .resultado {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada__texto { padding-inline: 24px; }

  .catalogo__indice {
    position: static;
  }
}

/* ---------- Imagen nueva: bloques de color y catálogo ---------- */

h2 { font-size: 34px; }

/* El bloque de texto parte alineado con el resto de la página */
.p-margen {
  padding-left: max(24px, calc((100vw - var(--ancho)) / 2 + 24px));
  padding-right: 48px;
}

/* ---------- Portada: azul, verde y foto ---------- */

.p-portada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.p-portada__azul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: 52px 44px;
  background: var(--azul);
  color: var(--blanco);
}

.p-portada__azul h1 {
  max-width: 13em;
  color: var(--blanco);
  font-size: 54px;
  line-height: 1.05;
}

.p-portada__azul p {
  max-width: 36em;
  font-size: 19px;
  line-height: 1.5;
}

.p-portada__azul .botones {
  margin-top: 8px;
}

.p-portada__foto {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ---------- Cotizador en verde: el verde sigue siendo solo para cotizar ---------- */

.p-cotizar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 26px 28px;
  background: var(--verde);
  color: var(--marino-profundo);
}

.p-cotizar h2 {
  color: var(--marino-profundo);
  font-size: 24px;
}

.p-cotizar .cotizador {
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
}

.p-cotizar .campo input,
.p-cotizar .campo select {
  border-color: var(--marino-profundo);
}

.p-cotizar .resultado {
  gap: 24px;
  padding-top: 12px;
  border-top: 2px solid var(--marino-profundo);
}

.p-cotizar .resultado div {
  flex-direction: column;
  gap: 0;
}

.p-cotizar .resultado dt {
  color: var(--marino-profundo);
  font-size: 14px;
}

.p-cotizar .boton {
  justify-self: start;
  grid-column: 1 / -1;
  background: var(--marino-profundo);
  color: var(--blanco);
}

.p-cotizar .boton:hover {
  background: var(--marino);
  color: var(--blanco);
}

/* ---------- Catálogo: tabla de impresa, foto grande y línea gruesa ---------- */

.p-seccion {
  padding-block: 64px;
}

.p-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--marino);
}

.p-titulo a {
  font-weight: 700;
}

.p-catalogo {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.p-catalogo th {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--marino);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.p-catalogo td {
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.p-catalogo__foto {
  width: 170px;
}

.p-catalogo__foto .marco-foto {
  width: 150px;
}

.p-catalogo__pieza {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  font-weight: 700;
  color: var(--marino);
}

.p-catalogo .derecha {
  padding-right: 0;
  text-align: right;
}

.p-catalogo a {
  font-weight: 700;
}

/* "PP-RCT" no se corta en el guion */
.p-catalogo .sin-corte {
  white-space: nowrap;
}

/* ---------- Piezas a medida: fotos de tamaños distintos sobre fondo marino ---------- */

.p-medida {
  background: var(--marino-profundo);
  color: var(--texto-sobre-oscuro);
}

.p-medida h2 {
  color: var(--blanco);
  font-size: 44px;
  line-height: 1.05;
}

.p-medida__intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px 48px;
  align-items: start;
  margin-bottom: 40px;
}

.p-medida__intro p {
  font-size: 19px;
  line-height: 1.5;
}

.p-medida__intro .boton {
  margin-top: 16px;
}

.p-mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 340px 340px;
  gap: 40px 16px;
}

.p-mosaico figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.p-mosaico img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: cover;
}

.p-mosaico figcaption {
  font-size: 14px;
  line-height: 1.3;
}

.p-mosaico__rodete { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.p-mosaico__bote   { grid-column: 6 / span 7; grid-row: 1; }
.p-mosaico__spool  { grid-column: 6 / span 4; grid-row: 2; }
.p-mosaico__repara { grid-column: 10 / span 3; grid-row: 2; }

.p-mosaico__bote img {
  object-fit: contain;
  background: var(--blanco);
}

/* ---------- Sedes: filas de catálogo, no tarjetas ---------- */

.p-sede {
  display: grid;
  grid-template-columns: 240px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding-block: 16px;
  border-bottom: 1px solid var(--borde);
}

.p-sede img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-sede h3 {
  font-size: 24px;
}

.p-sede a {
  font-weight: 700;
}

/* ---------- Cierre ---------- */

.p-cierre {
  padding-bottom: 72px;
}

.p-cierre .contacto {
  padding-top: 28px;
  border-top: 4px solid var(--marino);
}

/* ---------- Mapa de cada sede ---------- */

/* Mapa de Google incrustado (Calama y Santiago). Carga recién cuando la persona baja hasta él. */
.mapa {
  margin-top: 24px;
  border: 1px solid var(--borde);
  background: var(--gris-medio);
}

.mapa iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}

@media (max-width: 560px) {
  .mapa iframe {
    height: 340px;
  }
}

/* ---------- Pantallas angostas ---------- */

@media (max-width: 1000px) {
  .p-portada {
    grid-template-columns: minmax(0, 1fr);
  }

  .p-portada__foto {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    order: 1;
  }

  .p-cotizar { order: 2; }

  .p-margen { padding-inline: 24px; }

  .p-portada__azul h1 { font-size: 38px; }

  .p-medida__intro,
  .p-sede {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .p-medida h2 { font-size: 34px; }

  .p-mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 24px 12px;
  }

  .p-mosaico figure { grid-row: auto; }

  .p-mosaico img {
    flex: none;
    aspect-ratio: 1;
  }

  .p-mosaico__rodete,
  .p-mosaico__bote { grid-column: 1 / -1; }

  .p-mosaico__spool,
  .p-mosaico__repara { grid-column: auto; }

  .p-mosaico__bote img { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
  .p-cotizar .cotizador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-cotizar .resultado { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Líneas de producto de Inicio: la tabla entra completa en el celular, sin partir palabras.
   Hasta 640 px, porque entre 621 y 624 px la tabla con "Qué incluye" quedaba hasta 4 px más ancha. */
@media (max-width: 640px) {
  .p-catalogo th,
  .p-catalogo td { padding-right: 12px; }
  .p-catalogo td { overflow-wrap: normal; }
  .p-catalogo td.derecha > a { padding-left: 8px; }
  .p-catalogo__foto { width: 80px; }
  .p-catalogo__foto .marco-foto { width: 68px; }
  .p-catalogo__pieza { font-size: 17px; }
  .p-catalogo td:nth-last-child(2) { font-size: 15px; line-height: 1.4; } /* Medidas */
  .p-ocultar-angosto { display: none; }
}

/* Bajo 360 px no cabe la columna "Ver": el nombre de cada línea ya lleva a la misma página.
   359.98 cubre los anchos con decimales que dejan algunos niveles de zoom. */
@media (max-width: 359.98px) {
  .p-catalogo__foto { width: 76px; }
  .p-catalogo__foto .marco-foto { width: 64px; }
  .p-catalogo th:last-child,
  .p-catalogo td:last-child { display: none; }
}

/* ---------- Accesibilidad ---------- */

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  font-weight: 700;
}

.saltar:focus {
  left: 16px;
  top: 8px;
}

[hidden] {
  display: none !important;
}

.barra-superior a {
  color: inherit;
}

/* ---------- Carrusel de portada ---------- */

.carrusel {
  background: var(--marino-profundo);
  color: var(--blanco);
}

/* Foto junto al texto: conserva su proporción aunque el texto sea más alto */
.columnas > .foto {
  align-self: flex-start;
}

/* Las fotos ocupan todo el ancho de la pantalla, de borde a borde */
.carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrusel__pista::-webkit-scrollbar {
  display: none;
}

.carrusel__foto {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Proporción 16:7 hasta 640 px de alto; en pantallas más anchas crece hacia los lados y no hacia
   abajo, así la barra de miniaturas y el cotizador siguen a la vista */
.carrusel__foto img {
  width: 100%;
  height: min(43.75vw, 640px);
  object-fit: cover;
}

.carrusel__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 12px;
}

.carrusel__texto {
  flex: 1 1 320px;
  font-weight: 600;
}

.carrusel__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.carrusel__miniatura {
  display: block;
  width: 72px;
  height: 48px;
  border: 2px solid transparent;
}

.carrusel__miniatura[aria-current="true"] {
  border-color: var(--blanco);
}

.carrusel__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrusel__contador {
  margin-inline: 8px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.carrusel__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--texto-sobre-oscuro);
  border-radius: var(--radio);
  background: none;
  color: var(--blanco);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.carrusel__boton:hover {
  background: var(--marino);
}

.carrusel :focus-visible,
.p-medida :focus-visible,
.pie :focus-visible,
.encabezado-pagina :focus-visible {
  outline-color: var(--blanco);
}

/* ---------- Encabezado azul en páginas interiores ---------- */

.encabezado-pagina {
  padding-block: 40px;
  border-bottom: 0;
  background: var(--azul);
  color: var(--blanco);
}

.encabezado-pagina h1 {
  color: var(--blanco);
  font-size: 50px;
  line-height: 1.05;
}

.encabezado-pagina .bajada,
.encabezado-pagina .migas,
.encabezado-pagina .datos dt {
  color: var(--blanco);
}

.encabezado-pagina a {
  color: var(--blanco);
}

.encabezado-pagina .migas li + li::before {
  color: var(--blanco);
}

/* Flecha "Atrás" que agrega sitio.js sobre la ruta: vuelve una página */
.atras {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -14px;   /* queda pegada a la ruta */
}

.atras:hover,
.atras:focus-visible {
  text-decoration: underline;
}

.encabezado-pagina .atras {
  color: var(--blanco);
}

/* Índice de secciones dentro de una página */
.en-esta-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.encabezado-pagina .boton--blanco,
.encabezado-pagina .boton--blanco:hover {
  background: var(--blanco);
  color: var(--azul-oscuro);
}

.encabezado-pagina .boton--contorno {
  box-shadow: inset 0 0 0 2px var(--blanco);
}

.encabezado-pagina .boton--cotizar {
  color: var(--marino-profundo);
}

/* ---------- Banner en movimiento del encabezado ----------
   Videos hechos con HyperFrames. En pantallas de 1000 px o más:
   - Fotos (video-encabezados/): ocupa la derecha del encabezado azul.
   - Fondo (--fondo, video-encabezado-productos/): cubre todo el encabezado, con el texto encima.
   Parte con el mismo azul, se abre en círculo como la boca de un tubo y queda en el último cuadro.
   La foto (img) es ese último cuadro y se ve cuando no hay video. En pantallas angostas no va. */
.encabezado-pagina--banner {
  position: relative;
  overflow: hidden;
}

.encabezado-pagina__banner {
  display: none;
}

@media (min-width: 1000px) {
  .encabezado-pagina--banner > .contenedor > * {
    max-width: 50%;
  }

  /* Fondo de todo el encabezado: el texto va encima y deja pasar los clics al botón "Detener" */
  .encabezado-pagina--fondo > .contenedor {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  .encabezado-pagina--fondo > .contenedor > * {
    pointer-events: auto;
  }

  .encabezado-pagina--fondo .encabezado-pagina__banner {
    left: 0;
    width: auto;
  }

  .encabezado-pagina--fondo .encabezado-pagina__banner > video,
  .encabezado-pagina--fondo .encabezado-pagina__banner > img {
    object-position: right center;
  }

  .encabezado-pagina--fondo .encabezado-pagina__nota {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
  }

  .encabezado-pagina__banner {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45vw;
    margin: 0;
    background: var(--azul);
  }

  .encabezado-pagina__banner > video,
  .encabezado-pagina__banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .encabezado-pagina__banner--quieto video {
    display: none;
  }
}

/* Con movimiento, la foto espera oculta para que el video parta desde el azul, sin saltos */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .encabezado-pagina__banner img {
    visibility: hidden;
  }

  .encabezado-pagina__banner--quieto img {
    visibility: visible;
  }
}

.encabezado-pagina__detener {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radio);
  background: rgba(7, 34, 56, 0.75);
  color: var(--blanco);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.encabezado-pagina__detener:hover {
  background: var(--marino-profundo);
}

/* Nota sobre el banner cuando las imágenes son generadas (Productos) */
.encabezado-pagina__nota {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 2px 8px;
  border-radius: var(--radio);
  background: rgba(7, 34, 56, 0.6);
  color: var(--blanco);
  font-size: 12px;
}

/* ---------- Líneas de producto ---------- */

.barra-lineas {
  background: var(--marino);
  font-family: var(--fuente-titulos);
  font-size: 15px;
  font-weight: 600;
}

.barra-lineas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
  padding: 10px 0;
  list-style: none;
}

.barra-lineas a {
  color: var(--blanco);
  text-decoration: none;
}

.barra-lineas a:hover,
.barra-lineas a[aria-current="page"] {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ficha-pagina {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  padding-block: 40px 72px;
}

.indice {
  position: sticky;
  top: 16px;
  font-size: 15px;
  line-height: 1.35;
}

.indice strong {
  display: block;
  margin: 16px 0 4px;
  color: var(--marino);
  font-family: var(--fuente-titulos);
}

.indice strong:first-child {
  margin-top: 0;
}

.indice a {
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  text-decoration: none;
}

.indice a:hover {
  color: var(--azul);
}

/* Bajo 900 px el índice se pliega detrás de "Ir a una sección". El botón llega como enlace a #indice-lista:
   sin JavaScript la lista se abre con :target; sitio.js lo cambia por un botón con aria-expanded. */
.indice .indice__abrir {
  display: none;
}

.grupo {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 4px solid var(--marino);
  scroll-margin-top: 16px;
}

.grupo + .nota-grupo {
  margin-bottom: 16px;
}

.nota-grupo {
  color: var(--texto-suave);
}

.producto {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--borde);
  scroll-margin-top: 16px;
}

.producto__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--blanco);
}

.producto__figura figcaption {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--texto-suave);
}

.producto__pendiente {
  aspect-ratio: 3 / 2;
  align-self: start;
}

.medidas__plano {
  width: auto;
  height: 260px;
  max-width: 100%;
  object-fit: contain;
  margin-block: 4px 12px;
}

.medidas__tablas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px 24px;
  align-items: start;
}

.tabla--medidas caption {
  padding-bottom: 6px;
  font-weight: 700;
  text-align: left;
}

.producto__figura--abre {
  cursor: pointer;
}

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.producto h3 {
  font-size: 22px;
}

.producto__datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 16px;
  font-size: 16px;
}

.producto__datos dt {
  color: var(--texto-suave);
}

.producto__datos dd {
  font-weight: 600;
}

.producto__enlaces {
  margin-top: 4px;
  font-weight: 700;
}

.producto__ficha {
  display: block;
  margin-top: 6px;
  color: var(--azul-oscuro);
  font-weight: 700;
}

.medidas__unidad {
  margin-bottom: 8px;
  font-weight: 700;
}

.medidas__tablas--una {
  grid-template-columns: minmax(0, 1fr);
}

/* Botones de presión sobre la tabla (los pone sitio.js cuando hay una tabla por PN) */
.medidas__presion {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  border: 1px solid var(--azul-oscuro);
  border-radius: var(--radio);
  overflow: hidden;
}

.medidas__opcion {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  background: var(--blanco);
  color: var(--azul-oscuro);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.medidas__opcion + .medidas__opcion {
  border-left: 1px solid var(--azul-oscuro);
}

.medidas__opcion:hover {
  background: var(--gris-claro);
}

.medidas__opcion[aria-pressed="true"] {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

/* Fila marcada al pasar el mouse, para leer la medida junto a su código */
.tabla--medidas th:first-child,
.tabla--medidas td:first-child {
  padding-left: 8px;
}

.tabla--medidas tbody tr:hover td {
  background: var(--gris-claro);
}

.medidas {
  grid-column: 1 / -1;
}

.medidas summary,
.especificaciones summary {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--azul-oscuro);
  font-weight: 700;
  cursor: pointer;
}

.medidas summary::before,
.especificaciones summary::before {
  content: "+ ";
}

.medidas[open] summary::before,
.especificaciones[open] summary::before {
  content: "- ";
}

.especificaciones .producto__datos {
  margin-bottom: 4px;
}

.tabla--medidas {
  font-size: 15px;
}

.tabla--medidas th {
  white-space: nowrap;
}

.tabla--medidas td {
  padding-block: 6px;
  white-space: nowrap;
}

.tabla--medidas td:first-child {
  font-weight: 700;
}

.tabla--texto td {
  white-space: normal;
}

.medidas .nota {
  margin-top: 8px;
}

.tabla-suelta {
  margin-block: 12px 28px;
}

/* Tabla de dos columnas (SDR y presión en Información técnica): no ocupa todo el ancho */
.tabla-suelta--angosta {
  max-width: 32rem;
}

/* Índice completo de productos */
.linea {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px 32px;
  padding-block: 28px;
  border-bottom: 1px solid var(--borde);
  scroll-margin-top: 16px;
}

.linea:first-child {
  border-top: 4px solid var(--marino);
}

.linea > .marco-foto {
  width: 100%;
}

.linea h2 {
  font-size: 28px;
  margin-bottom: 4px;
}

.linea h2 a {
  color: var(--marino);
  text-decoration: none;
}

.linea h2 a:hover {
  color: var(--azul);
}

.linea ul {
  columns: 2;
  column-gap: 32px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  line-height: 1.3;
}

.linea li {
  break-inside: avoid;
  padding: 5px 0;
}

/* Tabla de líneas en Inicio */
.p-linea__nombre a {
  color: var(--marino);
  text-decoration: none;
}

.p-linea__nombre a:hover {
  color: var(--azul);
}

/* Catálogo en PDF */
.banda-catalogo {
  background: var(--gris-claro);
  border-block: 1px solid var(--borde);
}

.banda-catalogo .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-block: 28px;
}

.chat__aviso {
  padding: 14px 18px 0;
  font-size: 15px;
  line-height: 1.45;
}

.sede-enlaces {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---------- Pantallas angostas: páginas nuevas ---------- */

@media (max-width: 900px) {
  .encabezado-pagina h1 { font-size: 36px; }

  .carrusel__foto img { height: auto; aspect-ratio: 4 / 3; }

  .ficha-pagina {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 24px 48px;
  }

  .indice {
    position: static;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }

  .indice .indice__abrir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--marino);
    font: 700 17px/1.2 var(--fuente-titulos);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  /* Flecha hacia abajo; apunta hacia arriba con la lista abierta */
  .indice__abrir::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .indice__abrir[aria-expanded="true"]::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  .indice__lista {
    display: none;
    padding: 0 16px 12px;
  }

  a.indice__abrir ~ .indice__lista:target,
  .indice__abrir[aria-expanded="true"] ~ .indice__lista {
    display: block;
  }

  .indice__lista a {
    padding-block: 10px;
  }

  .linea {
    grid-template-columns: minmax(0, 1fr);
  }

  .linea > .marco-foto {
    max-width: 240px;
  }

  .linea ul {
    columns: 1;
  }

  .formulario .campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .producto {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px 14px;
  }

  .producto h3 {
    font-size: 19px;
    hyphens: auto;
  }

  /* Al lado de la foto queda poco ancho: cada dato va bajo su nombre en vez de en dos columnas */
  .producto__datos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .producto__datos dd + dt {
    margin-top: 6px;
  }

  .carrusel__miniatura { display: none; }

  .barra-superior span { display: none; }

  .fullsito { right: 12px; }

  /* Líneas de producto en una sola fila que se desliza de lado, de borde a borde de la pantalla.
     El borde derecho se difumina para que se note que hay más; sitio.js deja visible la línea actual. */
  .barra-lineas ul {
    flex-wrap: nowrap;
    gap: 0 24px;
    margin-inline: -24px;
    padding: 0 0 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }

  .barra-lineas ul::-webkit-scrollbar {
    display: none;
  }

  .barra-lineas li {
    flex: none;
  }

  .barra-lineas li:last-child {
    padding-right: 40px;
  }

  .barra-lineas a {
    display: block;
    padding-block: 12px;
    white-space: nowrap;
  }
}

/* Pantallas táctiles: los enlaces que van solos o en listas quedan de unos 40 a 44 px de alto
   para tocarlos con el dedo. Los enlaces dentro de un párrafo no cambian. */
@media (pointer: coarse) {
  .p-titulo > a,
  .p-sede > a,
  .pila > a:not(.boton),
  .producto__enlaces,
  .producto__ficha {
    padding-block: 8px;
  }

  .datos dd > a,
  .migas a,
  .en-esta-pagina a,
  .lista-tecnica h3 a,
  .p-linea__nombre a,
  .pie li a,
  .pie address a,
  .pie .contenedor > div > a {
    display: inline-block;
    padding-block: 8px;
  }

  .datos {
    align-items: baseline;
  }

  td.derecha > a {
    display: inline-block;
    padding: 12px 0 12px 12px;
  }

  .linea li {
    padding-block: 0;
  }

  .linea li a {
    display: inline-block;
    padding-block: 10px;
  }

  .atras,
  .cot__abrir {
    min-height: 44px;
  }

  /* Lista de cotización */
  .cot__cerrar,
  .cot__lista .cot__enlace {
    padding-block: 10px;
  }

  .cot__vaciar {
    width: 44px;
    height: 44px;
  }

  .cot__lista input {
    height: 40px;
    font-size: 16px; /* con menos de 16 px el iPhone acerca la pantalla al escribir */
  }
}

/* Tablets táctiles: la barra de líneas sigue en varias filas, con más alto para tocar cada enlace.
   El WhatsApp de la barra superior gana área de toque sin cambiar el alto de la barra. */
@media (pointer: coarse) and (min-width: 561px) {
  .barra-lineas ul {
    gap: 0 24px;
    padding-block: 2px;
  }

  .barra-lineas a {
    display: inline-block;
    padding-block: 9px;
  }

  .barra-superior .barra-superior__whatsapp {
    display: inline-block;
    margin-block: -8px;
    padding-block: 8px;
  }
}

/* En 320 px los datos de contacto van uno bajo otro para que el correo no se salga de la pantalla */
@media (max-width: 359px) {
  .datos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .datos dd + dt {
    margin-top: 8px;
  }
}

@media print {
  .fullsito,
  .barra-superior,
  .barra-lineas,
  .indice,
  .saltar { display: none; }
}

/* ---------- Ajustes de portada y fabricación ---------- */

.boton--blanco,
.boton--blanco:hover {
  background: var(--blanco);
  color: var(--azul-oscuro);
}

.p-portada__azul .datos dt,
.p-portada__azul .datos dd,
.p-portada__azul .migas,
.p-portada__azul a:not(.boton) {
  color: var(--blanco);
}

.p-portada__azul .migas li + li::before {
  color: var(--blanco);
}

.p-portada__azul {
  justify-content: center;
}

.p-portada .p-cotizar {
  grid-column: 2;
  grid-row: 1;
}

.p-margen-der {
  padding-left: 32px;
  padding-right: max(24px, calc((100vw - var(--ancho)) / 2 + 24px));
}

.p-portada .p-cotizar .cotizador {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-cotizar__nota {
  font-size: 15px;
}

/* ---------- Apertura de la portada y transición entre páginas ----------
   Fondo azul con anillos de tubería en corte y el logo al centro; luego se abre un círculo
   desde el centro, como mirar por dentro de un tubo, y aparece la página.
   .intro: la primera vez que se entra al sitio en la sesión, en index.html (1,7 s).
   .transicion-sale: al elegir otra página en el menú, el azul se cierra hacia el centro y
   aparece el logo (0,4 s); la pone js/sitio.js, que cambia de página al terminar.
   .transicion: la página nueva parte cubierta y se abre (0,8 s); la pone el <head> de cada página.
   Nunca si el equipo pide reducir el movimiento. Termina oculta aunque falle el resto. */

@property --fp-hueco {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@media (prefers-reduced-motion: no-preference) {
  .intro body::before,
  .intro body::after,
  .transicion body::before,
  .transicion body::after,
  .transicion-sale body::before,
  .transicion-sale body::after {
    content: "";
    position: fixed;
    z-index: 1000;
    pointer-events: none;
  }

  .intro body::before,
  .transicion body::before,
  .transicion-sale body::before {
    inset: 0;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        transparent 0 72px,
        rgba(255, 255, 255, 0.06) 72px 84px),
      var(--azul);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--fp-hueco), #000 calc(var(--fp-hueco) + 1px));
    mask: radial-gradient(circle at 50% 50%, transparent var(--fp-hueco), #000 calc(var(--fp-hueco) + 1px));
  }

  .intro body::after,
  .transicion body::after,
  .transicion-sale body::after {
    top: 50%;
    left: 50%;
    width: min(340px, 64vw);
    aspect-ratio: 264.6 / 96.6;
    background: url("../img/logo-full-plastic-blanco.svg") center / contain no-repeat;
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  .intro body::before {
    animation:
      fp-abrir 700ms cubic-bezier(0.7, 0, 0.3, 1) 1000ms forwards,
      fp-fin 1ms linear 1750ms forwards;
  }

  .intro body::after {
    animation:
      fp-logo-entra 500ms cubic-bezier(0.2, 0.7, 0.2, 1) 100ms forwards,
      fp-logo-sale 300ms ease-in 1000ms forwards,
      fp-fin 1ms linear 1750ms forwards;
  }

  /* Al salir: el azul se cierra hacia el centro y aparece el logo. Mientras, no se puede hacer otro clic. */
  .transicion-sale body::before {
    pointer-events: auto;
    animation: fp-cerrar 380ms cubic-bezier(0.7, 0, 0.3, 1) both;
  }

  .transicion-sale body::after {
    animation: fp-logo-entra 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms forwards;
  }

  /* Al llegar: la página parte azul, con el logo, y se abre desde el centro */
  .transicion body::before {
    animation:
      fp-abrir 600ms cubic-bezier(0.7, 0, 0.3, 1) 150ms forwards,
      fp-fin 1ms linear 800ms forwards;
  }

  .transicion body::after {
    opacity: 1;
    animation:
      fp-logo-sale 250ms ease-in 100ms forwards,
      fp-fin 1ms linear 800ms forwards;
  }
}

@keyframes fp-abrir {
  to { --fp-hueco: 80vmax; }   /* alcanza las esquinas en pantallas anchas y de celular */
}

@keyframes fp-cerrar {
  from { --fp-hueco: 80vmax; }
  to { --fp-hueco: 0px; }
}

@keyframes fp-logo-entra {
  from { opacity: 0; transform: translate(-50%, -44%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes fp-logo-sale {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes fp-fin {
  from, to { visibility: hidden; }
}

/* ---------- Corte del tubo en el cotizador de la portada ----------
   La pared se dibuja a escala con el diámetro y el SDR que escribe el cliente.
   Solo se mueve cuando el cliente escribe; la entrada de la portada es la apertura con el logo. */

.corte {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid var(--marino-profundo);
}

.corte[hidden] {
  display: none;
}

.corte__dibujo {
  width: 104px;
  height: 104px;
}

.corte__pared {
  fill: var(--marino-profundo);
}

/* El corte aparece quieto (está oculto hasta elegir medida y SDR) y se mueve con cada cambio */
.corte__interior {
  fill: var(--blanco);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.corte__titulo {
  margin: 0 0 6px;
  font-family: var(--fuente-titulos);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.corte__datos {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0 16px;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
}

.corte__datos div {
  display: contents;
}

.corte__datos dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.p-cotizar .corte__enlace {
  color: var(--marino-profundo);
  font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .corte__interior {
    transition: none;
  }
}

/* ---------- Cotizador de la portada: listas que se activan paso a paso ---------- */

.cotizador [hidden] {
  display: none;
}

.p-cotizar .campo select:disabled {
  background: rgba(255, 255, 255, 0.6);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.p-cotizar .boton:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* En teléfonos cada lista del cotizador ocupa todo el ancho y se lee completa ("Primero elija la pieza") */
@media (max-width: 480px) {
  .p-portada .p-cotizar .cotizador {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .corte {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .corte__dibujo {
    width: 72px;
    height: 72px;
  }
}

.p-portada--sede .p-portada__foto {
  grid-row: 1;
  min-height: 480px;
}

.p-mosaico--calama {
  grid-template-rows: none;
}

.p-mosaico__a { grid-column: span 7; }
.p-mosaico__b { grid-column: span 5; }
.p-mosaico__c { grid-column: span 4; }

.p-mosaico__a img,
.p-mosaico__b img { height: 520px; }
.p-mosaico__c img { height: 270px; }

.grupo:not(:first-child) {
  margin-top: 48px;
}

.banda-catalogo h2 {
  font-size: 28px;
}

.p-medida__intro > div > .boton {
  margin-top: 16px;
}

@media (max-width: 1000px) {
  .p-portada .p-cotizar,
  .p-portada--sede .p-portada__foto {
    grid-column: 1;
    grid-row: auto;
  }

  .p-margen-der { padding-inline: 24px; }

  .p-mosaico__a,
  .p-mosaico__b,
  .p-mosaico__c { grid-column: 1 / -1; }

  .p-mosaico__a img,
  .p-mosaico__b img,
  .p-mosaico__c img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .p-portada--sede .p-portada__foto {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Consentimiento de datos personales (ventana antes de enviar a WhatsApp) ---------- */

.consentimiento {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(7, 34, 56, 0.35);
  overflow: hidden;
}

.consentimiento::backdrop {
  background: rgba(7, 34, 56, 0.6);
}

.consentimiento__forma {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.consentimiento__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: var(--marino);
  color: var(--blanco);
}

.consentimiento__cabecera h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  color: var(--blanco);
}

.consentimiento__cerrar {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--blanco);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.consentimiento__cerrar:hover,
.consentimiento__cerrar:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.consentimiento__documento {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--borde);
}

.consentimiento__documento h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}

.consentimiento__documento h3:first-child {
  margin-top: 0;
}

.consentimiento__documento p,
.consentimiento__documento ol {
  margin: 0 0 8px;
}

.consentimiento__documento ol {
  padding-left: 22px;
}

.consentimiento__pendiente {
  padding: 0 4px;
  background: #FFF1B8;
  color: var(--texto);
  font-weight: 600;
}

.consentimiento__casillas {
  flex: none;
  padding: 16px 20px 20px;
  background: var(--gris-claro);
}

.consentimiento__casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.consentimiento__casilla input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--azul);
}

.consentimiento__casilla em {
  color: var(--texto-suave);
  font-style: normal;
}

.consentimiento__error {
  margin: 0 0 10px;
  color: #A3271C;
  font-size: 14px;
  font-weight: 600;
}

.consentimiento__error:empty {
  display: none;
}

.consentimiento__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

@media (max-width: 560px) {
  .consentimiento__cabecera h2 {
    font-size: 17px;
  }

  .consentimiento__acciones .boton {
    width: 100%;
  }
}

/* ---------- Prefijo de país en los teléfonos ---------- */

.telefono {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.telefono input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Caja angosta que muestra solo el código; la lista real queda encima, transparente,
   para que al tocarla se abra con los nombres de los países */
.telefono__pais {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  width: 78px;
  height: 44px;
  padding: 0 22px 0 10px;
  border: 1px solid var(--borde-campo);
  border-radius: 3px;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233F5566' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 7px;
  color: var(--texto);
  font-size: 16px;
  font-weight: 400;
}

.telefono__pais:focus-within {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.telefono__prefijo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

.cot__campo .telefono__pais {
  height: 42px;
}