/* ============================================================
   LABORATORIO ISLEYER
   Hoja de estilos única. Organizada en el mismo orden que el HTML.

   Para cambiar la identidad visual del sitio entero, toca sólo
   las variables del bloque :root de aquí abajo.
   ============================================================ */

:root {
  /* Colores — tomados del kit original de Elementor */
  --primario:        #2C3171;
  --primario-oscuro: #090F53;
  --acento:          #E12F2E;
  --enlace:          #3A5BCC;
  --texto:           #4a4f55;
  --texto-suave:     #7A7A7A;
  --gris-fondo:      #f3f4f6;
  --blanco:          #ffffff;
  --borde:           #e5e7eb;

  /* Tipografía */
  --fuente-display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --fuente-texto:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --ancho-max:   1200px;
  --radio:       10px;
  --sombra:      0 4px 20px rgba(0, 0, 0, .08);
  --transicion:  .25s ease;
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--enlace); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--primario); }

h1, h2, h3, h4, h5 {
  font-family: var(--fuente-texto);
  font-weight: 700;
  color: var(--primario);
  line-height: 1.25;
  margin: 0 0 .6em;
}

h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

/* Ojo: el <ol> también, o el navegador le mete 40px de sangría por defecto
   y descuadra la cronología, la línea de tiempo y los objetivos. */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Las palabras muy largas sin espacios (correos, URLs) obligan a su columna
   a ensancharse y desbordan la pantalla en móviles estrechos. */
h1, h2, h3, h4, h5, p, li, strong, blockquote { overflow-wrap: break-word; }

/* Por defecto una celda de rejilla o flex no encoge por debajo de su
   contenido mínimo. Esto se lo permite. */
.producto, .linea, .canal, .objetivo, .valor,
.canal__texto, .etapa__contenido, .hito__texto { min-width: 0; }

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

.seccion { padding: clamp(48px, 7vw, 90px) 0; }

.centrado { text-align: center; }

/* Título grande tipo revista — el serif de la portada */
.titulo-display {
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  color: #111;
  margin: 0 0 .35em;
}

.antetitulo {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: .6em;
}

/* Enlace de salto para lectores de pantalla */
.saltar {
  position: absolute;
  left: -9999px;
  background: var(--primario);
  color: #fff;
  padding: 10px 18px;
  z-index: 999;
}
.saltar:focus { left: 12px; top: 12px; }

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

.boton {
  display: inline-block;
  background: var(--primario);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 30px;
  border-radius: var(--radio);
  transition: background var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--primario-oscuro); color: #fff; transform: translateY(-2px); }

.boton--acento { background: var(--acento); }
.boton--acento:hover { background: #b62221; }

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */

.barra-superior {
  background: var(--primario);
  color: rgba(255, 255, 255, .9);
  font-size: .82rem;
}

.barra-superior__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  min-height: 44px;
}

.barra-superior a { color: rgba(255, 255, 255, .9); }
.barra-superior a:hover { color: #fff; }

.barra-superior__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.barra-superior__contacto li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ico { width: 15px; height: 15px; fill: currentColor; flex: none; }

.barra-superior__enlaces { display: flex; gap: 18px; }

.redes { display: flex; gap: 10px; }
.redes a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.redes a:hover { background: var(--acento); }
.redes svg { width: 14px; height: 14px; fill: #fff; }

/* ============================================================
   CABECERA Y MENÚ
   ============================================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 12px rgba(0, 0, 0, .07);
}

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.logo img { width: 168px; }

.menu > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu a {
  display: block;
  padding: 10px 14px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--primario);
  border-radius: 6px;
}
.menu a:hover { background: var(--gris-fondo); }
.menu a.activo { color: var(--acento); }

.menu__cta {
  background: var(--acento);
  color: #fff !important;
  margin-left: 8px;
}
.menu__cta:hover { background: #b62221 !important; }

/* Submenús */
.tiene-submenu { position: relative; }

.tiene-submenu > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transicion);
}

.tiene-submenu:hover .submenu,
.tiene-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a { font-weight: 500; white-space: nowrap; }

/* Botón hamburguesa (sólo móvil) */
.hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 2px;
  background: var(--primario);
  border-radius: 2px;
  transition: var(--transicion);
}

/* ============================================================
   HÉROE
   ============================================================ */

.heroe { padding: clamp(40px, 6vw, 80px) 0; }

.heroe__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
}

.heroe__bajada {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primario);
  line-height: 1.6;
  margin: 0;
}

.heroe__media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ============================================================
   LA EXPERIENCIA
   ============================================================ */

.experiencia { background: var(--gris-fondo); }

.experiencia__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.experiencia__media img {
  width: 100%;
  border-radius: var(--radio);
}

/* ============================================================
   NUESTRA HISTORIA
   ============================================================ */

.historia__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.historia strong { color: var(--primario); }

/* ============================================================
   PRODUCTOS
   ============================================================ */

.seccion__encabezado {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 54px);
  text-align: center;
}
.seccion__encabezado p { color: var(--texto-suave); margin: 0; }

/* Variante con enlace a la derecha, usada en Tienda Virtual */
.seccion__encabezado--tienda {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  margin-bottom: clamp(26px, 3.5vw, 40px);
}
.seccion__encabezado--tienda .antetitulo { margin-bottom: .3em; }
.seccion__encabezado--tienda h2 { margin: 0; }

.enlace-linea {
  flex: none;
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}

.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-bottom: 46px;
}

.producto {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  text-align: center;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.producto:hover {
  box-shadow: var(--sombra);
  transform: translateY(-4px);
}

.producto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 14px;
}

.producto h3 {
  font-size: .95rem;
  margin: 0;
  color: var(--primario);
}

/* ============================================================
   NUESTRO COMPROMISO
   ============================================================ */

.compromiso { background: var(--gris-fondo); }

.compromiso__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.compromiso__media img {
  width: 100%;
  border-radius: var(--radio);
}

/* ============================================================
   ESTADÍSTICAS
   ============================================================ */

.estadisticas {
  background: var(--primario);
  color: rgba(255, 255, 255, .85);
}

.seccion__encabezado--claro h2,
.seccion__encabezado--claro p { color: #fff; }
.seccion__encabezado--claro .antetitulo { color: #fff; opacity: .7; }

.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}

.cifra {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: #fff;
  margin-bottom: .25em;
}

.rejilla-cifras h3 {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}

/* ============================================================
   TESTIMONIOS
   ============================================================ */

.rejilla-testimonios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.testimonio {
  margin: 0;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonio blockquote {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--texto);
  flex: 1;
}
.testimonio blockquote::before { content: "\201C"; }
.testimonio blockquote::after  { content: "\201D"; }

.testimonio figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 700;
  color: var(--primario);
}
.testimonio figcaption img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   LLAMADA FINAL
   ============================================================ */

.cierre { background: var(--gris-fondo); }

.cierre__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cierre p { color: var(--texto-suave); }

/* ============================================================
   EN CONSTRUCCIÓN  ·  página "próximamente" (Club Isleyer)
   ============================================================ */

.en-construccion {
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--gris-fondo);
}

.en-construccion__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.en-construccion__logo {
  display: block;
  width: min(320px, 70%);
  height: auto;
  margin: 0 auto 20px;
}

.en-construccion__texto {
  font-size: 1.05rem;
  color: var(--texto);
  max-width: 48ch;
  margin-inline: auto;
}

.en-construccion__acciones {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   FRANJA DE COLOR  ·  encima del pie, en todas las páginas
   ============================================================ */

.franja-gradiente {
  min-height: 50px;
  background-image: linear-gradient(
    109.6deg,
    rgba(22, 180, 170, 1) 10%,
    rgba(160, 30, 180, 1) 35%,
    rgba(230, 140, 40, 1) 60%,
    rgba(40, 200, 120, 1) 88%
  );
}

/* ============================================================
   PIE
   ============================================================ */

.pie {
  background: var(--primario);
  color: rgba(255, 255, 255, .8);
  font-size: .92rem;
}

.pie__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-block: clamp(44px, 5vw, 68px);
}

.pie h2 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1em;
}

.pie a { color: rgba(255, 255, 255, .8); }
.pie a:hover { color: #fff; }

.pie__col li { margin-bottom: .6em; }

.pie__marca img {
  width: 190px;
  background: #fff;
  border-radius: var(--radio);
  padding: 14px;
}

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-block: 18px;
  font-size: .85rem;
}
.pie__legal p { margin: 0; text-align: center; }

/* ============================================================
   PORTADILLA  ·  cabecera de las páginas interiores
   ============================================================ */

.portadilla {
  background: var(--gris-fondo);
  padding: clamp(36px, 5vw, 64px) 0;
}

.portadilla__inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(30px, 5vw, 60px);
}

.portadilla__bajada {
  font-size: 1.05rem;
  color: var(--texto);
  margin: 0;
  max-width: 46ch;
}

.portadilla__media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* Ruta de navegación */
.miga {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1.1em;
}
.miga a { color: var(--acento); }
.miga span { margin: 0 .5em; }

/* ============================================================
   EL ORIGEN  (Nuestra Historia)
   ============================================================ */

.origen__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.origen__media img {
  width: 100%;
  border-radius: var(--radio);
}

/* ============================================================
   ETAPAS  ·  el recorrido por periodos
   ============================================================ */

.etapas { background: var(--gris-fondo); }

.lista-etapas {
  max-width: 900px;
  margin-inline: auto;
  position: relative;
}

/* Línea vertical que une las etapas */
.lista-etapas::before {
  content: "";
  position: absolute;
  left: 96px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(var(--acento), rgba(44, 49, 113, .25));
}

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 34px;
  padding-bottom: 34px;

  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.etapa.visible { opacity: 1; transform: none; }

.etapa__periodo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--primario);
  line-height: 1.2;
  padding-top: 2px;
}

.etapa__guion {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--acento);
  margin: 4px 0;
}

/* Punto sobre la línea */
.etapa__contenido { position: relative; }
.etapa__contenido::before {
  content: "";
  position: absolute;
  left: -41px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--acento);
}

.etapa__contenido h3 { margin-bottom: .4em; }
.etapa__contenido p  { margin: 0; }

.etapa--destacada .etapa__contenido::before { background: var(--acento); }

/* ============================================================
   LÍNEA DE TIEMPO  ·  hitos alternos
   ============================================================ */

.linea-tiempo {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 5vw, 64px);
}

.hito {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(26px, 4vw, 54px);

  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.hito.visible { opacity: 1; transform: none; }

/* Alterna el lado de la imagen */
.hito:nth-child(even) .hito__media { order: 2; }

.hito__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.hito__anio {
  display: inline-block;
  font-family: var(--fuente-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--acento);
  margin-bottom: .18em;
}

.hito__texto h3 { font-size: 1.35rem; margin-bottom: .5em; }
.hito__texto p  { margin: 0; }

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */

.rejilla-mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.tarjeta-mv {
  background: var(--gris-fondo);
  border-radius: var(--radio);
  padding: clamp(28px, 3.5vw, 44px);
  border-top: 4px solid var(--primario);
}

.tarjeta-mv--acento { border-top-color: var(--acento); }

.tarjeta-mv__icono {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primario);
  margin-bottom: 18px;
}
.tarjeta-mv--acento .tarjeta-mv__icono { background: var(--acento); }
.tarjeta-mv__icono svg { width: 26px; height: 26px; fill: #fff; }

.tarjeta-mv h2 { font-size: 1.5rem; }
.tarjeta-mv p  { margin: 0; }

/* ============================================================
   OBJETIVOS
   ============================================================ */

.rejilla-objetivos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.objetivo {
  position: relative;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 30px 30px 88px;

  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, box-shadow var(--transicion);
}
.objetivo.visible { opacity: 1; transform: none; }
.objetivo:hover   { box-shadow: var(--sombra); }

.objetivo__numero {
  position: absolute;
  left: 26px;
  top: 26px;
  font-family: var(--fuente-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--acento);
  opacity: .85;
}

.objetivo h3 { font-size: 1.08rem; margin-bottom: .5em; }
.objetivo p { margin: 0; }
.objetivo p + p { margin-top: .8em; }

/* ============================================================
   PILARES
   ============================================================ */

.pilares { background: var(--gris-fondo); }

.pilar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(36px, 5vw, 60px);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.pilar.visible { opacity: 1; transform: none; }

.pilar--invertido .pilar__media { order: -1; }

.pilar__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.pilar__texto h3 { font-size: 1.4rem; }
.pilar__texto p:last-child { margin-bottom: 0; }

.pilar-ancho {
  background: #fff;
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: clamp(28px, 3.5vw, 46px);
}
.pilar-ancho h3 { font-size: 1.4rem; }
.pilar-ancho p:last-child { margin-bottom: 0; }

/* ============================================================
   VALORES
   ============================================================ */

.valores { background: var(--primario); }

.rejilla-valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.valor {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 12px 26px;

  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease, background var(--transicion);
}
.valor.visible { opacity: 1; transform: none; }
.valor:hover   { background: var(--acento); border-color: var(--acento); }

/* ============================================================
   PORTADILLA SIMPLE  ·  sin imagen (Contacto, Productos)
   ============================================================ */

.portadilla--simple { text-align: center; }
.portadilla--simple .portadilla__bajada { margin-inline: auto; }
.portadilla--simple .miga { text-align: center; }

/* Atajos a las categorías */
.atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

/* Separador invisible: al ocupar el 100% del ancho, obliga a que las
   cápsulas siguientes empiecen en una fila nueva (ver tienda-virtual.html). */
.atajos__salto { flex-basis: 100%; height: 0; }
.atajos a {
  --glow: var(--primario);
  background: #fff;
  border: 2px solid var(--glow);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 18%, transparent),
              0 0 14px 1px color-mix(in srgb, var(--glow) 55%, transparent);
  transition: background var(--transicion), color var(--transicion);
}
.atajos a:hover { background: var(--glow); color: #fff; }

/* Un color de brillo distinto por cápsula, como en la referencia.
   nth-of-type (no nth-child) para que el separador .atajos__salto
   no descuadre la numeración de los colores. */
.atajos a:nth-of-type(5n+1) { --glow: #f59e0b; }
.atajos a:nth-of-type(5n+2) { --glow: #16a34a; }
.atajos a:nth-of-type(5n+3) { --glow: #06b6d4; }
.atajos a:nth-of-type(5n+4) { --glow: #a855f7; }
.atajos a:nth-of-type(5n+5) { --glow: #ef4444; }

/* ============================================================
   CANALES DE CONTACTO
   ============================================================ */

.canales-seccion { padding-bottom: 0; }

.canales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.canal a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px;
  color: var(--texto);
  transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.canal a:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  border-color: var(--primario);
}

.canal__ico {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primario);
}
.canal__ico svg { width: 22px; height: 22px; fill: #fff; }

.canal--whatsapp .canal__ico { background: #25D366; }
.canal--whatsapp a:hover      { border-color: #25D366; }

.canal__texto { display: flex; flex-direction: column; gap: 2px; }
.canal__texto strong { color: var(--primario); font-size: 1rem; }
.canal__texto span   { font-size: .88rem; color: var(--texto-suave); line-height: 1.5; }

/* ============================================================
   FORMULARIO Y DATOS
   ============================================================ */

.form-layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.formulario {
  background: var(--gris-fondo);
  border-radius: var(--radio);
  padding: clamp(26px, 3.5vw, 44px);
}

.formulario h2 { font-size: 1.6rem; margin-bottom: .3em; }
.formulario__intro { color: var(--texto-suave); margin-bottom: 1.8em; }

.campo { margin: 0 0 20px; }

.campo label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primario);
  margin-bottom: 7px;
}
.campo label span { color: var(--acento); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { resize: vertical; min-height: 130px; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(44, 49, 113, .12);
}

.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.formulario__acciones { margin: 26px 0 0; }
.formulario__acciones .boton { border: 0; cursor: pointer; font-family: inherit; }

.formulario__nota {
  margin: 16px 0 0;
  font-size: .9rem;
  font-weight: 600;
  min-height: 1.2em;
}
.formulario__nota--error { color: var(--acento); }
.formulario__nota--ok    { color: #1a7f37; }

/* Columna de datos */
.datos__bloque {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--borde);
}
.datos__bloque:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.datos h2 { font-size: 1.15rem; margin-bottom: .7em; }
.datos p  { margin-bottom: .8em; }

.enlace-mapa {
  display: inline-block;
  font-weight: 600;
  font-size: .92rem;
  padding: 8px 0;
}

.horarios li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: .92rem;
}
.horarios li:last-child { border-bottom: 0; }
.horarios strong { color: var(--primario); }
.horarios .cerrado { color: var(--acento); }

.redes--grandes a { width: 40px; height: 40px; background: var(--primario); }
.redes--grandes a:hover { background: var(--acento); }
.redes--grandes svg { width: 19px; height: 19px; }

/* ============================================================
   LÍNEAS DE PRODUCTO
   ============================================================ */

.lineas-seccion--alt { background: var(--gris-fondo); }

.rejilla-lineas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.linea {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.linea:hover { box-shadow: var(--sombra); transform: translateY(-4px); }

.linea__media { position: relative; }
.linea__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.linea__texto { padding: 22px 24px 26px; }

.linea__marca {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: .5em;
}

.linea__texto h3 { font-size: 1.15rem; margin-bottom: .6em; }
.linea__texto h3 a { color: inherit; }
.linea__texto h3 a:hover { color: var(--acento); }
.linea__texto p { font-size: .93rem; }
.linea__texto p:last-child { margin: 0; }

/* Enlace «Ver la línea» al pie de la tarjeta */
.linea__ver {
  margin-top: 1em;
  font-size: .9rem !important;
  font-weight: 700;
}
.linea__ver a { color: var(--acento); }
.linea__ver a:hover { color: var(--primario); }

/* Toda la tarjeta reacciona al pasar por encima del enlace */
.linea:hover .linea__ver a { color: var(--primario); }

/* Etiquetas sobre la imagen */
.etiqueta {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, .95);
  color: var(--primario);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.etiqueta--premium { background: var(--primario); color: #fff; }
.etiqueta--dato    { background: var(--acento);   color: #fff; }

/* ============================================================
   PRODUCTOS A LA MEDIDA
   ============================================================ */

.medida__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(30px, 4.5vw, 60px);
}

.medida__media img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ============================================================
   PÁGINA DE LÍNEA
   ============================================================ */

/* Distintivo bajo el título de la línea */
.distintivo {
  display: inline-block;
  margin-top: 16px;
  background: var(--primario);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
}

.portadilla .linea__marca { margin-bottom: .3em; }
.portadilla h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }

.portadilla__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Descripción de la línea: un párrafo destacado */
.descripcion-linea { padding-bottom: 0; }

/* Cuando la sección siguiente tiene fondo gris (como .pilares aquí), el
   padding-bottom:0 de arriba hace que el blanco choque contra el gris sin
   respiro. Esta variante devuelve el espacio para esos casos. */
.descripcion-linea--espaciada { padding-bottom: clamp(48px, 7vw, 90px); }

.descripcion-linea__inner {
  max-width: 800px;
  margin-inline: auto;
  border-left: 4px solid var(--acento);
  padding-left: clamp(18px, 3vw, 30px);
}
.descripcion-linea p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--texto);
}

/* Rejilla de productos de la línea */
.rejilla-productos-linea {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.producto-linea {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.producto-linea:hover { box-shadow: var(--sombra); transform: translateY(-4px); }

.producto-linea__media { background: var(--gris-fondo); }
.producto-linea__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.producto-linea__texto { padding: 20px 22px 24px; }
.producto-linea__texto h3 { font-size: 1.05rem; margin-bottom: .55em; }
.producto-linea__texto p  { margin: 0; font-size: .9rem; color: var(--texto-suave); }

/* Variante sin fotografía disponible */
.producto-linea--sin-foto { border-left: 4px solid var(--acento); }

/* Enlace de vuelta al listado */
.volver { margin-top: 42px; }
.volver a { font-weight: 600; }

/* Para qué sirve: usos de una línea del hogar */
.usos-seccion { padding-top: clamp(34px, 4vw, 54px); }

.rejilla-usos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.rejilla-usos li {
  background: var(--gris-fondo);
  border-radius: var(--radio);
  padding: 22px 24px;
  font-weight: 600;
  color: var(--primario);
  border-left: 4px solid var(--acento);
}

/* Aviso de catálogo, mientras la línea no tenga productos cargados */
.catalogo-aviso { padding-top: 0; }

.catalogo-aviso__inner {
  background: var(--primario);
  border-radius: var(--radio);
  padding: clamp(30px, 4vw, 52px);
  text-align: center;
  color: rgba(255, 255, 255, .85);
}
.catalogo-aviso h2 { color: #fff; }
.catalogo-aviso p  { max-width: 56ch; margin-inline: auto; }
.catalogo-aviso p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.boton--suave {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
}
.boton--suave:hover { background: rgba(255, 255, 255, .24); }

/* Variante para fondos claros (blanco texto+fondo se veía invisible sobre gris) */
.boton--contorno {
  background: transparent;
  color: var(--primario);
  border: 1px solid var(--borde);
}
.boton--contorno:hover { background: var(--gris-fondo); color: var(--primario); border-color: var(--primario); }

/* ============================================================
   PÁGINAS LEGALES
   ============================================================ */

.legal__inner {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  font-size: 1.25rem;
  margin-top: 1.6em;
}
.legal h2:first-of-type { margin-top: 0; }

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

.legal ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
  list-style: disc;
}
.legal li { margin-bottom: .5em; }

/* ============================================================
   HERO A TODO LO ANCHO  ·  foto de fondo edge-to-edge con texto encima
   ============================================================ */

.hero-ancho {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-ancho__overlay {
  /* Degradado en vez de un tinte plano: se lee mejor sobre fotos con
     zonas claras y oscuras a la vez, como esta. */
  background: linear-gradient(180deg, rgba(9, 12, 40, .55) 0%, rgba(9, 12, 40, .72) 100%);
  padding: clamp(70px, 11vw, 130px) 0;
}

.hero-ancho__inner {
  max-width: 720px;
  text-align: center;
  color: #fff;
}

.hero-ancho .antetitulo { color: #fff; opacity: .85; }

.hero-ancho h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: .5em;
}

.hero-ancho p:not(.antetitulo) {
  color: rgba(255, 255, 255, .92);
  font-size: 1.05rem;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .rejilla-productos       { grid-template-columns: repeat(3, 1fr); }
  .rejilla-lineas          { grid-template-columns: repeat(2, 1fr); }
  .rejilla-productos-linea { grid-template-columns: repeat(2, 1fr); }
  .pie__inner              { grid-template-columns: 1fr 1fr; }
}

/* El límite se fijó en 1080px (no 900px) porque, al añadir Tienda Virtual
   y Club Isleyer, el menú de 6 ítems se envuelve a dos líneas entre
   1000-1080px sin margen: eso dejaba tablets reales como el iPad Pro
   12.9" (1024px de ancho) con un menú roto y sin hamburguesa disponible. */
@media (max-width: 1080px) {
  .hamburguesa { display: flex; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: var(--sombra);
    display: none;
    padding: 12px;
  }
  .menu.abierto { display: block; }

  .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { padding: 12px 14px; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    padding: 0 0 0 16px;
  }
  .tiene-submenu.abierto .submenu { display: block; }

  .heroe__inner,
  .experiencia__inner,
  .compromiso__inner,
  .portadilla__inner,
  .origen__inner,
  .hito,
  .pilar,
  .rejilla-mv,
  .rejilla-objetivos { grid-template-columns: 1fr; }

  /* En móvil la imagen va después del texto */
  .experiencia__media { order: 2; }

  .seccion__encabezado--tienda {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .enlace-linea { display: inline-block; padding: 7px 0; }

  /* Se anula la alternancia: en una columna la imagen siempre va primero */
  .hito:nth-child(even) .hito__media,
  .pilar--invertido .pilar__media { order: -1; }

  /* La cronología se compacta: el periodo pasa arriba, en horizontal */
  .lista-etapas::before { left: 8px; }

  .etapa {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 38px;
  }
  .etapa__periodo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--acento);
  }
  .etapa__guion { margin: 0; }
  .etapa__contenido::before { left: -38px; top: 6px; }

  .rejilla-cifras       { grid-template-columns: repeat(2, 1fr); }
  .rejilla-testimonios  { grid-template-columns: 1fr; }

  /* Contacto y productos en una columna */
  .canales,
  .form-layout,
  .medida__inner { grid-template-columns: 1fr; }

  /* 16px como mínimo: por debajo, Safari en iPhone hace zoom
     automático al tocar el campo y descoloca la página. */
  .campo input,
  .campo select,
  .campo textarea { font-size: 16px; }

  /* Objetivos táctiles: con el dedo hace falta bastante más superficie
     que con el ratón. Se aplica desde que aparece el menú hamburguesa,
     no sólo en móviles pequeños: la tablet también se toca. */
  .barra-superior__contacto li { min-height: 38px; }
  .barra-superior__contacto a  { padding: 8px 0; }

  /* La barra superior completa (tel + correo + dirección + redes) no cabe
     en una fila en móvil: cada elemento caía en su propia línea y la
     barra se disparaba de alto. Se oculta la dirección (no es un enlace
     y ya está en el pie y en Contacto) y se comprime el resto. */
  .barra-superior { font-size: .78rem; }
  .barra-superior__inner {
    justify-content: center;
    gap: 4px 16px;
    padding-block: 8px;
    min-height: 0;
  }
  .barra-superior__contacto {
    justify-content: center;
    gap: 2px 16px;
    width: 100%;
  }
  .barra-superior__contacto li:last-child { display: none; }
  .redes { justify-content: center; width: 100%; }

  .redes a   { width: 40px; height: 40px; }
  .redes svg { width: 18px; height: 18px; }

  .pie__col li   { margin-bottom: 0; }
  .pie__col li a { display: inline-block; padding: 9px 0; }

  .miga a { display: inline-block; padding: 6px 0; }

  /* Enlaces de las tarjetas de línea y el «volver» */
  .linea__texto h3 a,
  .linea__ver a,
  .volver a,
  .medida__texto h2 a,
  .legal a { display: inline-block; padding: 7px 0; }
}

@media (max-width: 640px) {
  .rejilla-productos       { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rejilla-lineas          { grid-template-columns: 1fr; }
  .rejilla-productos-linea { grid-template-columns: 1fr; }
  .rejilla-usos            { grid-template-columns: 1fr; }
  .campo-doble             { grid-template-columns: 1fr; }
  .pie__inner              { grid-template-columns: 1fr; gap: 30px; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}