/* ==========================================================================
   Sin Excusas · Centro Estético
   Hoja de estilos principal — extiende Bootstrap 5.3
   --------------------------------------------------------------------------
   Índice
   1.  Tokens de diseño (variables CSS)
   2.  Base y tipografía
   3.  Utilidades propias
   4.  Componentes: botones
   5.  Componentes: eyebrow, títulos de sección, reglas
   6.  Componentes: barra superior y navegación
   7.  Componentes: hero
   8.  Componentes: tarjetas (pilar, línea, tratamiento, suplemento, producto)
   9.  Componentes: marco de imagen y placeholders
   10. Bloques: CTA y pie de página
   11. Responsive
   12. Accesibilidad y preferencias del usuario
   ========================================================================== */


/* 1. Tokens de diseño
   ========================================================================== */
:root {
  /* Marca */
  --se-ink:          #14110C;
  --se-ink-soft:     #2B2620;
  --se-ink-deep:     #0F0D0A;
  --se-ink-warm:     #241B10;

  --se-gold:         #B08D4B;
  --se-gold-dark:    #8C6E36;
  --se-gold-light:   #D8B879;
  --se-gold-pale:    #EBD3A2;
  --se-sand:         #C8A15A;

  --se-cream:        #FAF6EE;
  --se-cream-soft:   #FDFBF7;
  --se-line:         #EEE6D8;
  --se-line-soft:    #F0E8D9;

  --se-text:         #4A4336;
  --se-muted:        #7C7263;
  --se-muted-light:  #9A8B6C;
  --se-on-dark:      #CFC5B2;
  --se-on-dark-dim:  #8E8271;

  /* Degradados reutilizados */
  --se-grad-gold:    linear-gradient(115deg, #B08D4B, #D8B879 55%, #B08D4B);
  --se-grad-text:    linear-gradient(100deg, #EBD3A2, #C8A15A 60%, #EBD3A2);
  --se-grad-brand:   linear-gradient(100deg, #8C6E36, #C8A15A 45%, #8C6E36);
  --se-grad-dark:    linear-gradient(160deg, #14110C 0%, #1E1811 55%, #241B10 100%);
  --se-grad-cream:   linear-gradient(180deg, #FAF6EE, #FDFBF7);
  --se-grad-card:    linear-gradient(180deg, #FDFBF7, #FFFFFF);
  --se-hairline:     linear-gradient(90deg, transparent, #C8A15A, transparent);
  --se-hairline-l:   linear-gradient(90deg, #C8A15A, transparent);

  /* Tipografía */
  /* El sitio usa una sola tipografía (Jost). La variable "serif" se mantiene
     como alias para no reescribir las reglas que ya la referencian. */
  --se-font-serif:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --se-font-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --se-container:    1220px;
  --se-radius:       3px;
  --se-radius-sm:    2px;
  --se-section-y:    104px;
  --se-transition:   180ms ease;

  /* Sombras */
  --se-shadow-gold:  0 8px 22px rgba(176, 141, 75, .28);
  --se-shadow-card:  0 20px 44px rgba(140, 110, 54, .14);

  /* Overrides de Bootstrap */
  --bs-body-font-family: var(--se-font-sans);
  --bs-body-color: var(--se-ink-soft);
  --bs-body-bg: #FFFFFF;
  --bs-link-color: var(--se-gold);
  --bs-link-hover-color: var(--se-gold-dark);
  --bs-border-color: var(--se-line);
}


/* 2. Base y tipografía
   ========================================================================== */
body {
  font-family: var(--se-font-sans);
  font-weight: 300;
  color: var(--se-ink-soft);
  background-color: #FFFFFF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--se-gold);
  text-decoration: none;
  transition: color var(--se-transition);
}

a:hover,
a:focus-visible {
  color: var(--se-gold-dark);
}

.se-serif {
  font-family: var(--se-font-serif);
  font-weight: 300;
  line-height: 1.12;
  color: var(--se-ink);
  text-wrap: pretty;
}

.se-serif em {
  font-weight: 400;
  font-style: italic;
  color: var(--se-gold);
}

/* Texto con degradado dorado (usado en titulares sobre fondo oscuro) */
.se-gold-text {
  background: var(--se-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.se-lead {
  font-size: 1.09rem;
  line-height: 1.85;
  color: var(--se-muted);
  font-weight: 300;
  text-wrap: pretty;
}


/* 3. Utilidades propias
   ========================================================================== */
.se-container {
  width: 100%;
  max-width: var(--se-container);
  margin-inline: auto;
  padding-inline: 40px;
}

.se-section {
  padding-block: var(--se-section-y);
}

.se-section--tight { padding-block: 80px; }

.se-bg-cream { background: var(--se-grad-cream); }
.se-bg-dark  { background: var(--se-grad-dark); color: #FFFFFF; }

.se-text-muted { color: var(--se-muted); }
.se-text-gold  { color: var(--se-gold); }

/* Etiqueta versal fina, presente en casi todas las secciones */
.se-eyebrow {
  display: block;
  font-size: .719rem;         /* 11.5px */
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--se-gold);
  margin: 0;
}

.se-eyebrow--row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.se-eyebrow--row::before {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: var(--se-hairline-l);
}

/* Reglas decorativas */
.se-rule {
  width: 56px;
  height: 1px;
  background: var(--se-hairline);
  border: 0;
  opacity: 1;
  margin: 22px 0 0;
}

.se-rule--center { margin-inline: auto; }

.se-rule--left {
  width: 36px;
  background: var(--se-hairline-l);
  margin: 16px 0;
}

/* Línea de 1px a lo ancho, para separar bloques oscuros */
.se-edge-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--se-hairline);
  pointer-events: none;
}

.se-edge-bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--se-hairline);
  pointer-events: none;
}


/* 4. Componentes: botones
   ========================================================================== */
.se-btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--se-radius-sm);
  padding: 17px 32px;
  font-size: .781rem;         /* 12.5px */
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: filter var(--se-transition),
              color var(--se-transition),
              background-color var(--se-transition),
              border-color var(--se-transition);
}

.se-btn--gold {
  background: var(--se-grad-gold);
  color: #12100D;
  box-shadow: 0 10px 28px rgba(176, 141, 75, .35);
}

.se-btn--gold:hover,
.se-btn--gold:focus-visible {
  filter: brightness(1.08);
  color: #12100D;
}

.se-btn--ghost {
  border-color: rgba(216, 184, 121, .45);
  color: var(--se-gold-pale);
}

.se-btn--ghost:hover,
.se-btn--ghost:focus-visible {
  border-color: var(--se-gold-light);
  color: #FFFFFF;
}

.se-btn--outline {
  border-color: var(--se-gold);
  color: var(--se-gold-dark);
  padding: 16px 32px;
  font-size: .75rem;
}

.se-btn--outline:hover,
.se-btn--outline:focus-visible {
  background: var(--se-gold);
  color: #FFFFFF;
}

.se-btn--sm {
  padding: 13px 24px;
  font-size: .719rem;
  letter-spacing: .16em;
}

/* Enlace tipo «Ver todo →» */
.se-link-arrow {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--se-gold-dark);
  border-bottom: 1px solid var(--se-gold-light);
  padding-bottom: 7px;
}

.se-link-arrow:hover,
.se-link-arrow:focus-visible { color: var(--se-gold); }

.se-link-mini {
  font-size: .719rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}


/* 5. Barra superior y navegación
   ========================================================================== */
.se-topbar {
  background: linear-gradient(90deg, #0F0D0A, #1C1710 50%, #0F0D0A);
  color: var(--se-gold-light);
  font-size: .719rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
}

.se-topbar .se-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 10px;
}

.se-topbar a {
  color: var(--se-gold-pale);
  letter-spacing: .2em;
}

.se-topbar a:hover,
.se-topbar a:focus-visible { color: #FFFFFF; }

.se-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--se-line);
}

.se-header .navbar { padding-block: 16px; }

/* Marca */
.se-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: none;
}

.se-brand__logo {
  width: 64px;
  height: 64px;
  display: block;
  object-fit: contain;
  flex: none;
}

.se-brand__name {
  font-family: var(--se-font-serif);
  font-size: 1.313rem;        /* 21px */
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  background: var(--se-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.se-brand__tag {
  font-size: .531rem;         /* 8.5px */
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--se-muted-light);
  margin-top: 4px;
}

/* Enlaces de navegación */
.se-nav .nav-link {
  padding: 0 0 5px;
  font-size: .813rem;         /* 13px */
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--se-ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--se-transition), border-color var(--se-transition);
}

.se-nav .nav-link:hover,
.se-nav .nav-link:focus-visible { color: var(--se-gold); }

.se-nav .nav-link.active {
  color: var(--se-gold);
  border-bottom-color: var(--se-sand);
}

/* Botón hamburguesa */
.se-toggler {
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius-sm);
  padding: 8px 10px;
}

.se-toggler:focus { box-shadow: 0 0 0 .2rem rgba(176, 141, 75, .25); }

.se-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23B08D4B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* 6. Hero
   ========================================================================== */
.se-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--se-grad-dark);
  color: #FFFFFF;
}

/* Imagen a sangre en la mitad derecha */
.se-hero__media {
  position: absolute;
  inset: 0 0 0 47%;
}

/* La foto cubre todo el espacio sin deformarse, sea cual sea su tamaño
   original (la de fábrica o una subida desde Contenido web). Sin esto se
   mostraba a tamaño natural: recortada si era grande, en recuadro si era chica. */
.se-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo que funde la imagen con el fondo oscuro */
.se-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              #14110C 0%,
              #14110C 45%,
              rgba(20, 17, 12, .72) 63%,
              rgba(20, 17, 12, .06) 100%);
  pointer-events: none;
}

.se-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 100px;
}

.se-hero__copy { max-width: 580px; }

.se-hero__title {
  font-family: var(--se-font-serif);
  font-weight: 300;
  font-size: 4.625rem;        /* 74px */
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 24px 0 0;
  color: #FFFFFF;
  text-wrap: pretty;
}

.se-hero__text {
  margin: 26px 0 0;
  max-width: 440px;
  font-size: 1.094rem;        /* 17.5px */
  line-height: 1.8;
  font-weight: 300;
  color: var(--se-on-dark);
  text-wrap: pretty;
}

.se-hero .se-eyebrow { color: var(--se-gold-light); letter-spacing: .38em; }

/* Cifras bajo el hero */
.se-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 52px;
  list-style: none;
  padding: 0;
}

.se-stats__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(216, 184, 121, .2);
}

.se-stat__value {
  font-family: var(--se-font-serif);
  font-size: 1.875rem;        /* 30px */
  line-height: 1.1;
  color: var(--se-gold-pale);
}

.se-stat__label {
  font-size: .688rem;         /* 11px */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--se-on-dark-dim);
  margin-top: 2px;
}


/* 7. Encabezados de página interior
   ========================================================================== */
.se-pagehead { padding-block: 80px 0; }

.se-pagehead__title {
  font-family: var(--se-font-serif);
  font-weight: 300;
  font-size: 3.5rem;          /* 56px */
  line-height: 1.08;
  margin: 18px 0 0;
  color: var(--se-ink);
  text-wrap: pretty;
}

.se-pagehead__title--lg { font-size: 3.75rem; }


/* 8. Tarjetas
   ========================================================================== */

/* Tarjeta base clara sobre crema */
.se-card {
  height: 100%;
  background: var(--se-grad-card);
  border: 1px solid var(--se-line-soft);
  border-radius: var(--se-radius);
  transition: border-color var(--se-transition), box-shadow var(--se-transition);
}

.se-card:hover {
  border-color: var(--se-gold-light);
  box-shadow: 0 16px 36px rgba(176, 141, 75, .12);
}

.se-card__title {
  font-family: var(--se-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--se-ink);
  line-height: 1.2;
}

.se-card__text {
  font-size: .906rem;         /* 14.5px */
  line-height: 1.75;
  color: var(--se-muted);
  font-weight: 300;
}

/* Pilares de «Cuidado con método» */
.se-pillar { padding: 30px 26px; }

.se-pillar__num {
  font-family: var(--se-font-serif);
  font-size: .938rem;
  font-style: italic;
  color: var(--se-gold);
}

/* Tarjeta con foto: líneas de servicio, tratamientos, suplementos */
.se-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--se-line);
  border-radius: var(--se-radius);
  overflow: hidden;
  transition: border-color var(--se-transition), box-shadow var(--se-transition);
}

a.se-tile { color: inherit; }

.se-tile:hover,
.se-tile:focus-visible {
  border-color: var(--se-sand);
  box-shadow: var(--se-shadow-card);
}

.se-tile__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* Filete dorado que arranca en el borde superior del cuerpo */
.se-tile__body--ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--se-hairline-l);
}

.se-tile__title {
  font-family: var(--se-font-serif);
  font-size: 1.688rem;        /* 27px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--se-ink);
}

.se-tile__text {
  font-size: .906rem;
  line-height: 1.7;
  color: var(--se-muted);
  font-weight: 300;
  margin-top: 8px;
}

.se-tile__cue {
  font-size: .688rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--se-gold);
  margin-top: 14px;
}

/* Pie de tarjeta de tratamiento: duración + consultar */
.se-tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--se-line-soft);
  margin-top: auto;
  padding-top: 16px;
}

.se-tile__duration {
  font-size: .719rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--se-gold);
}

/* Marca de fabricante sobre el nombre del suplemento */
.se-tile__kicker {
  font-size: .656rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--se-gold);
}

/* Altura mínima para alinear los pies de tarjeta en una misma fila */
.se-clamp    { min-height: 76px; }
.se-clamp-sm { min-height: 70px; }


/* 9. Imágenes y placeholders
   ========================================================================== */

/* Contenedor de proporción fija; sustituye a la altura fija del original */
.se-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--se-grad-cream);
}

.se-media > img,
.se-media > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.se-media--fill   { height: 100%; }
.se-media--hero   { height: 100%; }
.se-media--tile   { aspect-ratio: 4 / 5; }
.se-media--card   { aspect-ratio: 4 / 3; }
.se-media--wide   { aspect-ratio: 21 / 9; }
.se-media--portrait { aspect-ratio: 3 / 4; }

/* Marcador visible mientras no hay fotografía definitiva.
   Para publicar: sustituir el div por <img> y quitar la clase. */
.se-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--se-muted-light);
  background:
    repeating-linear-gradient(135deg,
      rgba(200, 161, 90, .06) 0 12px,
      transparent 12px 24px),
    var(--se-grad-cream);
  border: 1px dashed rgba(200, 161, 90, .45);
}

.se-placeholder--dark {
  color: rgba(235, 211, 162, .75);
  background:
    repeating-linear-gradient(135deg,
      rgba(200, 161, 90, .07) 0 12px,
      transparent 12px 24px),
    linear-gradient(160deg, #1E1811, #241B10);
  border-color: rgba(200, 161, 90, .3);
}

/* Marco desplazado que enmarca la foto del espacio */
.se-framed { position: relative; }

.se-framed::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  right: 38px;
  bottom: 38px;
  border: 1px solid #E4D5B4;
  border-radius: var(--se-radius);
  pointer-events: none;
}

.se-framed__media {
  position: relative;
  border-radius: var(--se-radius);
  overflow: hidden;
}


/* 10. Listas, pestañas, CTA y pie
   ========================================================================== */

/* Lista de beneficios con guion dorado */
.se-checks {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.se-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .938rem;
  color: var(--se-text);
  font-weight: 300;
}

.se-checks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  background: var(--se-sand);
}

/* Pestañas de categoría en Servicios */
.se-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
  margin-top: 46px;
  border: 0;
}

.se-tabs .nav-link {
  padding: 0 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: .781rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9A8F7D;
  transition: color var(--se-transition), border-color var(--se-transition);
}

.se-tabs .nav-link:hover,
.se-tabs .nav-link:focus-visible { color: var(--se-gold); }

.se-tabs .nav-link.active {
  color: var(--se-ink);
  border-bottom-color: var(--se-sand);
  background: none;
}

/* Llamada a la acción final */
.se-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #14110C, #241B10);
  color: #FFFFFF;
}

.se-cta .se-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-block: 92px;
}

.se-cta__title {
  font-family: var(--se-font-serif);
  font-weight: 300;
  font-size: 2.875rem;        /* 46px */
  line-height: 1.12;
  margin: 0;
  text-wrap: pretty;
}

.se-cta__text {
  font-size: 1rem;
  line-height: 1.8;
  color: #B8AC97;
  font-weight: 300;
  margin: 14px 0 0;
  max-width: 440px;
}

/* Pie */
.se-footer {
  background: var(--se-ink-deep);
  color: var(--se-on-dark-dim);
}

.se-footer .se-container { padding-block: 56px; }

.se-footer__logo {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: contain;
}

.se-footer__heading {
  font-size: .688rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--se-sand);
  margin-bottom: 6px;
}

.se-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .875rem;
  font-weight: 300;
}

.se-footer__list a { color: inherit; }
.se-footer__list a:hover,
.se-footer__list a:focus-visible { color: var(--se-gold-light); }

.se-footer__legal { border-top: 1px solid #221D15; }

.se-footer__legal .se-container {
  padding-block: 22px;
  font-size: .75rem;
  font-weight: 300;
  color: #6E6456;
}

/* Botón flotante de WhatsApp */
.se-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--se-grad-gold);
  color: #12100D;
  box-shadow: var(--se-shadow-gold);
  transition: filter var(--se-transition), transform var(--se-transition);
}

.se-whatsapp:hover,
.se-whatsapp:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  color: #12100D;
}


/* 11. Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --se-section-y: 88px; }

  .se-hero__title { font-size: 3.75rem; }
  .se-pagehead__title,
  .se-pagehead__title--lg { font-size: 3rem; }
}

@media (max-width: 991.98px) {
  :root { --se-section-y: 72px; }

  .se-container { padding-inline: 28px; }

  /* La navegación pasa a panel desplegable: los enlaces se apilan */
  .se-nav {
    gap: 0 !important;
    padding-block: 18px 6px;
  }

  .se-nav .nav-link {
    padding-block: 10px;
    border-bottom: 1px solid transparent;
  }

  .se-header .navbar { padding-block: 12px; }

  .se-brand__logo { width: 52px; height: 52px; }

  /* El hero deja de partirse en dos columnas: la foto pasa a fondo completo */
  .se-hero { min-height: 0; }
  .se-hero__media { inset: 0; opacity: .32; }
  .se-hero__veil {
    background: linear-gradient(180deg,
                rgba(20, 17, 12, .92) 0%,
                rgba(20, 17, 12, .82) 60%,
                rgba(20, 17, 12, .95) 100%);
  }
  .se-hero__inner { padding-block: 76px; }
  .se-hero__title { font-size: 3.25rem; }

  .se-cta .se-container { padding-block: 72px; }
  .se-cta__title { font-size: 2.375rem; }

  .se-framed::before { right: 22px; bottom: 22px; }
}

@media (max-width: 767.98px) {
  .se-topbar { font-size: .656rem; letter-spacing: .14em; }
  .se-topbar .se-container { justify-content: center; text-align: center; }
  .se-topbar__note { display: none; }

  .se-hero__title { font-size: 2.75rem; }
  .se-hero__text { font-size: 1rem; }

  .se-pagehead__title,
  .se-pagehead__title--lg { font-size: 2.25rem; }

  .se-cta__title { font-size: 2rem; }

  .se-stats { gap: 24px; }
  .se-stats__divider { display: none; }

  .se-tabs { gap: 24px; margin-top: 32px; }

  .se-btn { display: block; width: 100%; }
  .se-btn--sm, .se-topbar .se-btn { width: auto; display: inline-block; }

  .se-clamp, .se-clamp-sm { min-height: 0; }
}

@media (max-width: 575.98px) {
  .se-container { padding-inline: 20px; }
  .se-framed::before { display: none; }
}


/* 12. Accesibilidad y preferencias del usuario
   ========================================================================== */

/* Foco visible y coherente en toda la interfaz */
a:focus-visible,
button:focus-visible,
.se-btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--se-gold);
  outline-offset: 3px;
  border-radius: var(--se-radius-sm);
}

/* Salto al contenido para navegación por teclado */
.se-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 12px 20px;
  background: var(--se-ink);
  color: var(--se-gold-pale);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.se-skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--se-gold-pale);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .se-whatsapp:hover { transform: none; }
}

@media print {
  .se-topbar,
  .se-header,
  .se-whatsapp,
  .se-cta { display: none !important; }

  body { color: #000; }
}

/* ==========================================================================
   13. Catálogo administrable (Servicios y Suplementos desde el ERP)
   ========================================================================== */

/* Barra de progreso de Turbo al navegar entre páginas. */
.turbo-progress-bar {
  height: 3px;
  background: var(--se-gold);
}

.se-price {
  font-family: var(--se-font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--se-gold);
}

.se-catalog-group + .se-catalog-group { margin-top: 72px; }

.se-includes {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  font-size: .875rem;
  color: var(--se-muted);
}

.se-includes li::before {
  content: '— ';
  color: var(--se-gold);
}

.se-empty {
  text-align: center;
  padding-block: 48px;
  color: var(--se-muted);
}

.se-testimonials {
  max-width: 800px;
  margin-inline: auto;
}

.se-testimonials .accordion-item { border: 1px solid #D4C4B8; }
.se-testimonials .accordion-item + .accordion-item { border-top: none; }

.se-testimonials .accordion-button {
  font-family: var(--se-font-sans);
  font-weight: 500;
  color: var(--se-ink);
}

.se-testimonials .accordion-body {
  font-family: var(--se-font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #4A4340;
}

/* ==========================================================================
   14. Tienda online (carrito, checkout, cuenta y seguimiento)
   ========================================================================== */

.se-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.se-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--se-ink);
  text-decoration: none;
}

.se-cart-link:hover,
.se-cart-link:focus-visible { color: var(--se-gold); }

.se-cart-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--se-gold);
  color: #fff;
  font-size: .7rem;
  letter-spacing: 0;
}

.se-dropdown {
  border-radius: 0;
  border: 1px solid var(--se-line);
  padding: 8px 0;
}

.se-dropdown .dropdown-item {
  font-size: .8rem;
  letter-spacing: .08em;
  padding: 8px 20px;
}

.se-dropdown .dropdown-item:active { background: var(--se-gold); }

.se-alert {
  padding: 14px 18px;
  border-left: 3px solid;
  font-size: .9rem;
}

.se-alert--success { background: #F3F7EF; border-color: #6E8B3D; color: #3F5222; }
.se-alert--error   { background: #FBF0EE; border-color: #B4533C; color: #7A2E1D; }
.se-alert--warning { background: #FBF6EA; border-color: var(--se-gold); color: #6B5320; }

.se-panel {
  background: #fff;
  border: 1px solid var(--se-line);
  padding: 28px;
}

.se-auth {
  max-width: 560px;
  margin-inline: auto;
}

.se-sticky { position: sticky; top: 24px; }

.se-muted-note {
  font-size: .82rem;
  color: var(--se-muted);
}

.se-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--se-muted);
}

.se-field .form-control,
.se-qty {
  border-radius: 0;
  border-color: var(--se-line);
  padding: 10px 14px;
}

.se-field .form-control:focus,
.se-qty:focus {
  border-color: var(--se-gold);
  box-shadow: 0 0 0 .2rem rgba(176, 141, 75, .18);
}

.se-qty { width: 76px; padding: 6px 10px; }

.se-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--se-line);
  cursor: pointer;
}

.se-option:has(input:checked) {
  border-color: var(--se-gold);
  background: var(--se-cream);
}

.se-option .form-check-input:checked {
  background-color: var(--se-gold);
  border-color: var(--se-gold);
}

.se-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
  font-size: .92rem;
}

.se-summary-row--divider {
  border-top: 1px solid var(--se-line);
  margin-top: 8px;
  padding-top: 14px;
}

.se-summary-row--total {
  border-top: 1px solid var(--se-line);
  margin-top: 8px;
  padding-top: 14px;
  font-weight: 600;
  font-size: 1.08rem;
}

.se-table-wrap { overflow-x: auto; }

.se-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.se-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--se-line);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--se-muted);
  white-space: nowrap;
}

.se-table td {
  padding: 14px 8px;
  border-bottom: 1px solid var(--se-line);
  vertical-align: middle;
}

.se-thumb {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--se-grad-cream);
}

.se-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--se-line);
  background: #fff;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--se-muted);
}

.se-icon-btn:hover { color: #B4533C; border-color: #B4533C; }

.se-status {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--se-line);
  background: var(--se-cream);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--se-ink);
  white-space: nowrap;
}

.se-status--paid,
.se-status--preparing        { background: #EEF3F8; border-color: #C9D7E4; color: #2F4F6B; }
.se-status--shipped,
.se-status--ready_for_pickup { background: #F6F0E3; border-color: #E4D3AE; color: #7A5A1E; }
.se-status--delivered        { background: #F3F7EF; border-color: #CFDDBB; color: #3F5222; }
.se-status--payment_failed   { background: #FBF0EE; border-color: #EBC7BD; color: #7A2E1D; }
.se-status--cancelled        { background: #F2F2F2; border-color: #DDD; color: #666; }

.se-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.se-steps li {
  position: relative;
  padding-top: 36px;
  font-size: .8rem;
  text-align: center;
  color: var(--se-muted);
}

.se-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--se-line);
  border-radius: 50%;
  background: #fff;
  font-size: .75rem;
}

.se-steps li.is-done { color: var(--se-ink); }

.se-steps li.is-done::before {
  content: '✓';
  background: var(--se-gold);
  border-color: var(--se-gold);
  color: #fff;
}

.se-steps li.is-current { font-weight: 600; }

.se-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.se-history li {
  position: relative;
  padding: 0 0 18px 20px;
  border-left: 1px solid var(--se-line);
}

.se-history li:last-child { padding-bottom: 0; }

.se-history li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--se-gold);
}

@media (max-width: 575.98px) {
  .se-panel { padding: 20px; }
  .se-steps { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

/* ==========================================================================
   15. Acceso: Google y código de verificación
   ========================================================================== */

.se-btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--se-line);
  color: var(--se-ink);
}

.se-btn--google:hover,
.se-btn--google:focus-visible {
  border-color: var(--se-gold);
  color: var(--se-ink);
}

.se-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--se-muted);
}

.se-divider::before,
.se-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--se-line);
}

.se-code-input {
  max-width: 260px;
  margin-inline: auto;
  border-radius: 0;
  border-color: var(--se-line);
  padding: 14px;
  font-size: 1.75rem;
  letter-spacing: .5em;
  text-align: center;
}

.se-code-input:focus {
  border-color: var(--se-gold);
  box-shadow: 0 0 0 .2rem rgba(176, 141, 75, .18);
}

/* Menú de la cuenta del cliente en la cabecera. */
.se-account-toggle { cursor: pointer; }

.se-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.se-dropdown .dropdown-item-text { padding: 6px 20px; }

/* ==========================================================================
   16. Ajuste tipográfico (una sola familia)
   ========================================================================== */

.se-serif,
.se-hero__title,
.se-pagehead__title,
.se-pagehead__title--lg,
.se-cta__title,
.se-tile__title,
.se-card__title,
.se-price {
  font-weight: 300;
  letter-spacing: -.015em;
}

.se-hero__title,
.se-pagehead__title,
.se-pagehead__title--lg,
.se-cta__title {
  line-height: 1.08;
}

.se-tile__title,
.se-card__title,
.se-price {
  font-weight: 500;
  letter-spacing: -.005em;
}

/* Las cursivas decorativas pierden sentido sin la serif. */
.se-hero__title em,
.se-pagehead__title em,
.se-cta__title em,
.se-serif em {
  font-style: normal;
}

/* ==========================================================================
   17. Responsive complementario
   ========================================================================== */

/* Títulos con tamaño propio (style="--fs: 2.875rem"): se escalan con el ancho
   de la pantalla, desde el 72 % en celulares hasta su tamaño de escritorio. */
[style*="--fs"] {
  font-size: clamp(calc(var(--fs) * .72), calc(var(--fs) * .5 + 1.8vw), var(--fs));
}

/* El resumen del checkout solo se queda fijo al lado del formulario en
   escritorio; apilado en móvil debe desplazarse con el resto. */
@media (max-width: 991.98px) {
  .se-sticky { position: static; }
}

/* Carrito y Mis pedidos: en celulares cada fila pasa a ser una ficha, con la
   etiqueta de cada dato a la izquierda (data-label). */
@media (max-width: 575.98px) {
  .se-table--stack thead { display: none; }

  .se-table--stack tr {
    display: block;
    padding-block: 14px;
    border-bottom: 1px solid var(--se-line);
  }

  .se-table--stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .se-table--stack td[data-label]::before {
    content: attr(data-label);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--se-muted);
    text-align: left;
  }

  .se-table--stack td:first-child {
    display: block;
    padding-bottom: 8px;
    text-align: left;
  }

  .se-table--stack .se-table__action {
    justify-content: flex-end;
    padding-top: 8px;
  }

  .se-panel.se-table-wrap { padding-block: 8px; }
}

/* ==========================================================================
   18. Menú móvil
   ========================================================================== */

/* Por debajo de lg el header es: [marca] [carrito] [hamburguesa] en una fila,
   y el menú desplegado ocupa una segunda fila completa. Sin flex-wrap, el
   menú abierto se metía en la misma fila y quedaba fuera de la pantalla. */
@media (max-width: 991.98px) {
  .se-header .navbar > .se-container {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .se-header .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    order: 10;
    border-top: 1px solid var(--se-line);
    margin-top: 14px;
    padding-bottom: 8px;
  }

  .se-nav .nav-link {
    display: block;
    padding: 14px 0;
    font-size: .875rem;
    border-bottom: 1px solid var(--se-line);
  }

  .se-nav .nav-item:last-child .nav-link { border-bottom: 0; }

  /* El submenú de Productos se despliega en línea, no flotando. */
  .se-nav .dropdown-menu {
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
    background: transparent;
  }

  .se-nav .dropdown-item { padding: 8px 0; }

  .se-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 14px;
    margin-top: 0 !important;
  }

  .se-header__actions .se-cart-link { padding: 4px 0; }

  .se-header__actions .se-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .se-header__actions .dropdown .dropdown-menu {
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px;
  }
}

/* El bloque de productos usaba g-5 (márgenes de -24 px) dentro de un
   contenedor con 20 px de relleno: desbordaba 4 px por lado en móvil. */
@media (max-width: 575.98px) {
  .row.g-5 {
    --bs-gutter-x: 2.5rem;
  }
}

/* Botón flotante de WhatsApp en celulares: círculo algo más chico, más pegado
   al borde y por encima de la barra inferior del iPhone (safe area). */
@media (max-width: 767.98px) {
  .se-whatsapp {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
  }

  .se-whatsapp svg {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   19. Aviso del carrito (agregar sin recargar la página)
   ========================================================================== */

.se-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  background: var(--se-ink);
  color: #fff;
  font-size: .875rem;
  box-shadow: 0 12px 32px rgba(20, 17, 12, .28);
  transform: translate(-50%, 24px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}

.se-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.se-toast--error { background: #7A2E1D; }

.se-toast a {
  flex: none;
  color: var(--se-gold-light);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.se-btn.is-busy {
  opacity: .7;
  pointer-events: none;
}

/* ==========================================================================
   20. Redes sociales del pie (se arman con lo que cargue el administrador)
   ========================================================================== */

.se-social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.se-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: inherit;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.se-social a:hover,
.se-social a:focus-visible {
  border-color: var(--se-gold);
  background: rgba(255, 255, 255, .06);
  color: var(--se-gold-light);
}