/* ===== PROPUESTA PAGE ===== */

/* Nav link highlight */
.nav-propuesta {
  color: var(--green-sage) !important;
  font-style: italic;
  font-size: 0.82rem;
}

/* ── Botanical hero wrapper ── */
.p-hero-wrapper {
  position: relative;
  background: var(--cream);
}

.p-botanicals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.phb {
  position: absolute;
  object-fit: contain;
  user-select: none;
}

/* ── Subtle float animations for hero flowers ──
   Base rotation via `rotate` property; keyframes add tiny
   translateY + micro-rotation on top (they compose).        */
@keyframes phb-float-a {
  0%, 100% { transform: translateY(0)     rotate( 0.0deg); }
  50%       { transform: translateY(-16px) rotate( 2.5deg); }
}
@keyframes phb-float-b {
  0%, 100% { transform: translateY(0)    rotate( 0.0deg); }
  50%       { transform: translateY(14px) rotate(-2.2deg); }
}
@keyframes phb-float-c {
  0%, 100% { transform: translateY(0)     rotate( 0.0deg); }
  38%       { transform: translateY(-13px) rotate(-2.0deg); }
  72%       { transform: translateY( 9px)  rotate( 1.8deg); }
}

/* Top-left cluster */
.phb-tl1 { width: clamp(130px, 14vw, 200px); top: -6%;  left: -3%;  rotate: -18deg; opacity: 0.88; animation: phb-float-b  8.2s ease-in-out infinite 0.3s; }
.phb-tl2 { width: clamp( 95px, 10vw, 150px); top: -9%;  left:  12%; rotate:   6deg; opacity: 0.75; animation: phb-float-a  9.5s ease-in-out infinite 1.2s; }

/* Top-right cluster */
.phb-tr1 { width: clamp(100px, 11vw, 160px); top: -5%;  right: 13%; rotate:  10deg; opacity: 0.80; animation: phb-float-c  7.8s ease-in-out infinite 0.7s; }
.phb-tr2 { width: clamp(140px, 15vw, 210px); top: -7%;  right: -4%; rotate:  18deg; opacity: 0.88; animation: phb-float-a 10.0s ease-in-out infinite 1.9s; }

/* Middle sides */
.phb-ml  { width: clamp(150px, 16vw, 220px); top:  34%; left:  -9%; rotate:  38deg; opacity: 0.90; animation: phb-float-b 11.0s ease-in-out infinite 0.5s; }
.phb-mr  { width: clamp( 75px,  8vw, 120px); top:  28%; right: -2%; rotate:   8deg; opacity: 0.50; animation: phb-float-c 10.5s ease-in-out infinite 1.4s; }

/* Bottom-left cluster */
.phb-bl1 { width: clamp(140px, 15vw, 210px); bottom: -8%; left:  -4%; rotate:  12deg; opacity: 0.88; animation: phb-float-a  8.8s ease-in-out infinite 1.0s; }
.phb-bl2 { width: clamp(100px, 11vw, 165px); bottom: -5%; left:  10%; rotate:  -6deg; opacity: 0.75; animation: phb-float-c  9.2s ease-in-out infinite 0.6s; }

/* Bottom-right cluster */
.phb-br1 { width: clamp(105px, 12vw, 170px); bottom: -5%; right: 11%; rotate: -10deg; opacity: 0.80; animation: phb-float-b  7.5s ease-in-out infinite 1.6s; }
.phb-br2 { width: clamp(130px, 14vw, 195px); bottom: -7%; right: -3%; rotate: -16deg; opacity: 0.88; animation: phb-float-c  9.8s ease-in-out infinite 0.2s; }

/* Hero content above botanicals */
.p-hero-wrapper .hero { position: relative; z-index: 1; }

/* ── Services editorial grid (propuesta layout) ── */
.p-services-editorial {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  grid-template-rows: auto auto;
  gap: 2rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem) clamp(1rem, 2vw, 1.5rem);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* Image placements */
.p-services-editorial .se-img-left   { grid-column: 1; grid-row: 1 / 3; height: 480px; }
.p-services-editorial .se-img-right  { grid-column: 3; grid-row: 1 / 3; height: 480px; }
.p-services-editorial .se-img-bottom { grid-column: 2; grid-row: 2;     height: 220px; max-width: 380px; margin: 0 auto; }

.p-se-text {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1rem 0;
  text-align: center;
}
.p-se-text .eyebrow  { color: var(--gold); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }
.p-se-text h2        { color: var(--green-moss); margin: 0; }
.p-se-text p         { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; max-width: 380px; margin: 0; }
.p-se-text .se-modes { justify-content: center; }
.p-se-text .se-tu-eliges {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-style: italic;
  font-weight: 300;
  color: var(--green-moss);
  margin: 0.2rem 0 0;
}

/* ── Email button hover reveal ── */
.btn-email-reveal {
  position: relative;
  overflow: hidden;
}
.btn-email-reveal .ber-default {
  display: block;
  transition: opacity 0.22s, transform 0.22s;
}
.btn-email-reveal .ber-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.22s, transform 0.22s;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.btn-email-reveal:hover .ber-default {
  opacity: 0;
  transform: translateY(-7px);
}
.btn-email-reveal:hover .ber-hover {
  opacity: 1;
  transform: translateY(0);
}

/* ── Florecita en botón WhatsApp ── */
.btn-wa {
  position: relative;
  overflow: hidden;
}
.btn-wa::after {
  content: '';
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='5' fill='%23D4C87A'/%3E%3Cellipse cx='18' cy='8' rx='3.5' ry='6' fill='%23fff' opacity='.85'/%3E%3Cellipse cx='18' cy='28' rx='3.5' ry='6' fill='%23fff' opacity='.85'/%3E%3Cellipse cx='8' cy='18' rx='6' ry='3.5' fill='%23fff' opacity='.85'/%3E%3Cellipse cx='28' cy='18' rx='6' ry='3.5' fill='%23fff' opacity='.85'/%3E%3Cellipse cx='10.9' cy='10.9' rx='3.5' ry='6' transform='rotate(-45 10.9 10.9)' fill='%23fff' opacity='.75'/%3E%3Cellipse cx='25.1' cy='25.1' rx='3.5' ry='6' transform='rotate(-45 25.1 25.1)' fill='%23fff' opacity='.75'/%3E%3Cellipse cx='25.1' cy='10.9' rx='3.5' ry='6' transform='rotate(45 25.1 10.9)' fill='%23fff' opacity='.75'/%3E%3Cellipse cx='10.9' cy='25.1' rx='3.5' ry='6' transform='rotate(45 10.9 25.1)' fill='%23fff' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: scale(0) rotate(-30deg);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.btn-wa:hover::after {
  transform: scale(1) rotate(0deg);
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .p-services-editorial {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1.1rem 1rem;
  }
  .p-services-editorial .se-img-left { grid-column: 1 / -1; grid-row: auto; height: 260px; max-width: 100%; margin: 0 auto; }
  .p-se-text { grid-column: 1 / -1; grid-row: auto; }
  /* las dos fotos bajo "Tú eliges": pequeñas, escalonadas — izq vertical, der horizontal */
  .p-services-editorial .se-img-right  { grid-column: 1; grid-row: auto; aspect-ratio: 3/4; height: 175px; width: auto; max-width: 100%; margin: 0 auto; }
  .p-services-editorial .se-img-bottom { grid-column: 2; grid-row: auto; aspect-ratio: 3/2; height: 128px; width: auto; max-width: 100%; margin: 2.4rem auto 0; }

  .phb-tl2, .phb-ml, .phb-mr, .phb-bl2, .phb-tr1 { display: none; }
  .phb-tl1 { width: 110px; left: -1rem;  top: -2%;    }
  .phb-tr2 { width: 130px; right: -1rem; top: -2%;    }
  .phb-bl1 { width: 130px; left: -1rem;  bottom: -3%; }
  .phb-br2 { width: 120px; right: -1rem; bottom: -3%; }
  .phb-br1 { right: 8%; }
}