/* =====================================================================
   RV25 Relojería · PORTADA (carrusel de relojes destacados)
   ---------------------------------------------------------------------
   Inspirada en las fichas de las relojerías de autor: fondo azul noche
   con una luz suave detrás del reloj, el reloj grande y sin fondo (la
   correa se pierde arriba y abajo), y al lado su información:

     ● Entrega inmediata   TISSOT
     PRX                                   (nombre grande)
     40 mm · Cuarzo suizo
     descripción corta… Ver más
                                 $1.900.000
                                 Envío gratis…
                      [ Comprar ]  [ Detalles ]

   Celular: el reloj arriba y la información debajo.
   Computador (≥1040px): reloj a la izquierda, información a la derecha
   con el precio y los botones abajo, como en la referencia.

   Abajo, un botón por reloj con una barra que se llena mientras corre el
   tiempo (clase .corriendo, la pone js/secciones/portada.js).
   ===================================================================== */

.portada-hero {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;              /* alto real de la pantalla en celular */
  padding: calc(64px + env(safe-area-inset-top, 0px) + 12px) var(--margen) 20px;
  color: var(--fondo);
  /* luz suave detrás del reloj sobre azul noche */
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(64, 157, 198, .16), rgba(64, 157, 198, 0) 70%),
    var(--portada);
  overflow: hidden;
  isolation: isolate;
}

/* Título de la página (h1): pequeño, arriba */
.portada-lema {
  font: 600 11px/1.3 var(--letra); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-sobre-noche);
  text-align: center;
}

/* ------------------------------ diapositiva ------------------------------ */

.portada-diapos { position: relative; min-height: 0; }
.portada-diapo { display: grid; align-content: start; gap: 4px; height: 100%; }

/* El reloj: alto, centrado, la correa se desvanece arriba y abajo */
.portada-reloj {
  display: flex; justify-content: center; align-items: center;
  height: 38svh; min-height: 250px;   /* deja ver el botón Comprar en la primera pantalla */
  margin: 4px calc(var(--margen) * -1) 0;
}
.portada-reloj img {
  height: 112%; width: auto; max-width: 92%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .45));
}
/* Si la foto no se pudo recortar: vitrina clara, sin desvanecer */
.sin-recorte .portada-reloj img {
  height: 100%; max-width: 80%;
  -webkit-mask-image: none; mask-image: none;
  background: var(--marfil); border-radius: var(--radio); filter: none;
}

/* La información */
.portada-info { display: grid; gap: 22px; }
.portada-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.portada-marca {
  font: 600 12px/1 var(--letra); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-sobre-noche);
}
.portada-nombre {
  margin-top: 14px;
  font: 400 clamp(38px, 10vw, 76px)/1 var(--titulo); letter-spacing: -0.02em;
  color: var(--fondo);
}
.portada-detalle {
  margin-top: 10px;
  font: 500 12px/1.3 var(--letra); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-sobre-noche);
}
.portada-desc {
  margin-top: 16px; max-width: 32em;
  font-size: 15px; line-height: 1.55; color: var(--tinta-sobre-noche);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.portada-mas {
  display: inline-block; margin-top: 8px;
  font: 600 14px/1 var(--letra); color: var(--fondo);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.portada-mas:hover { color: var(--acento); }

.portada-precio { font: 600 26px/1.1 var(--letra); letter-spacing: .01em; }
.portada-precio s { margin-left: 8px; font-size: 16px; font-weight: 400; color: var(--tinta-sobre-noche); }
.portada-nota { margin-top: 6px; font-size: 13px; color: var(--tinta-sobre-noche); }
.portada-botones { display: flex; gap: 10px; margin-top: 18px; }
.portada-botones .boton { flex: 1 1 0; min-width: 0; }

/* Entrada de cada diapositiva: el reloj se acerca, el texto sube */
.portada-diapo .portada-reloj img,
.portada-diapo .portada-info { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.portada-diapo .portada-reloj img { transform: scale(.96) translateX(-12px); }
.portada-diapo .portada-info      { transform: translateY(14px); transition-delay: .12s; }
.portada-diapo.activa .portada-reloj img,
.portada-diapo.activa .portada-info { opacity: 1; transform: none; }

/* --------------------------- botones de abajo --------------------------- */

.portada-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.portada-nav[hidden] { display: none; }
.portada-puntos { display: flex; gap: 14px; min-width: 0; flex: 1; }
.portada-puntos button {
  flex: 1 1 0; min-width: 0; max-width: 150px;
  display: grid; gap: 8px; justify-items: start;
  min-height: 44px; padding: 8px 0 0;
  border: 0; background: none; cursor: pointer;
  color: var(--tinta-sobre-noche);
  font: 600 11px/1 var(--letra); letter-spacing: .14em; text-transform: uppercase;
}
.portada-puntos button[aria-current="true"] { color: var(--fondo); }
.portada-punto-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portada-progreso { display: block; width: 100%; height: 2px; background: rgba(245, 239, 230, .2); overflow: hidden; }
.portada-progreso span { display: block; height: 100%; width: 0; background: var(--fondo); }
[aria-current="true"] .portada-progreso span { width: 100%; }
.corriendo [aria-current="true"] .portada-progreso span { animation: portada-progreso 7s linear both; }
@keyframes portada-progreso { from { width: 0; } to { width: 100%; } }

.portada-flechas { display: none; gap: 8px; }
.portada-flecha {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(245, 239, 230, .1); color: var(--fondo);
  font: 400 26px/1 var(--letra);
}
.portada-flecha:hover { background: rgba(245, 239, 230, .2); }

/* ------------------------ respaldo sin destacados ------------------------ */

.portada-respaldo { display: grid; justify-items: center; gap: 24px; align-self: end; text-align: center; }
.con-destacados .portada-respaldo { display: none; }
.portada-hero:not(.con-destacados) { grid-template-rows: 1fr auto auto; }
.portada-hero:not(.con-destacados) .portada-lema {
  align-self: end;
  font: 400 clamp(36px, 9.5vw, 72px)/1.04 var(--titulo); letter-spacing: -0.03em; text-transform: none;
  color: var(--fondo);
}
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.acciones .boton { flex: 1 1 140px; max-width: 220px; }

/* ------------------------------ tamaños ------------------------------ */

@media (min-width: 720px) {
  .portada-reloj { height: 50svh; }
  .portada-desc { -webkit-line-clamp: 3; }
  .portada-botones .boton { flex: 0 1 200px; }
  .portada-flechas { display: flex; }
}

/* Computador: reloj a la izquierda, información a la derecha */
@media (min-width: 1040px) {
  /* Exactamente una pantalla: reloj, información y botones de abajo a la vista */
  .portada-hero {
    height: 100vh; height: 100svh; min-height: 620px;
    padding-bottom: 24px;
    background:
      radial-gradient(45% 60% at 34% 50%, rgba(64, 157, 198, .16), rgba(64, 157, 198, 0) 70%),
      var(--portada);
  }
  .portada-lema { text-align: right; }   /* sobre la columna de texto, no encima del reloj */
  .portada-diapo {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px; align-items: stretch;
  }
  .portada-diapo { min-height: 0; }
  .portada-reloj {
    height: auto; min-height: 0; margin: -56px 0 -24px;   /* la correa se sale arriba */
  }
  .portada-reloj img { height: 100%; max-width: 100%; }
  .portada-info {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 6svh 0 0; min-height: 0;
  }
  .portada-desc { font-size: 16px; }
  .portada-compra { text-align: right; }
  .portada-precio { font-size: 30px; }
  .portada-botones { justify-content: flex-end; }
  .portada-botones .boton { flex: 0 0 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .portada-diapo .portada-reloj img,
  .portada-diapo .portada-info { transition: none; transform: none; }
}