/* Seren — estética nude/dorado premium (2026) */

:root{
  /* Dark-luxe palette (2026) */
  --seren-bg: #0f0d0c;
  --seren-surface: rgba(255,255,255,.06);
  --seren-surface-2: rgba(255,255,255,.09);
  --seren-text: rgba(255,255,255,.92);
  --seren-muted: rgba(255,255,255,.68);

  --seren-primary: #c9a77d;      /* dorado suave */
  --seren-secondary: #d9a6a6;    /* rosé */
  --seren-accent: #7dbf9a;       /* verde suave */

  --seren-radius: 22px;
  --seren-shadow: 0 18px 60px rgba(0,0,0,.45);
  --seren-shadow-soft: 0 10px 30px rgba(0,0,0,.30);
  --seren-border: rgba(255,255,255,.10);
}

*{ box-sizing: border-box; }

.seren-body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--seren-text);
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(201,167,125,.18), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(217,166,166,.12), transparent 55%),
    radial-gradient(900px 520px at 50% 120%, rgba(125,191,154,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--seren-bg);
}

.page-wrap{ min-height: 60vh; }

.seren-display, .seren-h1, .seren-h2, .seren-h3{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.02em;
}

.seren-h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; }
.seren-h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.12; }
.seren-h3{ font-size: 1.25rem; line-height: 1.2; }

.seren-lead{ font-size: 1.05rem; max-width: 52ch; color: var(--seren-muted); }
.seren-body-text{ font-size: 1.02rem; line-height: 1.7; color: var(--seren-muted); }

.seren-eyebrow{
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: .35rem;
}

/* Testimonios: asegurar contraste del eyebrow "Testimonios" */
#testimonios .seren-eyebrow{
  color: #111 !important;
}

/* Reserva: asegurar contraste del eyebrow "Reserva" */
#reservar .seren-eyebrow{
  color: #111 !important;
}

/* Presentación (Sobre) — recuadro premium */
.seren-intro-card{
  position: relative;
  padding: 26px 24px;
  border-radius: 28px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(201,167,125,.14), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(217,166,166,.10), transparent 55%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--seren-shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Shape editorial a la derecha (más sutil y "revista") */
.seren-intro-shape{
  position: absolute;
  right: -64px;
  top: -34px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: multiply;
}

.seren-intro-shape__orb{
  position:absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,167,125,.35), rgba(231,215,201,.18) 40%, rgba(217,166,166,.12) 70%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
}

.seren-intro-shape__ring{
  position:absolute;
  inset: 34px;
  border-radius: 999px;
  border: 1px solid rgba(42,31,26,.10);
  background: transparent;
  box-shadow: none;
}

.seren-intro-shape__spark{
  position:absolute;
  right: 78px;
  top: 92px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(201,167,125,.22) 55%, rgba(255,255,255,0) 100%);
  border: 1px solid rgba(42,31,26,.08);
  filter: blur(.2px);
}

/* Reservar espacio para que el texto no choque con la shape */
@media (min-width: 992px){
  .seren-intro-card{ padding-right: 120px; }
}

/* En móvil: ocultar la shape (suele ensuciar) */
@media (max-width: 575.98px){
  .seren-intro-shape{ display:none; }
}

.seren-intro-card::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(201,167,125,.55), rgba(231,215,201,.25), rgba(217,166,166,.35));
  opacity: .35;
  filter: blur(18px);
  z-index: 0;
}

.seren-intro-card > *{ position: relative; z-index: 1; }

.seren-intro-top{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.seren-intro-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(251,247,242,.75);
  border: 1px solid rgba(42,31,26,.10);
  box-shadow: var(--seren-shadow-soft);
  color: rgba(42,31,26,.78);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.seren-intro-badge i{ color: var(--seren-primary); font-size: 1rem; }

.seren-intro-line{
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(42,31,26,.18), rgba(42,31,26,0));
}

.seren-intro-highlights{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.seren-intro-highlight{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(42,31,26,.10);
}

.seren-intro-highlight i{
  width: 38px;
  height: 38px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(201,167,125,.18);
  border: 1px solid rgba(201,167,125,.35);
  color: rgba(42,31,26,.85);
  flex: 0 0 auto;
}

.seren-intro-highlight-title{ font-weight: 800; }
.seren-intro-highlight-text{ color: rgba(42,31,26,.62); font-size: .92rem; }

@media (min-width: 992px){
  .seren-intro-card{ padding: 30px 28px; }
  .seren-intro-highlights{ grid-template-columns: 1fr 1fr; }
}

.seren-eyebrow--light{ color: rgba(255,255,255,.65); }

.seren-glass{
  background: var(--seren-surface);
  border: 1px solid var(--seren-border);
  box-shadow: var(--seren-shadow-soft);
  backdrop-filter: blur(12px);
}

.seren-glass-dark{
  background: rgba(20,14,12,.35);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

.seren-hr, .seren-divider{ border-top: 1px solid rgba(42,31,26,.12); }
.seren-divider{ height: 1px; width: 100%; background: rgba(42,31,26,.12); border: 0; }

/* Navbar */
.seren-navbar{
  background: rgba(15,13,12,.72);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

/* Navbar: permitir más ancho útil para que el CTA no se corte */
.seren-navbar .navbar-collapse{ flex-grow: 1; }
.seren-navbar .navbar-nav{ flex-wrap: wrap; }

.seren-nav-spacer{ height: 78px; }

.seren-logo{ height: 34px; width: auto; border-radius: 10px; }
.seren-logo--footer{ height: 40px; }

/* Wordmark (usar el logo en lugar del texto "Seren" en zonas de marca) */
.seren-wordmark{
  height: 22px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

/* En navbar, el wordmark debe verse como “nombre” (un poco más grande) */
.seren-navbar .seren-wordmark{ height: 22px; }

/* En footer */
.seren-wordmark--footer{ height: 22px; opacity: .95; }

/* En copyright */
.seren-wordmark--tiny{ height: 16px; opacity: .9; }

/* En eyebrow del hero */
.seren-wordmark--eyebrow{ height: 18px; opacity: .9; }

/* Wordmark inline dentro de un H1 ("Seren, belleza...") */
.seren-wordmark-inline{ display:inline-flex; align-items:baseline; }
.seren-wordmark--inline{
  height: 1em;           /* se adapta al tamaño del H1 */
  width: auto;
  display: inline-block;
  vertical-align: -0.12em;
  margin-right: .18em;
}

@media (max-width: 575.98px){
  .seren-navbar .seren-wordmark{ height: 20px; }
  .seren-wordmark--footer{ height: 20px; }
}

.seren-mark{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,167,125,.95), rgba(231,215,201,.95));
  color: rgba(42,31,26,.9);
  font-family: "Playfair Display", serif;
  font-weight: 600;
}

.seren-mark--footer{ width: 40px; height: 40px; border-radius: 14px; }

.seren-brand{ font-weight: 650; letter-spacing: .02em; color: rgba(245,236,220,.96); }
.seren-tagline{ font-size: .68rem; letter-spacing: .22em; color: rgba(252,246,236,.98); }

/* Hero title cream override */
.seren-hero-title-cream{ color: rgba(252,246,236,.98) !important; }

/* Tratamientos: asegurar contraste del eyebrow "Tratamientos" */
#tratamientos .seren-eyebrow{
  color: #111 !important;
}

/* Booking card (Reserva rápida) text in cream */
.seren-hero-card .seren-eyebrow,
.seren-hero-card .seren-h2,
.seren-hero-card .text-muted,
.seren-hero-card .small,
.seren-hero-card .form-text,
.seren-hero-card label,
.seren-hero-card .form-label{
  color: rgba(252,246,236,.98) !important;
}

/* Presentación: aplicar look & feel del hero (crema + glass) */
.seren-intro-card{
  position: relative;
  overflow: hidden;
  background: rgba(18, 16, 14, .55) !important;
  border: 1px solid rgba(252,246,236,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

/* Imagen de fondo configurable por CSS var --intro-bg */
.seren-intro-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--intro-bg);
  background-size: cover;
  background-position: center;
  opacity: .28;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
}

/* Overlay para legibilidad */
.seren-intro-card::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(252,246,236,.10), rgba(0,0,0,.55) 55%, rgba(0,0,0,.70));
  pointer-events: none;
}

/* Asegurar que el contenido quede por encima del fondo */
.seren-intro-card > *{
  position: relative;
  z-index: 1;
}

.seren-intro-card .seren-h2,
.seren-intro-card .seren-body-text,
.seren-intro-card .text-muted,
.seren-intro-card .seren-intro-highlight-title,
.seren-intro-card .seren-intro-highlight-text,
.seren-intro-card .seren-intro-badge span,
.seren-intro-card .seren-intro-badge,
.seren-intro-card .seren-intro-top,
.seren-intro-card .seren-intro-line{
  color: rgba(252,246,236,.98) !important;
}

.seren-intro-card .seren-intro-badge{
  border: 1px solid rgba(252,246,236,.22) !important;
  background: rgba(252,246,236,.06) !important;
}

.seren-intro-card .seren-intro-line{
  background: linear-gradient(90deg, rgba(252,246,236,.0), rgba(252,246,236,.35), rgba(252,246,236,.0)) !important;
}

.seren-intro-card .seren-intro-highlight i{
  color: rgba(252,246,236,.92) !important;
}

/* Modal tratamientos */
.seren-modal{
  border: 1px solid rgba(252,246,236,.22);
  border-radius: 1.5rem;
  background: rgba(251,247,242,.92);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.seren-modal .modal-header{
  padding: 1.25rem 1.25rem 0.75rem;
}

.seren-modal .modal-body{
  padding: 0 1.25rem 1.25rem;
}

.seren-modal .modal-footer{
  padding: 0 1.25rem 1.25rem;
}

.seren-modal-media img{
  max-height: 360px;
  object-fit: cover;
}

.seren-modal-section-title{
  font-weight: 700;
  color: #1f1713;
  margin-bottom: .5rem;
}

.seren-benefits-list{
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .55rem;
}

.seren-benefits-list li{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.seren-benefits-list li i{
  color: var(--seren-primary, #C9A77D);
  margin-top: .15rem;
}

.seren-benefits-list li span{
  color: rgba(31,23,19,.85);
}

.seren-modal-long{
  line-height: 1.55;
}

/* Hacer que las cards parezcan clicables */
.seren-card[data-bs-toggle="modal"]{
  cursor: pointer;
}

.seren-card[data-bs-toggle="modal"] .btn{
  pointer-events: auto; /* el botón Reservar sigue funcionando */
}

/* Presentación - imagen lateral */
.seren-about-photo{
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
}

.seren-about-photo-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay sutil para integrarla con el look Seren */
.seren-about-photo::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(252,246,236,.10), rgba(0,0,0,.25) 55%, rgba(0,0,0,.45));
  pointer-events: none;
}

.seren-hero-card .form-control,
.seren-hero-card .form-select,
.seren-hero-card textarea{
  color: rgba(252,246,236,.98);
}

.seren-hero-card .form-control::placeholder,
.seren-hero-card textarea::placeholder{
  color: rgba(252,246,236,.70);
}

.seren-hero-card .form-control:focus,
.seren-hero-card .form-select:focus,
.seren-hero-card textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(252,246,236,.18);
  border-color: rgba(252,246,236,.45);
}

.navbar .nav-link{
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
.navbar .nav-link:hover{ color: rgba(255,255,255,.95); }

/* Buttons */
.btn-seren-primary{
  --bs-btn-bg: var(--seren-primary);
  --bs-btn-border-color: var(--seren-primary);
  --bs-btn-hover-bg: #b89467;
  --bs-btn-hover-border-color: #b89467;
  --bs-btn-color: #1f1713;
  --bs-btn-hover-color: #1f1713;
  box-shadow: 0 10px 24px rgba(201,167,125,.25);
}

.btn-seren-outline{
  --bs-btn-color: rgba(255,255,255,.86);
  --bs-btn-border-color: rgba(255,255,255,.22);
  --bs-btn-hover-bg: rgba(201,167,125,.14);
  --bs-btn-hover-border-color: rgba(255,255,255,.28);
  --bs-btn-hover-color: rgba(255,255,255,.95);
}

/* Hero */
.seren-hero{ position: relative; overflow: hidden; padding: 0 0 40px; }

/* Media arriba (imagen) */
.seren-hero-media{ position:absolute; inset:0; z-index:0; }
.seren-hero-media img{ width:100%; height:100%; object-fit: cover; filter: none; }

/*
  Layout solicitado: la imagen arriba y TODO el texto del hero justo debajo.
  Convertimos el hero en “media top + content below”.
*/
.seren-hero-media--top{
  position: relative;
  height: clamp(320px, 52vh, 560px);
  border-bottom: 1px solid rgba(42,31,26,.10);
}

/* Sin overlay: mantener el color original de la foto (sin degradación) */
.seren-hero-media--top::after{ display:none; }

/* Imagen real sin filtros para respetar color original */
.seren-hero-media--top img{
  position: relative;
  z-index: 0;
  filter: none !important;
}

/* Contenido debajo */
.seren-hero-content{ position: relative; z-index: 1; }

/*
  Variante editorial: el contenido “flota” y se pega al borde inferior de la imagen.
  - En desktop: card grande con blur + sombra, superpuesta.
  - En móvil: se apila normal (sin superposición agresiva) para legibilidad.
*/
.seren-hero-content--below{
  padding-top: 0;
  margin-top: -72px; /* sube el bloque para que se pegue a la imagen */
}

.seren-hero-float{
  border-radius: 34px;
  padding: 22px 18px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(201,167,125,.16), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(217,166,166,.10), transparent 55%),
    rgba(15,13,12,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (min-width: 992px){
  .seren-hero-content--below{ margin-top: -92px; }
  .seren-hero-float{ padding: 28px 24px; }
}

@media (max-width: 575.98px){
  .seren-hero-media--top{ height: clamp(260px, 42vh, 420px); }
  .seren-hero-content--below{ margin-top: -26px; }
  .seren-hero-float{ border-radius: 28px; padding: 18px 14px; }
}

.seren-hero-gradient{ position:absolute; inset:0; background:
  radial-gradient(900px 500px at 20% 10%, rgba(201,167,125,.35), transparent 60%),
  radial-gradient(900px 500px at 80% 20%, rgba(217,166,166,.22), transparent 55%),
  linear-gradient(180deg, rgba(251,247,242,.65), rgba(251,247,242,.92));
}

.seren-hero-noise{ position:absolute; inset:0; opacity:.08; background-image:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity=".35"/></svg>');
}

.seren-hero-photo{ position:absolute; inset:0; background:
  radial-gradient(800px 500px at 70% 30%, rgba(42,31,26,.08), transparent 60%),
  radial-gradient(900px 600px at 30% 70%, rgba(201,167,125,.18), transparent 60%);
}

.seren-hero-content{ position: relative; z-index: 1; }

.seren-hero-bullets{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem .9rem;
  margin-top:1.1rem;
}
.seren-hero-bullet{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  font-size:.92rem;
}
.seren-hero-bullet i{ color: var(--seren-primary); }

.seren-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--seren-shadow-soft);
  color: rgba(255,255,255,.78);
}

.seren-hero-metrics{ display:flex; gap: 18px; flex-wrap: wrap; }
.seren-metric{ padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid rgba(42,31,26,.10); }
.seren-metric-value{ font-weight: 600; }
.seren-metric-label{ font-size: .85rem; color: rgba(42,31,26,.62); }

.seren-hero-card{ position: relative; }
.seren-orb{ width: 44px; height: 44px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(201,167,125,.55)); box-shadow: 0 18px 40px rgba(201,167,125,.25); }

/* Sections */
.seren-section{ padding: 72px 0; }
.seren-section--soft{ background: linear-gradient(180deg, rgba(231,215,201,.22), rgba(251,247,242,0)); }

/* Cards */
.seren-card{
  border-radius: var(--seren-radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: var(--seren-shadow-soft);
}

.seren-card-media{ height: 190px; background: rgba(231,215,201,.25); }
.seren-card-media img{ width:100%; height:100%; object-fit: cover; object-position: center 20%; }

.seren-card-placeholder{ height: 100%; display:grid; place-items:center; background:
  radial-gradient(500px 200px at 30% 20%, rgba(201,167,125,.25), transparent 60%),
  radial-gradient(500px 200px at 70% 80%, rgba(217,166,166,.18), transparent 60%),
  rgba(231,215,201,.18);
}

.seren-card-placeholder-inner{ text-align:center; color: rgba(42,31,26,.55); }
.seren-card-placeholder-inner i{ font-size: 1.8rem; }

.seren-hover{ transition: transform .35s ease, box-shadow .35s ease; }
.seren-hover:hover{ transform: translateY(-4px); box-shadow: var(--seren-shadow); }

/* Experience (compacta + foto real) */
.seren-experience-compact{
  position: relative;
  padding: 22px 20px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(18, 16, 14, .55);
  border: 1px solid rgba(252,246,236,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

.seren-experience-compact::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(201,167,125,.16), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(217,166,166,.10), transparent 55%);
  opacity: .9;
  pointer-events: none;
}

.seren-experience-compact::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(252,246,236,.10), rgba(0,0,0,.55) 55%, rgba(0,0,0,.70));
  pointer-events: none;
}

.seren-experience-compact > *{ position: relative; z-index: 1; }

.seren-experience-compact .seren-h2,
.seren-experience-compact .seren-h3,
.seren-experience-compact .seren-eyebrow,
.seren-experience-compact .seren-body-text,
.seren-experience-compact .text-muted,
.seren-experience-compact .seren-intro-badge,
.seren-experience-compact .seren-intro-badge span{
  color: rgba(252,246,236,.98) !important;
}

.seren-experience-compact .seren-intro-badge{
  border: 1px solid rgba(252,246,236,.22) !important;
  background: rgba(252,246,236,.06) !important;
}

.seren-experience-compact .seren-intro-line{
  background: linear-gradient(90deg, rgba(252,246,236,.0), rgba(252,246,236,.35), rgba(252,246,236,.0)) !important;
}

.seren-experience-photoCard{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(252,246,236,.18);
  min-height: 320px;
  background: rgba(252,246,236,.06);
}

.seren-experience-photoCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.seren-experience-photoCard::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(252,246,236,.10), rgba(0,0,0,.25) 55%, rgba(0,0,0,.55));
  pointer-events: none;
}

.seren-experience-photoOverlay{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px 14px;
  border-radius: 22px;
  background: rgba(18,16,14,.55);
  border: 1px solid rgba(252,246,236,.18);
  backdrop-filter: blur(10px);
}

.seren-exp-mini{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(252,246,236,.06);
  border: 1px solid rgba(252,246,236,.18);
}

.seren-exp-mini i{
  color: rgba(252,246,236,.92);
  font-size: 1.1rem;
  margin-top: .15rem;
}

.seren-exp-mini-title{ font-weight: 800; }
.seren-exp-mini-text{ color: rgba(252,246,236,.78) !important; font-size: .90rem; }

@media (min-width: 992px){
  .seren-experience-compact{ padding: 24px 22px; }
}

@media (max-width: 575.98px){
  .seren-experience-photoCard{ min-height: 240px; }
}

/* About visual */
.seren-about-visual{ position: relative; border-radius: 28px; overflow:hidden; min-height: 420px; }
.seren-about-photo{ position:absolute; inset:0; background:
  radial-gradient(900px 600px at 30% 20%, rgba(201,167,125,.25), transparent 60%),
  radial-gradient(900px 600px at 70% 80%, rgba(217,166,166,.18), transparent 60%),
  linear-gradient(135deg, rgba(231,215,201,.25), rgba(251,247,242,.0));
}

.seren-float{ position:absolute; padding: 14px 16px; border-radius: 22px; }
.seren-float-title{ font-weight: 700; }
.seren-float-text{ font-size: .9rem; color: rgba(42,31,26,.62); }
.seren-float--1{ top: 18px; left: 18px; }
.seren-float--2{ bottom: 18px; left: 18px; }
.seren-float--3{ top: 50%; right: 18px; transform: translateY(-50%); }

/* Gallery */
.seren-gallery-card{ box-shadow: var(--seren-shadow-soft); }
.seren-gallery-top{ border-bottom: 1px solid rgba(42,31,26,.08); }
.seren-gallery-grid{ display:grid; grid-template-columns: 1fr 1fr; }
.seren-gallery-cell{ position: relative; min-height: 220px; background: rgba(231,215,201,.18); }
.seren-gallery-cell img{ width:100%; height:100%; object-fit: cover; }
.seren-gallery-placeholder{ height:100%; display:grid; place-items:center; text-align:center; padding: 18px; }
.seren-gallery-label{ font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(42,31,26,.55); margin-bottom: 6px; }

.seren-gallery-overlay-label{
  position:absolute;
  left:14px;
  bottom:14px;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .70rem;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
}

.seren-badge{ display:inline-flex; align-items:center; justify-content:center; padding: .35rem .6rem; border-radius: 999px; background: rgba(201,167,125,.18); border: 1px solid rgba(201,167,125,.35); font-size: .78rem; }

/* Testimonials */
.seren-testimonial{ border: 1px solid rgba(42,31,26,.10); }
.seren-quote{ font-size: 1.02rem; line-height: 1.7; color: rgba(42,31,26,.78); }

.seren-stars i{ color: rgba(42,31,26,.18); }
.seren-stars i.on{ color: var(--seren-primary); }

.seren-stars-inline i{ color: rgba(42,31,26,.18); }
.seren-stars-inline i.on{ color: var(--seren-primary); }

.carousel-control-prev-icon, .carousel-control-next-icon{ filter: invert(1) grayscale(1); opacity: .55; }
.carousel-indicators [data-bs-target]{ background-color: rgba(42,31,26,.35); }
.carousel-indicators .active{ background-color: var(--seren-primary); }

/* CTA / Booking */
.seren-cta{ padding: 86px 0; background: radial-gradient(900px 600px at 20% 20%, rgba(201,167,125,.18), transparent 60%); }

.seren-cta-points{ display:flex; flex-direction: column; gap: 10px; }
.seren-point{ display:flex; align-items:center; gap: 10px; color: rgba(42,31,26,.72); }
.seren-point i{ color: var(--seren-primary); }

.seren-cta-actions{ display:flex; flex-wrap: wrap; gap: 10px; }

.form-control, .form-select{ border-radius: 16px; border-color: rgba(42,31,26,.14); }
.form-control:focus, .form-select:focus{ border-color: rgba(201,167,125,.65); box-shadow: 0 0 0 .25rem rgba(201,167,125,.18); }

/* Modal */
.seren-modal{ border-radius: 28px; border: 1px solid rgba(42,31,26,.10); background: rgba(255,255,255,.92); }
.seren-modal-media{ border: 1px solid rgba(42,31,26,.10); }

/* Footer */
.seren-footer{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0)); border-top: 1px solid rgba(255,255,255,.08); }
.seren-footer-title{ font-weight: 700; letter-spacing: .02em; color: rgba(0,0,0,.92); }
.seren-footer-item{ display:flex; gap: 10px; align-items:flex-start; color: rgba(0,0,0,.85); margin-top: 10px; }
.seren-footer-item i{ color: rgba(0,0,0,.70); margin-top: 2px; }
.seren-footer-links{ display:flex; flex-direction: column; gap: 8px; }
.seren-footer-links a{ color: rgba(0,0,0,.85); text-decoration: none; }
.seren-footer-links a:hover{ color: rgba(0,0,0,1); text-decoration: underline; }

/* Admin */
.seren-stat-value{ font-size: 2rem; font-weight: 700; }
.seren-stat-icon{ width: 44px; height: 44px; border-radius: 16px; display:grid; place-items:center; background: rgba(201,167,125,.18); border: 1px solid rgba(201,167,125,.35); }

.seren-admin-link{
  display:flex; align-items:center; gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(42,31,26,.10);
  background: rgba(255,255,255,.55);
  text-decoration: none;
  color: rgba(42,31,26,.88);
  transition: transform .25s ease, box-shadow .25s ease;
}

.seren-admin-link:hover{ transform: translateY(-2px); box-shadow: var(--seren-shadow-soft); }
.seren-admin-link .icon{ width: 40px; height: 40px; border-radius: 16px; display:grid; place-items:center; background: rgba(231,215,201,.35); }
.seren-admin-link .title{ font-weight: 700; }
.seren-admin-link .desc{ font-size: .9rem; color: rgba(42,31,26,.62); }

.seren-activity{ display:flex; align-items:center; gap: 10px; }
.seren-activity-dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(42,31,26,.25); }
.seren-activity-dot.status-new{ background: #d9a6a6; }
.seren-activity-dot.status-confirmed{ background: #c9a77d; }
.seren-activity-dot.status-done{ background: #7dbf9a; }
.seren-activity-dot.status-cancelled{ background: #9aa0a6; }

.seren-chip{ display:inline-flex; align-items:center; padding: .25rem .55rem; border-radius: 999px; border: 1px solid rgba(42,31,26,.14); background: rgba(255,255,255,.55); font-size: .78rem; color: rgba(42,31,26,.72); }

.seren-thumb{ width: 54px; height: 54px; border-radius: 16px; overflow:hidden; border: 1px solid rgba(42,31,26,.10); background: rgba(231,215,201,.25); display:grid; place-items:center; }
.seren-thumb img{ width:100%; height:100%; object-fit: cover; }

.seren-thumb-lg{ width: 100%; height: 160px; border-radius: 22px; overflow:hidden; border: 1px solid rgba(42,31,26,.10); background: rgba(231,215,201,.18); display:grid; place-items:center; }
.seren-thumb-lg img{ width:100%; height:100%; object-fit: cover; }
.seren-thumb-lg .empty{ text-align:center; color: rgba(42,31,26,.55); }

/* Settings preview */
.seren-logo-preview{ width: 92px; height: 92px; display:grid; place-items:center; overflow:hidden; }
.seren-logo-preview img{ max-width: 100%; max-height: 100%; }
.seren-hero-preview{ width: 140px; height: 92px; display:grid; place-items:center; overflow:hidden; }
.seren-hero-preview img{ width: 100%; height: 100%; object-fit: cover; }

.seren-logo-empty{ text-align:center; color: rgba(42,31,26,.55); }

.seren-preview{ border-radius: 26px; border: 1px solid rgba(42,31,26,.10); background: rgba(255,255,255,.55); padding: 16px; }
.seren-preview-top{ display:flex; align-items:center; gap: 10px; }
.seren-preview-logo{ width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--seren-primary), var(--seren-secondary)); }
.seren-preview-title{ font-weight: 800; }
.seren-preview-sub{ font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(42,31,26,.55); }

.seren-preview-hero{ border-radius: 22px; padding: 14px; background: radial-gradient(500px 220px at 20% 20%, rgba(201,167,125,.22), transparent 60%), rgba(231,215,201,.18); border: 1px solid rgba(42,31,26,.08); }
.seren-preview-pill{ display:inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(42,31,26,.55); }
.seren-preview-h{ font-family: "Playfair Display", serif; font-size: 1.15rem; margin-top: 6px; }
.seren-preview-p{ font-size: .9rem; color: rgba(42,31,26,.65); margin-top: 6px; }

.seren-preview-btn{ padding: 8px 10px; border-radius: 14px; background: var(--seren-primary); color: #1f1713; font-weight: 600; font-size: .85rem; }
.seren-preview-btn--outline{ background: transparent; border: 1px solid rgba(42,31,26,.18); color: rgba(42,31,26,.85); }

.seren-preview-swatches{ display:flex; gap: 8px; }
.seren-preview-swatches .sw{ width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(42,31,26,.12); }

/* Floating WhatsApp */
.seren-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #25D366;
  color: white;
  text-decoration: none;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  z-index: 1050;
  transition: transform .25s ease;
}

.seren-fab:hover{ transform: translateY(-3px); color: white; }

/* On-scroll reveal */
.seren-reveal{ opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.seren-reveal.is-visible{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .seren-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .seren-hover, .seren-fab{ transition: none !important; }
}

/* =========================
   Mobile polish (≤ 576px)
   ========================= */
@media (max-width: 575.98px){
  /* Tipografía y ritmo vertical */
  .seren-h1{ font-size: 2.05rem; line-height: 1.06; }
  .seren-h2{ font-size: 1.65rem; line-height: 1.14; }
  .seren-lead{ font-size: 1rem; }
  .seren-body-text{ font-size: .98rem; }

  /* Navbar: más compacta */
  .seren-nav-spacer{ height: 66px; }
  .seren-logo{ height: 30px; }
  .seren-mark{ width: 30px; height: 30px; border-radius: 11px; }
  .navbar .nav-link{ padding-top: .55rem; padding-bottom: .55rem; }

  /* Hero: menos padding y mejor lectura */
  .seren-hero{ padding: 34px 0 26px; }
  .seren-pill{ padding: .5rem .75rem; font-size: .9rem; }
  .seren-hero-card{ border-radius: 26px; }

  /* Botones: full width y más cómodos */
  .btn.btn-lg{ width: 100%; }
  .seren-cta-actions .btn{ width: 100%; }

  /* Secciones: menos aire para no “eternizar” el scroll */
  .seren-section{ padding: 54px 0; }
  .seren-experience{ padding: 64px 0; }
  .seren-cta{ padding: 64px 0; }

  /* Cards y grids: más compactos */
  .seren-card-media{ height: 170px; }
  .seren-gallery-cell{ min-height: 170px; }

  /* Visuals (about/experience): evitar alturas enormes */
  .seren-about-visual,
  .seren-experience-visual{ min-height: 320px; border-radius: 24px; }

  /* Floats: en móvil ensucian, los hacemos más discretos */
  .seren-float{ padding: 10px 12px; border-radius: 18px; }
  .seren-float--3{ right: 12px; }
  .seren-float--1{ left: 12px; top: 12px; }
  .seren-float--2{ left: 12px; bottom: 12px; }

  /* Formularios: inputs más altos y separación */
  .form-control.form-control-lg,
  .form-select.form-select-lg{ padding-top: .85rem; padding-bottom: .85rem; }

  /* FAB WhatsApp: que no tape botones */
  .seren-fab{ right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* =========================
   Small devices (≤ 768px)
   ========================= */
@media (max-width: 767.98px){
  /* Evitar overflow horizontal por elementos decorativos */
  body{ overflow-x: hidden; }

  /* Carrusel: controles menos invasivos */
  .carousel-control-prev,
  .carousel-control-next{ width: 12%; }

  /* CTA: columnas más respirables */
  .seren-cta-copy{ padding-right: 0 !important; }
}