/* ===========================================================================
   Iris: la ficha de producto (Frame 15 - Detalle Productos)

   Dos cajas del mismo alto, 580 + 580 con 18 de separación a 1440: el envase
   sobre amarillo y el panel blanco. Debajo, las dos cajas blancas de «Cómo y
   dónde aplicarlo», 480 + 680, y las cuatro de la «Ficha técnica», a pares.
   ======================================================================== */

.iris-ficha__cabecera {
  display: grid;
  gap: 1.125rem;
  padding-block-start: var(--space-5);
}

@media (min-width: 60rem) {
  .iris-ficha__cabecera {
    grid-template-columns: 1fr 1fr;
    min-block-size: 43rem;
  }
}

/* --- El envase ---------------------------------------------------------- */
.iris-ficha__arte {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 22rem;
  padding: clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: var(--radio-xl);
  background: var(--iris-mostaza);
}

.iris-ficha__arte img {
  inline-size: min(100%, 28.5rem);
  block-size: auto;
  filter: drop-shadow(0 24px 22px rgb(0 0 0 / 0.2));
}

/* --- El panel de la descripción: blanco con la franja arriba -------------
   Sin negro en la ficha (cliente, ronda 10): blanco con sombra suave y la
   franja de la brocha en el borde de arriba. */
.iris-ficha__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  overflow: clip;
  padding: clamp(2.5rem, 1.8rem + 2vw, 4.25rem) clamp(1.5rem, 1rem + 2.2vw, 4.25rem) clamp(2rem, 1.4rem + 2vw, 3.75rem);
  border-radius: var(--radio-xl);
  background: var(--iris-blanco);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.28);
  color: var(--color-texto);
}

.iris-ficha__franja {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.iris-ficha__linea {
  margin: 0;
  color: var(--iris-mostaza-hondo);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.iris-ficha__titulo {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
  line-height: 0.95;
}

.iris-ficha__bajada {
  max-inline-size: 27rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
}

.iris-ficha__atributos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-inline-size: 28.5rem;
}

.iris-atributo {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-3);
  min-block-size: 7.75rem;
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radio-s);
  background: var(--iris-crema-hondo);
  color: var(--iris-negro);
  text-align: center;
}

.iris-atributo__icono {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  --iris-icono-trazo: 1.5;
}

.iris-atributo__texto {
  font-family: var(--iris-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1;
  text-transform: uppercase;
}

.iris-ficha__rotulo {
  margin-block-end: var(--space-3);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
}

.iris-ficha__formatos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.iris-pildora--formato {
  min-inline-size: 6.9rem;
  border-color: var(--iris-crema-hondo);
  background: var(--iris-crema-hondo);
  color: var(--iris-negro);
  font-family: var(--iris-body);
  font-size: 0.8125rem;
  text-transform: none;
}

.iris-pildora--principal {
  border-color: var(--iris-mostaza);
  background: var(--iris-mostaza);
  color: var(--iris-blanco);
}

.iris-ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
}

.iris-ficha__acciones .iris-btn {
  flex: 1 1 13rem;
  max-inline-size: 15rem;
}

/* --- Todo lo que necesitas para aplicarlo ------------------------------- */
.iris-ficha__datos {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 60rem) {
  .iris-ficha__datos {
    grid-template-columns: minmax(0, 30fr) minmax(0, 42.5fr);
  }
}

.iris-superficies {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

.iris-superficie {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  inline-size: min(100%, 17.5rem);
  min-block-size: 3.625rem;
  padding: 0.5rem 1.75rem;
  border-radius: var(--radio-pildora);
  background: var(--iris-mostaza);
  color: var(--iris-blanco);
  font-family: var(--iris-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.iris-superficie__icono {
  inline-size: 2.1rem;
  block-size: 2.1rem;
}

.iris-datos {
  display: grid;
}

.iris-datos__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 1.1rem 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
}

.iris-datos__fila dt {
  flex: none;
}

.iris-datos__fila dd {
  margin: 0;
  text-align: end;
}

.iris-descargas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.iris-descarga {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid var(--iris-negro);
  border-radius: var(--radio-pildora);
  color: var(--iris-negro);
  font-weight: 800;
  text-decoration: none;
}

.iris-descarga small {
  color: var(--color-texto-suave);
  font-weight: 400;
}

.iris-descarga:hover {
  border-color: var(--iris-mostaza);
  background: var(--iris-mostaza);
  color: var(--iris-blanco);
}

.iris-descarga:hover small {
  color: inherit;
}

/* La nota de usos bajo las superficies: el texto de la hoja técnica. */
.iris-caja__nota {
  max-inline-size: 34rem;
  margin: var(--space-6) auto 0;
  color: var(--color-texto-suave);
  text-align: center;
}

/* --- La ficha técnica: cuatro cajas a pares, del mismo ancho ------------ */
@media (min-width: 60rem) {
  .iris-ficha__datos--parejo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.iris-ficha__lista {
  display: grid;
  gap: var(--space-4);
}

.iris-ficha__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 600;
}

.iris-ficha__lista-icono {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--iris-mostaza-hondo);
}

.iris-ficha__pasos {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-inline-start: 1.5rem;
  /* base.css quita las viñetas a toda lista: aquí el orden importa. */
  list-style: decimal;
}

.iris-ficha__pasos li::marker {
  color: var(--iris-mostaza-hondo);
  font-family: var(--iris-display);
  font-size: 1.25rem;
}

.iris-ficha__cuidados {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

.iris-ficha__cuidados dt {
  margin-block-end: var(--space-1);
  font-weight: 800;
}

.iris-ficha__cuidados dd {
  margin: 0;
}