/* ==========================================================================
   Estilos propios de la ficha de producto
   Medidas tomadas de figma/spec/03-ficha-de-producto-a.md. El diseño está a
   1920 px: cada valor suelto lleva al lado la coordenada del spec de la que
   sale.
   ========================================================================== */

/* --- Sangría de las páginas interiores -----------------------------------
   En esta pantalla el contenido arranca en x=120, no en los 60 de las
   rejillas de la portada. Son los 60 del .contenedor más --margen-interior,
   exactamente el mismo cálculo que .cabecera__interior en componentes.css.

   Esto no es de la ficha: lo van a necesitar todas las páginas interiores.
   Debería subir a componentes.css. Anotado en el resumen. */

.contenedor--interior {
  /* Con calc porque el elemento ES el .contenedor: un padding-inline suelto
     sustituiría al suyo en vez de sumarse. */
  padding-inline: calc(var(--margen) + var(--margen-interior));
}

/* --- Bloque de ficha ------------------------------------------------------ */

.ficha {
  /* La imagen principal está en y=157 y la cabecera termina en 96. */
  padding-block-start: 3.8125rem; /* 61 px */
}

/* Dos columnas del spec: imagen 813 (x=120 → 933) y datos 790 (x=1010 →
   1800), con 77 px de calle entre ambas. En fracciones para que la
   proporción aguante al estrechar. */
.ficha__interior {
  display: grid;
  grid-template-columns: minmax(0, 813fr) minmax(0, 790fr);
  gap: clamp(2rem, 4.01vw, 4.8125rem); /* máximo 77 px */
  align-items: start;
}

/* --- Galería -------------------------------------------------------------- */

.ficha__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 813 / 690; /* tamaño de la imagen principal en el spec */
  object-fit: cover;
  border-radius: 40px; /* radio 40 de la imagen principal */
  border: 1px solid var(--verde-oscuro);
  background: var(--blanco);
}

/* Fila de miniaturas: en Figma van de x=130 a 933, mientras que la imagen de
   arriba va de 120 a 933. Se alinean con la imagen —los 10 px de diferencia
   son del mismo descuadre de sangrías que ya se normalizó en DECISIONES.md—
   y quedan de 180,75 en lugar de 178. */
.ficha__miniaturas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.875rem; /* 30 px: paso de 208 menos 178 de ancho */
  margin-block-start: 2.625rem; /* 42 px: miniaturas en y=889, imagen hasta 847 */
}

.ficha__miniatura {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 178 / 148; /* tamaño de miniatura en el spec */
  overflow: hidden;
  border: 1px solid var(--gris-borde);
  border-radius: 21px; /* radio 21 de las miniaturas */
  transition: opacity var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion);
}

/* Las no elegidas se apagan un poco para que se lea cuál está en grande. El
   diseño no marca estado alguno: ver el resumen de la página.
   Sólo se apagan cuando ya hay una elegida —de ahí el :has()—, porque al
   cargar la página no hay ninguna y en el diseño las cuatro salen a plena
   opacidad. Donde no haya :has(), la regla se ignora y quedan las cuatro
   encendidas: el estado activo se sigue leyendo por el borde y el anillo. */
.ficha__miniaturas:has([aria-current='true'])
  .ficha__miniatura:not([aria-current='true']):not(:hover) {
  opacity: 0.72;
}

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

.ficha__miniatura[aria-current='true'] {
  border-color: var(--verde-oliva);
  /* Anillo, y no sólo opacidad, para que el estado no dependa del color ni
     de un matiz que en pantallas malas no se distingue. */
  box-shadow: 0 0 0 2px var(--verde-oliva);
}

/* --- Columna de datos ----------------------------------------------------- */

.ficha__datos {
  /* El título arranca en y=198 y la imagen en y=157. */
  padding-block-start: 2.5625rem; /* 41 px */
}

.ficha__titulo {
  /* 26 px en el diseño; escala hacia abajo hasta 22. */
  font-size: clamp(1.375rem, 1.354vw, 1.625rem);
  color: var(--gris-texto);
}

.ficha__descripcion {
  max-width: 776px; /* ancho del párrafo en el spec */
  margin-block-start: 0.9375rem; /* 15 px: descripción en y=244, título hasta 229 */
  font-size: var(--t-sm);
}

.ficha__subtitulo {
  margin-block-start: 3.5rem; /* 56 px: «Especificaciones:» en y=368, párrafo hasta 312 */
  font-size: var(--t-sm);
  font-weight: var(--peso-fuerte);
  color: var(--gris-texto);
}

/* Las especificaciones son 13 px, un tamaño que no está en la escala de
   tokens (hay 12 y 14). Se declara aquí, acotado a la ficha, porque el
   catálogo lo usa también: candidato a --t-xs-plus en tokens.css. */
.ficha__especificaciones {
  --t-ficha: 0.8125rem; /* 13 px */

  display: grid;
  /* Las líneas van en y=398, 426, 454 y 482: paso de 28 px, del que 15,73 se
     los come el interlineado. */
  gap: 12.27px;
  margin-block-start: 0.8125rem; /* 13 px: primera línea en y=398, subtítulo hasta 385 */
  font-size: var(--t-ficha);
  line-height: var(--lh-texto);
}

/* El punto lo pone el CSS: en Figma está escrito dentro del texto. La sangría
   francesa lo deja en el margen y alinea las líneas siguientes con el texto. */
.ficha__especificaciones li {
  padding-inline-start: 1em;
  text-indent: -1em;
}

.ficha__especificaciones li::before {
  content: '•';
  margin-inline-end: 0.3125rem; /* 5 px, la separación que tiene en Figma */
}

/* El botón de la ficha mide 361×52 con cuerpo 13, no los 364×52 con cuerpo 16
   de los botones de cierre de sección de la portada. */
.boton--solicitud {
  min-width: 361px;
  margin-block-start: 2.5rem; /* 40 px: botón en y=538, última línea hasta 498 */
  font-size: 0.8125rem; /* 13 px */
  border: 1px solid var(--gris-borde); /* el rectángulo del CTA lleva borde #999999 */
}

/* --- Productos relacionados ----------------------------------------------- */

.relacionados {
  padding-block-start: 3.25rem; /* 52 px: título en y=1089, miniaturas hasta 1037 */
  /* El frame de Figma corta las tarjetas por abajo (acaban en 1403 y el frame
     mide 1344), así que el aire final es criterio propio: el estándar. */
  padding-block-end: var(--gap-seccion);
}

.relacionados__titulo {
  font-size: var(--t-lg); /* 20 px del spec */
  color: var(--gris-texto);
  margin-block-end: 1.9375rem; /* 31 px: tarjetas en y=1144, título hasta 1113 */
}

/* Las tarjetas van con 41 px de hueco (paso de 427 menos 386 de ancho), no
   con los 32 estándar de --gap-rejilla. */
.relacionados__rejilla {
  gap: 2.5625rem; /* 41 px */
}

.tarjeta--relacionado {
  /* El alto sale de la proporción, no de un mínimo fijo: con
     `min-height: 259px` a la vez que `aspect-ratio`, en cuanto la columna
     baja de 386 px el alto mínimo mandaba sobre la proporción y la tarjeta
     recalculaba su ANCHO a 386 —se salía de la rejilla y la página cogía
     scroll horizontal por debajo de ~1000 px—. Con `auto` la proporción
     386/259 del spec manda sola a cualquier ancho. */
  --alto-tarjeta: auto;

  aspect-ratio: 386 / 259; /* tamaño de la tarjeta en el spec */
  border-radius: 15px; /* radio 15, más cerrado que el --radio-tarjeta general */
}

/* El título va dentro del <h3>, que aquí sólo envuelve al enlace. */
.tarjeta--relacionado .tarjeta__enlace {
  display: block;
}

.tarjeta--relacionado:hover .tarjeta__titulo {
  color: var(--verde-lima);
}

/* --- Responsive -----------------------------------------------------------
   No hay diseño móvil. Mismo criterio que la portada: la ficha pasa a una
   columna en el mismo punto en el que las rejillas pasan a dos. */

@media (max-width: 1100px) {
  .ficha__interior {
    grid-template-columns: 1fr;
  }

  /* En una columna la galería no debe crecer más allá de su tamaño de
     diseño, o la foto se come la pantalla entera. */
  .ficha__galeria {
    max-width: 813px;
    margin-inline: auto;
  }

  .ficha__datos {
    padding-block-start: 0;
  }
}

@media (max-width: 480px) {
  .ficha__miniaturas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boton--solicitud {
    min-width: 0;
  }
}


/* ── Pasar las fotos ────────────────────────────────────────────────
 *
 * Las flechas van ENCIMA de la foto, centradas verticalmente, no debajo.
 * Debajo ocupaban una banda de 44 px de alto para nada, y en una ficha que
 * ya es larga eso empuja el botón de contacto fuera de la primera
 * pantalla. Encima no cuestan ni un píxel de alto.
 *
 * No están en el Figma: allí las miniaturas son rectángulos quietos. Que
 * la foto cambie ya era un añadido; esto es el resto.
 */

.ficha__vista {
  position: relative;
  /* El <picture> es `display: contents`, así que quien manda aquí es la
     <img>. Sin esto, la caja no tendría a qué anclar las flechas. */
  display: block;
}

.ficha__flecha {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  /* 44 px: por debajo de eso no se acierta con el dedo. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Semitransparente para que se vea sobre cualquier foto, clara u
     oscura, sin taparla del todo. */
  background: rgb(255 255 255 / 0.88);
  color: var(--verde-oscuro);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  transition: background var(--transicion), scale var(--transicion);
}

.ficha__flecha--antes { left: 0.9rem; }
.ficha__flecha--despues { right: 0.9rem; }

.ficha__flecha:hover {
  background: var(--blanco);
  scale: 1.08;
}

/* El contador, en una esquina y sin ocupar sitio. */
.ficha__cuenta {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: var(--blanco);
  font-size: var(--t-pequeno, 0.85rem);
  line-height: 1.4;
}

/* En pantallas de dedo, pegadas al borde y algo más grandes. */
@media (max-width: 640px) {
  .ficha__flecha--antes { left: 0.5rem; }
  .ficha__flecha--despues { right: 0.5rem; }
}