/* =====================================================================
   Multitex Home — versión 2, calcada del estilo de edredona.com
   Una sola tipografía sans, títulos grandes en peso liviano, neutros
   (blanco + beige + casi negro) y el palo rosa solo en los antetítulos.
   ===================================================================== */
:root {
  --blanco: #ffffff;
  --beige: #ebe6e0;         /* panel de las tarjetas */
  --beige-hondo: #ded6cd;
  --gris: #f2f2f2;
  --gris-frio: #f5f7f9;     /* fondo plano del hero */
  --negro: #101010;         /* botones, footer */
  --texto: #333030;
  --suave: #7d7671;
  --acento: #bd8681;        /* palo rosa, solo antetítulos y detalles */
  /* tarjetas de destacados: panel rosa empolvado y filete un punto más hondo.
     Nombres neutros porque este color ya cambió varias veces */
  --destacado-filete: #ddc1ba;
  --azul-marca: #262a5c;   /* azul del logo, un punto más oscuro: fondo del pie */
  --azul-logo: #0090cc;    /* celeste del logo: subrayado del menú */
  --destacado-panel: #ecddda;
  --linea: #e4ddd6;
  --whatsapp: #25d366;
  --fuente: "Raleway", "Segoe UI", system-ui, sans-serif;
  /* manuscrita del carrusel (sustituta libre de la letra que pasó el cliente) */
  --firma: "Yellowtail", "Segoe Script", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* títulos: grandes y livianos, nunca en mayúsculas */
h1, h2, h3 { font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }

.titulo-seccion {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-bottom: 6px;
}
.bajada {
  color: var(--acento);
  font-size: 1rem;
  margin-bottom: 56px;
}

/* botón píldora */
.pill {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--negro);
  transition: background 0.25s, color 0.25s;
}
.pill-negro { background: var(--negro); color: #fff; }
.pill-negro:hover { background: #2c2c2c; border-color: #2c2c2c; }
.pill-blanco { background: #fff; color: var(--negro); border-color: #fff; }
.pill-blanco:hover { background: var(--negro); color: #fff; border-color: var(--negro); }
.pill-linea:hover { background: var(--negro); color: #fff; }

/* ---------------------------------------------------------------
   Cabecera — va encima del hero, sin fondo, y se va con el scroll
   (no es fija: el cliente pidió que no cambie al deslizar)
   --------------------------------------------------------------- */
.cab {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 22px 0 18px;
  /* velo blanco degradado: el logo y el menú van sobre la foto del hero y
     sin esto no se leen contra los estampados oscuros */
  background: linear-gradient(rgba(255, 255, 255, 0.94) 55%,
                              rgba(255, 255, 255, 0.6) 80%,
                              rgba(255, 255, 255, 0));
}
.cab-solida { background: var(--blanco); }
/* una sola fila: logo grande a la izquierda, menú pegado a la derecha
   (el cliente lo pidió así el 30/08; antes el logo iba centrado con el
   menú debajo y el WhatsApp a la derecha) */
.cab-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cab-logo img {
  display: block;
  height: clamp(84px, 10.5vw, 152px);
  width: auto;
}

/* menú a la derecha, en la línea del logo, con filete entre ítems */
.menu {
  display: flex;
  align-items: center;
  margin-top: 12px;   /* el menú se apoya un poco por debajo del centro del logo */
  list-style: none;
}
.menu > li { position: relative; padding: 0 42px; }
.menu > li + li { border-left: 1px solid var(--linea); }
.menu > li:last-child { padding-right: 0; }
.menu > li > a {
  display: block;
  padding: 6px 0 10px;
  font-size: 1.02rem;
  color: var(--texto);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.menu > li > a:hover,
.menu > li > a.activo { border-color: var(--azul-logo); }

/* desplegable de Productos */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 0;
  list-style: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.menu > li:hover .submenu,
.menu > li:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block;
  padding: 9px 22px;
  font-size: 0.94rem;
  color: var(--texto);
}
.submenu a:hover { background: var(--gris); color: var(--acento); }

/* botón hamburguesa (móvil) */
.hamb {
  display: none;
  justify-self: start;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.hamb span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--texto);
  margin: 5px 0;
}

/* ---------------------------------------------------------------
   Hero — foto recortada por un arco gigante sobre fondo plano,
   nombre del diseño en tipografía "fantasma" y trama de puntos
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--gris-frio);
  overflow: hidden;
  min-height: 640px;
}
.hero-pista { display: flex; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.hero-lam {
  position: relative;
  flex: 0 0 100%;
  min-height: 640px;
  /* cada lámina puede traer su propio fondo; si no, se ve el del .hero */
  background: var(--fondo, transparent);
}

/* el arco: la foto ocupa la izquierda y cierra en curva */
.hero-arco {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 64%;
  border-top-right-radius: 56% 50%;
  border-bottom-right-radius: 56% 50%;
  overflow: hidden;
  z-index: 2;
}
.hero-arco img { width: 100%; height: 100%; object-fit: cover; }
/* arco pálido detrás, corrido a la derecha */
.hero-vela {
  position: absolute;
  top: -8%; bottom: -8%; left: 0;
  width: 72%;
  /* cada lámina puede vestirse del color de su colcha (--vela / --tinta / --tinta-sub,
     que llegan por style en .hero-lam); si no las define, va el beige de siempre */
  background: var(--vela, var(--beige));
  border-top-right-radius: 58% 50%;
  border-bottom-right-radius: 58% 50%;
  z-index: 1;
}
/* mariposas del logo, sueltas en el fondo del hero. Cada lámina usa el PNG teñido
   del color de su arco (no del fondo): se ven, pero apenas */
.mariposas img {
  position: absolute;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.mariposas .m1 { top: 7%;   right: 5%;  width: 122px; }
.mariposas .m2 { bottom: 9%; right: 24%; width: 78px; transform: rotate(-16deg); }
/* bajada el 22/08 a pedido del cliente: arriba se pegaba al borde del arco */
.mariposas .m3 { top: 46%;  right: 31.5%; width: 52px; transform: rotate(11deg); }
.mariposas .m4 { top: 63%;  right: 8%;  width: 64px; transform: rotate(21deg); }
.mariposas .m5 { top: 4%;   right: 29%; width: 44px; transform: rotate(-23deg); }
.mariposas .m6 { top: 2%;   right: 16%; width: 58px; transform: rotate(-7deg); }
/* llena el vacio entre el borde del arco y la grande de la esquina */
.mariposas .m7 { top: 16%;  right: 24%; width: 68px; transform: rotate(9deg); }

.hero-texto {
  position: absolute;
  top: 50%;
  /* anclado al borde del arco, no al borde derecho: así el texto queda pegado a la
     foto y no flotando en el vacío de la derecha */
  left: 67%;
  right: 3%;
  transform: translateY(-50%);
  z-index: 3;
  text-align: left;
  pointer-events: none;
}
/* el nombre del diseño, enorme y tono sobre tono: se lee, pero apenas,
   que es justo el efecto de la referencia */
.hero-fantasma {
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--tinta, #8797a7);
}
/* la primera palabra va manuscrita y el resto en la sans de siempre, como en la
   referencia que pasó el cliente. Tamaño y line-height propios: una script a la
   misma medida se ve más chica y necesita aire para los rasgos que bajan */
.hero-fantasma .firma {
  font-family: var(--firma);
  font-weight: 400;
  font-size: 0.82em;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--tinta-firma, #526170);
}
.hero-sub {
  margin-top: 10px;
  font-family: var(--firma);
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta-sub, #8a9199);
  letter-spacing: 0;
}
.hero-cta {
  position: absolute;
  left: 6%;
  bottom: 12%;
  z-index: 4;
}

.hero-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--negro);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.hero-flecha:hover { background: #fff; }
.hero-flecha.prev { left: 22px; }
.hero-flecha.next { right: 22px; }

/* barra de progreso en vez de bolitas */
.hero-barra {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 26px 0 0;
}
.hero-barra .riel {
  width: 90px;
  height: 3px;
  background: #dcdcdc;
  position: relative;
  overflow: hidden;
}
.hero-barra .riel i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--negro);
  transition: left 0.5s, width 0.5s;
}
.hero-barra button {
  background: none;
  border: 0;
  font-size: 1.1rem;
  color: var(--negro);
  cursor: pointer;
  line-height: 1;
}

/* ---------------------------------------------------------------
   Secciones
   --------------------------------------------------------------- */
.seccion { padding: 120px 0; }
.seccion.ajustada { padding: 92px 0; }

/* rejilla de productos */
.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
/* los destacados del inicio son 5: 3 arriba y 2 abajo, centradas.
   La rejilla se arma en 6 columnas y cada tarjeta ocupa 2; la cuarta arranca
   en la columna 2, asi el renglon de abajo queda centrado y del mismo ancho */
.rejilla.destacados { grid-template-columns: repeat(6, 1fr); gap: 24px; }
.rejilla.destacados > * { grid-column: span 2; }
.rejilla.destacados > *:nth-child(4) { grid-column: 2 / span 2; }
/* páginas de colección: las fotos van de a dos, más grandes que en el catálogo */
.rejilla.pares { grid-template-columns: repeat(2, 1fr); }
/* los destacados respiran mas ancho que el resto del sitio para que las 4 tarjetas
   no queden chicas: la seccion se sale del contenedor de 1240 */
.zona-destacados .container { max-width: 1480px; }

/* ---------------------------------------------------------------
   Vitrina: carrusel de tarjetas del catalogo, 3 a la vista. El JS
   (site.js) baraja el orden en cada visita y mueve la pista.
   --------------------------------------------------------------- */
.vitrina { position: relative; }
.vit-ventana { overflow: hidden; }
.vit-pista {
  display: flex;
  gap: 24px;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.vit-pista > .tarjeta {
  flex: 0 0 calc((100% - 48px) / 3);
}
.vit-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  background: #fff;
  color: var(--texto);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.vit-nav:hover { background: var(--texto); color: #fff; border-color: var(--texto); }
.vit-prev { left: -23px; }
.vit-next { right: -23px; }


/* ---------------------------------------------------------------
   Novedades: franja beige con dos fotos. La columna izquierda lleva
   el texto arriba y una foto apaisada abajo; la derecha, una sola
   foto alta que marca la altura de toda la franja.
   --------------------------------------------------------------- */
.novedades {
  background: var(--destacado-panel);   /* #ecddda, el rosa de las tarjetas destacadas */
  padding: 72px 0;
}
.nov-caja {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: stretch;
}
.nov-col { display: flex; flex-direction: column; }
.nov-texto {
  text-align: center;
  padding: 26px 6% 44px;
}
.nov-texto p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  font-weight: 300;
  line-height: 1.8;
  color: var(--texto);
}
.nov-foto { overflow: hidden; background: var(--gris); }
.nov-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* la apaisada se estira hasta emparejar la altura de la foto alta */
.nov-ancha { flex: 1; min-height: 260px; }
.nov-alta { aspect-ratio: 3 / 4; }







}
.tarjeta {
  display: block;
  background: var(--beige);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s, box-shadow 0.35s;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.09); }
/* destacados del inicio: esquina viva, filete a color y panel en su tinte claro
   (el resto de las tarjetas del sitio siguen con el panel beige) */
.destacados .tarjeta {
  border-radius: 0;
  border: 1px solid var(--destacado-filete);
  background: var(--destacado-panel);
}
.tarjeta .foto {
  aspect-ratio: 1;
  background: var(--gris);
  overflow: hidden;
}
.tarjeta .foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta .pie { padding: 26px 28px 32px; }
.tarjeta .pie .material {
  display: block;
  font-size: 0.9rem;
  color: var(--suave);
  margin-bottom: 8px;
}
.tarjeta .pie .nombre {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 300;
  color: #5f5a58;
  line-height: 1.2;
}

.centrado { text-align: center; margin-top: 66px; }

/* bloque mitad texto / mitad foto */
.mitades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.mitades .lado-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 110px 8%;
  background: var(--blanco);
}
.mitades .lado-texto h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  margin-bottom: 22px;
}
.mitades .lado-texto p {
  color: var(--suave);
  max-width: 42ch;
  margin-bottom: 34px;
}
.mitades .lado-foto { min-height: 520px; }
.mitades .lado-foto img { width: 100%; height: 100%; object-fit: cover; }
.mitades.invertido .lado-foto { order: -1; }

/* ---------------------------------------------------------------
   Cierre: formulario + mayoristas + contacto en tres columnas
   --------------------------------------------------------------- */
.cierre { padding: 110px 0 120px; border-top: 1px solid var(--linea); }
/* "Contacto" y "Pedidos por mayor" apuntan a su columna, no al arranque de la
   franja (antes caian en el formulario); un respiro arriba al aterrizar */
#contacto, #mayoristas { scroll-margin-top: 80px; }
.cierre-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.cierre h2 {
  font-size: 1.7rem;
  font-weight: 400;
  margin-bottom: 26px;
}
.formulario { display: grid; gap: 16px; }
.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 16px 18px;
  transition: border-color 0.2s;
}
.formulario textarea { min-height: 150px; resize: vertical; }
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus { outline: none; border-color: var(--negro); }
.formulario button { font-family: inherit; cursor: pointer; align-self: start; justify-self: start; }
.form-ok {
  display: none;
  border: 1px solid var(--acento);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.94rem;
}
.form-ok.visible { display: block; }

/* las dos cajas del cierre van en negro con letra blanca (pedido del cliente) */
.caja {
  background: var(--negro);
  border: 1px solid var(--negro);
  border-radius: 10px;
  padding: 28px 30px;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.78);
}
.caja p + p { margin-top: 14px; }
.caja strong { color: #fff; font-weight: 500; }
.caja a { color: #fff; }
.caja a:hover { color: var(--acento); }

/* minimapa del bloque de contacto (traído de la v1) */
.caja-mapa { padding: 0; overflow: hidden; }
.mini-mapa { display: block; aspect-ratio: 3 / 2; background: var(--beige); }
.mini-mapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
.mini-mapa:hover img { transform: scale(1.04); }
.mapa-datos { padding: 24px 26px 26px; }
.mapa-link {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--acento);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.mapa-link:hover { color: var(--acento); }
.pill-wa {
  display: block;
  margin-top: 22px;
  padding: 14px 20px;
  text-align: center;
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
}
.pill-wa:hover { background: #1fb457; border-color: #1fb457; }

/* ---------------------------------------------------------------
   Pie
   --------------------------------------------------------------- */
.pie-sitio {
  background: var(--negro);
  color: #cfcbc7;
  /* sin padding arriba: cualquier relleno se pinta de azul POR ENCIMA de la ola
     y se ve como una franja recta. El aire lo pone el margen del logo */
  padding: 0 0 34px;
  font-size: 0.95rem;
}
/* el corte contra la página no es recto: una ola, que además es el gesto del logo.
   El SVG lleva el blanco de la página de fondo y la curva pintada del azul del pie */
.pie-ola {
  display: block;
  width: 100%;
  height: clamp(52px, 6vw, 104px);
  background: var(--blanco);
  margin-bottom: -1px;
}
.pie-ola path { fill: var(--negro); }
/* el logo va suelto sobre el negro: el original, con la palabra "Multitex" pasada a
   blanco (en azul marino sobre el negro del pie no se leía) */
.pie-marca {
  margin-top: 26px;
  margin-bottom: 44px;
}
.pie-marca img { height: 70px; width: auto; display: block; }
.pie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
  margin-bottom: 56px;
}
.pie-sitio h3 {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.pie-sitio ul { list-style: none; }
.pie-sitio li { margin-bottom: 12px; }
.pie-sitio li a { border-bottom: 1px solid rgba(255, 255, 255, 0.32); }
.pie-sitio li a:hover { border-color: #fff; color: #fff; }
.pie-abajo {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 26px;
  font-size: 0.86rem;
  color: #9095b8;
}

/* ---------------------------------------------------------------
   Flotantes
   --------------------------------------------------------------- */
.wa {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s;
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 30px; height: 30px; fill: #fff; }

.arriba {
  position: fixed;
  right: 34px; bottom: 96px;
  z-index: 59;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 16, 16, 0.55);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, background 0.2s;
}
.arriba.visible { opacity: 1; visibility: visible; }
.arriba:hover { background: var(--negro); }

/* ---------------------------------------------------------------
   Páginas interiores
   --------------------------------------------------------------- */
/* en páginas interiores la cabecera no va encima de una foto: fondo blanco
   y en el flujo (sigue haciendo falta position:relative para el desplegable
   del menú en móvil) */
.cab-solida {
  position: relative;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.tapa {
  background: var(--beige);
  padding: 84px 0 92px;
}
.tapa .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.tapa .eyebrow {
  font-size: 0.86rem;
  color: var(--acento);
  margin-bottom: 14px;
}
.tapa h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  margin-bottom: 20px;
}
.tapa p { color: var(--suave); margin-bottom: 20px; max-width: 48ch; }
.tapa ul { list-style: none; margin-bottom: 34px; }
.tapa li {
  padding: 11px 0 11px 22px;
  position: relative;
  border-top: 1px solid var(--beige-hondo);
  color: var(--suave);
  font-size: 0.97rem;
}
.tapa li::before { content: "—"; position: absolute; left: 0; color: var(--acento); }
.tapa .retrato { border-radius: 14px; overflow: hidden; aspect-ratio: 1; }
/* portada de las páginas de colección: fondo del mismo rosa de los paneles
   de destacados y el título en la manuscrita del carrusel del inicio */
.tapa-coleccion { background: var(--destacado-panel); }
.tapa-coleccion h1.firma {
  font-family: var(--firma);
  font-weight: 400;
  font-size: clamp(2.9rem, 6vw, 4.6rem);
  line-height: 1.15;
  letter-spacing: 0;
  padding-bottom: 6px;
}

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

/* pestañas del catálogo */
.pestanas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}
.pestanas a {
  padding: 12px 30px;
  border-radius: 999px;
  border: 1px solid #dcdcdc;
  font-size: 0.94rem;
  color: var(--suave);
  transition: all 0.2s;
}
.pestanas a:hover, .pestanas a.activo {
  background: var(--negro);
  border-color: var(--negro);
  color: #fff;
}
.grupo + .grupo { margin-top: 96px; }
.grupo h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 6px;
  scroll-margin-top: 30px;
}
.grupo .bajada { margin-bottom: 44px; }

/* valores (Nosotros) */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.valor {
  background: var(--gris-frio);
  border-radius: 14px;
  padding: 38px 32px;
}
.valor h3 { font-size: 1.3rem; margin-bottom: 10px; }
.valor p { color: var(--suave); font-size: 0.96rem; }

/* ---------------------------------------------------------------
   Visor de imagen
   --------------------------------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 16, 16, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}
.visor.abierto { display: flex; }
.visor-caja { max-width: 760px; width: 100%; margin: auto; text-align: center; color: #fff; }
.visor-caja img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--beige);
}

/* Carrusel de caras DENTRO de un mismo producto (la Dulcinea es doble faz):
   las flechitas chicas y los puntos pasan de una cara a otra, mientras las
   flechas grandes de los costados siguen saltando de producto a producto. */
.visor-foto { position: relative; }
/* el visor pasa solo de cara cada 3 s; el fundido evita el corte seco */
@keyframes cara-entra { from { opacity: 0.25; } to { opacity: 1; } }
.visor-foto img.cambia { animation: cara-entra 0.35s ease; }
.visor-foto.varias img { cursor: pointer; }
.cara-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 16, 16, 0.38);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.visor-foto.varias:hover .cara-nav { opacity: 1; }
.cara-nav:hover { background: rgba(16, 16, 16, 0.62); }
.cara-nav.prev { left: 12px; }
.cara-nav.next { right: 12px; }
.caras-puntos:empty { display: none; }  /* producto de una sola foto */
.caras-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.caras-puntos button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.caras-puntos button.activo { background: #fff; transform: scale(1.25); }
.visor-caja .vt { font-size: 1.8rem; font-weight: 300; margin-top: 22px; }
.visor-caja .vs { font-size: 0.88rem; color: var(--acento); margin-top: 4px; }
.visor-caja .pill { margin-top: 22px; }
.visor-cerrar, .visor-nav {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.2s;
}
.visor-cerrar:hover, .visor-nav:hover { background: rgba(255, 255, 255, 0.32); }
.visor-cerrar { top: 24px; right: 26px; }
.visor-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.visor-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
@media (hover: none) {
  .visor-foto.varias .cara-nav { opacity: 1; }
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1000px) {
  .container { padding: 0 22px; }
  .seccion { padding: 76px 0; }
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rejilla.destacados { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rejilla.destacados > *,
  .rejilla.destacados > *:nth-child(4) { grid-column: auto; }
  .vit-pista { gap: 18px; }
  .vit-pista > .tarjeta { flex: 0 0 calc((100% - 18px) / 2); }
  .vit-prev { left: -8px; }
  .vit-next { right: -8px; }
  .novedades { padding: 56px 0; }
  .nov-caja { grid-template-columns: 1fr; gap: 22px; padding: 0 22px; }
  .nov-texto { padding: 8px 0 30px; }
  .nov-ancha { aspect-ratio: 16 / 9; min-height: 0; }
  .nov-alta { aspect-ratio: 4 / 5; }
  .tira-item { width: 240px; margin-right: 18px; }
  .tira { margin: 40px 0 34px; }
  .cierre-grid { grid-template-columns: 1fr; gap: 40px; }
  .pie-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .valores { grid-template-columns: 1fr; }
  .tapa .container { grid-template-columns: 1fr; gap: 34px; }
  .tapa { padding: 56px 0 60px; }

  .mitades { grid-template-columns: 1fr; }
  .mitades .lado-texto { padding: 64px 24px; }
  .mitades .lado-foto { min-height: 340px; }
  .mitades.invertido .lado-foto { order: 0; }

  /* cabecera móvil: hamburguesa + logo centrado, menú desplegable */
  .hamb { display: block; }
  .cab { padding: 16px 0; }
  .cab-fila { justify-content: flex-start; gap: 0; }
  .cab-logo { margin: 0 auto; }
  /* contrapeso del ancho de la hamburguesa para que el logo quede centrado */
  .cab-fila::after { content: ""; flex: 0 0 40px; }
  .cab-logo img { height: 56px; }
  .menu > li { padding: 0; }
  .menu > li + li { border-left: 0; }
  .menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    background: #fff;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 8px 22px 18px;
    display: none;
  }
  .menu.abierto { display: flex; }
  .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  .submenu a { padding: 7px 0; color: var(--suave); }

  /* hero: el arco pasa a ocupar todo y el texto se apoya encima */
  .hero, .hero-lam { min-height: 0; }
  .hero-lam { padding-bottom: 26px; }
  .hero-arco {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 0 0 46% 46% / 0 0 16% 16%;
  }
  .hero-vela { display: none; }
  .hero-texto {
    position: static;
    width: 100%;
    transform: none;
    padding: 26px 22px 0;
    text-align: center;
  }
  .hero-fantasma { color: #6d747c; mix-blend-mode: normal; text-shadow: none; }
  .hero-cta { position: static; text-align: center; margin-top: 24px; }
  .hero-cta .pill { display: inline-block; }
  .hero-flecha { top: 190px; }
}

@media (max-width: 560px) {
  .rejilla { grid-template-columns: 1fr; }
  .vit-pista > .tarjeta { flex: 0 0 100%; }
  .rejilla.destacados { grid-template-columns: 1fr; }
  .rejilla.pares { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: 1fr; }
  .tarjeta .pie { padding: 20px 22px 26px; }
}