/* La hoja del catálogo: el inicio, cada categoría y la página de cada diseño (pantallas/catalogo/). Usa
   las variables de /tienda.css y no define colores. El celular es lo primero; desde 960 px el
   computador (y en el medio, de 720 px, tres columnas). La interfaz va en azul noche; los diseños, a
   todo color, pintados como piezas impresas: con su sombra, un borde fino y algo de giro sobre su
   escenario (nunca un filtro sobre la plantilla). Las secciones alternan el fondo para que no se vean
   todas iguales. */

.tienda { background: var(--fondo); }
.tienda-contenido { flex: 1; display: block; width: 100%; }
.tienda-aviso { padding-bottom: 0; }

.banda { width: 100%; }
.banda--superficie { background: var(--superficie); }
.banda--fondo { background: var(--fondo); }
.banda--noche { background: var(--noche); color: var(--sobre-noche); }
.banda-dentro { width: 100%; max-width: var(--ancho-tienda); margin: 0 auto; padding: 32px 16px; }
.banda-dentro--angosta { max-width: 800px; }
.banda--superficie + .banda--superficie, .banda--fondo + .banda--fondo { border-top: 1px solid var(--borde-suave); }

.antetitulo { font-size: 14px; font-weight: 700; color: var(--enlace); }
.antetitulo--claro { color: var(--sobre-noche-suave); }

.seccion-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.seccion-cabeza-texto { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.seccion-tienda-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; color: var(--noche); }
.seccion-tienda-bajada { font-size: 15px; line-height: 1.4; color: var(--texto-3); }
.ver-todos { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: var(--toque); font-weight: 700; font-size: 15px; white-space: nowrap; }
.ver-todos span { font-size: 20px; line-height: 1; }

/* --- La cabecera de la tienda --- */

.tienda-cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.tienda-cabecera-dentro { display: flex; align-items: center; gap: 8px; width: 100%; max-width: var(--ancho-tienda); margin: 0 auto; padding: 6px 8px 6px 16px; }
.tienda-cabecera .logo img { height: 30px; }
.tienda-cabecera-lado { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tienda-cabecera-enlace { display: flex; align-items: center; min-height: var(--toque); padding: 0 8px; font-weight: 600; font-size: 15px; }
.tienda-bolsa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--toque);
  height: var(--toque);
  color: var(--noche);
  text-decoration: none;
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 15px;
}
.tienda-bolsa:hover { color: var(--noche); }
.tienda-bolsa-texto { display: none; }
.tienda-bolsa-cuenta {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid var(--superficie);
  border-radius: 11px;
  background: var(--noche);
  color: var(--sobre-noche);
  font-family: var(--letra-texto);
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.tienda-nav { display: flex; }
.tienda-nav a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 10px;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  font-size: 15px;
  color: var(--texto-2);
  text-decoration: none;
  white-space: nowrap;
}
.tienda-nav a:hover { color: var(--noche); }
.tienda-nav a[aria-current="page"] { border-bottom-color: var(--noche); color: var(--noche); font-weight: 700; }
.tienda-nav--ancha { display: none; }
.tienda-nav--celular { gap: 2px; overflow-x: auto; padding: 0 6px; border-top: 1px solid var(--borde-suave); scrollbar-width: none; }
.tienda-nav--celular::-webkit-scrollbar { display: none; }

/* «Sigue con tu pedido»: la franja de arriba, en azul noche. */
.sigue { display: block; background: var(--noche); color: var(--sobre-noche); text-decoration: none; }
.sigue:hover { color: var(--sobre-noche); }
.sigue-dentro { display: flex; align-items: center; gap: 10px; max-width: var(--ancho-tienda); margin: 0 auto; padding: 8px 16px; min-height: var(--toque); font-size: 15px; }
.sigue-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sigue-texto span { color: var(--sobre-noche-suave); }
.sigue-ver { display: flex; align-items: center; gap: 2px; font-weight: 700; }

/* --- Las piezas pintadas --- */

.pieza {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: var(--superficie);
  box-shadow: var(--sombra-pieza);
  outline: 1px solid var(--borde-pieza);
  outline-offset: -1px;
  -webkit-user-drag: none;
  user-select: none;
}
.pieza--circulo { border-radius: 50%; }

/* La pila: el frente encima del reverso, cada uno con su giro. */
.pila { position: relative; display: block; }
.pila--horizontal { width: 70%; margin: -12% 0 0 -10%; }
.pila--vertical { width: 46%; margin: 0 0 0 -14%; }
.pila--cuadrada { width: 58%; }
.pila--sola { margin: 0; }
.pila-frente { position: relative; z-index: 1; transform: rotate(-3deg); transition: transform 160ms ease; }
.pila-atras { position: absolute; left: 0; top: 0; transform: translate(16%, 44%) rotate(6deg); }
.pila--vertical .pila-atras { transform: translate(34%, 6%) rotate(7deg); }
.pila--sola .pila-frente { transform: rotate(-2deg); }
/* Un plegable: la hoja abierta por dentro atrás y el plegable cerrado adelante, de pie. */
.pila--plegable { width: 84%; margin: 0 0 0 6%; }
.pila--plegable .pila-atras { position: relative; display: block; width: 80%; margin-left: 20%; transform: rotate(3deg); }
.pila--plegable .pila-frente { position: absolute; left: 0; top: 50%; width: 28%; transform: translateY(-50%) rotate(-3deg); }
.ficha-diseno:hover .pila--plegable .pila-frente { transform: translateY(calc(-50% - 4px)) rotate(-3deg); }
/* La portada sola: una ventana del ancho de la portada sobre la vista del exterior. */
.pieza-cerrada { display: block; overflow: hidden; box-shadow: var(--sombra-muestra); }
.pieza-cerrada img { display: block; max-width: none; height: auto; }

/* --- Una ficha de diseño --- */

.cuadricula { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.cuadricula > li { min-width: 0; }
/* En el celular, «Lo más pedido» y «Más diseños» van en una fila que se corre con el dedo. */
.cuadricula--fila {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 8px;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.cuadricula--fila::-webkit-scrollbar { display: none; }
.cuadricula--fila > li { scroll-snap-align: start; }

.ficha-diseno { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texto); }
.ficha-diseno:hover { color: var(--texto); }
.ficha-diseno-escenario {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--escenario);
  overflow: hidden;
}
/* «100 % personalizado»: la misma ficha, con el escenario en el azul noche y el ícono y el lema en blanco. */
.ficha-personalizada-escenario { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--noche); color: var(--sobre-noche); text-align: center; }
.ficha-personalizada-lema { max-width: 12em; font-family: var(--letra-titulo); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--sobre-noche); }
.ficha-personalizada .ficha-diseno-precio strong { color: var(--enlace); }

/* Sobre una banda con fondo, el escenario va en blanco con su borde; el de «100 % personalizado» se queda azul noche
   (sin el :not, esta regla le gana a .ficha-personalizada-escenario y la ficha queda en blanco). */
.banda--fondo .ficha-diseno-escenario:not(.ficha-personalizada-escenario) { background: var(--superficie); border: 1px solid var(--borde-suave); }
.ficha-diseno:hover .pila-frente { transform: rotate(-3deg) translateY(-4px); }
.ficha-diseno:focus-visible { outline: none; }
.ficha-diseno:focus-visible .ficha-diseno-escenario { outline: 2px solid var(--noche); outline-offset: 2px; }
.ficha-diseno-texto { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.ficha-diseno-nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--noche); }
.ficha-diseno-uso { font-size: 14px; line-height: 1.3; color: var(--texto-3); }
.ficha-diseno-precio { margin-top: 3px; font-size: 15px; color: var(--texto-2); }
.ficha-diseno-precio strong { font-family: var(--letra-titulo); font-weight: 700; font-size: 16px; color: var(--texto); }
.ficha-diseno--espera .ficha-diseno-escenario { background: var(--gris); }
.sello-mas {
  position: absolute;
  z-index: 2;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--noche);
  color: var(--sobre-noche);
  font-size: 12px;
  font-weight: 700;
}

/* --- La portada --- */

.portada-tienda { background: var(--superficie); }
.portada-tienda-dentro { width: 100%; max-width: var(--ancho-tienda); margin: 0 auto; padding: 22px 16px 26px; display: flex; flex-direction: column; gap: 22px; }
.portada-tienda-texto { display: flex; flex-direction: column; gap: 12px; }
.portada-tienda-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 31px; line-height: 1.08; letter-spacing: -0.02em; color: var(--noche); text-wrap: balance; }
.portada-tienda-bajada { font-size: 17px; line-height: 1.45; color: var(--texto-2); }
.portada-tienda-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.portada-tienda-botones .boton { flex: 1 1 160px; }
.portada-tienda-corte { font-size: 14px; }

/* La mesa: las piezas en su puesto (hasta dos verticales y tres horizontales: inicio.js, Mesa). */
.mesa { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--mesa); overflow: hidden; }
.mesa-pieza { position: absolute; height: auto; box-shadow: var(--sombra-pieza-grande); }
.mesa-pieza--v1 { z-index: 3; width: 33%; left: 9%; top: 8%; transform: rotate(-7deg); }
.mesa-pieza--v2 { z-index: 2; width: 29%; left: 39%; top: 5%; transform: rotate(5deg); }
.mesa-pieza--h1 { z-index: 5; width: 45%; left: 47%; top: 53%; transform: rotate(-5deg); }
.mesa-pieza--h2 { z-index: 1; width: 37%; left: 57%; top: 15%; transform: rotate(8deg); }
.mesa-pieza--h3 { z-index: 4; width: 41%; left: 7%; top: 66%; transform: rotate(4deg); }

/* La foto de ambiente (catalogo.json: ambientes): llena su marco (la mesa de la portada, el escenario de
   la ficha de una categoría, el de la temporada), que guarda la proporción de siempre. En el celular,
   la ficha es cuadrada: se ve el centro de la foto. */
.ambiente { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }

/* --- Las razones, en una franja --- */

.franja { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.franja .banda-dentro { padding-top: 16px; padding-bottom: 16px; }
.razones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.razon { display: flex; align-items: center; gap: 10px; min-width: 0; }
.razon-icono {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--noche);
  display: flex;
  align-items: center;
  justify-content: center;
}
.razon-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; color: var(--texto-3); }
.razon-texto strong { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--texto); }
.razon-texto span { display: none; }

/* --- Las categorías --- */

.categorias { display: grid; gap: 12px; margin-top: 16px; }
/* Debajo de las fichas: «Otro» y «Ya tengo mi diseño», una sobre otra en el celular y lado a lado desde 720 px. */
.categorias-otras { display: grid; gap: 12px; margin-top: 16px; }
.ficha-categoria {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  text-decoration: none;
  color: var(--texto);
}
.ficha-categoria:hover { color: var(--texto); border-color: var(--borde-punteado); }
.ficha-categoria-escenario { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--escenario); overflow: hidden; }
.abanico { position: absolute; left: 50%; top: 50%; height: auto; }
.abanico.pieza--horizontal { width: 66%; }
.abanico.pieza--vertical { width: 42%; }
.abanico.pieza--cuadrada { width: 50%; }
.abanico--1 { z-index: 1; transform: translate(-50%, -50%) translate(-26%, -14%) rotate(-12deg); }
.abanico--2 { z-index: 3; transform: translate(-50%, -50%) translate(0, 6%) rotate(-1deg); }
.abanico--3 { z-index: 2; transform: translate(-50%, -50%) translate(28%, 22%) rotate(11deg); }
/* Una vertical larga (la tarjeta de sellos de 5 × 9) atrás a la derecha no baja tanto: no se corta. */
.abanico--3.pieza--vertical { transform: translate(-50%, -50%) translate(30%, 8%) rotate(10deg); }
.ficha-categoria:hover .abanico--2 { transform: translate(-50%, -50%) translate(0, 2%) rotate(-1deg); }
.abanico { transition: transform 160ms ease; }
.ficha-categoria-texto { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ficha-categoria-nombre { font-family: var(--letra-titulo); font-weight: 800; font-size: 19px; line-height: 1.15; color: var(--noche); }
/* El resumen va entero (es corto: app/catalogo.js); el tope de líneas es solo por si acaso. */
.ficha-categoria-bajada { font-size: 14px; line-height: 1.35; color: var(--texto-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-categoria-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 2px; font-size: 14px; color: var(--texto-2); }
.ficha-categoria-pie strong { font-family: var(--letra-titulo); font-weight: 700; font-size: 15px; color: var(--texto); }
.ficha-categoria-ver { display: flex; align-items: center; gap: 2px; font-weight: 700; color: var(--enlace); }

.ficha-categoria-plazo { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--texto-3); }
.ficha-categoria-plazo .icono { flex: 0 0 auto; color: var(--noche); }

/* --- «¿Qué negocio tienes?»: los negocios con su ícono (dos columnas en el celular) --- */

.negocios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.negocios > li { min-width: 0; }
.negocio-ficha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  color: var(--noche);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}
.negocio-ficha:hover { color: var(--noche); border-color: var(--borde-punteado); }
.negocio-ficha-icono { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--escenario); display: flex; align-items: center; justify-content: center; }
.negocio-ficha-nombre { min-width: 0; }
.negocio-ficha[aria-current] { border-color: var(--noche); background: var(--noche); color: var(--sobre-noche); }
.negocio-ficha[aria-current] .negocio-ficha-icono { background: var(--sobre-noche-tenue); }
.banda--fondo .negocio-ficha-icono { background: var(--escenario); }
/* En la página de un negocio, los demás en una fila que se corre de lado. */
.negocios--fila { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.negocios--fila::-webkit-scrollbar { display: none; }
.negocios--fila > li { flex: 0 0 auto; }
.negocios--fila .negocio-ficha { min-height: var(--toque); padding: 4px 14px 4px 5px; border-radius: 22px; font-size: 14px; box-shadow: none; white-space: nowrap; }
.negocios--fila .negocio-ficha-icono { width: 34px; height: 34px; }
.negocios-cambiar { margin: 18px 0 2px; }
.negocios-todos { margin-top: 22px; }
.negocio-grupo { margin-top: 30px; }
.negocio-grupo .seccion-cabeza { margin-bottom: 14px; }
.negocio-grupo-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--noche); }
.negocio-grupo-n { font-family: var(--letra-texto); font-weight: 600; font-size: 15px; color: var(--texto-3); }
.negocio-pie { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }

/* --- «¿Cómo se llama tu negocio?» --- */

.campo-negocio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}
.campo-negocio-etiqueta { font-family: var(--letra-titulo); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--noche); }
/* El nombre y, al lado, «Sube tu logo» (en el celular angosto, el logo baja a su propia línea). */
.campo-negocio-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.campo-negocio-nombre { position: relative; flex: 1 1 190px; min-width: 0; }
.campo-negocio-entrada { padding-right: 48px; font-size: 18px; }
.campo-negocio-borrar {
  position: absolute;
  right: 2px;
  top: 2px;
  width: var(--toque);
  height: var(--toque);
  border: none;
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.campo-negocio-borrar:hover { color: var(--noche); }
.campo-negocio-ayuda { font-size: 13px; line-height: 1.35; color: var(--texto-3); }
/* «Sube tu logo»: el botón, o el logo en chico (tocarlo lo cambia) con «Quitar». */
.campo-logo-subir { height: var(--alto-boton); }
.campo-logo { display: flex; align-items: center; gap: 10px; }
.campo-logo-mini {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-boton);
  height: var(--alto-boton);
  padding: 4px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-boton);
  background: var(--escenario);
}
.campo-logo-mini img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.campo-logo-espera { display: block; width: 100%; height: 100%; }
.campo-logo-avisos { flex: 1 0 100%; display: flex; flex-direction: column; gap: 8px; }
.tu-negocio-cabeza { flex-direction: column; align-items: stretch; gap: 14px; }
.producto-negocio { margin-top: 12px; }

/* --- La pieza que se vuelve a pintar con el nombre y el logo del negocio (app/tu-negocio.js) --- */

.pieza-viva { overflow: hidden; }
.pieza-viva-img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.pieza-viva-lienzo { display: block; width: 100%; height: 100%; }
.pieza-viva-lienzo > svg { display: block; width: 100%; height: 100%; }

/* --- La portada de temporada (azul noche) --- */

.temporada-dentro { display: flex; flex-direction: column; gap: 24px; }
.temporada-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.temporada-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--sobre-noche); text-wrap: balance; }
.temporada-bajada { font-size: 16px; line-height: 1.45; color: var(--sobre-noche-suave); }
.temporada-precio { font-size: 16px; color: var(--sobre-noche); }
.temporada-precio strong { font-family: var(--letra-titulo); font-weight: 800; font-size: 22px; }
.temporada-precio span { color: var(--sobre-noche-suave); font-size: 14px; }
.boton--claro { background: var(--superficie); color: var(--noche); margin-top: 4px; }
.boton--claro:hover { color: var(--noche); }
.temporada-piezas { position: relative; aspect-ratio: 5 / 3; border-radius: 16px; background: var(--sobre-noche-tenue); overflow: hidden; }
.temporada-pieza { position: absolute; width: 30%; height: auto; box-shadow: var(--sombra-pieza-noche); outline-color: transparent; }
.temporada-pieza--1 { z-index: 1; left: 7%; top: 17%; transform: rotate(-9deg); }
.temporada-pieza--2 { z-index: 3; left: 35%; top: 10%; transform: rotate(-1deg); }
.temporada-pieza--3 { z-index: 2; left: 63%; top: 18%; transform: rotate(8deg); }

/* --- «Ya tengo mi diseño» --- */

.ya-tengo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  border: 2px dashed var(--borde-punteado);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--noche);
  text-decoration: none;
}
.ya-tengo:hover { color: var(--noche); border-color: var(--enlace); }
.ya-tengo > .icono { flex: 0 0 auto; }
.ya-tengo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ya-tengo-titulo { font-family: var(--letra-titulo); font-weight: 700; font-size: 17px; }
.ya-tengo-detalle { font-size: 15px; line-height: 1.35; color: var(--texto-2); }

/* «¿Te gusta pero lo quieres a tu medida?» (página del diseño): una caja punteada, como «Ya tengo mi diseño». */
.a-medida-caja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  border: 2px dashed var(--borde-punteado);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  color: var(--noche);
}
.a-medida-caja .titulo-3 { margin: 0; }
.a-medida-texto { margin: 0; font-size: 15px; line-height: 1.4; color: var(--texto-2); }
.a-medida-precio { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--texto); }
.a-medida-boton { margin-top: 4px; }

/* --- Así de fácil, quiénes somos, los trabajos y las preguntas --- */

.pasos-faciles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 18px; }
/* align-content: start: un paso más corto que su vecino no estira sus filas (el texto no baja). */
.pasos-faciles > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; }
.paso-facil-numero {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--noche);
  color: var(--sobre-noche);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: 18px;
}
.paso-facil-nombre { font-family: var(--letra-titulo); font-weight: 700; font-size: 18px; color: var(--noche); }
.paso-facil-texto { font-size: 15px; line-height: 1.45; color: var(--texto-2); }

.facil-y-seguro { display: grid; gap: 28px; }

.confianza-tienda { display: grid; gap: 22px; }
.confianza-foto { aspect-ratio: 3 / 2; border-radius: 16px; background: var(--escenario); overflow: hidden; }
.confianza-texto { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.confianza-parrafo { font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.clientes-tienda { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); }
.clientes-tienda-titulo { font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--texto); }
.clientes-tienda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.clientes-tienda-lista li { padding: 3px 10px; border: 1px solid var(--borde-suave); border-radius: var(--radio-chip); background: var(--superficie); font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.taller-datos { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.taller-datos span { display: flex; align-items: center; gap: 6px; color: var(--texto); }
.taller-datos .icono { flex: 0 0 auto; color: var(--noche); }
.confianza-enlaces { display: flex; flex-wrap: wrap; column-gap: 20px; }

.trabajos {
  list-style: none;
  margin: 0 -16px;
  padding: 0 16px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.trabajos::-webkit-scrollbar { display: none; }
.trabajo { min-width: 0; scroll-snap-align: start; }
.trabajo-figura { margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Las fotos de los trabajos van en 16:9 (catalogo.json: trabajos; test/front/ambientes.test.js lo revisa):
   el marco es de esa misma forma y no les corta lo que muestran. */
.trabajo-marco { display: block; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--escenario); overflow: hidden; }
.trabajo-texto { font-size: 14px; line-height: 1.4; color: var(--texto-2); }
.trabajos-whatsapp { width: fit-content; margin-top: 18px; }

.preguntas-tienda { display: flex; flex-direction: column; gap: 10px; }
.preguntas-tienda .seccion-tienda-titulo { margin-bottom: 4px; }
.pregunta-texto { font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.preguntas-negocio, .categoria-negocios { margin-top: 18px; font-size: 15px; line-height: 1.45; color: var(--texto-2); }

/* --- El pie --- */

.tienda-pie { background: var(--noche); color: var(--sobre-noche-suave); }
.tienda-pie a { color: var(--sobre-noche); }
.tienda-pie a:hover { color: var(--sobre-noche); }
.tienda-pie-dentro { width: 100%; max-width: var(--ancho-tienda); margin: 0 auto; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 20px; font-size: 15px; line-height: 1.5; }
.tienda-pie-marca { display: flex; flex-direction: column; gap: 2px; }
.tienda-pie-marca strong { font-size: 16px; color: var(--sobre-noche); }
.tienda-pie-enlaces { display: flex; flex-wrap: wrap; gap: 0 18px; }
.tienda-pie-enlaces a { display: flex; align-items: center; min-height: 40px; }
/* En el celular, la página del diseño tiene la barra de «Personalizar» encima del final. */
.tienda--producto .tienda-pie-dentro { padding-bottom: 28px; }

/* --- El botón de WhatsApp --- */

.whatsapp-flotante {
  position: fixed;
  z-index: 6;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 52px;
  height: 52px;
  padding: 0 13px;
  border: 2px solid var(--superficie);
  border-radius: 26px;
  background: var(--noche);
  color: var(--sobre-noche);
  box-shadow: var(--sombra-pop);
  font-weight: 700;
  text-decoration: none;
}
.whatsapp-flotante:hover { color: var(--sobre-noche); }
.whatsapp-flotante-texto { font-size: 15px; }
.whatsapp-flotante-mas { display: none; }
.tienda--producto .whatsapp-flotante { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* --- La página de una categoría --- */

.banda--categoria .banda-dentro { padding-top: 22px; }
.categoria-cabeza { display: flex; flex-direction: column; gap: 14px; }
.categoria-cabeza-texto { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.categoria-plazo { margin-top: 2px; }
.categoria-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--noche); }
.categoria-bajada { font-size: 16px; line-height: 1.45; color: var(--texto-2); }
.categoria-desde { color: var(--texto); }
.categoria-desde strong { font-weight: 700; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 6px; }
.filtros-lista {
  flex: 1 1 100%;
  list-style: none;
  margin: 0 -16px;
  padding: 2px 16px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros-lista::-webkit-scrollbar { display: none; }
.filtros-lista > li { flex: 0 0 auto; }
.filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--toque);
  padding: 0 16px;
  border: 1px solid var(--borde-campo);
  border-radius: 22px;
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.filtro:hover { color: var(--noche); border-color: var(--noche); }
.filtro[aria-current] { border-color: var(--noche); background: var(--noche); color: var(--sobre-noche); }
.filtro-n { font-weight: 500; font-size: 14px; color: var(--texto-3); }
.filtro[aria-current] .filtro-n { color: var(--sobre-noche-suave); }
.filtro--vacio { color: var(--texto-3); }
.filtro-foto { display: flex; align-items: center; gap: 10px; min-height: var(--toque); font-weight: 600; font-size: 15px; color: var(--texto); text-decoration: none; }
.filtro-foto:hover { color: var(--noche); }
.interruptor { position: relative; flex: 0 0 auto; width: 42px; height: 26px; border-radius: 13px; background: var(--gris); transition: background 120ms ease; }
.interruptor-bola { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--superficie); box-shadow: var(--sombra-muestra); transition: transform 120ms ease; }
.filtro-foto[aria-checked="true"] .interruptor { background: var(--noche); }
.filtro-foto[aria-checked="true"] .interruptor-bola { transform: translateX(16px); }
.categoria-resultado { margin: 4px 0 16px; font-size: 14px; color: var(--texto-3); }
.categoria-matrimonio { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; color: var(--texto-2); }
.banda--categoria .ya-tengo { margin-top: 20px; }

.vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 18px;
  border: 1px dashed var(--borde-punteado);
  border-radius: 16px;
  background: var(--superficie);
  text-align: center;
}
.vacia-icono { width: 64px; height: 64px; border-radius: 50%; background: var(--escenario); color: var(--noche); display: flex; align-items: center; justify-content: center; }
.vacia-titulo { font-family: var(--letra-titulo); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--noche); text-wrap: balance; }
.vacia-texto { max-width: 30rem; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.vacia-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* --- La página de un diseño --- */

.producto { padding-top: 8px; }
.producto-atras { display: inline-flex; align-items: center; gap: 4px; min-height: var(--toque); margin-bottom: 4px; font-weight: 600; font-size: 15px; text-decoration: none; }
.producto-columnas { display: flex; flex-direction: column; gap: 20px; }
.producto-izquierda, .producto-derecha { min-width: 0; }
.producto-derecha { display: flex; flex-direction: column; gap: 10px; }

.galeria { display: flex; flex-direction: column; gap: 10px; }
.galeria-escenario { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 70vh; border-radius: 16px; background: var(--escenario); overflow: hidden; }
.galeria-pila { position: relative; display: block; }
/* Por cómo es la pieza (producto.js: formaDe), no por el producto: acostada (la tarjeta), de pie (la
   invitación, el volante, la tarjeta vertical) o cuadrada (el sticker). */
.galeria-escenario--horizontal .galeria-pila { width: 72%; margin: -14% 0 0 -8%; }
.galeria-escenario--vertical .galeria-pila { width: 50%; margin: 0 0 0 -12%; }
/* Muy alta (la tarjeta vertical, 5 × 9): más angosta, para que el reverso de atrás no se salga. */
.galeria-escenario--alta .galeria-pila { width: 42%; }
.galeria-escenario--cuadrada .galeria-pila { width: 62%; }
.galeria-pila:not(.galeria-pila--doble) { margin: 0; }
.galeria-frente { position: relative; z-index: 1; box-shadow: var(--sombra-pieza-grande); transform: rotate(-2deg); }
.galeria-atras { position: absolute; left: 0; top: 0; transform: translate(14%, 46%) rotate(5deg); }
.galeria-escenario--vertical .galeria-atras { transform: translate(30%, 5%) rotate(6deg); }
.galeria-foto { width: 100%; height: 100%; object-fit: cover; }
.pestanas.galeria-miniaturas { display: flex; gap: 8px; padding: 0; border: none; background: transparent; }
.galeria-miniaturas .pestana {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  height: auto;
  padding: 6px;
  border: 1.5px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto-2);
  font-size: 13px;
}
.galeria-miniaturas .pestana[aria-selected="true"] { border-color: var(--noche); box-shadow: inset 0 0 0 1px var(--noche); background: var(--superficie); color: var(--noche); }
.galeria-mini { width: 60px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--escenario); overflow: hidden; }
.galeria-mini img { width: 100%; height: 100%; object-fit: cover; }
.galeria-mini .galeria-mini-pieza { width: 78%; height: auto; box-shadow: var(--sombra-muestra); }
.galeria-mini .galeria-mini-pieza.pieza--vertical { width: 46%; }
/* El plegable cerrado: la portada de pie, sola en el escenario y en su miniatura. */
.galeria-cerrado { width: 34%; transform: rotate(-2deg); box-shadow: var(--sombra-pieza-grande); }
.galeria-mini .galeria-mini-cerrado { width: 30%; }

.producto-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.producto-titulo { font-family: var(--letra-titulo); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--noche); }
.producto-cabeza .chip { align-self: center; }
.producto-uso { font-size: 15px; color: var(--texto-3); }
.producto-precio { margin-top: 2px; font-size: 17px; color: var(--texto-2); }
.producto-precio strong { font-family: var(--letra-titulo); font-weight: 800; font-size: 26px; color: var(--noche); }
.producto-cambias { font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.producto-papeles .ficha--tarjeta { gap: 4px; }
.producto-papeles .muestra-papel { margin-bottom: 4px; }
.producto .ficha-sobre { justify-content: center; gap: 2px; min-height: 64px; padding: 10px 12px; }
.producto .ficha-sobre .ficha-detalle { display: block; }
.producto-comprar { display: none; }
.producto-dudas { display: none; align-items: center; gap: 8px; align-self: flex-start; min-height: var(--toque); font-weight: 600; font-size: 15px; }
.producto-detalles { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.producto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.producto-lista li { display: flex; gap: 8px; }
.producto-lista .icono { flex: 0 0 auto; margin-top: 2px; color: var(--noche); }
.producto-mas { margin-top: 40px; }
.producto-mas .seccion-tienda-titulo { margin-bottom: 16px; }
.producto-no-esta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }


/* --- Tablet: tres columnas --- */

@media (min-width: 720px) {
  .cuadricula { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
  .cuadricula--fila { grid-template-columns: none; grid-auto-columns: 30%; }
  .cuadricula--fila-celular { grid-auto-columns: 30%; }
  .razones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .razon-texto span { display: block; }
  .razon { align-items: flex-start; }
  .categorias { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .categorias-otras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .negocios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trabajos { grid-auto-columns: 44%; }
}

/* --- Computador --- */

@media (min-width: 960px) {
  .banda-dentro { padding: 56px 32px; }
  .seccion-tienda-titulo { font-size: 30px; }
  .seccion-cabeza { margin-bottom: 24px; }

  .tienda-cabecera { position: sticky; top: 0; z-index: 5; }
  .tienda-cabecera-dentro { gap: 28px; padding: 10px 32px; }
  .tienda-cabecera .logo img { height: 38px; }
  .tienda-nav--ancha { display: flex; gap: 4px; }
  .tienda-nav--ancha a { font-size: 16px; }
  .tienda-nav--celular { display: none; }
  .tienda-cabecera-lado { gap: 14px; }
  .tienda-cabecera-enlace { font-size: 16px; }
  .tienda-bolsa { gap: 8px; padding: 0 14px; border: 1.5px solid var(--noche); border-radius: var(--radio-boton); }
  .tienda-bolsa-texto { display: inline; }
  .tienda-bolsa-cuenta { position: static; border: none; }

  .portada-tienda-dentro { flex-direction: row; align-items: center; gap: 56px; padding: 56px 32px 64px; }
  .portada-tienda-texto { flex: 1 1 0; gap: 16px; }
  .mesa--portada { flex: 1.15 1 0; }
  .portada-tienda-titulo { font-size: 50px; }
  .portada-tienda-bajada { max-width: 32rem; font-size: 20px; }
  .portada-tienda-botones .boton { flex: 0 0 auto; padding: 0 26px; }
  .portada-tienda-corte { max-width: 32rem; font-size: 15px; }

  .franja .banda-dentro { padding-top: 22px; padding-bottom: 22px; }

  .categorias { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 24px; margin-top: 24px; }
  .ficha-categoria { grid-template-columns: none; grid-template-rows: auto 1fr; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
  .ficha-categoria-escenario { aspect-ratio: 4 / 3; border-radius: 0; }
  .ficha-categoria-texto { padding: 18px 20px 20px; gap: 6px; }
  .ficha-categoria-nombre { font-size: 22px; }
  .ficha-categoria-bajada { font-size: 15px; }
  /* El precio y el plazo, abajo: en la fila, todas las fichas los tienen a la misma altura. */
  .ficha-categoria-pie { margin-top: auto; padding-top: 6px; font-size: 15px; }
  /* Cinco productos en una fila: las fichas más apretadas. */
  .categorias--5 { gap: 16px; }
  .categorias--5 .ficha-categoria-texto { padding: 14px 14px 16px; gap: 5px; }
  .categorias--5 .ficha-categoria-nombre { font-size: 19px; }
  .categorias--5 .ficha-categoria-bajada { font-size: 14px; }
  .categorias--5 .ficha-categoria-pie { font-size: 14px; flex-direction: column; align-items: flex-start; gap: 2px; }

  .negocios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .negocio-ficha { min-height: 64px; font-size: 16px; }
  .negocios--fila { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .negocio-grupo { margin-top: 44px; }
  .negocio-grupo-titulo { font-size: 26px; }

  .tu-negocio-cabeza { flex-direction: row; align-items: center; gap: 40px; }
  .tu-negocio-campo { flex: 0 0 400px; }
  .categoria-cabeza { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .categoria-negocio { flex: 0 0 380px; }

  .confianza-tienda--foto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .facil-y-seguro { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 48px; }
  .trabajos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 24px; margin: 0; padding: 0; overflow: visible; }
  /* De a 1 a 4 por fila, según cuántas fotos hay (ninguna sola en una fila de tres). */
  .trabajos--1 { grid-template-columns: minmax(0, 560px); }
  .trabajos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trabajos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .abanico.pieza--horizontal { width: 54%; }
  .abanico.pieza--vertical { width: 31%; }
  .abanico.pieza--cuadrada { width: 40%; }

  .temporada-dentro { flex-direction: row; align-items: center; gap: 56px; }
  .temporada-texto { flex: 1 1 0; }
  .temporada-piezas { flex: 1.2 1 0; }
  .temporada-titulo { font-size: 40px; }
  .temporada-bajada { font-size: 18px; }

  .cuadricula { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
  .cuadricula--fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 20px) / 6); gap: 20px; margin: 0; padding: 0 0 8px; overflow-x: auto; }
  /* La fila del celular, en el computador, vuelve a ser cuadrícula. */
  .cuadricula--fila-celular { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 36px 24px; overflow: visible; }
  .categorias-otras { gap: 16px; margin-top: 28px; }
  .ficha-diseno-nombre { font-size: 18px; }

  /* Los tres pasos lado a lado: el número arriba, así los nombres y los textos quedan a la misma altura. */
  .pasos-faciles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
  .pasos-faciles > li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .paso-facil-numero { grid-row: auto; margin-bottom: 6px; }

  .tienda-pie-dentro { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; padding: 44px 32px; }
  .tienda-pie-enlaces { flex-direction: column; }
  .tienda-pie-enlaces a { min-height: 32px; }

  /* Solo el ícono, redondo (el texto, en su title y su aria-label): con «¿Dudas? Escríbenos» tapaba el final de
     las razones (en 1536 px, la pantalla de Andrés). El texto vuelve desde 1640 px, donde cae fuera del contenido. */
  .whatsapp-flotante { right: 24px; bottom: 24px; width: 56px; height: 56px; padding: 0; border-radius: 28px; }
  .whatsapp-flotante-texto { display: none; }
  /* En la página del diseño, el WhatsApp va debajo de la caja de la compra: flotando, tapaba los precios. */
  .tienda--producto .whatsapp-flotante { display: none; }
  .producto-dudas { display: inline-flex; }

  .banda--categoria .banda-dentro { padding-top: 40px; }
  .categoria-titulo { font-size: 42px; }
  .categoria-bajada { font-size: 18px; }
  .filtros { margin: 24px 0 8px; }
  .filtros-lista { flex: 0 1 auto; flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }

  .producto { padding-top: 20px; }
  .producto-columnas { flex-direction: row; align-items: flex-start; gap: 56px; }
  .producto-izquierda { flex: 1.1 1 0; position: sticky; top: 92px; }
  .producto-derecha { flex: 1 1 0; max-width: 520px; }
  .producto-titulo { font-size: 38px; }
  .producto-comprar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
  }
  .producto-comprar-total { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .producto-comprar .producto-personalizar { flex: 0 0 auto; padding: 0 28px; }
  .producto-barra { display: none; }
  .producto-mas { margin-top: 64px; }
}

/* Una pantalla ancha: «¿Dudas? Escríbenos» cabe a la derecha, fuera del contenido (1200 px). */
@media (min-width: 1640px) {
  .whatsapp-flotante { width: auto; padding: 0 18px 0 14px; }
  .whatsapp-flotante-texto { display: inline; }
  .whatsapp-flotante-mas { display: inline; }
}

/* --- Las páginas de verdad (scripts/paginas.mjs): lo que solo trae su HTML --- */
/* El migas de pan, las tablas de precios, las listas y las preguntas de cada página. Mientras la app arranca se ven con
   esto; cuando la pantalla viva está lista, el HTML se quita (app/arranque.js). Solo variables de /tienda.css. */

.migas ol { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 14px; color: var(--texto-3); }
.migas li + li::before { content: "›"; margin-right: 6px; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.nota-sin-js { margin: 0; padding: 10px 16px; background: var(--ambar-fondo); color: var(--ambar-texto); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; }

.pagina-seccion { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.pagina-texto { font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.pagina-nota { font-size: 14px; line-height: 1.45; color: var(--texto-3); }
.pagina-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.pagina-lista li { position: relative; padding-left: 20px; }
.pagina-lista li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--noche); }
.pagina-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.pagina-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pagina-botones .boton { flex: 1 1 200px; }
.producto-derecha .pagina-botones { margin: 6px 0 2px; }

.tabla-precios { width: 100%; border-collapse: collapse; margin-top: 4px; background: var(--superficie); border: 1px solid var(--borde); font-size: 15px; }
.tabla-precios caption { caption-side: top; padding: 8px 0; text-align: left; font-weight: 700; color: var(--noche); }
.tabla-precios th, .tabla-precios td { padding: 9px 12px; text-align: right; border-top: 1px solid var(--borde-suave); }
.tabla-precios th:first-child, .tabla-precios td:first-child { text-align: left; }
.tabla-precios thead th { border-top: none; background: var(--fondo); font-weight: 700; color: var(--noche); }
.tabla-precios tbody th { font-weight: 600; color: var(--texto); }

.preguntas-pagina { display: flex; flex-direction: column; gap: 8px; }
/* El <details> de la página no trae el ícono de flecha (es un SVG de la app): una punta de flecha hecha con bordes. */
.preguntas-pagina summary::after { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 4px 3px 0; border-right: 2px solid var(--enlace); border-bottom: 2px solid var(--enlace); transform: rotate(45deg); }
.preguntas-pagina details[open] > summary::after { margin-bottom: 0; margin-top: 3px; transform: rotate(-135deg); }

@media (min-width: 960px) {
  .pagina-botones .boton { flex: 0 1 auto; }
}