/* ============================================================
   Precios en vidrio + sección de publicidad con impresiones 3D
   (10-oct-2026, Beto: "las card se ven con mucho texto y la imagen muy
   pequeña, ajusta y dale el efecto de glass" y "nos falta una sección 100%
   de la publicidad con impresiones 3D").
   Se carga DESPUÉS de styles.css y cotizar.css.

   Vidrio = panel translúcido + desenfoque de lo que tiene detrás. Para que
   se note hace falta algo con color detrás: sobre el hueso de la página van
   brillos ámbar y cobre muy difusos, y las tarjetas se ven esmeriladas
   encima (blanco translúcido, igual que las piezas de la sección de 3D).
   Sin morado y sin turquesa (Beto: el verde-azul "se pierde").
   10-oct, Beto: "sí me gusta el fondo color hueso beige que teníamos": el
   catálogo NO va en negro. 11-oct: el hero también va en hueso.
   ============================================================ */

/* ---------- Precios: hueso con luz difusa detrás del vidrio ---------- */
/* --luz es la perilla de TODO el brillo de la sección (1 = medido el 11-oct; 0 = sin luz).
   Medición (diferencia de color perceptual contra el hueso, dE76; ~2.3 es lo mínimo que
   el ojo nota): antes la luz estaba solo en las orillas y detrás de las tarjetas valía
   dE 0, o sea el vidrio no tenía nada que mostrar. Ahora la luz vive detrás de las
   tarjetas (.precios-lista::before) y las manchas de las orillas son más calladas. */
.precios { --luz: 1; position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; }
.precios::before {
  content: ""; position: absolute; inset: -15% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 460px at 88% 6%, rgba(240, 138, 28, calc(.16 * var(--luz))), transparent 65%),
    radial-gradient(640px 500px at 48% 104%, rgba(255, 181, 46, calc(.12 * var(--luz))), transparent 65%);
}

/* El contenedor deja de ser un panel: ahora cada tarjeta es su propio vidrio */
.precios .precios-lista { position: relative; isolation: isolate; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
/* Luz detrás del cuerpo de las tarjetas (debajo de la foto), que es donde el vidrio la deja ver */
.precios .precios-lista::before {
  content: ""; position: absolute; inset: -50px -70px; z-index: -1; pointer-events: none;
  background-repeat: repeat-y; background-position: 0 50px; background-size: 100% 800px;
  background-image:
    radial-gradient(380px 320px at 24% 70%, rgba(255, 181, 46, calc(.34 * var(--luz))), transparent 68%),
    radial-gradient(380px 320px at 76% 70%, rgba(240, 138, 28, calc(.28 * var(--luz))), transparent 68%);
}
@media (max-width: 680px) {
  .precios .precios-lista::before {
    inset: -30px -40px; background-position: 0 30px; background-size: 100% 716px;
    background-image: radial-gradient(300px 260px at 50% 74%, rgba(255, 181, 46, calc(.30 * var(--luz))), transparent 68%);
  }
}
@media (min-width: 1300px) {
  .precios .precios-lista::before {
    background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;
    background-image:
      radial-gradient(520px 440px at 18% 58%, rgba(255, 181, 46, calc(.34 * var(--luz))), transparent 68%),
      radial-gradient(460px 400px at 41% 62%, rgba(240, 138, 28, calc(.24 * var(--luz))), transparent 68%),
      radial-gradient(600px 480px at 78% 52%, rgba(240, 138, 28, calc(.28 * var(--luz))), transparent 68%),
      radial-gradient(760px 300px at 50% 93%, rgba(255, 181, 46, calc(.24 * var(--luz))), transparent 68%);
  }
}

/* ---------- La tarjeta de vidrio ---------- */
.precios .precio-fila {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 22px; overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 22px 50px -28px rgba(36, 31, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .35s var(--salida, ease), border-color .35s, box-shadow .35s;
}
.precios .precio-fila.visible:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -26px rgba(36, 31, 26, .6), inset 0 1px 0 #fff; }
.precios .precio-fila--destacado {
  background: linear-gradient(155deg, rgba(255, 196, 84, .42) 0%, rgba(255, 255, 255, .58) 60%, rgba(255, 181, 46, .14) 100%);
  border-color: rgba(201, 140, 40, .65);
  box-shadow: 0 26px 60px -28px rgba(240, 138, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .precios .precio-fila { background: rgba(255, 252, 246, .95); }
}

/* Imagen grande (antes 140 px de alto) y con una sombra que la funde con el vidrio */
.precios .precio-fila:not(.precio-fila--entrada) { --pad: 24px; padding: 0 var(--pad) 24px; }
.precios .precio-fila:not(.precio-fila--entrada) .precio-fila__img { margin: 0 calc(var(--pad) * -1) 16px; height: auto; aspect-ratio: 4 / 3; }
.precios .precio-fila__img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(255, 252, 246, .55), transparent);
}
.precios .precio-fila--entrada .precio-fila__img::after { display: none; }

/* Menos texto, más jerarquía: título, precio grande, una frase y chips */
.precios .precio-fila__head h3 { font-size: 22px; }
.precios .precio-fila__cifra strong { font-size: 28px; }
.precios .precio-fila__detalle { font-size: 15.5px; }
/* Texto chico sobre vidrio, medido: --ink-faint daba 2.8:1 y el enlace "Ver…" 3.9:1 sobre la tarjeta ámbar. */
.precios .precio-fila__cifra span { color: var(--ink-dim); }
.precios .precio-fila__probar { color: #4f4337; }
.precios .precio-fila__probar:hover { color: var(--sol); }
.precios .audios__nota a { color: #7a4f1d; }
.precio-fila__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.precio-fila__chips li {
  font-size: 12.5px; line-height: 1; padding: 7px 11px; border-radius: 999px; color: var(--ink);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------- Celular: la lista compacta pasa a tarjetas de vidrio apiladas ---------- */
@media (max-width: 680px) {
  .precios { padding: 72px 0; }
  .precios .precios-lista { display: flex; flex-direction: column; gap: 16px; }
  .precios .precio-fila { --pad: 18px; padding: 0 var(--pad) 20px; border-bottom: 1px solid rgba(255, 255, 255, .85); gap: 8px; }
  .precios .precio-fila:last-child { border-bottom: 1px solid rgba(255, 255, 255, .85); }
  .precios .precio-fila:not(.precio-fila--entrada) { padding: 0 var(--pad) 20px; }
  .precios .precio-fila:not(.precio-fila--entrada) .precio-fila__img { margin: 0 calc(var(--pad) * -1) 12px; }
  .precios .precio-fila--entrada .precio-fila__img { margin: 0 calc(var(--pad) * -1) 12px; height: auto; aspect-ratio: 4 / 3; }
  .precios .precio-fila__cifra strong { font-size: 26px; }
}

/* ============================================================
   Sección de publicidad con impresiones 3D (portada)
   ============================================================ */
.p3d { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; }
.p3d::before {
  content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 420px at 92% 10%, rgba(240, 138, 28, .20), transparent 65%),
    radial-gradient(520px 420px at 4% 92%, rgba(255, 181, 46, .18), transparent 65%);
}
.p3d__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.p3d__lead { margin: 0 0 22px; max-width: 54ch; font-size: 18px; color: var(--ink-dim); }

.p3d__piezas { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.p3d__piezas li {
  display: flex; flex-direction: column; gap: 2px; padding: 13px 16px; border-radius: 16px;
  font-size: 15.5px; color: var(--ink-dim);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 34px -22px rgba(36, 31, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.p3d__piezas strong { font-family: var(--f-display); font-size: 17px; color: var(--ink); }

.p3d__pasos { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.p3d__pasos li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 7px; border-radius: 999px;
  font-size: 14.5px; color: var(--ink);
  background: rgba(255, 255, 255, .5); border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.p3d__pasos span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sol); color: #fff; font-weight: 700; font-size: 13px;
}

.p3d__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.p3d__mas { color: var(--sol); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.p3d__mas:hover { color: var(--ink); }
.p3d__nota { margin: 16px 0 0; max-width: 56ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); }

/* Collage: una foto alta y dos apiladas, con el pie de foto en vidrio */
.p3d__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1.08; }
.p3d__fig { position: relative; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 56px -30px rgba(36, 31, 26, .7); }
.p3d__fig--alta { grid-row: 1 / 3; }
.p3d__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p3d__fig figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: rgba(20, 16, 10, .42); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
}

/* Franja del exhibidor, también en vidrio */
.p3d__exhibidor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  margin-top: clamp(28px, 4vw, 48px); padding: 18px 24px; border-radius: 20px; color: var(--ink);
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 40px -26px rgba(36, 31, 26, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.p3d__exhibidor p { margin: 0; font-size: 16.5px; }

@media (max-width: 900px) {
  .p3d { padding: 72px 0; }
  .p3d__grid { grid-template-columns: 1fr; }
  .p3d__collage { order: -1; aspect-ratio: 1 / .95; }
  .p3d__fig figcaption { left: 8px; bottom: 8px; padding: 5px 9px; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .p3d__piezas li, .p3d__pasos li, .p3d__exhibidor { background: rgba(255, 252, 246, .95); }
  .p3d__fig figcaption { background: rgba(20, 16, 10, .78); }
  .precio-fila__chips li { background: rgba(255, 252, 246, .95); }
}