/* =========================================================
   MARK: GUIA ROSA - Relojes colgantes con countdown superpuesto
   Uso recomendado: reloj floral colgante, fecha decorativa, demo romantico, jardin elegante.
   Compatible con: .count-section, .countdown, .count-box y JS base.
   No depende de: otros demos.
   ========================================================= */

/* MARK: GUIA ROSA - Variables */
.reloj-guia-rosa {
  --gr-img-top: none;
  --gr-img-guirnalda-1: none;
  --gr-img-guirnalda-2: none;
  --gr-img-guirnalda-3: none;
  --gr-img-guirnalda-4: none;
  --gr-img-reloj-1: none;
  --gr-img-reloj-2: none;
  --gr-img-reloj-3: none;
  --gr-img-reloj-4: none;
  --gr-img-ornamento: none;
  --gr-bg: transparent;
  --gr-stage-height: clamp(520px, 62vw, 650px);
  --gr-section-margin-top: clamp(42px, 7vw, 86px);
  --gr-section-margin-bottom: clamp(28px, 5vw, 64px);
  --gr-section-padding-inline: clamp(18px, 4vw, 52px);
  --gr-top-y: clamp(-60px, -5vw, -32px);
  --gr-top-w: min(1240px, 132%);
  --gr-top-h: clamp(230px, 28vw, 340px);
  --gr-slot-1-left: 14%;
  --gr-slot-1-top: clamp(100px, 9vw, 124px);
  --gr-slot-1-w: clamp(136px, 15vw, 190px);
  --gr-slot-1-h: clamp(320px, 34vw, 438px);
  --gr-slot-1-rot: -3deg;
  --gr-slot-2-left: 38%;
  --gr-slot-2-top: clamp(136px, 12vw, 166px);
  --gr-slot-2-w: clamp(154px, 17vw, 218px);
  --gr-slot-2-h: clamp(350px, 40vw, 488px);
  --gr-slot-2-rot: 2deg;
  --gr-slot-3-left: 63%;
  --gr-slot-3-top: clamp(108px, 10vw, 134px);
  --gr-slot-3-w: clamp(148px, 16vw, 210px);
  --gr-slot-3-h: clamp(340px, 37vw, 474px);
  --gr-slot-3-rot: -1.5deg;
  --gr-slot-4-left: 87%;
  --gr-slot-4-top: clamp(144px, 13vw, 176px);
  --gr-slot-4-w: clamp(136px, 15vw, 190px);
  --gr-slot-4-h: clamp(320px, 35vw, 438px);
  --gr-slot-4-rot: 3deg;
  --gr-count-size: clamp(66px, 8vw, 92px);
  --gr-count-1-left: var(--gr-slot-1-left);
  --gr-count-1-top: clamp(332px, 37vw, 454px);
  --gr-count-2-left: var(--gr-slot-2-left);
  --gr-count-2-top: clamp(394px, 44vw, 522px);
  --gr-count-3-left: var(--gr-slot-3-left);
  --gr-count-3-top: clamp(352px, 39vw, 480px);
  --gr-count-4-left: var(--gr-slot-4-left);
  --gr-count-4-top: clamp(392px, 43vw, 514px);
}


/* MARK: GUIA ROSA - Contenedor transparente */
.count-section.reloj-guia-rosa {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: var(--section-max, min(100% - 24px, 920px));
  min-height: var(--gr-stage-height);
  margin: var(--gr-section-margin-top) auto var(--gr-section-margin-bottom);
  padding: 0 var(--gr-section-padding-inline);
 overflow: visible;
  border: 0;
  border-radius: 28px;
  background: var(--gr-bg);
  box-shadow: none;
  text-align: center;
}

.count-section.reloj-guia-rosa::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.count-section.reloj-guia-rosa::before {
  inset: 0;
  background: transparent;
}

/* MARK: GUIA ROSA - Recursos _guia_rosa */
.guia-rosa-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.74;
}

/* MARK: GUIA ROSA - Arreglo floral superior */
.guia-rosa-top {
  position: absolute;
  left: 50%;
  top: var(--gr-top-y);
  width: var(--gr-top-w);
  height: var(--gr-top-h);
  transform: translateX(-50%);
  background-image: var(--gr-img-top);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  filter:
    drop-shadow(0 18px 24px rgba(151, 86, 106, 0.18))
    drop-shadow(0 6px 18px rgba(255, 255, 255, 0.28));
}

/* MARK: GUIA ROSA - Guias colgantes */
.guia-rosa-colgante {
  position: absolute;
  left: var(--gr-slot-left);
  top: var(--gr-slot-top);
  width: var(--gr-slot-w);
  height: var(--gr-slot-h);
  transform: translateX(-50%) rotate(var(--gr-slot-rot));
  transform-origin: top center;
  background: transparent;
}

.guia-rosa-colgante::before {
  content: none;
}

.guia-rosa-colgante::after {
  content: none;
}

.guia-rosa-cadena {
  display: none;
}

/* MARK: GUIA ROSA - Relojes colgantes PNG */
.guia-rosa-reloj {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  filter:
    drop-shadow(0 18px 28px rgba(96, 64, 29, 0.18))
    drop-shadow(0 4px 12px rgba(255, 255, 255, 0.32));
}

/* MARK: GUIA ROSA - Transparencia PNG */
.guia-rosa-stage,
.guia-rosa-colgante,
.guia-rosa-reloj {
  background-color: transparent;
}

/* MARK: GUIA ROSA - Distribucion visual */
.guia-rosa-colgante--1 {
  --gr-slot-left: var(--gr-slot-1-left);
  --gr-slot-top: var(--gr-slot-1-top);
  --gr-slot-w: var(--gr-slot-1-w);
  --gr-slot-h: var(--gr-slot-1-h);
  --gr-slot-rot: var(--gr-slot-1-rot);
  --gr-img-guirnalda: var(--gr-img-guirnalda-1);
}

.guia-rosa-colgante--2 {
  --gr-slot-left: var(--gr-slot-2-left);
  --gr-slot-top: var(--gr-slot-2-top);
  --gr-slot-w: var(--gr-slot-2-w);
  --gr-slot-h: var(--gr-slot-2-h);
  --gr-slot-rot: var(--gr-slot-2-rot);
  --gr-img-guirnalda: var(--gr-img-guirnalda-2);
}

.guia-rosa-colgante--3 {
  --gr-slot-left: var(--gr-slot-3-left);
  --gr-slot-top: var(--gr-slot-3-top);
  --gr-slot-w: var(--gr-slot-3-w);
  --gr-slot-h: var(--gr-slot-3-h);
  --gr-slot-rot: var(--gr-slot-3-rot);
  --gr-img-guirnalda: var(--gr-img-guirnalda-3);
}

.guia-rosa-colgante--4 {
  --gr-slot-left: var(--gr-slot-4-left);
  --gr-slot-top: var(--gr-slot-4-top);
  --gr-slot-w: var(--gr-slot-4-w);
  --gr-slot-h: var(--gr-slot-4-h);
  --gr-slot-rot: var(--gr-slot-4-rot);
  --gr-img-guirnalda: var(--gr-img-guirnalda-4);
}

.guia-rosa-colgante--1 .guia-rosa-reloj { background-image: var(--gr-img-reloj-1); }
.guia-rosa-colgante--2 .guia-rosa-reloj { background-image: var(--gr-img-reloj-2); }
.guia-rosa-colgante--3 .guia-rosa-reloj { background-image: var(--gr-img-reloj-3); }
.guia-rosa-colgante--4 .guia-rosa-reloj { background-image: var(--gr-img-reloj-4); }

/* MARK: GUIA ROSA - Countdown superpuesto */
.count-section.reloj-guia-rosa > .eyebrow,
.count-section.reloj-guia-rosa > .countdown,
.count-section.reloj-guia-rosa > .text-button {
  position: absolute;
  z-index: 4;
}

.count-section.reloj-guia-rosa > .eyebrow {
  left: 50%;
  top: clamp(-34px, -3vw, -20px);
  z-index: 20;
  width: fit-content;
  margin: 0;
  padding: 7px 15px;
  border: 1px solid rgba(198, 126, 151, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #7f5a63;
  transform: translateX(-50%);
}
/* MARK: GUIA ROSA - Eliminacion de bloque inferior */
.count-section.reloj-guia-rosa .countdown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.count-section.reloj-guia-rosa .countdown::before,
.count-section.reloj-guia-rosa .count-box::before,
.count-section.reloj-guia-rosa .count-box::after {
  display: none;
}

.count-section.reloj-guia-rosa .count-box {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 2px;
  width: var(--gr-count-size);
  min-width: 0;
  height: var(--gr-count-size);
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(198, 126, 151, 0.32);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.82), rgba(255, 247, 250, 0.62) 58%, rgba(255, 230, 239, 0.46));
  box-shadow:
    0 10px 22px rgba(115, 73, 90, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.count-section.reloj-guia-rosa .count-box strong {
  color: #8b5a66;
  font-family: var(--font-numeros);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 0.9;
}

.count-section.reloj-guia-rosa .count-box span {
  color: #72564f;
  font-size: clamp(0.56rem, 1.25vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* MARK: GUIA ROSA - Posiciones de dias horas min seg */
.count-section.reloj-guia-rosa .count-box:nth-child(1) {
  left: var(--gr-count-1-left);
  top: var(--gr-count-1-top);
}

.count-section.reloj-guia-rosa .count-box:nth-child(2) {
  left: var(--gr-count-2-left);
  top: var(--gr-count-2-top);
}

.count-section.reloj-guia-rosa .count-box:nth-child(3) {
  left: var(--gr-count-3-left);
  top: var(--gr-count-3-top);
}

.count-section.reloj-guia-rosa .count-box:nth-child(4) {
  left: var(--gr-count-4-left);
  top: var(--gr-count-4-top);
}

.count-section.reloj-guia-rosa .text-button {
  left: 50%;
 bottom: clamp(82px, 8vw, 110px);
  margin: 0;
  color: #6d4750;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(198, 126, 151, 0.28);
  box-shadow: 0 12px 30px rgba(73, 126, 121, 0.12);
  transform: translateX(-50%);
}

/* MARK: GUIA ROSA - Responsive escritorio */
body.desktop-phone-preview .count-section.reloj-guia-rosa {
  --gr-stage-height: 1500px;
  --gr-top-y: -110px;
  --gr-top-w: 148%;
  --gr-top-h: 500px;
  --gr-slot-1-left: 14%;
  --gr-slot-1-top: 176px;
  --gr-slot-1-w: 300px;
  --gr-slot-1-h: 640px;
  --gr-slot-2-left: 39%;
  --gr-slot-2-top: 238px;
  --gr-slot-2-w: 326px;
  --gr-slot-2-h: 690px;
  --gr-slot-3-left: 64%;
  --gr-slot-3-top: 190px;
  --gr-slot-3-w: 300px;
  --gr-slot-3-h: 640px;
  --gr-slot-4-left: 87%;
  --gr-slot-4-top: 264px;
  --gr-slot-4-w: 268px;
  --gr-slot-4-h: 580px;
  --gr-count-size: 174px;
  --gr-count-1-top: 675px;
  --gr-count-2-top: 776px;
  --gr-count-3-top: 690px;
  --gr-count-4-top: 718px;
  width: min(calc(100vw - 84px), 1280px);
  border-radius: 82px;
}

body.desktop-phone-preview .count-section.reloj-guia-rosa .count-box strong {
  font-size: 4.4rem;
}

body.desktop-phone-preview .count-section.reloj-guia-rosa .count-box span {
  font-size: 1rem;
}

/* MARK: GUIA ROSA - Responsive tablet */
@media (max-width: 900px) {
  .count-section.reloj-guia-rosa {
    --gr-stage-height: clamp(680px, 122vw, 830px);
    --gr-top-y: clamp(-50px, -5vw, -30px);
    --gr-top-w: 148%;
    --gr-top-h: clamp(220px, 44vw, 312px);
    --gr-slot-1-left: 14%;
    --gr-slot-1-top: clamp(92px, 13vw, 118px);
    --gr-slot-1-w: clamp(112px, 21vw, 148px);
    --gr-slot-1-h: clamp(248px, 46vw, 326px);
    --gr-slot-2-left: 38%;
    --gr-slot-2-top: clamp(124px, 17vw, 154px);
    --gr-slot-2-w: clamp(128px, 24vw, 168px);
    --gr-slot-2-h: clamp(282px, 52vw, 370px);
    --gr-slot-3-left: 63%;
    --gr-slot-3-top: clamp(100px, 14vw, 128px);
    --gr-slot-3-w: clamp(122px, 23vw, 160px);
    --gr-slot-3-h: clamp(270px, 50vw, 354px);
    --gr-slot-4-left: 87%;
    --gr-slot-4-top: clamp(130px, 18vw, 162px);
    --gr-slot-4-w: clamp(110px, 21vw, 146px);
    --gr-slot-4-h: clamp(244px, 46vw, 322px);
    --gr-count-size: clamp(64px, 12vw, 82px);
    --gr-count-1-top: clamp(284px, 53vw, 372px);
    --gr-count-2-top: clamp(342px, 63vw, 446px);
    --gr-count-3-top: clamp(310px, 57vw, 404px);
    --gr-count-4-top: clamp(338px, 61vw, 432px);
    padding: 0 16px;
  }

  .guia-rosa-colgante--4 {
    opacity: 1;
  }
}

/* MARK: GUIA ROSA - Responsive mobile */
@media (max-width: 640px) {
  /* MARK: GUIA ROSA - Responsive tablet */
  .count-section.reloj-guia-rosa {
    --gr-stage-height: 620px;
    --gr-top-y: -30px;
    --gr-top-w: 168%;
    --gr-top-h: 210px;
    --gr-slot-1-left: 13%;
    --gr-slot-1-top: 82px;
    --gr-slot-1-w: 102px;
    --gr-slot-1-h: 226px;
    --gr-slot-2-left: 38%;
    --gr-slot-2-top: 112px;
    --gr-slot-2-w: 116px;
    --gr-slot-2-h: 256px;
    --gr-slot-3-left: 63%;
    --gr-slot-3-top: 88px;
    --gr-slot-3-w: 110px;
    --gr-slot-3-h: 244px;
    --gr-slot-4-left: 87%;
    --gr-slot-4-top: 118px;
    --gr-slot-4-w: 100px;
    --gr-slot-4-h: 222px;
    --gr-count-size: 60px;
    --gr-count-1-top: 258px;
    --gr-count-2-top: 310px;
    --gr-count-3-top: 278px;
    --gr-count-4-top: 292px;
    padding: 0 10px;
  }

  .guia-rosa-colgante--4 {
    display: block;
    opacity: 1;
  }

  .count-section.reloj-guia-rosa .countdown {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
  }
}

/* MARK: GUIA ROSA - Responsive iPhone */
@media (max-width: 430px) {
  .count-section.reloj-guia-rosa {
    --gr-stage-height: 280px;
    --gr-section-margin-bottom: clamp(8px, 3vw, 18px);
    --gr-section-padding-inline: 0;
    --gr-top-y: -8px;
    --gr-top-w: 112%;
    --gr-top-h: 146px;
    --gr-slot-1-left: 22%;
    --gr-slot-1-top: 58px;
    --gr-slot-1-w: 72px;
    --gr-slot-1-h: 164px;
    --gr-slot-2-left: 41%;
    --gr-slot-2-top: 84px;
    --gr-slot-2-w: 80px;
    --gr-slot-2-h: 184px;
    --gr-slot-3-left: 60%;
    --gr-slot-3-top: 66px;
    --gr-slot-3-w: 76px;
    --gr-slot-3-h: 174px;
    --gr-slot-4-left: 78%;
    --gr-slot-4-top: 88px;
    --gr-slot-4-w: 70px;
    --gr-slot-4-h: 160px;
    --gr-count-size: 48px;
    --gr-count-1-left: 22%;
    --gr-count-1-top: 178px;
    --gr-count-2-left: 41%;
    --gr-count-2-top: 216px;
    --gr-count-3-left: 60%;
    --gr-count-3-top: 190px;
    --gr-count-4-left: 78%;
    --gr-count-4-top: 204px;
    width: var(--section-max, min(100% - 24px, 920px));
    min-height: var(--gr-stage-height);
    padding-top: 0;
    padding-inline: var(--gr-section-padding-inline);
    overflow: hidden;
  }

  .guia-rosa-colgante--4 {
    display: block;
    opacity: 1;
  }

  .count-section.reloj-guia-rosa .countdown {
    display: block;
    padding: 10px;
  }

  .count-section.reloj-guia-rosa .count-box {
    padding: 0;
  }

  .count-section.reloj-guia-rosa > .eyebrow {
  top: -48px;
}

  .count-section.reloj-guia-rosa .text-button {
  bottom: 4px;
}
}