/* ============================================================
   Enamódate — ficha de producto (/producto/{slug}/)
   ============================================================ */

/* La cabecera va en posición absoluta sobre el contenido; aquí no hay hero
   que la sostenga, así que la ficha empieza por debajo de ella. */
.prod{padding:132px 0 0}

.prod-migas{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font:600 11px/1.6 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-600);
  margin-bottom:34px;
}
.prod-migas a{transition:color .22s}
.prod-migas a:hover{color:var(--enamo-crimson)}
.prod-migas [aria-current]{color:var(--neutral-900)}

.prod-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:start;
}

/* ---- Galería ---- */
.prod-foto{
  background:var(--neutral-200);
  aspect-ratio:1/1.05;
  display:flex;align-items:center;justify-content:center;
  padding:38px;
}
.prod-foto img{max-height:100%;width:auto;object-fit:contain;transition:opacity .18s}
/* Las cinco fotos se piden al cargar la página, así que este atenuado casi
   nunca llega a verse: solo cubre la primera vez con la red muy lenta. */
.prod-foto.cargando img{opacity:.3}

.prod-mini{display:flex;gap:10px;margin-top:12px}
.prod-mini-b{
  flex:1 1 0;min-width:0;
  aspect-ratio:1/1.05;
  background:var(--neutral-200);border:0;border-radius:0;padding:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--neutral-300);
  transition:box-shadow .22s;
}
.prod-mini-b img{max-height:100%;width:auto;object-fit:contain}
.prod-mini-b:hover{box-shadow:inset 0 0 0 1px var(--neutral-900)}
.prod-mini-b.sel{box-shadow:inset 0 0 0 2px var(--enamo-crimson)}

/* ---- Datos ---- */
.prod-datos .brand{font:400 20px/1.1 var(--font-condensed);letter-spacing:.08em;text-transform:uppercase}
.prod-datos .colec{font:400 13px/1.4 var(--font-condensed);letter-spacing:.1em;color:var(--neutral-600);text-transform:uppercase}
.prod-nombre{
  font:400 clamp(28px,3.4vw,40px)/1.1 var(--font-display);
  letter-spacing:.1em;text-transform:uppercase;
  margin:14px 0 4px;
}
.prod-prenda{font:400 13px/1.5 var(--font-ui);letter-spacing:.06em;color:var(--neutral-600)}
.prod-datos .precio{font:700 44px/1.1 var(--font-poster);letter-spacing:-.01em;margin:16px 0 24px}

.opt-valor{
  margin-left:8px;
  font:400 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:none;
  color:var(--neutral-600);
}

.prod-ctas{display:grid;gap:12px;margin-top:30px}
.prod-note{margin-top:16px;font:400 12px/1.6 var(--font-ui);color:var(--neutral-600)}
/* El pedido directo, sin estampar, es un enlace: no compite con los dos
   botones que sí llevan a lo que la marca quiere. */
.prod-comprar-directo{
  display:block;text-align:center;margin-top:2px;
  font:600 11px/1.6 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--neutral-600);text-decoration:underline;text-underline-offset:2px;
  transition:color .22s;
}
.prod-comprar-directo:hover{color:var(--enamo-crimson)}

.prod-note-link{
  color:var(--neutral-900);text-decoration:underline;
  text-underline-offset:2px;font-weight:600;
  transition:color .22s;
}
.prod-note-link:hover{color:var(--enamo-crimson)}

.prod-detalles{margin-top:20px;border-top:1px solid var(--neutral-300)}
.prod-detalles details{border-bottom:1px solid var(--neutral-300)}
.prod-detalles summary{
  cursor:pointer;list-style:none;
  font:400 13px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  padding:15px 4px;color:var(--neutral-700);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.prod-detalles summary::-webkit-details-marker{display:none}
.prod-detalles summary::after{content:"+";font:400 17px/1 var(--font-ui);color:var(--neutral-600)}
.prod-detalles details[open] summary::after{content:"\2212"}
.prod-detalles summary:hover{color:var(--enamo-crimson)}
.prod-detalles p{font:400 12.5px/1.7 var(--font-ui);color:var(--neutral-600);padding:0 4px 16px}

.prod-volver{
  display:inline-block;margin-top:26px;
  font:600 11px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--neutral-700);
  border-bottom:1px solid var(--neutral-400);
  padding-bottom:4px;
  transition:color .22s,border-color .22s;
}
.prod-volver:hover{color:var(--enamo-crimson);border-color:var(--enamo-crimson)}

/* ============================================================
   Carrusel de sugeridas
   ============================================================ */
.sugeridas{
  margin-top:96px;padding:56px 0 92px;
  background:var(--neutral-50);border-top:1px solid var(--neutral-300);
}
.sugeridas-cab{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:28px;
}
.sugeridas h2{
  font:400 clamp(19px,2.6vw,28px)/1.2 var(--font-display);
  letter-spacing:.14em;text-transform:uppercase;
}
.sugeridas-nav{display:flex;gap:8px;flex:none}
.sug-flecha{
  width:44px;height:44px;padding:0;
  background:#fff;border:1px solid var(--neutral-300);border-radius:0;
  font:400 22px/1 var(--font-ui);color:var(--neutral-700);
  transition:background .22s,color .22s,border-color .22s;
}
.sug-flecha:hover{background:var(--neutral-900);color:#fff;border-color:var(--neutral-900)}

.carrusel{
  max-width:var(--page-max);margin:0 auto;
  padding:0 var(--page-gutter);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Mientras avanza solo no queremos que el navegador imponga su animación
     de desplazamiento; al pasar a manos de la persona tampoco estorba. */
  scroll-behavior:auto;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel:focus-visible{outline:2px solid var(--enamo-crimson);outline-offset:2px}

.carrusel-pista{display:flex;gap:20px;width:max-content}
.carrusel-item{flex:0 0 clamp(168px,40vw,236px)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  /* El botón de pedido va fijo abajo, así que todo lo de arriba tiene que
     caber: si la foto se lleva media pantalla, quien entra ve precio y
     «Comprar» sin enterarse de que hay calidad, color y talla que elegir. */
  .prod{padding-top:96px}
  .prod-cols{grid-template-columns:1fr;gap:18px}
  /* Las miniaturas son las tomas de la prenda, así que también valen en el
     teléfono; solo se hacen más pequeñas. */
  .prod-mini{gap:8px;margin-top:8px}
  .prod-mini-b{padding:6px}
  .prod-foto{aspect-ratio:auto;height:clamp(200px,30vh,270px);padding:18px}
  .prod-migas{margin-bottom:16px;font-size:10px;letter-spacing:.1em}
  .miga-larga{display:none}                 /* «· Primera Nota» parte la línea */
  .prod-nombre{margin:8px 0 2px}
  .prod-datos .precio{font-size:34px;margin:10px 0 12px}

  /* Los dos botones de pedido acompañan mientras se eligen calidad, color y
     talla. Van en fila para que la barra no se coma media pantalla. */
  .prod-ctas{
    position:sticky;bottom:0;z-index:5;
    grid-template-columns:1fr 1fr;
    gap:8px;margin:24px calc(var(--page-gutter) * -1) 0;
    padding:12px var(--page-gutter) calc(12px + env(safe-area-inset-bottom));
    background:var(--neutral-0);
    border-top:1px solid var(--neutral-300);
  }
  .prod-ctas .btn{padding:14px 12px;font-size:11px;letter-spacing:.06em}
  .cta-larga{display:none}                  /* «Agregar» basta dentro de la barra */
  .prod-comprar-directo{grid-column:1 / -1;order:-1;font-size:10.5px;margin:0 0 2px}

  .sugeridas{margin-top:56px;padding:40px 0 64px}
  .sugeridas-cab{margin-bottom:20px}
  .carrusel-pista{gap:12px}
}

@media (max-width:560px){
  .prod-nombre{letter-spacing:.06em}
  .sugeridas-nav{display:none}   /* con el dedo se arrastra; las flechas sobran */
}

@media (prefers-reduced-motion:reduce){
  .prod-foto img,.prod-mini-b,.sug-flecha{transition-duration:1ms}
}