/* ════════════════════════════════════════════════════════════════════════
   CHELSEA CANDLE ATELIER — interior.css
   Ficha individual de producto (galería + compra + ficha técnica + relacionados)
   y breadcrumb. Estructura/estilo de casa_primicia, en colores claros de Chelsea.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── BREADCRUMB ───────────────────────────── */
.breadcrumb {
  padding: var(--sp-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}
/* La ficha va pegada al breadcrumb: poco aire arriba (el padding de .section
   sobra aquí porque ya hay header + breadcrumb encima). */
.producto-section { padding-top: var(--sp-5); }
.breadcrumb .container { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.breadcrumb a { color: var(--c-text-soft); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-terra); }
.breadcrumb__sep { color: var(--c-border); }
.breadcrumb__current { color: var(--c-text); font-weight: 600; }

/* ───────────────────────────── FICHA (layout) ───────────────────────────── */
/* Layout en áreas: el TÍTULO arriba-izquierda; la IMAGEN abajo-izquierda; el
   bloque de PRECIO a la derecha, alineado con el TOPE DE LA IMAGEN (fila 2). */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head  ."
    "media body";
  gap: 0 var(--sp-9);
  align-items: start;
}
.ficha__left { display: contents; }      /* sus hijos van a las áreas head/media */
.ficha__head  { grid-area: head; margin-bottom: var(--sp-5); }
.ficha__media { grid-area: media; }
/* La caja sube un poco (margen negativo) y se hace más alta para acercarse al
   alto de la imagen. */
.ficha__body  { grid-area: body; margin-top: calc(var(--sp-5) * -1); }

/* Salvaguarda: los elementos de la ficha y relacionados NUNCA deben quedar
   desplazados/ocultos si el observador de reveal no corre a tiempo. */
.ficha [data-reveal][data-reveal-dir],
[data-relacionados] [data-reveal][data-reveal-dir] {
  opacity: 1;
  transform: none;
}
.ficha__head .eyebrow { margin-bottom: var(--sp-3); }
.ficha__title {
  font-size: var(--fs-3xl);
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.ficha__line {
  font-size: var(--fs-md);
  color: var(--c-text-soft);
  margin-bottom: var(--sp-5);
}
.ficha__desc {
  font-size: var(--fs-base);
  color: var(--c-text);
  line-height: 1.7;
  /* Dentro de la caja de compra, hasta abajo: separador arriba + aire. */
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.ficha__field {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.ficha__field:last-of-type { border-bottom: 0; }
.ficha__field-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--c-text-soft);
}
.ficha__field-value { color: var(--c-text); }

/* ───────────────────────────── GALERÍA ───────────────────────────── */
/* Miniaturas en COLUMNA a la izquierda + imagen principal a la derecha. */
.ficha-gal {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.ficha-gal__main {
  position: relative;
  flex: 1;                    /* la imagen principal ocupa el resto */
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ice);
  aspect-ratio: 1 / 1;
}
.ficha-gal__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.ficha-gal__zoom {
  position: absolute;
  bottom: var(--sp-4);
  right: var(--sp-4);
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--c-terra-dark);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ficha-gal__zoom:hover { background: #fff; }   /* sin cambio de borde al pasar el mouse (a petición) */
.ficha-gal__zoom svg { width: 22px; height: 22px; }

.ficha-gal__thumbs {
  display: flex;
  flex-direction: column;     /* miniaturas apiladas en columna a la izquierda */
  gap: var(--sp-3);
  flex-shrink: 0;
}
.ficha-gal__thumb {
  width: 72px; height: 72px;
  padding: 0;                       /* el botón no debe encoger la imagen */
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-ice);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
/* La imagen llena TODO el cuadrito (recorta si es vertical, sin dejar laterales). */
.ficha-gal__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Sin cambio de borde ni elevación en la miniatura al pasar el mouse (a petición) */
.ficha-gal__thumb.is-active { border-color: var(--c-terra); }

/* ───────────────────────────── COMPRA ───────────────────────────── */
.ficha-buy { margin: var(--sp-5) 0; }
.ficha-buy--top {
  padding: var(--sp-7) var(--sp-5);   /* más alto: más aire arriba y abajo */
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.ficha-buy__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.ficha-buy__cur { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-soft); letter-spacing: 0.06em; }
/* Centavos pequeños (superíndice) del precio de la ficha. */
.ficha-buy__cents { font-size: 0.55em; font-weight: 700; vertical-align: 0.5em; margin-left: 1px; }
.ficha-buy__prov {
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  font-style: normal;
  font-weight: 500;
}

/* Aviso de stock */
.ficha-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ficha-stock--in { color: var(--c-sage-dark); }
.ficha-stock--in::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--c-sage); }
.ficha-stock--out { color: var(--c-text-soft); }

/* ── Variantes: dropdowns de tamaño / color ── */
.ficha-vars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.ficha-var {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  flex: 1 1 auto;
}
.ficha-var__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.ficha-var__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 11px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  /* flecha del dropdown dibujada en SVG (sin degradado) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238A7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: calc(var(--sp-4) * 2 + 12px);
  transition: border-color var(--t-fast);
}
.ficha-var__select:focus { outline: none; border-color: var(--c-terra); }

/* Campo de texto personalizable (ej. nombre de la mascota) */
.ficha-var--full { flex-basis: 100%; }
.ficha-var__input {
  padding: 11px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.ficha-var__input:focus { outline: none; border-color: var(--c-terra); }
.ficha-var__input::placeholder { color: var(--c-text-soft); }

.ficha-buy__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
/* Botón "Agregar al carrito" con la animación del carrito (igual que tenían las
   tarjetas del catálogo): el texto está centrado y, al pasar el mouse, se desliza
   a la izquierda mientras el icono del carrito entra desde la derecha. */
.ficha-buy__add {
  position: relative;
  flex: 1 1 auto;
  min-width: 200px;
  overflow: hidden;
}
.ficha-buy__add-text {
  position: relative;
  display: inline-block;
  transition: transform 0.4s;
}
.ficha-buy__add-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.4s, opacity 0.4s;
}
.ficha-buy__add-icon .cart-icon { width: 22px; height: 22px; }
/* Hover: texto a la izquierda, icono entra (a la derecha del centro). */
.ficha-buy__add:hover .ficha-buy__add-text { transform: translateX(-40px); }
.ficha-buy__add:hover .ficha-buy__add-icon {
  opacity: 1;
  transform: translate(calc(-50% + 64px), -50%);
}
/* Estado "✓ Agregado": verde + icono desplegado, igual que el hover. */
.ficha-buy__add.is-added {
  background: var(--c-sage);
  border-color: var(--c-sage);
  color: #fff;
}
.ficha-buy__add.is-added .ficha-buy__add-text { transform: translateX(-40px); }
.ficha-buy__add.is-added .ficha-buy__add-icon {
  opacity: 1;
  transform: translate(calc(-50% + 64px), -50%);
}

.ficha-trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.ficha-trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}
.ficha-trust__item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-terra); }

/* Logos de las formas de pago. Van como primer <li> de .ficha-trust: debajo
   de la línea divisoria y arriba de "Envíos a todo México".
   Mismo tratamiento que los del footer (misma altura y esquinas suaves). */
.ficha-trust__pagos {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.ficha-trust__pagos img {
  height: 30px;
  width: auto;
  border-radius: 4px;   /* para que no se vean cortados en las esquinas */
}

.ficha-buy__back {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  transition: color var(--t-fast);
}
.ficha-buy__back:hover { color: var(--c-terra); }

/* ── Leyenda "personaliza con foto": huellita + texto + botón WhatsApp ── */
.ficha-pawmsg {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-ice);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.ficha-pawmsg__paw {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--c-terra);          /* huellita en rosa de marca */
}
.ficha-pawmsg__text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text);
}
/* Botón pequeño de WhatsApp embebido en el texto. */
.ficha-pawmsg__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 3px;
  vertical-align: middle;
  background: #25D366;            /* verde WhatsApp */
  color: #fff;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast);
}
.ficha-pawmsg__wa svg { width: 14px; height: 14px; }
.ficha-pawmsg__wa:hover { transform: scale(1.1); }

/* La sección de reseñas sube: menos aire arriba. */
.section--resenas { padding-top: var(--sp-3); }

/* ───────────────────────────── FAQs (acordeón) ───────────────────────────── */
.section--faqs { padding-top: var(--sp-4); }
.faqs__head { text-align: center; margin: 0 auto var(--sp-6); }
.faqs { max-width: 760px; margin: 0 auto; }
.faq { border-bottom: 1px solid var(--c-border); }
.faq:first-child { border-top: 1px solid var(--c-border); }
.faq__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-text);
}
.faq__ico {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-text);
}
.faq__ico svg { width: 20px; height: 20px; }
.faq__q { flex: 1; }
.faq__arrow {
  flex-shrink: 0;
  color: var(--c-text-soft);
  transition: transform var(--t-base);
}
.faq__arrow svg { width: 20px; height: 20px; display: block; }
.faq.is-open .faq__arrow { transform: rotate(180deg); }
/* Cuerpo plegable: animación de altura con grid (0fr → 1fr). */
.faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.faq.is-open .faq__body { grid-template-rows: 1fr; }
.faq__inner {
  overflow: hidden;
  color: var(--c-text-soft);
  line-height: 1.6;
}
.faq.is-open .faq__inner { padding-bottom: var(--sp-5); }
.faq__inner ul { margin: 0; padding-left: var(--sp-5); }
.faq__inner li { margin: var(--sp-1) 0; }
.faq__inner strong { color: var(--c-text); }

/* ───────────────────────────── RESEÑAS ───────────────────────────── */
.resenas { max-width: 760px; margin: 0 auto; }

/* Resumen: promedio grande + estrellas + total. */
.resenas__resumen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.resenas__promedio { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--c-text); line-height: 1; }
.resenas__estrellas { display: inline-flex; gap: 2px; }
.resenas__estrellas .star { width: 20px; height: 20px; }
.resenas__total { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* Lista de reseñas. */
.resenas__lista { display: flex; flex-direction: column; gap: var(--sp-4); }
.resenas__vacio { text-align: center; color: var(--c-text-soft); padding: var(--sp-5) 0; }
.resena {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.resena__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.resena__stars { display: inline-flex; gap: 1px; }
.resena__stars .star { width: 14px; height: 14px; }
.resena__autor { font-weight: 600; color: var(--c-text); }
.resena__fecha { font-size: var(--fs-xs); color: var(--c-text-soft); margin-left: auto; }
.resena__texto { margin-top: var(--sp-2); color: var(--c-text-soft); line-height: 1.5; }

/* Formulario para escribir reseña. */
.resena-form {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.resena-form h3 { font-size: var(--fs-lg); }
.resena-form__stars { display: flex; gap: 4px; }
.rf-star {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1.7rem; line-height: 1; color: var(--c-border);
  transition: color var(--t-fast);
}
.rf-star.is-on { color: #E8A33D; }   /* dorado al seleccionar/hover */
.resena-form__input,
.resena-form__area {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-white);
}
.resena-form__input:focus,
.resena-form__area:focus { border-color: var(--c-terra); outline: none; }
.resena-form__area { resize: vertical; }
.resena-form__btn { align-self: flex-start; }
.resena-form__msg { font-size: var(--fs-sm); margin: 0; }
.resena-form__msg.is-ok { color: var(--c-sage-dark); }
.resena-form__msg.is-error { color: #C5283D; }

/* ───────────────────────────── RELACIONADOS ───────────────────────────── */
/* Grid de recomendados con la MISMA tarjeta del catálogo (shop-card). */
.rel-shop-grid { margin-top: var(--sp-6); }
@media (max-width: 1100px) { .rel-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .rel-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .rel-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }

.rel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.rel-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
/* Sin cambio de borde ni sombra en el contenedor al pasar el mouse (a petición) */
.rel-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-ice); }
.rel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
/* Sin efecto de zoom en la imagen al pasar el mouse (a petición) */
.rel-card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); text-align: center; }
.rel-card__linea {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--c-terra-dark);
}
.rel-card__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--c-text); }
.rel-card__price { margin-top: var(--sp-2); font-weight: 700; color: var(--c-text); }
.rel-card__cur { font-size: var(--fs-xs); color: var(--c-text-soft); font-weight: 700; }

/* ───────────────────────────── LIGHTBOX (zoom) ───────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: rgba(34, 28, 22, 0.85);   /* sólido, sin degradado */
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.lightbox__close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--c-text);
  font-size: 1.6rem;
  line-height: 1;
}

/* ───────────────────────────── RESPONSIVE ───────────────────────────── */
@media (max-width: 900px) {
  /* Apilado en una columna: título → imagen → precio. */
  .ficha {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "body";
    gap: var(--sp-5);
  }
  .ficha__head { margin-bottom: 0; }
  .ficha__body { margin-top: 0; }     /* apilado: sin desfase */
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .rel-grid { grid-template-columns: 1fr; }
  .ficha-buy__row { flex-direction: column; align-items: stretch; }
}

/* ── Peso y medidas de la vela (ficha de producto) ──────────────────────
   Los mismos datos que usa la paquetería para cotizar el envío. Solo
   aparece si la vela ya tiene sus medidas capturadas. */
.ficha-medidas {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.ficha-medidas__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-text);
}
.ficha-medidas__lista { margin: 0; display: grid; gap: var(--sp-2); }
.ficha-medidas__fila {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.ficha-medidas__fila dt {
  flex: 0 0 auto;
  min-width: 72px;
  color: var(--c-text-soft);
}
.ficha-medidas__fila dd {
  margin: 0;
  font-weight: 600;
  color: var(--c-text);
}
.ficha-medidas__nota {
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
}

/* ── Esqueleto de carga de la ficha ─────────────────────────────────────
   Ocupa el mismo espacio que la ficha real mientras el JS trae los datos.
   Antes este hueco quedaba vacío y la página mostraba "FAQs" hasta arriba.
   La animación es de OPACIDAD sobre un color sólido: la marca prohíbe los
   degradados, así que no se usa el típico brillo deslizante. */
.ficha-skel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
.ficha-skel__media {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-ice);
  animation: ficha-skel-late 1.4s ease-in-out infinite;
}
.ficha-skel__body { display: grid; gap: var(--sp-4); }
.ficha-skel__linea {
  height: 16px;
  border-radius: var(--r-sm);
  background: var(--c-ice);
  animation: ficha-skel-late 1.4s ease-in-out infinite;
}
.ficha-skel__linea--titulo { height: 40px; width: 70%; }
.ficha-skel__linea--precio { height: 28px; width: 40%; }
.ficha-skel__linea--corta { width: 55%; }
.ficha-skel__caja {
  height: 190px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-ice);
  animation: ficha-skel-late 1.4s ease-in-out infinite;
}
@keyframes ficha-skel-late {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (max-width: 900px) {
  .ficha-skel { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-skel__media,
  .ficha-skel__linea,
  .ficha-skel__caja { animation: none; }
}