/* ══════════════════════════════════════════
   BETHEL · PÁGINAS DE SECCIÓN Y DE CADA MUEBLE
   (usa además ../estilos.css y estilo_productos.css)
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   PÁGINA DE UN MUEBLE
══════════════════════════════════════════ */
.mueble { padding: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 72px); }

.mueble-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.mueble-grid[hidden] { display: none; }
.mueble-grid > * { min-width: 0; }

.mueble-galeria { position: sticky; top: calc(var(--header-h) + 16px); }
.mueble-foto {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radio); overflow: hidden;
  background: var(--fondo-2); box-shadow: var(--sombra);
}
.mueble-foto img { width: 100%; height: 100%; object-fit: cover; }
.mueble-galeria .modal-miniaturas { padding: 12px 0 0; }
.sk-foto { box-shadow: none; }
.skeleton .sk-foto {
  background: linear-gradient(90deg, var(--fondo-2) 25%, var(--fondo-3) 50%, var(--fondo-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}

.mueble-info { display: flex; flex-direction: column; gap: 12px; }
.mueble-info h1 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.5px; }
.mueble-info .modal-tags { padding-right: 0; }
a.modal-badge:hover { background: var(--dorado); color: var(--espresso); }
#mueble-cargando .mueble-info { padding-top: 12px; gap: 14px; }
#mueble-cargando .sk-linea { height: 22px; }

.mueble-garantias { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 18px; border-radius: var(--radio-sm); background: var(--fondo-2); }
.mueble-garantias li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-2); font-size: 0.88rem; }
.mueble-garantias .i { width: 18px; height: 18px; margin-top: 2px; color: var(--dorado-texto); }

.mueble .empty-state .cta-acciones { justify-content: center; }
.mas-muebles { padding-top: 0; }

/* ══════════════════════════════════════════
   PÁGINAS DE SECCIÓN (salas, comedores…)
══════════════════════════════════════════ */
.seccion-hero .texto { max-width: 620px; }
.seccion-hero .cta-acciones { margin-top: 26px; }
.seccion-hero .migas { margin-bottom: 26px; }

.seccion-modelos { padding: 8px 0 clamp(40px, 5vw, 56px); }
.seccion-modelos .encabezado-fila { margin-bottom: 24px; }
.seccion-modelos h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.15; }
.seccion-modelos .results-count { padding: 0; }

/* Consejos para elegir */
.consejos { background: var(--fondo-2); }
.consejos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.consejo {
  padding: 26px 24px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}
.consejo-icono {
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--solido); color: var(--sobre-solido-acento);
}
.consejo h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; margin-bottom: 6px; }
.consejo p { color: var(--texto-2); font-size: 0.92rem; font-weight: 300; line-height: 1.7; }

/* Tabla de tamaños (bases cama y colchones) */
.tabla-tamanos { width: 100%; max-width: 640px; margin-top: 32px; border-collapse: collapse; background: var(--superficie); border-radius: var(--radio-sm); overflow: hidden; box-shadow: var(--sombra-sm); }
.tabla-tamanos caption { text-align: left; padding-bottom: 12px; color: var(--texto-3); font-size: 0.74rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.tabla-tamanos th, .tabla-tamanos td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--borde); font-size: 0.92rem; }
.tabla-tamanos thead th { background: var(--solido); color: var(--sobre-solido); font-weight: 600; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; }
.tabla-tamanos tbody th { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.tabla-tamanos td { color: var(--texto-2); }
.tabla-tamanos tr:last-child > * { border-bottom: none; }

/* Por qué Bethel */
.razones { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.razones li { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--radio-sm); border: 1px solid var(--borde); }
.razones .i { flex-shrink: 0; color: var(--dorado-texto); margin-top: 2px; }
.razones strong { display: block; font-size: 0.95rem; }
.razones span { color: var(--texto-3); font-size: 0.85rem; }

.seccion-preguntas .preguntas-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }

.otras-secciones .secciones-grid { --columnas: 3; }
.otras-secciones .seccion-card { aspect-ratio: 16 / 10; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .mueble-grid { grid-template-columns: 1fr; }
  .mueble-galeria { position: static; }
  .razones { grid-template-columns: repeat(2, 1fr); }
  .seccion-preguntas .preguntas-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mueble-foto { border-radius: var(--radio-sm); }
  .razones { grid-template-columns: 1fr; }
  .otras-secciones .secciones-grid { --columnas: 1; grid-template-columns: 1fr; }
  .otras-secciones .seccion-card { aspect-ratio: auto; min-height: 120px; }
  .tabla-tamanos th, .tabla-tamanos td { padding: 10px 12px; font-size: 0.85rem; }
}