/* ================================================================
   MAR AZULADO — Capa "Vibrante Claro"
   Mantiene el fondo claro original y aporta acentos vibrantes
   (teal/aqua + coral), degradados y tipografía con carácter.
   Cargar SIEMPRE después de styles.css.
   ================================================================ */

:root {
  /* Acentos vibrantes legibles sobre fondo claro */
  --clr-gold:       #C49A35;            /* primario teal (botones/eyebrow) */
  --clr-gold-soft:  #E2C162;
  --clr-gold-pale:  #FBF4DD;            /* tinte claro teal */
  --clr-lilac:      #9B6BC9;            /* secundario coral */
  --clr-lilac-soft: #EBDDF8;
  --clr-lilac-pale: #F4ECFB;            /* tinte de sección cálido */

  --ff-heading: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Jost', system-ui, sans-serif;

  --grad-ocean: linear-gradient(120deg, #C49A35 0%, #D4A843 50%, #E2C162 100%);
  --grad-coral: linear-gradient(120deg, #9B6BC9, #7A4FA8);
  --shadow-glow: 0 14px 38px -14px rgba(196, 154, 53, .45);
  --shadow-gold: 0 0 30px rgba(212, 168, 67, .2);
}

/* ---------- Fondo claro con glows sutiles para energía ---------- */
body {
  background:
    radial-gradient(1100px 720px at 86% -10%, rgba(226, 193, 98, .12), transparent 60%),
    radial-gradient(900px 640px at -8% 108%, rgba(155, 107, 201, .10), transparent 55%),
    var(--clr-white);
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, .section-title, .hero-title { font-family: var(--ff-heading) !important; letter-spacing: -.02em; }
.section-title { font-weight: 700; }
.hero-title { font-weight: 800 !important; letter-spacing: -.03em; }

/* ---------- Acentos en degradado ---------- */
.text-accent, .hero-title .text-accent {
  background: var(--grad-ocean); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-eyebrow, .hero-eyebrow { color: var(--clr-gold) !important; }
.title-underline { background: var(--grad-ocean) !important; }

/* ---------- Botones ---------- */
.btn-primary {
  background: var(--grad-ocean); color: #fff; border-color: transparent; font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 18px 46px -14px rgba(196,154,53,.55); }
.btn-secondary { color: var(--clr-gold); border-color: rgba(196,154,53,.4); }
.btn-secondary:hover { background: var(--clr-gold-pale); border-color: var(--clr-gold); }
.btn-sand { background: var(--grad-coral); color: #fff; border-color: transparent; }
.btn-sand:hover { filter: brightness(1.05); }

/* ---------- Detalles de marca ---------- */
.value-icon { color: var(--clr-gold) !important; }

/* ================================================================
   MODAL DE PAGO (PayPal)
   ================================================================ */
.pp-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center; padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.pp-modal[hidden] { display: none; }
.pp-modal__overlay { position: fixed; inset: 0; background: rgba(14, 30, 28, .55); backdrop-filter: blur(6px); animation: ppfade .25s ease; }
.pp-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; margin: auto;
  background: #fff; border: 1px solid #ECE4D6; border-radius: 22px;
  padding: 34px 30px 26px; text-align: center;
  box-shadow: 0 30px 80px -24px rgba(14,30,28,.4);
  animation: pprise .35s cubic-bezier(.2,.7,.2,1) both;
}
@media (max-width: 440px) { .pp-modal { padding: 12px; } .pp-modal__card { padding: 26px 18px 20px; } }
.pp-modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 1px solid #ECE4D6; background: #fff; border-radius: 50%;
  font-size: 20px; line-height: 1; color: #6E817E; cursor: pointer; transition: all .18s;
}
.pp-modal__close:hover { background: #FFF0F2; color: #9B6BC9; border-color: #9B6BC9; transform: rotate(90deg); }
.pp-modal__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #C49A35; }
.pp-modal__plan { font-family: var(--ff-heading); font-size: 22px; font-weight: 700; color: #1E2A28; margin: 8px 0 4px; line-height: 1.15; }
.pp-modal__price { font-family: var(--ff-heading); font-weight: 800; font-size: 42px; letter-spacing: -.03em; margin: 6px 0 22px; }
.pp-modal__price #pp-amount { background: var(--grad-ocean); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-modal__price small { font-family: var(--ff-body); font-size: 15px; font-weight: 600; color: #6E817E; letter-spacing: .04em; }
.pp-buttons { min-height: 50px; }
.pp-modal__note { font-size: 12.5px; color: #8A958F; margin: 16px 0 0; line-height: 1.5; }
.pp-status { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; }
.pp-status--ok { background: #FBF4DD; color: #8A6E22; border: 1px solid #E6D29A; }
.pp-status--error { background: #FFF0F2; color: #B23B47; border: 1px solid #F3CDD2; }
.pp-status--info { background: #FFF8E8; color: #9A7B1E; border: 1px solid #F0E1B0; }

@keyframes ppfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pprise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ================================================================
   RESPONSIVE — sin desbordes horizontales (todos los celulares)
   ================================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, svg, iframe { max-width: 100%; }
section, .container, .hero, .philosophy, .pain-points, .solution,
.gallery, .testimonials, .about, .breathing, .services, .credentials,
.final-cta, .footer { overflow-x: clip; }
/* Canvas decorativos (constelaciones) no deben empujar el ancho */
.constellation-canvas, .section-particles, [class*="orb"], [class*="particle"] {
  max-width: 100% !important; pointer-events: none;
}

/* ================================================================
   VIDA — tarjetas, íconos, imágenes y reveal
   ================================================================ */
/* Reveal de entrada más suave y con presencia */
.animate-on-scroll {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

/* Tarjetas: elevación y brillo al pasar el mouse */
.service-card, .testimonial-card, .pain-card, .credential-item, .gallery-item {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px -24px rgba(196,154,53,.4);
  border-color: rgba(212,168,67,.55) !important;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(212,168,67,.32); }
.pain-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -20px rgba(155,107,201,.3); }
.credential-item:hover { transform: translateX(5px); }

/* Borde superior en degradado para la tarjeta destacada */
.service-card--featured { border-color: rgba(212,168,67,.5) !important; }

/* Íconos de servicio con vida (flotan suave, incluso en móvil) */
.service-icon-wrapper { transition: transform .4s var(--ease-out-expo, ease); }
.service-icon-wrapper svg { animation: floaty 4.5s ease-in-out infinite; }
.service-card:hover .service-icon-wrapper { transform: scale(1.12) rotate(-5deg); }
.service-card:nth-child(2) .service-icon-wrapper svg { animation-delay: -1.5s; }
.service-card:nth-child(3) .service-icon-wrapper svg { animation-delay: -3s; }

/* Zoom suave en imágenes de galería */
.gallery-item { overflow: hidden; }
.gallery-item img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img { transform: scale(1.06); }

/* Punto del eyebrow / detalles con latido sutil */
.section-eyebrow, .hero-eyebrow { position: relative; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .service-icon-wrapper svg { animation: none; }
  .animate-on-scroll { transition: opacity .3s ease; }
}

/* ================================================================
   AJUSTES FINOS MÓVIL
   ================================================================ */
@media (max-width: 600px) {
  .hero-title, h1.hero-title { font-size: clamp(34px, 11vw, 46px) !important; line-height: 1.08; }
  .section-title { font-size: clamp(26px, 8vw, 34px) !important; }
  .btn { padding: 13px 24px; }              /* targets táctiles cómodos */
  .gallery-item img { width: 100%; }
}

/* ================================================================
   TARJETAS DE SERVICIO — rediseño premium (sin nada cortado)
   ================================================================ */
.services-grid { gap: 1.75rem !important; padding-top: 6px; align-items: stretch !important; }

.service-card {
  position: relative; overflow: hidden !important; margin-top: 0 !important;
  display: flex !important; flex-direction: column;
  background: #fff !important;
  border: 1px solid #ECE4D6 !important;
  border-radius: 22px !important;
  padding: 2.4rem 1.9rem 2rem !important;
  box-shadow: 0 1px 2px rgba(14,30,28,.04), 0 20px 46px -26px rgba(14,30,28,.20) !important;
}
/* Barra superior en degradado */
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-ocean); opacity: 1; z-index: 2;
  animation: none; inset: auto;
}
.service-card::after { display: none !important; }   /* quita el glow viejo */
.service-card--featured {
  border-color: rgba(212,168,67,.45) !important;
  box-shadow: 0 1px 2px rgba(14,30,28,.04), 0 26px 60px -26px rgba(196,154,53,.4) !important;
}
.service-card--featured::before { height: 6px; }
.service-card:hover { transform: translateY(-8px); border-color: rgba(212,168,67,.55) !important; }

/* Badge: dentro de la tarjeta, sin recortes */
.service-badge {
  position: static !important; transform: none !important;
  display: inline-flex; align-self: center; align-items: center;
  margin: 4px auto 1.4rem !important;
  background: var(--grad-coral) !important; color: #fff !important;
  font-size: 12px !important; font-weight: 700; letter-spacing: .06em;
  padding: 7px 18px !important; border-radius: 999px !important;
  box-shadow: 0 8px 20px -8px rgba(155,107,201,.5) !important;
}
.service-card--featured .service-badge { background: var(--grad-ocean) !important; box-shadow: 0 8px 20px -8px rgba(196,154,53,.5) !important; }

.service-icon-wrapper { color: var(--clr-gold) !important; margin-bottom: 1rem; }
.service-name { font-family: var(--ff-heading) !important; font-weight: 700; }

/* Caja de precio premium */
.service-pricing {
  background: linear-gradient(160deg, #FCF6E6, #FFFBF0) !important;
  border: 1px solid #EAD9A8 !important; border-radius: 16px !important;
  margin-top: auto !important;        /* empuja precio+botones al fondo: tarjetas parejas */
}
.price-amount, .price-launch {
  background: var(--grad-ocean); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; font-weight: 800;
}
.price-launch-badge { background: rgba(196,154,53,.08) !important; color: #8A6E22 !important; }
.service-features li { color: #54615E; }
.feature-check { color: var(--clr-gold) !important; }

/* Botón principal del card destacado */
.service-card .btn-full { margin-top: .75rem; }

/* ================================================================
   OFERTA / DESCUENTO en tarjetas de servicio
   ================================================================ */
.price-anchoring { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .35rem; }
.price-original { font-size: 1.15rem; color: #9C8E78; text-decoration: line-through; font-weight: 500; }
.price-discount-badge {
  background: linear-gradient(120deg, #9B6BC9, #7A4FA8) !important; color: #fff !important;
  font-size: .72rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; letter-spacing: .04em;
  box-shadow: 0 6px 16px -6px rgba(155,107,201,.6);
}
.offer-limited {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: #B8902F; text-transform: uppercase;
}
.offer-dot { width: 8px; height: 8px; border-radius: 50%; background: #C49A35; animation: offerpulse 1.6s ease-out infinite; }
@keyframes offerpulse {
  0% { box-shadow: 0 0 0 0 rgba(196,154,53,.5); }
  70% { box-shadow: 0 0 0 9px rgba(196,154,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,154,53,0); }
}
.service-card.has-offer { box-shadow: 0 1px 2px rgba(14,30,28,.04), 0 22px 50px -24px rgba(155,107,201,.32) !important; }

/* Cinta de oferta en la esquina + ahorro concreto */
.offer-ribbon {
  position: absolute; top: 16px; right: -36px; z-index: 4;
  background: linear-gradient(120deg, #9B6BC9, #7A4FA8); color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .05em;
  padding: 5px 42px; transform: rotate(45deg);
  box-shadow: 0 6px 16px -6px rgba(122,79,168,.6);
}
.offer-save {
  text-align: center; margin-top: .5rem; font-weight: 800; font-size: 1.02rem;
  color: #fff; background: linear-gradient(120deg, #C49A35, #B8902F);
  display: inline-block; padding: 5px 16px; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(196,154,53,.55);
}
.service-pricing { position: relative; }

/* ================================================================
   MODAL DE RESERVAS (Calendario Propio)
   ================================================================ */
.booking-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.booking-modal[hidden] { display: none; }
.booking-modal__overlay { position: absolute; inset: 0; background: rgba(14, 30, 28, .55); backdrop-filter: blur(6px); animation: ppfade .25s ease; }
.booking-modal__card {
  position: relative; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  background: #fff; border: 1px solid #ECE4D6; border-radius: 22px;
  padding: 34px 30px; text-align: left;
  box-shadow: 0 30px 80px -24px rgba(14,30,28,.4);
  animation: pprise .35s cubic-bezier(.2,.7,.2,1) both;
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  border: 1px solid #ECE4D6; background: #fff; border-radius: 50%;
  font-size: 20px; line-height: 1; color: #6E817E; cursor: pointer; transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.booking-modal__close:hover { background: #FFF0F2; color: #9B6BC9; border-color: #9B6BC9; transform: rotate(90deg); }
.booking-modal__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #C49A35; display: block; margin-bottom: 6px; }
.booking-modal__title { font-family: var(--ff-heading); font-size: 24px; font-weight: 700; color: #1E2A28; margin: 0 0 16px; line-height: 1.15; }

/* Contenedor del Calendario */
.calendar-container {
  background: #FCFBF9;
  border: 1px solid #ECE4D6;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.calendar-month-title {
  font-family: var(--ff-heading);
  font-size: 16px;
  font-weight: 700;
  color: #1E2A28;
}
.btn-cal-nav {
  width: 32px;
  height: 32px;
  border: 1px solid #ECE4D6;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  color: #54615E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
}
.btn-cal-nav:hover {
  background: var(--clr-gold-pale);
  color: var(--clr-gold);
  border-color: var(--clr-gold);
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #8A958F;
  margin-bottom: 8px;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  color: #1E2A28;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.calendar-day.empty {
  cursor: default;
  pointer-events: none;
}
.calendar-day.past {
  color: #C0C8C5;
  cursor: default;
  pointer-events: none;
}
.calendar-day.no-slots {
  color: #8A958F;
  cursor: default;
}
.calendar-day.available {
  background: var(--clr-gold-pale);
  color: var(--clr-gold);
  font-weight: 700;
  border: 1px solid rgba(196, 154, 53, 0.3);
}
.calendar-day.available:hover {
  background: var(--clr-gold);
  color: #fff;
  transform: scale(1.08);
}
.calendar-day.selected {
  background: var(--grad-ocean) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(196, 154, 53, 0.4);
}

/* Grilla de Horarios */
.slots-container {
  border-top: 1px dashed #ECE4D6;
  padding-top: 16px;
}
.slots-title {
  font-size: 14px;
  font-weight: 600;
  color: #54615E;
  margin-bottom: 12px;
}
.slots-title #selected-date-str {
  color: var(--clr-gold);
  font-weight: 700;
}
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.slot-btn {
  padding: 8px 12px;
  border: 1px solid #EAD9A8;
  background: linear-gradient(160deg, #FFFBF0, #FCF6E6);
  color: #8A6E22;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all .18s;
  border-color: #EAD9A8 !important;
}
.slot-btn:hover {
  background: var(--grad-ocean) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(196, 154, 53, 0.25);
}
.no-slots-msg {
  font-size: 13px;
  color: #8A958F;
  text-align: center;
  margin: 10px 0;
  font-style: italic;
}

/* Estilos de Formulario de Registro */
.booking-selected-summary {
  background: var(--clr-lilac-pale);
  border: 1px solid var(--clr-lilac-soft);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: #5C4378;
  margin-bottom: 20px;
}
.booking-form .form-group {
  margin-bottom: 16px;
  text-align: left;
}
.booking-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #54615E;
  margin-bottom: 6px;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #ECE4D6;
  border-radius: 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  color: #1E2A28;
  background: #FCFBF9;
  transition: border-color .2s;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--clr-gold);
  background: #fff;
}
.booking-form .phone-input-group {
  display: flex;
  gap: 8px;
}
.booking-form .phone-prefix-select {
  width: 100px;
  flex-shrink: 0;
}
.booking-form-error {
  background: #FFF0F2;
  color: #B23B47;
  border: 1px solid #F3CDD2;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* Vista de Éxito */
.booking-success-icon {
  color: var(--clr-gold);
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  animation: floaty 4.5s ease-in-out infinite;
}
.booking-success-text {
  font-size: 14px;
  color: #54615E;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 24px;
}
.booking-success-text strong {
  color: #1E2A28;
  font-weight: 700;
}

/* ================================================================
   PAGO — botón Stripe (tarjeta / Apple Pay / Google Pay)
   ================================================================ */
.pp-or { display: flex; align-items: center; gap: 12px; margin: 14px 2px 12px; color: #9C8E78; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.pp-or::before, .pp-or::after { content: ""; flex: 1; height: 1px; background: #E7DECF; }
.pp-stripe-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--ff-body, inherit); font-size: 15px; font-weight: 700; color: #fff;
  background: #1E1B24; transition: transform .12s, box-shadow .2s, background .2s;
  box-shadow: 0 10px 24px -12px rgba(30,27,36,.6);
}
.pp-stripe-btn:hover { background: #2C2736; box-shadow: 0 14px 30px -12px rgba(30,27,36,.7); }
.pp-stripe-btn:active { transform: translateY(1px); }
.pp-stripe-btn:disabled { opacity: .6; cursor: default; }