/* =============================================
 * ESTILOS GLOBALES — style.css
 * =============================================
 * Archivo:      public/css/style.css
 * Descripción:  Hoja de estilos principal del sitio público de Stetik Lab Academy. Incluye el modal del newsletter, estilos de la topbar, navbar, hero/carrusel, sección de categorías, catálogo de productos, carrito, checkout, página de contacto y footer.
 * Secciones:    Modal newsletter, Topbar, Navbar, Hero/Carrusel, Categorías, Catálogo, Carrito, Checkout, Contacto, Nosotros, Footer
 * Autor:        Stetik Lab Academy
 * =============================================
 */
/* MODAL NEWSLETTER - NB                    */
/* ======================================== */
.nb-nl-dialog {
  max-width: 440px;
}
.nb-nl-content {
  border-radius: 18px;
  overflow: hidden;
  border: none;
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(41,39,36,0.22);
}
/* Encabezado claro: foto del spa muy suavizada en marfil, logo dorado
   al centro y una línea dorada fina como remate. */
.nb-nl-header {
  background:
    linear-gradient(180deg, rgba(245,241,234,0.88) 0%, rgba(245,241,234,0.94) 100%),
    url('../img/foto_modal.webp') no-repeat center 40% / cover;
  padding: 1.6rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #E4E0D8;
}
.nb-nl-header::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 64px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #C29A59;
}
.nb-nl-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(41,39,36,0.06);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #292724;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
/* La regla de áreas táctiles (más abajo) pone position:relative a este
   botón y lo mandaba al centro, encima del logo. */
.nb-nl-header .nb-nl-close-btn {
  position: absolute;
}
.nb-nl-close-btn:hover,
.nb-nl-close-btn:focus-visible {
  background: rgba(41,39,36,0.12);
  color: #1C1A18;
}
.nb-nl-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(41,39,36,0.18));
}
/* Cuerpo con la foto del spa de fondo, aclarada con un velo blanco
   para que el texto se lea bien sin perder la imagen. */
.nb-nl-body {
  padding: 1.9rem 2rem 1.6rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.40) 100%),
    url('../img/foto_modal.webp') no-repeat center center / cover;
  position: relative;
}
/* Halo blanco suave detrás del texto para que se lea sobre la foto */
.nb-nl-title,
.nb-nl-email-line,
.nb-nl-desc,
.nb-nl-unsub-note {
  text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.9);
}
.nb-nl-check {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: #F4ECDF;
  border: 1px solid rgba(194,154,89,0.35);
  color: #86662F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.nb-nl-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  color: #292724;
}
.nb-nl-email-line {
  font-size: 0.9rem;
  color: #6B655D;
  margin-bottom: 1rem;
}
.nb-nl-email-span {
  font-weight: 600;
  color: #86662F;
  word-break: break-all;
}
.nb-nl-desc {
  font-size: 0.93rem;
  line-height: 1.6;
  color: #4A4540;
  margin-bottom: 1.2rem;
}
.nb-nl-benefits {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.nb-nl-benefit {
  background: #F5F1EA;
  border: 1px solid #E4E0D8;
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #292724;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nb-nl-benefit i {
  color: #86662F;
}
.nb-nl-cta-btn {
  display: block;
  width: 100%;
  background: #C29A59;
  color: #292724;
  border: none;
  border-radius: 50px;
  padding: 0.75rem 2rem;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  margin-bottom: 0.85rem;
}
.nb-nl-cta-btn:hover,
.nb-nl-cta-btn:focus-visible {
  background: #A9834A;
  color: #292724;
  transform: translateY(-1px);
}
.nb-nl-unsub-note {
  font-size: 0.76rem;
  color: #6B655D;
  margin-bottom: 0;
}

/* Subtítulo del formulario de contacto */
.contact-form-card .contact-form-subtitle {
  color: #111 !important;
  font-size: .95rem;
}
/* Título de la sección de dudas y sugerencias en contacto */
.contact-section-title {
  color: #7b3f00 !important;
  font-weight: 700;
}
/* ======================================== */
/* JUMBOTRON CONTACTO - HERO SECTION        */
/* ======================================== */
.contact-hero-jumbotron {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero-title {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* ======================================== */
/* AJUSTES PARA IMÁGENES DE FONDO DEL CAROUSEL */
/* ======================================== */
/* Adaptación para Bootstrap 5 fade: la imagen debe ser block y ocupar el contenedor, no absolute */
/* Ajuste para imágenes de fondo del carousel */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ======================================== */
/* BOOTSTRAP THEMING */
/* ======================================== */
/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
/* ======================================== */
/* VARIABLES CSS PERSONALIZADAS */
/* ======================================== */
/* Definición de colores personalizados para el tema de Stetik Lab Academy */
:root {
  /* Colores estándar de Bootstrap */
  --blue: #007bff;
  --indigo: #6610f2;
    --superior-bg: #4A4540;
    --superior-text: #F5F1EA;
    --verde-marca: #292724;       /* Antes verde de marca; ahora carbón suave (paleta 2026) */
    --verde-marca-oscuro: #1C1A18; /* Hover del carbón */
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --icon-hover: #1C1A18;
}

/* ========================================
   PALETA DE MARCA 2026 — fuente única de verdad
   60% marfil / blanco piedra · 30% gris cálido / carbón · 10% dorado
   ======================================== */
:root {
  --marfil: #F5F1EA;          /* Fondos principales */
  --blanco-piedra: #E4E0D8;   /* Fondos alternos, tarjetas */
  --gris-calido: #B8B2AA;     /* Solo bordes y separadores (no texto) */
  --gris-texto: #6B655D;      /* Texto secundario sobre claro */
  --carbon: #292724;          /* Texto principal, fondos oscuros */
  --carbon-hover: #1C1A18;
  --dorado: #C29A59;          /* Acento: fondos, iconos, líneas, títulos grandes */
  --dorado-hover: #A9834A;
  --dorado-texto: #86662F;    /* Dorado legible para links/texto sobre claro */
  --dorado-texto-hover: #6F5325;
  --dorado-tinte: #F4ECDF;    /* Fondo suave de realce */
  --fondo-oscuro: #4A4540;    /* Carbón cálido: fondos de secciones, banners, footer y barra superior */
  --fondo-oscuro-hover: #3A3632;
  --footer-bg: var(--fondo-oscuro);

  /* Estados (apagados, a juego con la paleta) */
  --estado-exito: #4F7A5A;
  --estado-aviso: #B07D2B;
  --estado-error: #A2463B;
  --estado-info: #4F6B7A;

  /* Alias de tema (antes estaban dentro de .bi:hover y no aplicaban globalmente) */
  --primary: #C29A59;
  --secondary: #292724;
  --light: #F4ECDF;
  --dark: #292724;
}

/* Hover para iconos Bootstrap y botones de icono */
.bi:hover,
.btn-icon:hover,
.icon:hover {
  color: var(--icon-hover) !important;
  background-color: transparent !important;

  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  
  /* Colores personalizados del tema */
  --primary: #C29A59;      /* Color principal - dorado */
  --secondary: #292724;    /* Color secundario - carbón */
  --success: #28a745;      /* Color de éxito - verde */
  --info: #17a2b8;         /* Color informativo - azul */
  --warning: #ffc107;      /* Color de advertencia - amarillo */
  --danger: #dc3545;       /* Color de peligro - rojo */
  --light: #F4ECDF;        /* Color claro - tinte dorado */
  --dark: #292724;         /* Color oscuro - negro suave */
  --bg-cream: #ffffff;     /* Fondo blanco del proyecto */
  
  /* Breakpoints para responsive design */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* Tipografías */
  --font-family-sans-serif: 'Inter', sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ======================================== */
/* BARRA SUPERIOR REDISEÑADA               */
/* ======================================== */
.nb-topbar {
    background: var(--footer-bg); /* mismo carbón cálido del footer */
    border-bottom: 1px solid rgba(245,241,234,.15);
    position: relative;
    z-index: 101;
}
.nb-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.nb-topbar-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.nb-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: #F5F1EA;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
    letter-spacing: .01em;
}
.nb-topbar-item i { color: #F5F1EA; font-size: .75rem; }
.nb-topbar-item:hover { color: #fff; }
.nb-topbar-sep {
    width: 1px; height: 12px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
.nb-topbar-right {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-shrink: 0;
}
.nb-topbar-follow {
    font-size: .68rem;
    color: rgba(245,241,234,.93);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-right: .5rem;
    font-style: italic;
}
.nb-topbar-social {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: #F5F1EA;
    text-decoration: none;
    font-size: .82rem;
    transition: background .18s, color .18s;
}
.nb-topbar-social:hover {
    background: rgba(245,241,234,.2);
    color: #fff;
}
@media (max-width: 575px) {
    .nb-topbar-item span { display: none; }
    .nb-topbar-follow    { display: none; }
    .nb-topbar-item i    { font-size: .9rem; }
    .nb-topbar-inner     { justify-content: space-between; }
}

/* ======================================== */
/* ICONOS DE ACCIÓN NAVBAR */
/* ======================================== */
.nb-nav-actions .nb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fondo-oscuro);
  color: #fff !important;
  font-size: 1.15rem;
  transition: background .25s, color .25s, transform .2s;
  text-decoration: none;
  position: relative;
}
.nb-nav-actions .nb-icon-btn:hover {
  background: #3A3632;
  color: #fff !important;
  transform: scale(1.1);
}
.nb-nav-actions .nb-icon-btn:hover .bi {
  color: #fff !important;
}
.nb-nav-actions .nb-icon-btn.nb-admin-active {
  background: var(--fondo-oscuro);
  border: none;
  color: #fff !important;
}
.nb-nav-actions .nb-icon-btn.nb-admin-active:hover {
  background: #3A3632;
  color: #fff !important;
  transform: scale(1.1);
}
.nb-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #C29A59;
  color: #292724;
  font-size: .6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.nb-admin-dropdown .dropdown-menu {
  min-width: 200px;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border-radius: 10px;
  padding: .5rem 0;
}
/* Ocultar la flecha caret del dropdown para que el icono sea igual al del carrito */
.nb-admin-dropdown .nb-icon-btn.dropdown-toggle::after {
  display: none !important;
}
.nb-admin-dropdown .dropdown-menu .dropdown-item {
  font-size: .875rem;
  padding: .55rem 1.25rem;
  color: #1C1A18;
}
.nb-admin-dropdown .dropdown-menu .dropdown-item:hover {
  background: #F5F1EA;
  color: #1C1A18;
}
.nb-admin-dropdown .dropdown-menu .dropdown-item i {
  color: #86662F;
}
.nb-admin-dropdown .dropdown-menu .dropdown-divider {
  margin: .35rem 0;
}
/* Móvil: ver "BARRA DE NAVEGACIÓN EN MÓVIL" al final del archivo */

/* ======================================== */
/* BARRA DE NAVEGACIÓN - contenedor y logo   */
/* ======================================== */
.nb-nav-wrap { position: relative; z-index: 100; }
.nb-navbar-transparent { background: transparent !important; }
.nb-nav-logo {
    max-width: 180px;
    width: 100%;
    height: auto;
    /* Logo en su dorado original (sin filtro que lo vuelva blanco) */
}
.nb-btn-agendar,
a.nb-btn-agendar,
a.btn.nb-btn-agendar {
    background: #C29A59 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: .45rem 1.4rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    color: #292724 !important;
    letter-spacing: .02em;
    box-shadow: none !important;
    transition: transform .22s, background .22s !important;
    position: relative;
    overflow: hidden;
}
a.nb-btn-agendar::after,
a.btn.nb-btn-agendar::after {
    display: none;
}
.nb-btn-agendar:hover,
a.nb-btn-agendar:hover,
a.btn.nb-btn-agendar:hover {
    background: #A9834A !important;
    transform: translateY(-2px);
    box-shadow: none !important;
    color: #292724 !important;
}
.nb-admin-name { font-size: .85rem; color: #2d2845; }
.nb-admin-role { font-size: .75rem; }

/* ======================================== */
/* HERO - video de fondo (carrusel.php)      */
/* ======================================== */
.nb-hero-video-wrap {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 90vh;
    overflow: hidden; z-index: 0;
    background: #1d1a17 url(../img/hero-poster.webp) center/cover no-repeat; /* se ve ya, antes del video */
}
.nb-hero-video { object-fit: cover; top: 0; left: 0; z-index: 0; }
.nb-hero-overlay {
    top: 0; left: 0; z-index: 1;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
}
.nb-hero-content-wrap { z-index: 2; top: 0; left: 0; }
.nb-hero-content-inner { max-width: 800px; }
.nb-hero-eyebrow {
    letter-spacing: 3px; font-size: 1.3rem;
    /* Playfair italica en lugar de una cursiva que nunca se cargaba y
       caia en Comic Sans (Windows) o Snell Roundhand (iOS). */
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic; font-weight: 400; text-transform: none;
}
.nb-hero-title { font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
.nb-hero-desc { font-size: 1.1rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.6); line-height: 1.7; }

/* ======================================== */
/* RESET CSS Y ESTILOS BASE */
/* ======================================== */
/* Aplicar box-sizing border-box a todos los elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Estilos base del elemento HTML */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Configurar elementos semánticos como bloques */
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/* Estilos base del cuerpo de la página */
body {
  background-color: #F5F1EA !important;
  margin: 0;
  font-family: 'Inter', sans-serif;  /* Fuente principal del sitio */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #6f6f6f;                       /* Color de texto principal */
  text-align: left;
}

/* ======================================== */
/* ACCESIBILIDAD Y ELEMENTOS BÁSICOS */
/* ======================================== */
/* Ocultar outline para elementos con tabindex -1 que no están enfocados */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

/* Estilos para la línea horizontal */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/* ======================================== */
/* ENCABEZADOS Y TIPOGRAFÍA */
/* ======================================== */
/* Estilos para todos los niveles de encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #86662F;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #f56649;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;

}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 12px;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
  appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
  appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #292724;
}

h1,
.h1 {
  font-size: 2.5rem;
}

@media (max-width: 1200px) {

  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
}

h2,
.h2 {
  font-size: 2rem;
}

@media (max-width: 1200px) {

  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
}

h3,
.h3 {
  font-size: 1.75rem;
}

@media (max-width: 1200px) {

  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
}

h4,
.h4 {
  font-size: 1.5rem;
}

@media (max-width: 1200px) {

  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "\2014\00A0";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a>code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* ======================================== */
/* MEDIA QUERIES PARA RESPONSIVE DESIGN */
/* ======================================== */
/* Breakpoint para dispositivos pequeños (tablets pequeñas) */
@media (min-width: 576px) {

  .container,
  .container-sm {
    max-width: 540px;                      /* Ancho máximo para pantallas pequeñas */
  }
}

/* Breakpoint para dispositivos medianos (tablets) */
@media (min-width: 768px) {

  .container,
  .container-sm,
  .container-md {
    max-width: 720px;                      /* Ancho máximo para pantallas medianas */
  }
}

/* Breakpoint para dispositivos grandes (desktop) */
@media (min-width: 992px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 960px;                      /* Ancho máximo para pantallas grandes */
  }
}

/* Breakpoint para dispositivos extra grandes (desktop amplio) */
@media (min-width: 1200px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1140px;                     /* Ancho máximo para pantallas extra grandes */
  }
}

/* ======================================== */
/* FILAS DEL GRID */
/* ======================================== */
/* Contenedor de filas para el sistema de grid */
.row {
  display: flex;                           /* Usar flexbox para layout */
  flex-wrap: wrap;                         /* Permitir wrap de elementos */
  margin-right: -15px;                     /* Margen negativo para compensar padding de columnas */
  margin-left: -15px;                      /* Margen negativo para compensar padding de columnas */
}

/* ======================================== */
/* SIN GUTTERS (ESPACIADO) */
/* ======================================== */
/* Clase para eliminar el espaciado entre columnas */
.no-gutters {
  margin-right: 0;                         /* Sin margen derecho */
  margin-left: 0;                          /* Sin margen izquierdo */
}

/* Eliminar padding de todas las columnas cuando no hay gutters */
.no-gutters>.col,
.no-gutters>[class*="col-"] {
  padding-right: 0;                        /* Sin padding derecho */
  padding-left: 0;                         /* Sin padding izquierdo */
}

/* ======================================== */
/* SISTEMA DE GRID BOOTSTRAP */
/* ======================================== */
/* Definición de todas las clases de columnas del sistema de grid */
/* Incluye columnas para todos los breakpoints: xs, sm, md, lg, xl */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;                      /* Posicionamiento relativo */
  width: 100%;                            /* Ancho completo por defecto */
  padding-right: 15px;                    /* Padding derecho */
  padding-left: 15px;                     /* Padding izquierdo */
}

/* ======================================== */
/* COLUMNA BASE */
/* ======================================== */
/* Clase de columna flexible que se adapta al contenido */
.col {
  flex-basis: 0;                          /* Tamaño base flexible */
  flex-grow: 1;                           /* Crecimiento flexible */
  max-width: 100%;                        /* Ancho máximo */
}

.row-cols-1>* {
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2>* {
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3>* {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.row-cols-4>* {
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5>* {
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6>* {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.33333%;
}

.offset-2 {
  margin-left: 16.66667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333%;
}

.offset-5 {
  margin-left: 41.66667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333%;
}

.offset-8 {
  margin-left: 66.66667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333%;
}

.offset-11 {
  margin-left: 91.66667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-sm-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-sm-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-sm-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-sm-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-sm-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-sm-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-sm-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-sm-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-sm-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-sm-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.33333%;
  }

  .offset-sm-2 {
    margin-left: 16.66667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.33333%;
  }

  .offset-sm-5 {
    margin-left: 41.66667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.33333%;
  }

  .offset-sm-8 {
    margin-left: 66.66667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.33333%;
  }

  .offset-sm-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-md-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-md-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-md-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-md-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-md-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-md-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.33333%;
  }

  .offset-md-2 {
    margin-left: 16.66667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.33333%;
  }

  .offset-md-5 {
    margin-left: 41.66667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.33333%;
  }

  .offset-md-8 {
    margin-left: 66.66667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.33333%;
  }

  .offset-md-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-lg-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-lg-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-lg-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-lg-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-lg-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-lg-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.33333%;
  }

  .offset-lg-2 {
    margin-left: 16.66667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.33333%;
  }

  .offset-lg-5 {
    margin-left: 41.66667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.33333%;
  }

  .offset-lg-8 {
    margin-left: 66.66667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.33333%;
  }

  .offset-lg-11 {
    margin-left: 91.66667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-xl-1>* {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-xl-2>* {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-xl-3>* {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .row-cols-xl-4>* {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-xl-5>* {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-xl-6>* {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .col-xl-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .col-xl-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .col-xl-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .col-xl-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.33333%;
  }

  .offset-xl-2 {
    margin-left: 16.66667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.33333%;
  }

  .offset-xl-5 {
    margin-left: 41.66667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.33333%;
  }

  .offset-xl-8 {
    margin-left: 66.66667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.33333%;
  }

  .offset-xl-11 {
    margin-left: 91.66667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #6f6f6f;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody+tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody+tbody {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #6f6f6f;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary>th,
.table-primary>td {
  background-color: #F4ECDF;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody+tbody {
  border-color: #E4E0D8;
}

.table-hover .table-primary:hover {
  background-color: #E4E0D8;
}

.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
  background-color: #E4E0D8;
}

.table-secondary,
.table-secondary>th,
.table-secondary>td {
  background-color: #d6ecfc;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody+tbody {
  border-color: #b4dcfa;
}

.table-hover .table-secondary:hover {
  background-color: #bee1fa;
}

.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
  background-color: #bee1fa;
}

.table-success,
.table-success>th,
.table-success>td {
  background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody+tbody {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover>td,
.table-hover .table-success:hover>th {
  background-color: #b1dfbb;
}

.table-info,
.table-info>th,
.table-info>td {
  background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody+tbody {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th {
  background-color: #abdde5;
}

.table-warning,
.table-warning>th,
.table-warning>td {
  background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody+tbody {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger>th,
.table-danger>td {
  background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody+tbody {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover>td,
.table-hover .table-danger:hover>th {
  background-color: #f1b0b7;
}

.table-light,
.table-light>th,
.table-light>td {
  background-color: #fffbfb;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody+tbody {
  border-color: #F5F1EA;
}

.table-hover .table-light:hover {
  background-color: #ffe2e2;
}

.table-hover .table-light:hover>td,
.table-hover .table-light:hover>th {
  background-color: #ffe2e2;
}

.table-dark,
.table-dark>th,
.table-dark>td {
  background-color: #c1c0bf;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody+tbody {
  border-color: #8c8a89;
}

.table-hover .table-dark:hover {
  background-color: #b4b3b2;
}

.table-hover .table-dark:hover>td,
.table-hover .table-dark:hover>th {
  background-color: #b4b3b2;
}

.table-active,
.table-active>th,
.table-active>td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover>td,
.table-hover .table-active:hover>th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-sm>.table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-md>.table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-lg>.table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-xl>.table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive>.table-bordered {
  border: 0;
}

/* ======================================== */
/* SISTEMA DE FORMULARIOS */
/* ======================================== */
/* Estilos base para todos los campos de formulario */
.form-control {
  display: block;                          /* Mostrar como bloque */
  width: 100%;                             /* Ancho completo */
  height: calc(1.5em + 0.75rem + 2px);    /* Altura calculada */
  padding: 0.375rem 0.75rem;               /* Espaciado interno */
  font-size: 1rem;                         /* Tamaño de fuente */
  font-weight: 400;                        /* Peso de fuente normal */
  line-height: 1.5;                        /* Altura de línea */
  color: #495057;                          /* Color de texto */
  background-color: #fff;                  /* Fondo blanco */
  background-clip: padding-box;            /* Clip del fondo */
  border: 1px solid #ced4da;              /* Borde gris claro */
  border-radius: 12px;                        /* Sin bordes redondeados */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

/* ======================================== */
/* ESTADO DE ENFOQUE DE FORMULARIOS */
/* ======================================== */
/* Estilos cuando el campo de formulario está enfocado */
.form-control:focus {
  color: #495057;                          /* Color de texto */
  background-color: #fff;                  /* Fondo blanco */
  border-color: white;                     /* Borde blanco */
  outline: 0;                              /* Sin outline por defecto */
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25); /* Sombra rosa personalizada */
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  appearance: none;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #6f6f6f;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

select.form-control[size],
select.form-control[multiple] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col,
.form-row>[class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}

.form-check-input[disabled]~.form-check-label,
.form-check-input:disabled~.form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
}

.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip,
.is-valid~.valid-feedback,
.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid,
.custom-select.is-valid {
  border-color: #28a745;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .form-check-input:valid~.form-check-label,
.form-check-input.is-valid~.form-check-label {
  color: #28a745;
}

.was-validated .form-check-input:valid~.valid-feedback,
.was-validated .form-check-input:valid~.valid-tooltip,
.form-check-input.is-valid~.valid-feedback,
.form-check-input.is-valid~.valid-tooltip {
  display: block;
}

.was-validated .custom-control-input:valid~.custom-control-label,
.custom-control-input.is-valid~.custom-control-label {
  color: #28a745;
}

.was-validated .custom-control-input:valid~.custom-control-label::before,
.custom-control-input.is-valid~.custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-control-input:valid:checked~.custom-control-label::before,
.custom-control-input.is-valid:checked~.custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.was-validated .custom-control-input:valid:focus~.custom-control-label::before,
.custom-control-input.is-valid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before,
.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid~.custom-file-label,
.custom-file-input.is-valid~.custom-file-label {
  border-color: #28a745;
}

.was-validated .custom-file-input:valid:focus~.custom-file-label,
.custom-file-input.is-valid:focus~.custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
}

.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip,
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid,
.custom-select.is-invalid {
  border-color: #dc3545;
  padding-right: calc(0.75em + 2.3125rem);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-check-input:invalid~.form-check-label,
.form-check-input.is-invalid~.form-check-label {
  color: #dc3545;
}

.was-validated .form-check-input:invalid~.invalid-feedback,
.was-validated .form-check-input:invalid~.invalid-tooltip,
.form-check-input.is-invalid~.invalid-feedback,
.form-check-input.is-invalid~.invalid-tooltip {
  display: block;
}

.was-validated .custom-control-input:invalid~.custom-control-label,
.custom-control-input.is-invalid~.custom-control-label {
  color: #dc3545;
}

.was-validated .custom-control-input:invalid~.custom-control-label::before,
.custom-control-input.is-invalid~.custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-control-input:invalid:checked~.custom-control-label::before,
.custom-control-input.is-invalid:checked~.custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.was-validated .custom-control-input:invalid:focus~.custom-control-label::before,
.custom-control-input.is-invalid:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid~.custom-file-label,
.custom-file-input.is-invalid~.custom-file-label {
  border-color: #dc3545;
}

.was-validated .custom-file-input:invalid:focus~.custom-file-label,
.custom-file-input.is-invalid:focus~.custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .form-control-plaintext {
    display: inline-block;
  }

  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }

  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }

  .form-inline .form-check-input {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }

  .form-inline .custom-control {
    align-items: center;
    justify-content: center;
  }

  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

/* ======================================== */
/* SISTEMA DE BOTONES */
/* ======================================== */
/* Estilos base para todos los botones */
.btn {
  display: inline-block;                    /* Mostrar como elemento en línea */
  font-weight: 400;                        /* Peso de fuente normal */
  color: #6f6f6f;                          /* Color de texto gris */
  text-align: center;                      /* Centrar texto */
  vertical-align: middle;                  /* Alineación vertical centrada */
  user-select: none;                       /* Prevenir selección de texto */
  background-color: transparent;           /* Fondo transparente por defecto */
  border: 1px solid transparent;           /* Borde transparente */
  padding: 0.375rem 0.75rem;              /* Espaciado interno */
  font-size: 1rem;                         /* Tamaño de fuente */
  line-height: 1.5;                        /* Altura de línea */
  border-radius: 12px;                        /* Sin bordes redondeados */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:hover {
  color: #6f6f6f;
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

/* ======================================== */
/* BOTÓN PRIMARIO */
/* ======================================== */
/* Estilo principal para botones de acción importantes */
.btn-primary {
  color: #212529;                           /* Texto oscuro para contraste */
  background-color: #E4E0D8;               /* Fondo beige claro */
  border-color: #E4E0D8;                   /* Borde del mismo color */
}

.btn-primary:hover {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
}

.btn-primary:focus,
.btn-primary.focus {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
  box-shadow: 0 0 0 0.2rem rgba(217, 144, 130, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(217, 144, 130, 0.5);
}

/* ======================================== */
/* BOTÓN SECUNDARIO */
/* ======================================== */
/* Estilo para botones de acción secundaria */
.btn-secondary {
  color: #212529;                           /* Texto oscuro para contraste */
  background-color: #4A4540;               /* Fondo azul claro */
  border-color: #292724;                   /* Borde del mismo color */
}

.btn-secondary:hover {
  color: #fff;
  background-color: #4aaaf4;
  border-color: #3ea4f3;
}

.btn-secondary:focus,
.btn-secondary.focus {
  color: #fff;
  background-color: #4aaaf4;
  border-color: #3ea4f3;
  box-shadow: 0 0 0 0.2rem rgba(98, 165, 215, 0.5);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #212529;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #3ea4f3;
  border-color: #329ff2;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(98, 165, 215, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus,
.btn-success.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus,
.btn-info.focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus,
.btn-warning.focus {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show>.btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus,
.btn-danger.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show>.btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-light {
  color: #212529;
  background-color: #F4ECDF;
  border-color: #F4ECDF;
}

.btn-light:hover {
  color: #212529;
  background-color: #E4E0D8;
  border-color: #E4E0D8;
}

.btn-light:focus,
.btn-light.focus {
  color: #212529;
  background-color: #E4E0D8;
  border-color: #E4E0D8;
  box-shadow: 0 0 0 0.2rem rgba(221, 210, 209, 0.5);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: #F4ECDF;
  border-color: #F4ECDF;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
  color: #212529;
  background-color: #E4E0D8;
  border-color: #E4E0D8;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(221, 210, 209, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-dark:hover {
  color: #fff;
  background-color: #0c0b0a;
  border-color: #050505;
}

.btn-dark:focus,
.btn-dark.focus {
  color: #fff;
  background-color: #0c0b0a;
  border-color: #050505;
  box-shadow: 0 0 0 0.2rem rgba(66, 64, 62, 0.5);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show>.btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #050505;
  border-color: black;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(66, 64, 62, 0.5);
}

.btn-outline-primary {
  color: #86662F;
  border-color: #C29A59;
}

.btn-outline-primary:hover {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #86662F;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #212529;
  background-color: #C29A59;
  border-color: #C29A59;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.5);
}

.btn-outline-secondary {
  color: #292724;
  border-color: #292724;
}

.btn-outline-secondary:hover {
  color: #212529;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #292724;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
  color: #212529;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show>.btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show>.btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show>.btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-light {
  color: #F4ECDF;
  border-color: #F4ECDF;
}

.btn-outline-light:hover {
  color: #212529;
  background-color: #F4ECDF;
  border-color: #F4ECDF;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(244, 236, 223, 0.5);
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #F4ECDF;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show>.btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #F4ECDF;
  border-color: #F4ECDF;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(244, 236, 223, 0.5);
}

.btn-outline-dark {
  color: #F5F1EA;
  border-color: #292724;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #F5F1EA;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>.btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #4A4540;
  border-color: #292724;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #86662F;
  text-decoration: none;
}

.btn-link:hover {
  color: #f56649;
  text-decoration: underline;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: underline;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 12px;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 12px;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #6f6f6f;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }

  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #292724;
  text-decoration: none;
  background-color: #C29A59;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group>.btn,
.btn-group-vertical>.btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group>.btn:hover,
.btn-group-vertical>.btn:hover {
  z-index: 1;
}

.btn-group>.btn:focus,
.btn-group>.btn:active,
.btn-group>.btn.active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group>.btn:not(:first-child),
.btn-group>.btn-group:not(:first-child) {
  margin-left: -1px;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm+.dropdown-toggle-split,
.btn-group-sm>.btn+.dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg+.dropdown-toggle-split,
.btn-group-lg>.btn+.dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
  width: 100%;
}

.btn-group-vertical>.btn:not(:first-child),
.btn-group-vertical>.btn-group:not(:first-child) {
  margin-top: -1px;
}

.btn-group-toggle>.btn,
.btn-group-toggle>.btn-group>.btn {
  margin-bottom: 0;
}

.btn-group-toggle>.btn input[type="radio"],
.btn-group-toggle>.btn input[type="checkbox"],
.btn-group-toggle>.btn-group>.btn input[type="radio"],
.btn-group-toggle>.btn-group>.btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group>.form-control,
.input-group>.form-control-plaintext,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group>.form-control+.form-control,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.custom-file,
.input-group>.form-control-plaintext+.form-control,
.input-group>.form-control-plaintext+.custom-select,
.input-group>.form-control-plaintext+.custom-file,
.input-group>.custom-select+.form-control,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.custom-file,
.input-group>.custom-file+.form-control,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.custom-file {
  margin-left: -1px;
}

.input-group>.form-control:focus,
.input-group>.custom-select:focus,
.input-group>.custom-file .custom-file-input:focus~.custom-file-label {
  z-index: 3;
}

.input-group>.custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group>.custom-file {
  display: flex;
  align-items: center;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.input-group-text,
.input-group-append .input-group-text+.btn {
  margin-left: -1px;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
}

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

.input-group-lg>.form-control:not(textarea),
.input-group-lg>.custom-select {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg>.form-control,
.input-group-lg>.custom-select,
.input-group-lg>.input-group-prepend>.input-group-text,
.input-group-lg>.input-group-append>.input-group-text,
.input-group-lg>.input-group-prepend>.btn,
.input-group-lg>.input-group-append>.btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.input-group-sm>.form-control:not(textarea),
.input-group-sm>.custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm>.form-control,
.input-group-sm>.custom-select,
.input-group-sm>.input-group-prepend>.input-group-text,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-append>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.input-group-lg>.custom-select,
.input-group-sm>.custom-select {
  padding-right: 1.75rem;
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  /* Use print-color-adjust for modern browsers; keep webkit variant for Safari */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-input:checked~.custom-control-label::before {
  color: #292724;
  border-color: #C29A59;
  background-color: #C29A59;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: white;
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
  color: #fff;
  background-color: white;
  border-color: white;
}

.custom-control-input[disabled]~.custom-control-label,
.custom-control-input:disabled~.custom-control-label {
  color: #6c757d;
}

.custom-control-input[disabled]~.custom-control-label::before,
.custom-control-input:disabled~.custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
  border-color: #C29A59;
  background-color: #C29A59;
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(194, 154, 89, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
  background-color: rgba(194, 154, 89, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(194, 154, 89, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
  background-color: rgba(194, 154, 89, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  border: 1px solid #ced4da;
  border-radius: 12px;
  appearance: none;
}

.custom-select:focus {
  border-color: white;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}

.custom-file-input:focus~.custom-file-label {
  border-color: white;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-file-input[disabled]~.custom-file-label,
.custom-file-input:disabled~.custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en)~.custom-file-label::after {
  content: "Browse";
}

.custom-file-input~.custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}

.custom-range:focus {
  outline: none;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #C29A59;
  border: 0;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: white;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #C29A59;
  border: 0;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: white;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #C29A59;
  border: 0;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: white;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
}

.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {

  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #292724;
  background-color: #C29A59;
}

.nav-fill>.nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified>.nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

.tab-content>.active {
  display: block;
}

/* ======================================== */
/* SISTEMA DE NAVEGACIÓN */
/* ======================================== */
/* Barra de navegación principal del sitio */
.navbar {
  position: relative;                       /* Posicionamiento relativo */
  display: flex;                           /* Usar flexbox para layout */
  flex-wrap: wrap;                         /* Permitir wrap de elementos */
  align-items: center;                     /* Centrar elementos verticalmente */
  justify-content: space-between;          /* Distribuir elementos horizontalmente */
  padding: 0.5rem 1rem;                   /* Espaciado interno */
}

.navbar .container,
.navbar .container-fluid,
.navbar .container-sm,
.navbar .container-md,
.navbar .container-lg,
.navbar .container-xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* ======================================== */
/* MARCA DE NAVEGACIÓN */
/* ======================================== */
/* Logo y nombre de la marca en la barra de navegación */
.navbar-brand {
  display: inline-block;                   /* Mostrar como bloque en línea */
  padding-top: 0.3125rem;                  /* Espaciado superior */
  padding-bottom: 0.3125rem;               /* Espaciado inferior */
  margin-right: 1rem;                      /* Margen derecho */
  font-size: 1.25rem;                      /* Tamaño de fuente */
  line-height: inherit;                    /* Altura de línea heredada */
  white-space: nowrap;                     /* Evitar saltos de línea */
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid,
  .navbar-expand-sm>.container-sm,
  .navbar-expand-sm>.container-md,
  .navbar-expand-sm>.container-lg,
  .navbar-expand-sm>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid,
  .navbar-expand-sm>.container-sm,
  .navbar-expand-sm>.container-md,
  .navbar-expand-sm>.container-lg,
  .navbar-expand-sm>.container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid,
  .navbar-expand-md>.container-sm,
  .navbar-expand-md>.container-md,
  .navbar-expand-md>.container-lg,
  .navbar-expand-md>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid,
  .navbar-expand-md>.container-sm,
  .navbar-expand-md>.container-md,
  .navbar-expand-md>.container-lg,
  .navbar-expand-md>.container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid,
  .navbar-expand-lg>.container-sm,
  .navbar-expand-lg>.container-md,
  .navbar-expand-lg>.container-lg,
  .navbar-expand-lg>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-lg>.container,
  .navbar-expand-lg>.container-fluid,
  .navbar-expand-lg>.container-sm,
  .navbar-expand-lg>.container-md,
  .navbar-expand-lg>.container-lg,
  .navbar-expand-lg>.container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid,
  .navbar-expand-xl>.container-sm,
  .navbar-expand-xl>.container-md,
  .navbar-expand-xl>.container-lg,
  .navbar-expand-xl>.container-xl {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-xl>.container,
  .navbar-expand-xl>.container-fluid,
  .navbar-expand-xl>.container-sm,
  .navbar-expand-xl>.container-md,
  .navbar-expand-xl>.container-lg,
  .navbar-expand-xl>.container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-sm,
.navbar-expand>.container-md,
.navbar-expand>.container-lg,
.navbar-expand>.container-xl {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand .navbar-nav {
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-expand>.container,
.navbar-expand>.container-fluid,
.navbar-expand>.container-sm,
.navbar-expand>.container-md,
.navbar-expand>.container-lg,
.navbar-expand>.container-xl {
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

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

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

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

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card>.list-group:first-child {
  border-top-width: 0;
}

.card>.list-group:last-child {
  border-bottom-width: 0;
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card-title {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link+.card-link {
  margin-left: 1.25rem;
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img,
.card-img-top,
.card-img-bottom {
  flex-shrink: 0;
  width: 100%;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    flex: 1 0 0%;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }

  .card-group>.card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }
}

.card-columns .card {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 3;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion {
  overflow-anchor: none;
}

.accordion>.card {
  overflow: hidden;
}

.accordion>.card:not(:last-of-type) {
  border-bottom: 0;
}

.accordion>.card>.card-header {
  margin-bottom: -1px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.25rem 0;
  margin-bottom: 1rem;
  list-style: none;
  background-color: transparent;
}

.breadcrumb-item {
  display: flex;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #86662F;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  color: #f56649;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25);
}

.page-item:first-child .page-link {
  margin-left: 0;
}

.page-item.active .page-link {
  z-index: 3;
  color: #292724;
  background-color: #C29A59;
  border-color: #C29A59;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:hover,
a.badge:focus {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
}

.badge-primary {
  color: #212529;
  background-color: #C29A59;
}

a.badge-primary:hover,
a.badge-primary:focus {
  color: #212529;
  background-color: #f67a62;
}

a.badge-primary:focus,
a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.5);
}

.badge-secondary {
  color: #212529;
  background-color: #4A4540;
}

a.badge-secondary:hover,
a.badge-secondary:focus {
  color: #212529;
  background-color: #3ea4f3;
}

a.badge-secondary:focus,
a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:hover,
a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}

a.badge-success:focus,
a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

a.badge-info:hover,
a.badge-info:focus {
  color: #fff;
  background-color: #117a8b;
}

a.badge-info:focus,
a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

a.badge-warning:hover,
a.badge-warning:focus {
  color: #212529;
  background-color: #d39e00;
}

a.badge-warning:focus,
a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

a.badge-danger:hover,
a.badge-danger:focus {
  color: #fff;
  background-color: #bd2130;
}

a.badge-danger:focus,
a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #F4ECDF;
}

a.badge-light:hover,
a.badge-light:focus {
  color: #212529;
  background-color: #E4E0D8;
}

a.badge-light:focus,
a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(244, 236, 223, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #4A4540;
}

a.badge-dark:hover,
a.badge-dark:focus {
  color: #fff;
  background-color: #050505;
}

a.badge-dark:focus,
a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(41, 39, 36, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #86662F;
  background-color: #F4ECDF;
  border-color: #F4ECDF;
}

.alert-primary hr {
  border-top-color: #E4E0D8;
}

.alert-primary .alert-link {
  color: #6F5325;
}

.alert-secondary {
  color: #396180;
  background-color: #e2f1fd;
  border-color: #d6ecfc;
}

.alert-secondary hr {
  border-top-color: #bee1fa;
}

.alert-secondary .alert-link {
  color: #29465d;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #6B655D;
  background-color: #fffcfc;
  border-color: #fffbfb;
}

.alert-light hr {
  border-top-color: #ffe2e2;
}

.alert-light .alert-link {
  color: #6B655D;
}

.alert-dark {
  color: #11100f;
  background-color: #d3d2d2;
  border-color: #c1c0bf;
}

.alert-dark hr {
  border-top-color: #b4b3b2;
}

.alert-dark .alert-link {
  color: black;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #e9ecef;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #292724;
  text-align: center;
  white-space: nowrap;
  background-color: #C29A59;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #6f6f6f;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #292724;
  background-color: #C29A59;
  border-color: #C29A59;
}

.list-group-item+.list-group-item {
  border-top-width: 0;
}

.list-group-item+.list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal>.list-group-item.active {
  margin-top: 0;
}

.list-group-horizontal>.list-group-item+.list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}

.list-group-horizontal>.list-group-item+.list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }

  .list-group-horizontal-sm>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-sm>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-sm>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }

  .list-group-horizontal-md>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-md>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-md>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }

  .list-group-horizontal-lg>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-lg>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-lg>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }

  .list-group-horizontal-xl>.list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-xl>.list-group-item+.list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }

  .list-group-horizontal-xl>.list-group-item+.list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}

.list-group-flush>.list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush>.list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  color: #86662F;
  background-color: #F4ECDF;
}

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #86662F;
  background-color: #E4E0D8;
}

.list-group-item-primary.list-group-item-action.active {
  color: #292724;
  background-color: #C29A59;
  border-color: #C29A59;
}

.list-group-item-secondary {
  color: #396180;
  background-color: #d6ecfc;
}

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #396180;
  background-color: #bee1fa;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #396180;
  border-color: #396180;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #6B655D;
  background-color: #fffbfb;
}

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #6B655D;
  background-color: #ffe2e2;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #6B655D;
  border-color: #6B655D;
}

.list-group-item-dark {
  color: #11100f;
  background-color: #c1c0bf;
}

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #11100f;
  background-color: #b4b3b2;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #11100f;
  border-color: #11100f;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

@media (max-width: 1200px) {
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  flex-basis: 350px;
  max-width: 80px;
  margin-bottom: 10px;
  height: auto;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  opacity: 0;
}

.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toast-body {
  padding: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.modal-footer>* {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: min-content;
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {

  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

/* Refuerzo para Bootstrap Icons en caso de cascadas que alteren la fuente */
.bi::before {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  line-height: 1;
}

/* ======================================== */
/* CONTACTO: HERO SOLO ESCRITORIO */
/* ======================================== */
@media (min-width: 992px) {
  .contact-hero {
    padding-top: 10rem;   /* aumenta el alto del hero */
    padding-bottom: 10rem;
    background-size: cover; /* asegurar cobertura completa */
    background-position: center; /* centrado de la imagen */
  }
}

.contact-form-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 10; /* por encima del hero u otras capas */
  color: #212529; /* texto base oscuro en el formulario */
}

@media (min-width: 992px) {
  .contact-form-card {
    border-color: rgba(0, 0, 0, 0.18);
  }
  .contact-form-card:hover {
    border-color: rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s ease;
  }
}

#contactForm .form-control {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: none;
}

.contact-input {
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 10px !important;
  background-color: #f2f4f6 !important;
  box-shadow: none !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.95rem !important;
}

#contactForm .form-control:focus,
#contactForm .contact-input:focus,
#contactForm textarea.form-control:focus,
#contactForm select.form-control:focus,
.contact-form-card .form-select:focus {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.18) !important;
  background-color: #fff !important;
}

/* Texto negro y placeholders legibles dentro del formulario */
.contact-form-card label { color: #212529 !important; }
.contact-form-card .form-control,
.contact-form-card .form-select { color: #212529 !important; }
.contact-form-card .form-control::placeholder { color: rgba(33,37,41,0.65) !important; }
/* Reglas defensivas para cualquier otro texto dentro del formulario */
.contact-form-card .form-label,
.contact-form-card .error,
.contact-form-card span,
.contact-form-card p { color: #212529 !important; }

/* Selects y opciones legibles */
.contact-form-card select,
.contact-form-card .form-select { color: #212529 !important; background-color: #f5f5f5 !important; }
.contact-form-card select option,
.contact-form-card .form-select option { color: #212529 !important; background-color: #fff !important; }
.contact-form-card select option:checked,
.contact-form-card .form-select option:checked { color: #292724 !important; background-color: #C29A59 !important; }
.contact-form-card select option:hover,
.contact-form-card .form-select option:hover { color: #212529 !important; background-color: #E4E0D8 !important; }

/* Foco del control select con color de marca */
.contact-form-card select.form-control:focus,
.contact-form-card .form-select:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
}

/* Compatibilidad con AutoFill (Chrome/Edge) */
.contact-form-card input:-webkit-autofill,
.contact-form-card input:-webkit-autofill:hover,
.contact-form-card input:-webkit-autofill:focus,
.contact-form-card textarea:-webkit-autofill,
.contact-form-card textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #212529;
  -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
  box-shadow: 0 0 0px 1000px #f5f5f5 inset;
}

/* Título oscuro reusable */
.heading-dark { color: #000 !important; }
.contact-form-card h2.heading-dark {
  color: #000 !important;
  margin-top: 0;           /* evita colapsos extraños de margen */
  line-height: 1.25;       /* legibilidad */
}


.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}

.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}

.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}

.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}

.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-top,
.bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}

.bs-popover-top>.arrow,
.bs-popover-auto[x-placement^="top"]>.arrow {
  bottom: calc(-0.5rem - 1px);
}

.bs-popover-top>.arrow::before,
.bs-popover-auto[x-placement^="top"]>.arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-top>.arrow::after,
.bs-popover-auto[x-placement^="top"]>.arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-right,
.bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}

.bs-popover-right>.arrow,
.bs-popover-auto[x-placement^="right"]>.arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-right>.arrow::before,
.bs-popover-auto[x-placement^="right"]>.arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-right>.arrow::after,
.bs-popover-auto[x-placement^="right"]>.arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}

.bs-popover-bottom,
.bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.5rem;
}

.bs-popover-bottom>.arrow,
.bs-popover-auto[x-placement^="bottom"]>.arrow {
  top: calc(-0.5rem - 1px);
}

.bs-popover-bottom>.arrow::before,
.bs-popover-auto[x-placement^="bottom"]>.arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-bottom>.arrow::after,
.bs-popover-auto[x-placement^="bottom"]>.arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-left,
.bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}

.bs-popover-left>.arrow,
.bs-popover-auto[x-placement^="left"]>.arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-left>.arrow::before,
.bs-popover-auto[x-placement^="left"]>.arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-left>.arrow::after,
.bs-popover-auto[x-placement^="left"]>.arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: #292724;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #6f6f6f;
}

/* ======================================== */
/* SISTEMA DE CAROUSEL */
/* ======================================== */
/* Contenedor principal del carousel de imágenes */
.carousel {
  position: relative;                      /* Posicionamiento relativo para elementos hijos */
}

.carousel.pointer-event {
  touch-action: pan-y;
}

/* ======================================== */
/* CONTENEDOR INTERNO DEL CAROUSEL */
/* ======================================== */
/* Área donde se muestran las imágenes del carousel */
.carousel-inner {
  position: relative;                      /* Posicionamiento relativo */
  width: 100%;                            /* Ancho completo del contenedor */
  overflow: hidden;                       /* Ocultar contenido que se desborde */
  background: #000 !important;            /* Fondo negro para las imágenes */
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

/* ======================================== */
/* ELEMENTOS INDIVIDUALES DEL CAROUSEL */
/* ======================================== */
/* Cada imagen o slide individual del carousel */
.carousel-item {
  position: relative;                      /* Posicionamiento relativo */
  display: none;                          /* Oculto por defecto */
  float: left;                            /* Flotar a la izquierda */
  width: 100%;                            /* Ancho completo */
  margin-right: -100%;                    /* Margen negativo para superposición */
  backface-visibility: hidden;            /* Ocultar cara posterior en 3D */
  transition: transform 0.6s ease-in-out; /* Transición suave de transformación */
  background: #000 !important;            /* Fondo negro */
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {

  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}

.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: none;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #C29A59 !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #f67a62 !important;
}

.bg-secondary {
  background-color: #4A4540 !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #3ea4f3 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #E4E0D8 !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #E4E0D8 !important;
}

.bg-dark {
  background-color: #3A3632 !important;
  }

a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #050505 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #C29A59 !important;
}

.border-secondary {
  border-color: #292724 !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #F4ECDF !important;
}

.border-dark {
  border-color: #292724 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }

  .float-sm-right {
    float: right !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }

  .float-md-right {
    float: right !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }

  .float-lg-right {
    float: right !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }

  .float-xl-right {
    float: right !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.user-select-all {
  user-select: all !important;
}

.user-select-auto {
  user-select: auto !important;
}

.user-select-none {
  user-select: none !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}



.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .m-sm-n1 {
    margin: -0.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }

  .m-sm-n2 {
    margin: -0.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .m-sm-n5 {
    margin: -3rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .m-md-n1 {
    margin: -0.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }

  .m-md-n2 {
    margin: -0.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .m-md-n5 {
    margin: -3rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

/* ======================================== */
/* UTILIDADES DE TEXTO */
/* ======================================== */
/* Clases para modificar la apariencia y comportamiento del texto */

/* Fuente monoespaciada para código */
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Alineación de texto justificada */
.text-justify {
  text-align: justify !important;
}

/* Permitir wrap de texto */
.text-wrap {
  white-space: normal !important;
}

/* Prevenir wrap de texto */
.text-nowrap {
  white-space: nowrap !important;
}

/* Truncar texto con puntos suspensivos */
.text-truncate {
  overflow: hidden;                        /* Ocultar contenido desbordado */
  text-overflow: ellipsis;                 /* Mostrar puntos suspensivos */
  white-space: nowrap;                     /* Prevenir wrap */
}

/* ======================================== */
/* ALINEACIÓN DE TEXTO */
/* ======================================== */
/* Clases para alinear el texto en diferentes direcciones */

/* Alinear texto a la izquierda */
.text-left {
  text-align: left !important;
}

/* Alinear texto a la derecha */
.text-right {
  text-align: right !important;
}

/* Centrar texto */
.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }

  .text-md-right {
    text-align: right !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-right {
    text-align: right !important;
  }

  .text-xl-center {
    text-align: center !important;
  }
}

/* ======================================== */
/* TRANSFORMACIÓN DE TEXTO */
/* ======================================== */
/* Clases para cambiar la capitalización del texto */

/* Convertir texto a minúsculas */
.text-lowercase {
  text-transform: lowercase !important;
}

/* Convertir texto a mayúsculas */
.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #86662F !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #86662F !important;
}

.text-secondary {
  color: #292724 !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
  color: #2699f2 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:hover,
a.text-success:focus {
  color: #19692c !important;
}

.text-info {
  color: #17a2b8 !important;
}

a.text-info:hover,
a.text-info:focus {
  color: #0f6674 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #ba8b00 !important;
}

.text-danger {
  color: #dc3545 !important;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #a71d2a !important;
}

.text-light {
  color: #F4ECDF !important;
}

a.text-light:hover,
a.text-light:focus {
  color: #fab2a7 !important;
}

.text-dark {
  color: #F5F1EA !important;
}

a.text-dark:hover,
a.text-dark:focus {
  color: black !important;
}

.text-body {
  color: #757575 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {

  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3;
  }

  body {
    min-width: 992px !important;
  }

  .container {
    min-width: 992px !important;
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody+tbody {
    border-color: #dee2e6;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

/********** Template CSS ************/
h1,
h2,
.font-weight-bold {
  font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
  font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
  font-weight: 500 !important;
}

.btn {
  font-weight: 500;
}

.btn.btn-sm,
.btn-group-sm>.btn {
  font-weight: 400;
}

.btn.btn-primary,
.btn.btn-secondary {
  color: #86662F !important;
}

.btn-square {
  width: 36px;
  height: 36px;
}

.btn-sm-square {
  width: 28px;
  height: 28px;
}

.btn-lg-square {
  width: 46px;
  height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-light .navbar-nav .nav-link {
  padding: 30px 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #292724;
  outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: #86662F;
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 10px 15px;
  }
}

.carousel-indicators li {
  width: 25px;
  height: 25px;
  margin: 0 5px 10px 5px;
  background: transparent;
  border: 1px solid #FFFFFF;
  transition: .5s;
}

.carousel-indicators .active {
  width: 50px;
  background: #FFFFFF;
}

.carousel-caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(41, 39, 36, 0.7);
  z-index: 1;
}

.service-item img {
  position: relative;
  margin-top: 40px;
  transition: .5s;
}

.service-item .service-text {
  position: absolute;
  width: 100%;
  height: calc(100% + 86px);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: rgba(41, 39, 36, 0.5);
  transition: .5s;
  z-index: 1;
}

.service-item:hover img {
  margin-top: 0px;
}

.service-item:hover .service-text {
  height: calc(100% + 40px);
}

.bg-appointment {
  background: linear-gradient(rgba(41, 39, 36, 0.7), rgba(33, 40, 28, 0.7)), url(../img/carousel-1.jpg), no-repeat center center;
  background-size: cover;
}

.bg-pricing {
  background: linear-gradient(rgba(41, 39, 36, 0.7), rgba(33, 40, 28, 0.7)), url(../img/carousel-2.jpg), no-repeat center center;
  background-size: cover;
}

.bg-jumbotron {
  background: linear-gradient(rgba(41, 39, 36, 0.20), rgba(33, 40, 28, 0.20)), url(../img/carousel-3.png) no-repeat center center / cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  min-height: 350px;
}


@media (min-width: 992px) {

  .hours-text,
  .pricing-text,
  .contact-form {
    margin-left: -120px;
  }
}

.team img {
  position: relative;
  z-index: 1;
}

.team .team-text {
  position: relative;
  width: 100%;
  height: 100px;
  top: 0px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: .5s;
}

.team:hover .team-text {
  top: 100px;
}

.team .team-social {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -100px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}

.team:hover .team-social {
  top: 0;
}

.testimonial-carousel .owl-dots {
  margin-top: 20px;
}

.testimonial-carousel .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 25px;
  height: 25px;
  background: #F4ECDF;
  border: 1px solid #C29A59;
  transition: .5s;
}

.testimonial-carousel .owl-dot.active {
  width: 50px;
  background: #C29A59;
}

.footer p,
.footer a,
.footer i {
  color: #CCCCCC !important;
}

.footer .btn-primary i {
  color: #C29A59 !important;
}

@media (min-width: 992px) {
  .footer::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.15);
  }
}

.contact-form .help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/* ======================================== */
/* COMPONENTE FLOTANTE DE SERVICIO */
/* ======================================== */
/* Overlay de fondo para el modal de servicio */
.servicio-flotante-overlay {
  position: fixed;                         /* Posición fija en la pantalla */
  top: 0; left: 0; right: 0; bottom: 0;   /* Cubrir toda la pantalla */
  background: rgba(0,0,0,0.5);            /* Fondo negro semi-transparente */
  z-index: 9999;                           /* Z-index alto para estar por encima */
  display: flex;                            /* Usar flexbox para centrado */
  align-items: center;                      /* Centrar verticalmente */
  justify-content: center;                  /* Centrar horizontalmente */
  backdrop-filter: blur(4px);              /* Efecto de desenfoque del fondo */
}
/* Tarjeta principal del servicio */
.servicio-flotante-card {
  background: #fff;                         /* Fondo blanco */
  border-radius: 18px;                      /* Bordes redondeados */
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); /* Sombra suave */
  max-width: 400px;                         /* Ancho máximo */
  width: 80%;                               /* Ancho responsivo */
  height: 90vh;
  padding: 32px 24px 24px 24px;            /* Espaciado interno */
  position: relative;                        /* Posicionamiento relativo */
  font-family: 'Inter', sans-serif;       /* Fuente del proyecto */
  animation: slideInUp 0.3s ease-out;       /* Animación de entrada */
}
/* Logo del servicio flotante */
.logo-flotante {
  display: block;
  margin: 0 auto;                            /* Centrado horizontal */
  max-width: 120px;                         /* Ancho máximo del logo */
  height: auto;                              /* Altura automática */
  margin-bottom: 8px;                        /* Margen inferior */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); /* Sombra sutil */
}
/* Botón de cerrar el modal */
.close-btn {
  position: absolute;                        /* Posición absoluta */
  top: 18px;                                /* Distancia desde arriba */
  right: 18px;                              /* Distancia desde la derecha */
  background: transparent;                   /* Fondo transparente */
  border: none;                              /* Sin borde */
  font-size: 2rem;                          /* Tamaño de fuente grande */
  color: #86662F;                           /* Color marrón del proyecto */
  cursor: pointer;                           /* Cursor de mano */
  z-index: 2;                                /* Z-index para estar por encima */
  transition: color 0.2s;                    /* Transición suave */
  width: 40px;                               /* Ancho fijo */
  height: 40px;                              /* Alto fijo */
  border-radius: 50%;                        /* Forma circular */
  display: flex;                             /* Usar flexbox */
  align-items: center;                       /* Centrar verticalmente */
  justify-content: center;                   /* Centrar horizontalmente */
}
/* Efecto hover del botón de cerrar */
.close-btn:hover {
  color: #86662F;                           /* Color más claro al hacer hover */
  background: rgba(141, 114, 106, 0.1);     /* Fondo sutil al hacer hover */
  transform: scale(1.1);                     /* Ligero aumento de tamaño */
}
/* Imagen del servicio */
.servicio-flotante-img img {
  width: 100%;                               /* Ancho completo */
  max-height: 180px;                         /* Altura máxima */
  object-fit: cover;                          /* Ajustar imagen sin deformar */
  border-radius: 12px;                        /* Bordes redondeados */
  background: #f8f9fa;                        /* Fondo gris claro */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);  /* Sombra sutil */
  transition: transform 0.2s;                 /* Transición suave */
}
/* Botón de agendar servicio */
.btn-agendar {
  background: var(--primary);                /* Color primario del proyecto */
  color: #292724;                               /* Texto blanco */
  border-radius: 24px 0 24px 24px;          /* Bordes redondeados asimétricos */
  border: none;                              /* Sin borde */
  padding: 12px 36px;                        /* Espaciado interno */
  font-size: 1rem;                           /* Tamaño de fuente */
  font-family: 'Inter', sans-serif;        /* Fuente del proyecto */
  font-weight: 600;                          /* Peso de fuente semi-bold */
  margin-top: 16px;                          /* Margen superior */
  transition: all 0.3s ease;                 /* Transición suave */
  box-shadow: 0 4px 16px rgba(194, 154, 89, 0.3); /* Sombra con color del tema */
  cursor: pointer;                            /* Cursor de mano */
  text-transform: uppercase;                  /* Texto en mayúsculas */
  letter-spacing: 0.5px;                     /* Espaciado entre letras */
}
/* Efecto hover del botón de agendar */
.btn-agendar:hover {
  background: var(--secondary);              /* Color secundario al hacer hover */
  transform: translateY(-2px);               /* Levantar ligeramente el botón */
  box-shadow: 0 6px 20px rgba(41, 39, 36, 0.4); /* Sombra más intensa */
}
/* ======================================== */
/* RESPONSIVE DESIGN */
/* ======================================== */
/* Ajustes para dispositivos móviles */
@media (max-width: 576px) {
  .servicio-flotante-card {
    max-width: 98vw;                         /* Ancho casi completo en móviles */
    padding: 20px 16px 20px 16px;           /* Padding ajustado para móviles */
    margin: 16px;                            /* Margen para evitar que toque los bordes */
  }
  .logo-flotante {
    max-width: 90px;                         /* Logo más pequeño en móviles */
  }
  .servicio-flotante-img img {
    max-height: 120px;                       /* Imagen más pequeña en móviles */
  }
  .close-btn {
    top: 12px;                               /* Ajustar posición del botón cerrar */
    right: 12px;                             /* Ajustar posición del botón cerrar */
    width: 36px;                             /* Botón más pequeño en móviles */
    height: 36px;                            /* Botón más pequeño en móviles */
  }
}

/* ======================================== */
/* ANIMACIONES */
/* ======================================== */
/* Animación de entrada del modal */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animación de salida del modal */
@keyframes slideOutDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
}

/* Clase para animación de salida */
.servicio-flotante-card.closing {
  animation: slideOutDown 0.3s ease-in forwards;
}

/* ===========================
   SERVICIO FLOTANTE (LIMPIO)
   =========================== */
.servicio-flotante-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;               /* se muestra con JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.servicio-flotante-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  max-width:500px;
  width:90%;
  padding:32px 24px;
  position:relative;
  font-family:'Inter', sans-serif;
  animation:slideInUp .3s ease-out;
}
.logo-flotante{
  max-width:120px;
  height:auto;
  margin-bottom:8px;
.servicio-flotante-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 240px;
  margin: 8px auto;
  position: relative;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 6px 8px 6px;
  min-height: 320px;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.servicio-flotante-img img {
  max-height: 70px;
  border-radius: 7px;
}
.logo-flotante {
  max-width: 38px;
  margin-bottom: 6px;
}
.btn-agendar {
  max-width: 220px;
  padding: 10px 0;
  font-size: 0.95rem;
/* Jerarquía de títulos y textos en el modal flotante */
.servicio-flotante-card h2, .servicio-flotante-card h3 {
  color: #86662F;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 1.25rem;
  text-align: center;
}
.servicio-flotante-card h4 {
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 1.05rem;
}
.servicio-flotante-card p {
  color: #444;
  margin-bottom: 8px;
  font-size: 0.95rem;
  text-align: center;
}
.servicio-flotante-card ul {
  margin-bottom: 8px;
  padding-left: 18px;
  font-size: 0.92rem;
}
.servicio-flotante-card li {
  margin-bottom: 2px;
}
}
.servicio-flotante-img img {
  max-height: 120px;
  border-radius: 10px;
}
.logo-flotante {
  max-width: 70px;
  margin-bottom: 8px;
}
.btn-agendar {
  max-width: 220px;
  padding: 8px 0;
  font-size: 0.95rem;
}
}
.close-btn{
  position:absolute;
  top:18px;
  right:18px;
  background:transparent;
  border:0;
  font-size:2rem;
  color:#86662F;
  cursor:pointer;
  z-index:2;
  transition:color .2s, transform .2s;
  width:40px;                  /* ← ahora sí cierra correctamente */
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-btn:hover{
  color:#86662F;
  background:rgba(141,114,106,.1);
  transform:scale(1.05);
}
.servicio-flotante-img img{    /* ← con punto al inicio */
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius:12px;
  background:#f8f9fa;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .2s;
}
.btn-agendar{
  background:var(--primary);
  color:#292724;
  border:none;
  border-radius:24px 0 24px 24px;
  padding:12px 36px;
  font-size:1rem;
  font-weight:600;
  margin-top:16px;
  transition:all .3s ease;
  box-shadow:0 4px 16px rgba(194,154,89,.3);
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
}
.btn-agendar:hover{
  background:var(--secondary);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(41,39,36,.4);
}

/* Animaciones */
@keyframes slideInUp{
  from{opacity:0; transform:translateY(30px) scale(.95);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes slideOutDown{
  from{opacity:1; transform:translateY(0) scale(1);}
  to{opacity:0; transform:translateY(30px) scale(.95);}
}
.servicio-flotante-card.closing{ animation:slideOutDown .3s ease-in forwards; }
.servicio-flotante-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(41,39,36,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.servicio-flotante-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 540px;
  min-height: 90vh;
  margin: 24px;
  position: relative;
  font-family: 'Inter', sans-serif;
  display: block;
  overflow: visible;
}
@media (max-width: 768px) {
  .servicio-flotante-card {
    max-width: 98vw;
    min-height: 180px;
    font-size: 0.82rem;
    padding: 8px 4px 8px 4px;
  }
  .servicio-flotante-img img {
    max-height: 80px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .logo-flotante {
    max-width: 48px;
    margin-bottom: 8px;
  }
  .btn-agendar {
    max-width: 140px;
    font-size: 0.82rem;
    padding: 7px 0;
  }
}
  
 
.close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #86662F;
  cursor: pointer;
  z-index: 2;
}
.btn-agendar {
  background: #C29A59;
  color: #292724;
  border-radius: 24px 0 24px 24px;
  border: none;
  padding: 10px 32px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  margin-top: 12px;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 320px;
}
.btn-agendar:hover {
  background: #C29A59;
}

@media (max-width: 576px) {
  .servicio-flotante-card {
    max-width: 98vw;
    margin: 8px;
    padding: 12px 4px 12px 4px;
  }
  .logo-flotante {
    max-width: 90px;
  }
  .servicio-flotante-img img {
    max-height: 120px;
  }
  .btn-agendar {
    max-width: 100%;
    padding: 10px 0;
  }
}



/* =====================================================
   ESTILOS GENERALES DEL MODAL FLOTANTE
   ===================================================== */

/* Overlay oscuro que cubre toda la pantalla */
.servicio-flotante-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);        /* Fondo semitransparente */
  display: none;                     /* Se muestra solo con JS */
  align-items: center;               /* Centrado vertical */
  justify-content: center;           /* Centrado horizontal */
  z-index: 9999;
  backdrop-filter: blur(4px);        /* Efecto de desenfoque */
}

/* Contenedor principal del modal */
.servicio-flotante-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  max-width: 1000px;                  /* Ancho máximo en desktop */
  width: 95%;
  display: flex;                     /* Layout horizontal */
  flex-direction: row;               /* Dos columnas */
  gap: 24px;                         /* Espacio entre columnas */
  padding: 24px;
  position: relative;
  animation: fadeIn .3s ease;        /* Animación de entrada */
}

/* Botón (X) para cerrar modal */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: none;
  font-size: 28px;
  color: #333;
  cursor: pointer;
  transition: .2s;
}
.close-btn:hover {
  color: #ff4d4d;
}

/* =====================================================
   COLUMNA IZQUIERDA (Logo + Imagen del servicio)
   ===================================================== */
.servicio-flotante-left {
  flex: 1;                           /* Ocupa 1/3 del espacio */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;               /* Centrado horizontal */
  justify-content: flex-start;       /* Alineación desde arriba */
}
.servicio-flotante-left .logo-flotante {
  max-width: 120px;
  margin: 0 auto 12px auto;          /* Centrado con margen inferior */
}
.servicio-flotante-left img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* =====================================================
   COLUMNA DERECHA (Texto + Info + Botones)
   ===================================================== */
.servicio-flotante-right {
  flex: 2;                           /* Ocupa 2/3 del espacio */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;       /* Cambiado de space-between a flex-start */
  padding-top: 120px;                /* Aumentado de 60px a 120px para bajar más el contenido */
}

/* =====================================================
   FORMULARIOS ADMIN — Secciones con badge de color
   Usado en: views/admin/clientes/create.php, edit.php
   ===================================================== */
.form-section-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    margin-bottom: .4rem;
}
.form-section-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 50px;
    color: #fff;
}
.badge-identificacion { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.badge-personal       { background: linear-gradient(135deg,#0ea5e9,#06b6d4); }
.badge-acceso         { background: linear-gradient(135deg,#10b981,#059669); }
.badge-telefono       { background: linear-gradient(135deg,#f59e0b,#d97706); }
.badge-direccion      { background: linear-gradient(135deg,#ec4899,#db2777); }
.badge-consentimientos{ background: linear-gradient(135deg,#64748b,#475569); }
.section-line { flex: 1; height: 1px; background: #e9ecef; }

.form-card-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 55%, #ec4899 100%);
    border-radius: .75rem .75rem 0 0;
    padding: 1rem 1.4rem;
    color: #fff;
}
.form-card-header h5 { font-size: 1.15rem; font-weight: 700; margin: 0; }

/* ======================================== */
/* LOGIN PAGE                               */
/* ======================================== */
html, body.login-page {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body.login-page {
    background: url('../img/login.jpg') center center / 100% 100% no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.login-page .login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 2rem;
}
body.login-page .login-logo { max-width: 140px; margin-bottom: 1.5rem; }
body.login-page .btn-login {
    background: var(--fondo-oscuro);
    border: none;
    color: #fff;
    padding: .75rem;
    font-weight: 600;
    border-radius: 8px;
}
body.login-page .btn-login:hover { background: #3A3632; color: #fff; }
body.login-page .form-control:focus { box-shadow: 0 0 0 .2rem rgba(41,39,36,.25); border-color: var(--verde-marca); }
body.login-page .toggle-pass { cursor: pointer; }

/* RESPONSIVO: Tarjeta completamente transparente en pantallas pequeñas */
@media (max-width: 600px) {
    body.login-page .login-card {
        background: transparent !important;
        box-shadow: none;
        border: none;
    }
    /* Textos legibles sobre fondo transparente */
    body.login-page .login-card .form-label,
    body.login-page .login-card h5,
    body.login-page .login-card p,
    body.login-page .login-card .text-muted {
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    }
}

.form-card-header p  { font-size: .8rem; opacity: .85; margin: .2rem 0 0; }

/* Título del servicio */
.titulo-servicio {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--primary, #007bff);     /* Usa color principal del proyecto */
  margin-bottom: 16px;
  
}

/* Descripción */
.descripcion-servicio {
  text-align: center;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Sección valor y duración */
.servicio-info {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.info-box {
  flex: 1;
  text-align: center;
  background: #C29A59;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.info-label {
  display: block;
  font-size: 1.0rem;
  color: white;
  font-weight: bold;
}
.info-value {
  font-size: 1.2rem;
  font-weight: bold;
  color: #86662F;
 
}

/* Botón principal */
.acciones-servicio {
  text-align: center;
}
/* Botón principal */
.lista-incluye{
  font-size: 0.95rem;
}

.btn-agendar {
  background: var(--primary, #007bff);
  color: #292724;
  border: none;
  border-radius: 24px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 20px;                  /* Agregado margen superior al botón */
}

/* Estilo específico para la columna derecha del HTML */
.servicio-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120px;                /* Aumentado de 60px a 120px para bajar más el contenido */
  gap: 15px;                         /* Espacio entre elementos */
}

/* Precio flotante en las tarjetas de servicios */
.precio-flotante {
  position: absolute;
  top: 35px;                                /* Cambiado de 15px a 35px para bajarlo más */
  right: 15px;
  background: rgba(194, 154, 89, 0.9);     /* Color principal con transparencia */
  color: white;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);               /* Efecto de desenfoque de fondo */
  border: 1px solid rgba(255,255,255,0.1); /* Borde sutil */
  transition: all 0.3s ease;               /* Transición suave */
}

/* Efecto hover para el precio */
.precio-flotante:hover {
  background: rgba(194, 154, 89, 1);      /* Fondo sólido al hacer hover */
  transform: scale(1.05);                   /* Ligero aumento de tamaño */
}

/* Asegurar que las tarjetas tengan posición relativa para el precio absoluto */
.card {
  position: relative;
}
.btn-agendar:hover {
  background: var(--secondary, #0056b3);
}

/* Nota informativa */
.nota-reserva {
  display: block;
  margin-top: 10px;
  font-size: 0.55rem;
  color: #666;
}
/* Imagen del servicio */
.img-servicio {
  width: 100%;           /* Que use el ancho disponible */
  max-width: 300px;      /* Máximo ancho permitido */
  height: auto;          /* Mantener proporción */
  border-radius: 12px;   /* Bordes redondeados */
  object-fit: cover;     /* Recorta para que no se deforme */
  margin: 0 auto;        /* Centrar en su columna */
  display: block;
}
/* =====================================================
   ANIMACIONES
   ===================================================== */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
.servicio-flotante-card.closing {
  animation: fadeOut .3s ease forwards;
}
@keyframes fadeOut {
  from {opacity: 1; transform: translateY(0);}
  to {opacity: 0; transform: translateY(20px);}
}

/* =====================================================
   RESPONSIVE (pantallas pequeñas)
   ===================================================== */
@media (max-width: 768px) {
  .servicio-flotante-card {
    flex-direction: column;          /* Cambia a vertical */
    max-width: 95%;
  }
  .servicio-flotante-left, 
  .servicio-flotante-right {
    flex: unset;
  }
  .titulo-servicio {
    text-align: center;
  }
}

/* ======================================== */
/* ESTILOS PARA INFORMACIÓN DE CONTACTO DEL FOOTER */
/* ======================================== */
/* Estilos para la sección de contacto con iconos en el footer */

/* ======================================== */
/* REDES SOCIALES SIN CUADROS */
/* ======================================== */
/* Iconos de redes sociales elegantes debajo del logo */

.social-media-icons {
  margin-bottom: 1.5rem;
}

.social-link {
  color: white !important;
  text-decoration: none !important;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.social-link:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

.social-link i {
  color: white !important;
}

/* Efectos hover específicos por red social */
.social-link:nth-child(1):hover { /* Facebook */
  color: #1877f2 !important;
}

.social-link:nth-child(1):hover i {
  color: #1877f2 !important;
}

.social-link:nth-child(2):hover { /* Instagram */
  color: #e4405f !important;
}

.social-link:nth-child(2):hover i {
  color: #e4405f !important;
}

.social-link:nth-child(3):hover { /* TikTok */
  color: #ff0050 !important;
}

.social-link:nth-child(3):hover i {
  color: #ff0050 !important;
}

.social-link:nth-child(4):hover { /* WhatsApp */
  color: #25d366 !important;
}

.social-link:nth-child(4):hover i {
  color: #25d366 !important;
}

/* ======================================== */
/* LOGO DEL FOOTER */
/* ======================================== */

/* Logo de Stetik Lab Academy en el footer */
.footer-logo {
  max-width: 350px;
  width: 100%;
  height: auto;
}

/* ======================================== */
/* INFORMACIÓN DE CONTACTO */
/* ======================================== */

/* Contenedor de cada elemento de contacto */
.contact-item {
  margin-bottom: 1rem;
  color: #FFFFFF !important;
}

/* Iconos de contacto */
.contact-icon {
  min-width: 28px;
  text-align: center;
}

.contact-icon i {
  color: #FFFFFF !important;
  font-size: 1.2rem !important;
}

/* Contenedor de texto de contacto */
.contact-text {
  color: #FFFFFF !important;
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-text strong {
  color: #FFFFFF !important;
  font-weight: 600;
}

.contact-text span {
  color: #FFFFFF !important;
}

/* Dirección específica */
.contact-address {
  line-height: 1.2;
}

/* Dirección - línea principal */
.contact-main {
  font-weight: normal;
  font-size: 0.9rem;
  color: #FFFFFF !important;
}

/* Dirección - líneas secundarias */
.contact-secondary {
  opacity: 0.9;
  font-size: 0.85rem;
  color: #FFFFFF !important;
}

/* Enlaces de contacto */
.contact-link {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: normal;
  transition: opacity 0.3s ease;
}

.contact-link:hover {
  opacity: 0.8;
  color: #FFFFFF !important;
}

.contact-link strong {
  color: #FFFFFF !important;
  font-weight: normal;
}

/* Email específico - texto más pequeño pero legible */
.contact-email {
  font-size: 0.85rem !important;
  word-break: break-word;
  font-weight: normal;
}

.contact-email strong {
  color: #FFFFFF !important;
  font-size: 0.7rem !important;
  font-weight: normal;
}

/* Contenedor de texto de contacto */
.contact-text {
  color: #FFFFFF !important;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .social-link {
    font-size: 1.6rem;
    margin-right: 0.75rem !important;
  }
  
  .contact-text {
    font-size: 0.7rem;
  }
  
  .contact-main {
    font-size: 0.7rem;
  }
  
  .contact-secondary {
    font-size: 0.65rem;
  }
  
  .contact-link {
    font-size: 0.7rem;
  }
  
  .contact-email {
    font-size: 0.65rem !important;
  }
  
  /* Logo responsive en móviles */
  .footer-logo {
    max-width: 280px;
  }
}

/* ======================================== */
/* ESTILOS FOOTER PROFESIONAL */
/* ======================================== */

/* Contenedor principal del footer */
.footer-main {
  background-color: #4A4540;
  padding: 3rem 0;
  margin-top: 0;
}

/* Logo del footer */
.footer-logo {
  max-width: 200px;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

/* Información de contacto */
.footer-contact-item {
  display: flex;
  align-items: start;
  margin-bottom: 1rem;
}

.footer-contact-icon {
  margin-right: 0.75rem;
  color: #66B266;
  font-size: 1rem;
}

.footer-contact-text {
  color: white;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
}

.footer-contact-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

/* Secciones del footer */
.footer-section {
  margin-bottom: 2rem;
}

.footer-section-title {
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.footer-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section-item {
  margin-bottom: 0.75rem;
}

.footer-section-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.footer-section-link:hover {
  color: #66B266;
}

/* Horarios de atención */
.footer-schedule {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.footer-schedule-title {
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 1.5rem;
}

.footer-schedule-item {
  display: flex;
  justify-content: space-between;
  color: white;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

.footer-schedule-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.footer-schedule-day {
  font-weight: 600;
}

.footer-schedule-time {
  color: #66B266;
  font-weight: 500;
}

.footer-schedule-time.closed {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* Botón de reserva */
.footer-reserve-btn {
  background: #66B266;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(102, 178, 102, 0.3);
  display: inline-block;
}

.footer-reserve-btn:hover {
  background: #5aa05a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 178, 102, 0.4);
}

/* Copyright */
.footer-copyright {
  background-color: #2d3748;
  border-top: 1px solid rgba(102, 178, 102, 0.3);
  padding: 1rem 0;
}

.footer-copyright-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  margin: 0;
}

.footer-copyright-link {
  color: #66B266;
  font-weight: 600;
  text-decoration: none;
}

.footer-copyright-link:hover {
  color: #5aa05a;
}

.footer-developer {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  margin: 0;
}

.footer-developer-name {
  color: #66B266;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-main {
    padding: 2rem 0;
  }
  
  .footer-logo {
    max-width: 180px;
  }
  
  .footer-section {
    margin-bottom: 1.5rem;
  }
  
  .footer-schedule {
    padding: 1rem;
  }
  
  .footer-schedule-item {
    font-size: 0.8rem;
  }
}

/* ======================================== */
/* ICONOS DE REDES - FOOTER SOCIAL */
/* ======================================== */
.footer-social {
  gap: 12px; /* espacio uniforme entre botones (navegadores modernos) */
}

/* Estilos base para todos los dispositivos */
.footer-social .btn {
  width: 56px;
  height: 56px;
  padding: 0; /* el icono se centra sin rellenos extra */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); /* fondo sutil */
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.footer-social .btn i {
  font-size: 1.35rem;
  line-height: 1;
}

.footer-social .btn:hover,
.footer-social .btn:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Estilos específicos para desktop (pantallas grandes) */
@media (min-width: 992px) {
  .footer-social {
    gap: 12px; /* espacio más compacto entre botones en desktop */
  }
  .footer-social .btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }
  .footer-social .btn i {
    font-size: 1.2rem;
  }
}

/* Aplicar el estilado especial SOLO en móviles y tablets */
@media (max-width: 991.98px) {
  .footer-social .btn {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .footer-social .btn i {
    font-size: 1.35rem;
  }
}

@media (max-width: 576px) {
  .footer-social {
    gap: 10px;
  }
  .footer-social .btn {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .footer-social .btn i {
    font-size: 1.25rem;
  }
}

/* ======================================== */
/* ESTILOS PROFESIONALES PARA FORMULARIO DE CONTACTO */
/* ======================================== */

/* Estilo profesional para todos los campos del formulario */
.contact-form-card .form-control {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 0.95rem;
}

.contact-form-card .form-control:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
  outline: none;
}

.contact-form-card .form-control:hover {
  border-color: #C29A59;
}

/* Estilos específicos para el select tipo de mensaje */
#tipo {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Estilo para el placeholder del select */
#tipo option[disabled] {
  color: #6c757d;
  font-style: italic;
}

/* Estilo profesional para el select personalizado */
.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b49a93' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  font-weight: 500;
}

.custom-select:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
  outline: none;
}

.custom-select:hover {
  border-color: #C29A59;
}

/* Estilo para el placeholder del select */
.custom-select option[disabled] {
  color: #6c757d;
  font-style: italic;
  font-weight: 400;
}

/* Estilo para las opciones del select */
.custom-select option {
  padding: 0.5rem;
  font-weight: 500;
  color: #495057;
}

/* Aplicar estilos consistentes a todos los campos del formulario */
.contact-form-card .form-control:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
  transition: all 0.15s ease-in-out;
}

.contact-form-card .form-control {
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  font-weight: 500;
}

.contact-form-card .form-control:hover {
  border-color: #C29A59;
}

/* ======================================== */
/* ESTILOS UNIFORMES PARA FORM-SELECT */
/* ======================================== */
/* Asegurar que el select tenga el mismo tamaño que los inputs */
.contact-form-card .form-select {
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
  font-weight: 500;
  height: calc(1.5em + 0.75rem + 4px + 1.5rem); /* Mismo height que form-control con padding p-3 */
  padding: 0.75rem;
}

.contact-form-card .form-select:hover {
  border-color: #C29A59;
}

.contact-form-card .form-select:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
  transition: all 0.15s ease-in-out;
}

/* ======================================== */
/* SELECT CON FORM-CONTROL PERSONALIZADO - SOLUCIÓN DEFINITIVA */
/* ======================================== */
/* Forzar que los selects tengan exactamente el mismo tamaño que inputs */

/* Selector ultra específico para sobrescribir cualquier CSS de Bootstrap */
#contactForm select.form-control.p-3,
.contact-form-card select.form-control.p-3,
select#tipo.form-control.p-3 {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 1rem !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  background-color: #f5f5f5 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23495057" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Estados de interacción */
#contactForm select.form-control.p-3:hover,
.contact-form-card select.form-control.p-3:hover,
select#tipo.form-control.p-3:hover {
  border-color: #C29A59 !important;
}

#contactForm select.form-control.p-3:focus,
.contact-form-card select.form-control.p-3:focus,
select#tipo.form-control.p-3:focus {
  border-color: #C29A59 !important;
  box-shadow: 0 0 0 0.2rem rgba(194, 154, 89, 0.25) !important;
  outline: none !important;
}

/* Forzar que todos los inputs también mantengan la altura consistente */
#contactForm input.form-control.p-3,
.contact-form-card input.form-control.p-3 {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  box-sizing: border-box !important;
}

/* ======================================== */
/* ESTILOS PARA NEWSLETTER EN FOOTER (legacy - reemplazado por footer-nl-*) */
/* ======================================== */

/* ======================================== */
/* SECCIÓN CONTACTO CTA - DISEÑO PROFESIONAL */
/* ======================================== */
/*
 * Sección de llamada a la acción (CTA) para contacto
 * Diseño: Fondo verde oscuro con bordes redondeados
 * Layout: Horizontal en desktop (texto - flecha - botón)
 * Responsive: Vertical en móviles
 * Colores: Verde #2d5a3d de fondo, texto blanco, botón blanco
 */

/* ====== CONTENEDOR PRINCIPAL ====== */
/* Sección completa con fondo verde oscuro y bordes redondeados */
.contact-section {
    background: #E4E0D8 !important;    /* Verde oscuro del proyecto */
    padding: 4rem 0;                   /* Espaciado vertical generoso */
    border-radius: 16px;               /* Bordes redondeados modernos */
    margin: 0 2rem;                    /* Márgenes laterales para no tocar bordes */
}

/* ====== CONTENEDOR INTERNO ====== */
/* Wrapper central que controla el ancho máximo y centrado */
.contact-container {
    max-width: 1200px;                 /* Ancho máximo para desktop */
    margin: 0 auto;                    /* Centrado horizontal */
    padding: 0 3rem;                   /* Padding interno horizontal */
}

/* ====== LAYOUT PRINCIPAL ====== */
/* Contenedor flex que organiza texto, flecha y botón horizontalmente */
.contact-content {
    display: flex;                     /* Layout flexbox */
    justify-content: space-between;    /* Distribuir elementos con espacio */
    align-items: center;               /* Centrado vertical */
    gap: 4rem;                         /* Espacio entre elementos */
    padding: 1rem 0;                   /* Padding vertical mínimo */
}

/* ====== SECCIÓN DE TEXTO ====== */
/* Contenedor del título principal */
.contact-text-section {
    flex: 1;                           /* Ocupa espacio disponible */
    max-width: 400px;                  /* Límite de ancho para legibilidad */
}

/* ====== TÍTULO PRINCIPAL ====== */
/* Texto principal "¿No sabes por dónde empezar? Te ayudamos." */
.contact-title {
    font-size: 2.5rem;                 /* Tamaño grande para impacto */
    font-weight: 400;                  /* Peso normal, no muy grueso */
    color: white !important;           /* Texto blanco sobre fondo verde */
    line-height: 1.2;                  /* Interlineado compacto */
    margin: 0;                         /* Sin márgenes */
    letter-spacing: -0.02em;           /* Espaciado de letras ligeramente negativo */
}

/* ====== SECCIÓN DE FLECHA ====== */
/* Contenedor de la flecha curva SVG */
.contact-arrow-section {
    flex: 0 0 140px;                   /* Ancho fijo de 140px, no crece ni se encoge */
    display: flex;                     /* Flex para centrar */
    justify-content: center;           /* Centrado horizontal */
    align-items: center;               /* Centrado vertical */
}

/* ====== FLECHA SVG ====== */
/* Flecha curva blanca que apunta al botón con círculo decorativo */
.contact-curved-arrow {
    width: 140px;                      /* Ancho de la flecha (actualizado para nuevo diseño) */
    height: 70px;                      /* Alto de la flecha (actualizado para nuevo diseño) */
    opacity: 0.95;                     /* Ligeramente transparente */
}

/* ====== BOTÓN DE CONTACTO ====== */
/* Botón principal "Reserva una charla sobre la piel" */
.contact-btn {
    background: white;                 /* Fondo blanco contrastante */
    color: #2d5a3d;                   /* Texto verde igual al fondo de la sección */
    border: none;                      /* Sin bordes */
    border-radius: 25px;               /* Bordes muy redondeados (píldora) */
    padding: 16px 24px 16px 32px;      /* Padding: más espacio a la izquierda, menos a la derecha */
    font-size: 1rem;                   /* Tamaño de fuente estándar */
    font-weight: 500;                  /* Peso medio */
    text-decoration: none !important;  /* Sin subrayado nunca */
    display: inline-flex;              /* Flex inline para centrar contenido */
    align-items: center;               /* Centrado vertical del texto */
    justify-content: flex-start;       /* Alineación hacia la izquierda */
    transition: all 0.3s ease;         /* Transición suave para efectos hover */
    min-width: 280px;                  /* Ancho mínimo para botón prominente */
    flex-shrink: 0;                    /* No se encoge en layout flex */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra sutil para elevación */
}

/* ====== EFECTO HOVER DEL BOTÓN ====== */
/* Estado al pasar el cursor por encima - diseño profesional sin subrayado */
.contact-btn:hover {
    background: #C29A59;              /* Color dorado elegante para hover */
    color: #292724;                      /* Texto cambia a blanco */
    transform: translateY(-2px);       /* Elevación de 2px hacia arriba */
    box-shadow: 0 6px 20px rgba(210, 182, 130, 0.3); /* Sombra dorada más prominente */
    text-decoration: none !important;  /* Asegurar que no aparezca subrayado */
    text-decoration: none !important;  /* Asegurar que no aparezca subrayado */
}

/* ====== FLECHA DEL BOTÓN ====== */
/* Flecha SVG dentro del botón de contacto - actualizado */
.contact-btn-arrow {
    margin-left: 12px !important;      /* Espacio mayor entre texto y flecha - forzado */
    transition: transform 0.3s ease;   /* Transición suave para animación */
    color: #2d5a3d;                   /* Color verde igual al texto del botón */
}

/* Animación de la flecha en hover */
.contact-btn:hover .contact-btn-arrow {
    transform: translateX(4px);        /* Desplazamiento hacia la derecha */
    color: white;                      /* Cambio a blanco en hover */
}

/* Flecha animada (CSS anterior mantenido para compatibilidad) */
.contact-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    font-weight: normal;
}

.contact-btn:hover .contact-arrow {
    transform: translateX(3px);
}

/* ====== BOTÓN DEL FORMULARIO DE CONTACTO ====== */
.contact-form-btn {
    background: #C29A59 !important;
    color: #292724 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: background 0.25s ease, box-shadow 0.25s ease !important;
    min-width: 200px !important;
    box-shadow: 0 2px 8px rgba(194,154,89,0.25) !important;
    cursor: pointer !important;
    outline: none !important;
    font-family: inherit !important;
    letter-spacing: 0.01em !important;
}
.contact-form-btn-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s ease;
}
.contact-form-btn:hover {
    background: #C29A59 !important;
    color: #292724 !important;
    box-shadow: 0 4px 14px rgba(194,154,89,0.35) !important;
}
.contact-form-btn:hover .contact-form-btn-arrow {
    transform: translateX(4px);
}
.contact-form-btn:focus {
    background: #C29A59 !important;
    color: #292724 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(194,154,89,0.35) !important;
}

/* ======================================== */
/* RESPONSIVE DESIGN - ADAPTACIÓN MÓVIL */
/* ======================================== */
/*
 * Adaptaciones para dispositivos móviles y tablets
 * Cambios principales: Layout vertical, tamaños reducidos, orden optimizado
 * Breakpoint: máximo 768px (tablets y móviles)
 */

/* ====== ADAPTACIÓN PARA MÓVILES ====== */
@media (max-width: 768px) {
    
    /* ---- Sección principal ---- */
    /* Reducir padding y márgenes para pantallas pequeñas */
    .contact-section {
        padding: 3rem 0;               /* Menos padding vertical */
        margin: 0 1rem;                /* Márgenes laterales reducidos */
        border-radius: 12px;           /* Bordes menos redondeados */
    }
    
    /* ---- Contenedor interno ---- */
    /* Ajustar padding para pantallas pequeñas */
    .contact-container {
        padding: 0 2rem;               /* Padding horizontal reducido */
    }
    
    /* ---- Layout principal ---- */
    /* Cambiar de horizontal a vertical */
    .contact-content {
        flex-direction: column;        /* Layout vertical en lugar de horizontal */
        text-align: center;            /* Centrar todo el contenido */
        gap: 2.5rem;                   /* Espacio vertical entre elementos */
        padding: 1rem 0;               /* Padding vertical mínimo */
    }
    
    /* ---- Sección de texto ---- */
    /* Permitir ancho completo en móviles */
    .contact-text-section {
        max-width: 100%;               /* Ancho completo disponible */
        order: 1;                      /* Primero en el orden */
    }
    
    /* ---- Título ---- */
    /* Reducir tamaño de fuente para móviles */
    .contact-title {
        font-size: 2rem;               /* Tamaño reducido pero aún prominente */
        text-align: center;            /* Centrado */
    }
    
    /* ---- Flecha ---- */
    /* Mantener en el centro del layout vertical */
    .contact-arrow-section {
        order: 2;                      /* Segundo en el orden */
    }
    
    /* ---- Flecha SVG ---- */
    /* Reducir tamaño para móviles */
    .contact-curved-arrow {
        width: 100px;                  /* Ancho reducido */
        height: 50px;                  /* Alto reducido */
    }
    
    /* ---- Botón ---- */
    /* Ajustar tamaño y posición para móviles */
    .contact-btn {
        order: 3;                      /* Tercero en el orden */
        padding: 14px 28px;            /* Padding reducido */
        font-size: 0.95rem;            /* Fuente ligeramente más pequeña */
        min-width: 250px;              /* Ancho mínimo ajustado */
        max-width: 250px;              /* Ancho máximo para evitar desbordamiento */
    }
}

@media (max-width: 480px) {
    .contact-content {
        padding: 2rem 1.5rem;
    }
    
    .contact-title {
        font-size: 1.3rem;
        font-size: 1.2rem;
    }
}

/* ======================================== */
/* FOOTER REDISEÑADO                        */
/* ======================================== */

/* Contenedor principal */
.footer-main {
    background-color: #4A4540;
    margin-top: 0;
    padding: 0 !important;
}

/* Franja superior decorativa */
.footer-top-bar {
    height: 4px;
    background: linear-gradient(90deg, #C29A59 0%, #C29A59 50%, #C29A59 100%);
}

/* ====== COL 1 - BRAND ====== */
.footer-brand-row {
    gap: 1rem;
}

.footer-brand-logo {
    max-width: 150px;
    width: 100%;
    height: auto;
    filter: brightness(1.05);
}

.footer-brand-tagline {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ====== REDES SOCIALES ====== */
.footer-social-wrap {
    flex-wrap: wrap;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.footer-social-btn:hover {
    background: #F5F1EA;
    border-color: #F5F1EA;
    color: #F5F1EA;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(245, 241, 234, 0.25);
}

/* ====== TÍTULOS DE COLUMNA ====== */
.footer-col-title {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.6rem;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: #C29A59;
    border-radius: 2px;
}

/* ====== LISTAS DE NAVEGACIÓN ====== */
.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 0.65rem;
}

.footer-nav-list a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, gap 0.2s;
}

.footer-nav-list a i {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.footer-nav-list a:hover {
    color: #F5F1EA;
    gap: 8px;
}

.footer-nav-list a:hover i {
    transform: translateX(2px);
}

/* ====== NEWSLETTER ====== */
.footer-nl-desc {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.footer-nl-form {
    position: relative;
}

.footer-nl-input-wrap {
    display: flex;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.footer-nl-input-wrap:focus-within {
    border-color: #C29A59;
}

.footer-nl-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 11px 18px;
    color: #fff;
    font-size: 0.83rem;
}

.footer-nl-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.footer-nl-btn {
    background: #C29A59;
    border: none;
    padding: 0 18px;
    color: #292724;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 0 50px 50px 0;
}

.footer-nl-btn:hover {
    background: #C29A59;
}

.footer-nl-note {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* ====== ACORDEÓN MÓVIL ====== */
.footer-accordion {
    border-radius: 10px;
    overflow: hidden;
}

.footer-acc-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(245,241,234,0.2) !important;
}

.footer-acc-item:last-child {
    border-bottom: none !important;
}

.footer-acc-btn {
    background: transparent !important;
    color: #F5F1EA !important;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.85rem 1rem;
    box-shadow: none !important;
}

.footer-acc-btn::after {
    filter: brightness(0) invert(1) sepia(0.25) saturate(3) hue-rotate(10deg);
    opacity: 0.9;
}

.footer-acc-body {
    background: rgba(255,255,255,0.04);
    padding: 0.75rem 1.25rem 1rem;
}

/* ====== DIVISOR ====== */
.footer-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0;
}

/* ====== BARRA INFERIOR COPYRIGHT ====== */
.footer-bottom {
    background: #4A4540;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-copy-text {
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
}

.footer-copy-link {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}


.footer-dev-text {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
}

.footer-dev-name {
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* ====== RESPONSIVE MÓVIL ====== */
@media (max-width: 991.98px) {
    .footer-brand-logo {
        max-width: 140px;
    }

    .footer-col-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Antiguo .footer-logo-section — mantener para no romper otros posibles usos */
.footer-logo-section {
    padding-left: 0 !important;
}

.footer-logo-link {
    margin-left: -15px !important;
}

.footer-logo-img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.footer-contact-info {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-contact-phone {
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
}

/* =============================================== */
/* ESTILOS GENERALES DE LA SECCIÓN DE CONTACTO     */
/* =============================================== */

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-cream);
  color: #222;
}

/* Contenedor principal */
.contact-section {
  background-color: #efefef; /* color gris claro del fondo */
  padding: 80px 0; /* espacio interno superior e inferior */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenido interno alineado horizontalmente */
.contact-container {
  width: 80%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Texto principal */
.contact-container h2 {
  font-size: 2.2rem;
  font-weight: 400;
  color: #222;
  margin: 0;
}

/* Botón de contacto */
.contact-btn {
  background-color: #C29A59; /* negro */
  color: #292724;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 12px;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Flecha dentro del botón */
.contact-btn span {
  margin-left: 10px;
  transition: margin-left 0.3s ease;
}

/* Efecto hover (animación de la flecha) */
.contact-btn:hover span {
  margin-left: 18px;
}

/* Efecto hover del botón */
.contact-btn:hover {
  background-color: #C29A59;
}

/* Adaptación responsive */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .contact-container h2 {
    font-size: 1.8rem;
  }
}

/* ====== OVERRIDE FINAL ====== */
.contact-btn:hover,
a.contact-btn:hover {
    background-color: #C29A59 !important;
    background: #C29A59 !important;
    border-color: #C29A59 !important;
    color: #292724 !important;
}
.newsletter-submit-btn:hover,
button.newsletter-submit-btn:hover,
.footer-accordion-newsletter-button:hover {
    background-color: #C29A59 !important;
    background: #C29A59 !important;
    color: #292724 !important;
}

/* ====== ICONOS DE INFORMACIÓN DE CONTACTO ====== */
.contact-info-icon {
    font-size: 1.1rem;
    color: var(--success);
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.contact-info-heading {
    color: #111 !important;
    font-size: 1.05rem;
    font-weight: 700;
}

/* ====== BOTONES DE REDES SOCIALES EN CONTACTO ====== */
.contact-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    font-size: 1.1rem !important;
    color: #fff !important;
    border: none !important;
}
.contact-social-btn:hover { opacity: .85; transform: translateY(-2px); }

.contact-social-btn i,
.contact-social-btn svg { color: #fff !important; fill: #fff !important; }

/* Colores de plataforma */
.contact-social-btn.facebook-btn  { background: #1877F2 !important; }
.contact-social-btn.instagram-btn { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) !important; }
.contact-social-btn.whatsapp-btn  { background: #25D366 !important; }
.contact-social-btn.tiktok-btn    { background: #010101 !important; }

@media (max-width: 768px) {
    .contact-social-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
}

/* ====== CARRUSEL DESPEGADO CON BORDES ====== */
/* Estilos para el carrusel con efecto moderno despegado de los lados */

/* Carrusel con efecto despegado */
.carousel-detached {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #fff;
}

/* Contenedor interno con bordes redondeados */
.carousel-inner-detached {
    border-radius: 18px;
    overflow: hidden;
}

/* Items del carrusel con bordes */
.carousel-item-detached {
    border-radius: 18px;
    overflow: hidden;
}

/* Imágenes del carrusel con bordes */
.carousel-img-detached {
    border-radius: 18px;
}

/* ================================================ */
/* FOUNDER SECTION - Kelis Ariza Split Design       */
/* ================================================ */
.founder-section {
    display: grid;
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
    /* Alto minimo, no fijo: si el texto crece la seccion crece con el
       en lugar de recortarse. */
    min-height: 450px;
    overflow: hidden;
    max-width: 100%;
}

/* ---- Foto izquierda ---- */
.founder-photo-col {
    position: relative;
    background: #4A4540;
    padding: 0;
    overflow: hidden;
}
.founder-photo {
    /* 'cover' en vez de 'contain': el retrato llena la columna de borde
       a borde. Con 'contain' quedaban franjas verdes a los lados y la
       foto parecia pegada encima, no parte del diseno. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    border-radius: 0;
}
.founder-photo-caption {
    position: absolute;
    bottom: 1.8rem;
    left: 1.8rem;
    right: 1.8rem;
    z-index: 2;
    background: linear-gradient(135deg, rgba(45,56,38,.92), rgba(58,71,50,.85));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12);
    border-top: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: .8rem 1.2rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.founder-caption-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #C29A59;
}
.founder-caption-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ---- Contenido derecho ---- */
.founder-content-col {
    position: relative;
    background: #4A4540;
    /* Mas aire a la izquierda: el texto se separa del borde de la foto
       en lugar de arrancar pegado a el. */
    padding: 1.5rem 3rem 1.5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* La medida de lectura se acota: a pantalla completa las lineas pasaban
   de 110 caracteres y el bloque se leia como un muro. */
.founder-inner {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    width: 100%;
    max-width: 560px;
}
.founder-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #C29A59;
    margin: 0;
}
.founder-ver-link {
    font-size: .84rem;
    font-weight: 600;
    color: #C29A59;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    letter-spacing: .02em;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(194,154,89,.35);
    transition: color .2s, border-color .2s;
}
.founder-ver-link:hover {
    color: #e6c176;
    border-color: #e6c176;
    text-decoration: none;
}
.founder-ver-link svg { transition: transform .22s ease; }
.founder-ver-link:hover svg { transform: translateX(4px); }
.founder-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}
.founder-title em {
    font-style: italic;
    color: #C29A59;
}
.founder-text {
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    line-height: 1.75;
    margin: 0;
}
.founder-text strong { color: #fff; font-weight: 700; }
.founder-text em { color: #C29A59; font-style: italic; }

/* Separador gold */
.founder-separator {
    width: 40px;
    height: 2.5px;
    background: #C29A59;
    border-radius: 2px;
    margin: .2rem 0;
}

/* Bloque MI MISIÓN */
.founder-mision {
    border-left: 3px solid #C29A59;
    padding: .6rem 1.05rem;
    margin-top: .4rem;
}
.founder-mision-label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C29A59;
    margin-bottom: .45rem;
}
.founder-mision-text {
    font-size: .83rem;
    color: rgba(255,255,255,.72);
    line-height: 1.75;
    margin: 0;
}
.founder-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .4rem;
}
.founder-badge {
    display: inline-block;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem 1rem;
    border-radius: 50px;
}
.founder-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #C29A59;
    color: #292724;
    font-size: .82rem;
    font-weight: 700;
    padding: .68rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: none;
    transition: transform .22s ease;
    letter-spacing: .02em;
    margin-top: .5rem;
}
.founder-btn:hover {
    color: #292724;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: none;
}
.founder-btn svg { transition: transform .22s ease; }
.founder-btn:hover svg { transform: translateX(4px); }
.founder-btn:focus-visible,
.founder-ver-link:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }

/* Fila de acciones: principal + secundaria, alineadas con el texto */
.founder-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .85rem;
}
.founder-marca { color: #C29A59; }

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .founder-section {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
        min-height: auto;
    }
    .founder-photo-col {
        height: auto;
        padding: 0;
    }
    .founder-photo {
        /* Sin alto fijo la imagen se muestra entera y ocupa justo lo
           que mide: nada de recorte y nada de franja verde sobrante,
           que era lo que se veía como una línea. */
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 0;
    }
    .founder-content-col { padding: 2.25rem 2rem; }
    .founder-inner { max-width: none; }
    .founder-photo-caption { bottom: 1.25rem; left: 1.25rem; right: 1.25rem; }
}
@media (max-width: 768px) {
    .founder-photo-col { height: auto; }
    .founder-content-col { padding: 2.5rem 1.5rem; }
    .founder-inner { gap: .75rem; }
}
@media (max-width: 576px) {
    .founder-photo-col { height: auto; }
    .founder-content-col { padding: 2rem 1.25rem; }
    .founder-inner { gap: .65rem; }
    .founder-title { font-size: 1.45rem; }
    .founder-text { font-size: .87rem; }
    .founder-mision-text { font-size: .84rem; }
    .founder-actions { flex-direction: column; align-items: stretch; gap: .35rem; }
    .founder-btn { width: 100%; justify-content: center; }
    .founder-ver-link { justify-content: center; }
    .founder-caption-name { font-size: 1.2rem; }
}
@media (max-width: 400px) {
    .founder-photo-col { height: auto; }
}

/* Legacy cta-help classes (kept for safety) */
.cta-help-section { display: none; }



/* Glow orb */
.cta-help-section::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(194,154,89,.15) 0%, transparent 70%);
    pointer-events: none;
}

.cta-help-bg {
    display: none;
}

.cta-help-container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

/* ---- Photo column ---- */
.cta-help-photo-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cta-help-photo-wrap {
    position: relative;
    width: 200px;
    height: 200px;
}

.cta-help-photo-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.45);
    animation: ctaRingSpin 8s linear infinite;
}

.cta-help-photo-ring::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,.7);
}

@keyframes ctaRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.cta-help-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.15);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.cta-help-badge {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .35rem .9rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: .4rem;
    backdrop-filter: blur(6px);
}

.cta-help-badge i {
    color: #fff;
    font-size: .85rem;
}

/* ---- Text column ---- */
.cta-help-left {
    flex: 0 1 480px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-help-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .28rem .85rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.cta-help-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -.02em;
}

.cta-help-support {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.8rem;
    max-width: 480px;
}

/* ---- Stats ---- */
.cta-help-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cta-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.cta-stat-num {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}

.cta-stat-label {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cta-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.18);
    flex-shrink: 0;
}

/* ---- Button ---- */
.cta-help-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    align-self: flex-end;
    background: #C29A59;
    color: #292724;
    font-size: .92rem;
    font-weight: 700;
    padding: .85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(194,154,89,.35);
    transition: transform .22s ease, box-shadow .22s ease;
    letter-spacing: .02em;
}

.cta-help-btn:hover {
    color: #292724;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(194,154,89,.55);
}

.cta-help-btn svg {
    transition: transform .22s ease;
}

.cta-help-btn:hover svg {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .cta-help-container {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    .cta-help-support { max-width: 100%; }
    .cta-help-stats { justify-content: center; }
    .cta-help-title { font-size: 2rem; }
}

/* ---- Responsive tablet ---- */
@media (max-width: 992px) {
    .cta-help-container  { gap: 2.5rem; }
    .cta-help-title      { font-size: 2.3rem; }
    .cta-help-photo-wrap { width: 160px; height: 160px; }
    .cta-help-photo      { width: 160px; height: 160px; }
}

/* ---- Responsive móvil ---- */
@media (max-width: 768px) {
    .cta-help-section {
        padding: 3.5rem 1.5rem;
        margin: 0 1rem;
        border-radius: 16px;
    }
    .cta-help-container {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
    }
    .cta-help-photo-wrap { width: 140px; height: 140px; margin: 0 auto; }
    .cta-help-photo      { width: 140px; height: 140px; }
    .cta-help-left    { max-width: 100%; }
    .cta-help-right   { align-items: center; width: 100%; }
    .cta-help-support { text-align: center; max-width: 100%; }
    .cta-help-divider {
        width: 80%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(194, 154, 89, 0.35), transparent);
    }
    .cta-help-title    { font-size: 2.1rem; }
    .cta-help-section::before { width: 100%; opacity: 0.08; }
}

@media (max-width: 480px) {
    .cta-help-title    { font-size: 1.75rem; }
    .cta-help-btn      { width: 100%; justify-content: center; }
}

/* Ajustes responsive para móviles */
@media (max-width: 768px) {
    .carousel-detached {
        border-radius: 15px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .carousel-inner-detached {
        border-radius: 13px;
    }
    
    .carousel-item-detached {
        border-radius: 13px;
        min-height: 55vh !important;
    }
    
    .carousel-img-detached {
        border-radius: 13px;
    }
    
    /* Ajustes de texto para carrusel compacto en móvil */
    .carousel-item-detached .display-4 {
        font-size: 2rem !important;
    }
    
    .carousel-item-detached h6 {
        font-size: 0.8rem !important;
    }
    
    .carousel-item-detached p {
        font-size: 0.95rem !important;
        padding: 0 1rem !important;
        margin: 0 1rem !important;
    }
}

/* ======================================== */
/* ALINEACIÓN DE TARJETAS DE SERVICIOS */
/* ======================================== */
/* Estilos para garantizar que todas las tarjetas de servicios tengan la misma altura */

/* Contenedor de servicios con altura uniforme */
.album .row .col {
    display: flex;
    margin-bottom: 1.5rem;
}

/* Tarjetas de servicios con altura completa */
.album .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Cuerpo de la tarjeta que se expande */
.album .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Descripción del servicio con altura flexible */
.album .card-text {
    flex-grow: 1;
}

/* ======================================== */
/* LÍNEA DIVISORIA EN TÍTULOS DE SERVICIOS */
/* ======================================== */
/* Estilo para la línea horizontal entre títulos */

.title-divider {
    width: 300px;
    height: 2px;
    background-color: var(--primary);
    border: none;
    margin: 1rem auto;
    opacity: 1;
}
/* ======================================== */
/* CASILLAS DE CATEGORÍAS DE SERVICIOS */
/* ======================================== */
/* Estilos para las 4 casillas principales de la página de inicio */

/* Casilla base blanca */
.service-category-card-white {
    background: white;
    border-radius: 16px;
    padding: 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(74, 124, 89, 0.1);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Casilla con imagen de fondo */
.service-category-card-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Overlay transparente para casillas con imagen de fondo */
.service-category-overlay-transparent {
    background: transparent;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2rem 1rem;
}

/* Hover effects */
.service-category-card-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(74, 124, 89, 0.15);
    border-color: #4a7c59;
}

.service-category-card-image:hover .service-category-overlay-transparent {
    background: rgba(74, 124, 89, 0.1);
}

/* Títulos */
.service-category-title-green {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--verde-marca);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.3;
}

.service-category-title-white {
    font-family: 'Playfair Display', Georgia, serif;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.3;
}

/* Iconos */
.service-category-icon-green {
    transition: transform 0.3s ease;
}

.service-category-icon-white {
    transition: transform 0.3s ease;
}

.service-category-card-white:hover .service-category-icon-green {
    transform: scale(1.1);
}

.service-category-card-image:hover .service-category-icon-white {
    transform: scale(1.1);
}

/* Flecha decorativa */
.service-category-arrow {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.8;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .service-category-card-white,
    .service-category-card-image {
        padding: 1.5rem 0.75rem;
        min-height: 180px;
    }
    
    .service-category-overlay-transparent {
        padding: 1.5rem 0.75rem;
    }
    
    .service-category-icon-green svg,
    .service-category-icon-white svg {
        width: 45px !important;
        height: 45px !important;
    }
    
    .service-category-title-green,
    .service-category-title-white {
        font-size: 1rem;
    }
}

/* Contenedor principal */
.categories {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 4rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Tarjetas */
.card {
    width: 320px;
    height: 150px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto hover */
.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* Íconos */
.card i {
    font-size: 48px;
    color: #0a6350; /* Verde oscuro elegante */
    margin-bottom: 10px;
}

/* Texto */
.card p {
    color: #0a6350;
    font-size: 18px;
    margin: 0;
}

/* ======================================== */
/* FONDO CREMA GLOBAL DEL PROYECTO          */
/* ======================================== */
/* Sobreescribir la clase utilitaria bg-white de Bootstrap
   para aplicar el crema del proyecto en secciones y componentes de página.
   Los modales, dropdowns y menús conservan su fondo blanco mediante
   sus propias reglas CSS (.modal-content, .dropdown-menu, etc.) */
.bg-white {
  background-color: var(--bg-cream) !important;
}

/* El card del formulario de contacto mantiene fondo blanco
   para crear contraste visual sobre el fondo crema de la página */
.contact-form-card {
  background-color: #ffffff !important;
}

/* Modales: conservar blanco (ya definido en .modal-content, pero reforzamos) */
.modal-content {
  background-color: #ffffff !important;
}

/* Dropdowns: conservar blanco */
.dropdown-menu {
  background-color: #ffffff !important;
}

/* Popover y tooltip: conservar blanco */
.popover,
.popover-body {
  background-color: #ffffff !important;
}

/* Inputs del formulario de contacto: fondo gris claro para distinguirse del card blanco */
#contactForm .form-control,
.contact-form-card .form-control {
  background-color: #f5f5f5 !important;
}

/* ======================================== */
/* PÁGINA DE CONTACTO (views/layout/contact.php) */
/* ======================================== */
:root {
    --c-brand:      #C29A59;
    --c-brand-dark: #A9834A;
    --c-dark:       #292724;
    --c-text:       #4a4a4a;
}

/* ── Frase destacada filosofía ───────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   FRASE DESTACADA (views/layout/nosotros.php)
   ------------------------------------------------------------
   Antes era texto pequeno centrado sobre crema: se perdia en la
   pagina. Ahora es una banda oliva a sangre con la frase en gran
   tamano y una comilla gigante de fondo, para que funcione como
   pausa visual entre secciones.
   ══════════════════════════════════════════════════════════════ */
.fil-quote {
    position: relative;
    overflow: hidden;
    margin: 0;
    /* Fondo crema, el mismo de la seccion de pilares: la cita cierra el
       bloque claro y la seccion de la fundadora que sigue aporta el
       contraste oscuro. Con la cita en oliva quedaban dos verdes casi
       iguales pegados y se veia como un error de maquetacion. */
    background: #F5F1EA;
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem clamp(3.5rem, 6vw, 5.5rem);
    text-align: center;
}
/* Comilla decorativa de fondo */
.fil-quote-glyph {
    position: absolute;
    top: .25rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(8rem, 16vw, 14rem);
    line-height: 1;
    color: rgba(194,154,89,.22);
    pointer-events: none;
    user-select: none;
}
.fil-quote-body { position: relative; margin: 0; }
.fil-quote-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3.4vw, 2.75rem);
    font-style: italic;
    font-weight: 600;
    color: #292724;
    line-height: 1.32;
    letter-spacing: -.01em;
    margin: 0 auto;
    max-width: 24ch;
    text-shadow: none;
}
.fil-quote-text em { font-style: italic; color: #b9924a; }

.fil-quote-author {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.fil-quote-rule {
    width: 48px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #C29A59, #e8c068);
    margin-bottom: .55rem;
}
.fil-quote-nombre {
    font-size: .82rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: #b9924a;
}
.fil-quote-rol {
    font-size: .7rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: #6B655D;                       /* 5,2:1 sobre crema */
}

/* ── Sección redes sociales filosofía ───────────────────────────────── */
.fil-social-section {
    background: #F5F1EA;
    padding-bottom: 2.5rem;
}
.fil-social-banner {
    position: relative;
    background: #F5F1EA;
    padding: 3rem 1.5rem 2.25rem;
    text-align: center;
}
.fil-social-banner-content {
    max-width: 720px;
    margin: 0 auto;
}
/* Mismo antetítulo que el resto de la portada: mono, rosa, sin pastilla.
   La versión anterior era dorada y con recuadro, y no se parecía a
   ninguna otra sección. */
.fil-social-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: #6F5325;
    margin-bottom: .6rem;
}
.fil-social-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 700;
    color: #292724;
    line-height: 1.2;
    margin: 0 0 .6rem;
}
.fil-social-subtitle {
    color: #6B655D;
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 auto 1.6rem;
    max-width: 560px;
}

/* Pastillas de perfil. En reposo son claras para no meter tres colores
   saturados en una pagina crema; el color de cada red aparece en el
   icono y toma la pastilla entera al pasar el mouse. */
.fil-social-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
.fil-social-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(41,39,36,.1);
    color: #292724;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease,
                color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fil-social-btn i { font-size: .95rem; transition: color .2s ease; }
.fil-social-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(41,39,36,.16);
}
.fil-social-btn:hover i { color: #fff; }
.fil-social-btn:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }

.fil-social-btn-ig i { color: #dc2743; }
.fil-social-btn-ig:hover {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    border-color: transparent;
}
.fil-social-btn-tk i { color: #010101; }
.fil-social-btn-tk:hover { background: #010101; border-color: #010101; }
.fil-social-btn-fb i { color: #1877f2; }
.fil-social-btn-fb:hover { background: #1877f2; border-color: #1877f2; }

@media (max-width: 575px) {
    .fil-social-banner { padding: 2.25rem 1.25rem 1.75rem; }
    .fil-social-btn    { font-size: .74rem; padding: .55rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .fil-social-btn { transition: none; }
    .fil-social-btn:hover { transform: none; }
}

/* ── Hero genérico (Contacto / Catálogo / Nosotros) ───────────────── */
.ct-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #4A4540 0%, #4A4540 55%, var(--fondo-oscuro) 100%);
    overflow: hidden;
    margin-bottom: -1px;
}
.ct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/contacto.webp) center/cover no-repeat;
    opacity: .45;
}

@media (max-width: 768px) {
    .ct-hero { min-height: 240px; }
    .ct-hero::before { background-image: url(../img/contacto-mobile.webp); }
}

@media (max-width: 576px) {
    .ct-hero { min-height: 220px; }
}
.ct-hero-nav { position: relative; z-index: 10; }

/* El hero recorta su contenido para que la foto y la onda no se salgan,
   pero eso también cortaba los menús desplegables de la barra (cuenta y
   carrito), que aparecían mutilados. Mientras hay uno abierto, el hero
   deja de recortar; la onda inferior conserva su propio recorte. */
.ct-hero:has(.dropdown-menu.show),
.nb-hero-wrapper:has(.dropdown-menu.show) { overflow: visible; }
.ct-hero:has(.dropdown-menu.show) .ct-wave { overflow: hidden; }
.ct-hero:has(.dropdown-menu.show)::before {
    clip-path: inset(0);   /* la imagen de fondo sigue confinada */
}

/* Respaldo para navegadores sin :has() — la clase la pone el propio
   Bootstrap al abrir el menú. */
.ct-hero.nb-menu-abierto,
.nb-hero-wrapper.nb-menu-abierto { overflow: visible; }
.ct-hero.nb-menu-abierto::before { clip-path: inset(0); }

/* En móvil los iconos van a la derecha, junto al botón de menú: el
   panel de la cuenta se ancla a la derecha y se limita al ancho
   visible para que nunca se salga de la pantalla. */
@media (max-width: 991.98px) {
    .nb-admin-dropdown .dropdown-menu,
    .nb-nav-actions .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 10px) !important;
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 2rem);
    }
    .nb-admin-dropdown .dropdown-menu .dropdown-item {
        padding: .6rem 1rem;
        white-space: nowrap;
    }
}
.ct-hero-body {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 4rem;
}

/* ── Hero filosofía: imagen propia ───────────────────────────────────── */
.fil-hero { min-height: 510px !important; }
.fil-hero::before {
    background-image: url(../img/filosofia.webp) !important;
    background-size: cover !important;
    background-position: center -130px !important;
    opacity: .5;
}

/* Responsive para fil-hero */
@media (max-width: 992px) {
    .fil-hero { min-height: 420px !important; }
    .fil-hero::before { background-position: center -80px !important; }
}

@media (max-width: 768px) {
    .fil-hero { min-height: 350px !important; }
    .fil-hero::before { background-image: url(../img/filosofia-mobile.webp) !important; background-position: center center !important; }
}

@media (max-width: 576px) {
    .fil-hero { min-height: 300px !important; }
    .fil-hero::before { background-image: url(../img/filosofia-mobile.webp) !important; background-position: center center !important; }
}
.ct-hero-eyebrow {
    background: rgba(194,154,89,.25);
    border: 1px solid rgba(194,154,89,.5);
    color: #E4E0D8;
    font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 16px; border-radius: 100px; margin-bottom: 1.1rem;
}
.ct-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700; color: #fff;
    line-height: 1.15; margin-bottom: .75rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
.ct-hero-subtitle {
    font-size: 1rem; color: rgba(255,255,255,.78);
    max-width: 520px; line-height: 1.7; margin-bottom: 0;
}

/* Ola decorativa */
.ct-wave {
    position: relative; z-index: 5;
    margin-top: -2px; margin-bottom: -2px; line-height: 0;
}
.ct-wave svg { display: block; width: 100%; }

/* ── Layout principal ────────────────────────────────────────────────── */
/* El fondo va transparente a propósito: .ct-main se monta sobre el hero
   (z-index 8) y, con fondo propio, tapaba la ola decorativa del hero.
   El crema lo aporta el body, que ya es #fdf7f1. */
.ct-main { padding: 0 0 5rem; background: transparent; position: relative; margin-top: -6px; z-index: 8; }

/* ── Tarjeta del formulario ──────────────────────────────────────────── */
.ct-form-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,.1);
    padding: 2.5rem;
    margin-top: -60px;
    position: relative;
    z-index: 20;
}
.ct-form-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem; font-weight: 700; color: var(--c-dark);
    margin-bottom: 1.5rem;
}
.ct-form-card .form-label {
    font-size: .82rem; font-weight: 600; color: #555; margin-bottom: .3rem;
}
.ct-form-card .form-control {
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
    color: #212529;
    font-size: .9rem;
    padding: .65rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.ct-form-card .form-control:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(194,154,89,.18);
    background: #fff;
    outline: none;
}
.ct-form-card .form-control::placeholder { color: #6B655D; }
.ct-form-card textarea.form-control { resize: vertical; min-height: 120px; }

/* Botón enviar */
.ct-submit-btn {
    background: var(--c-brand);
    color: #292724;
    border: none;
    border-radius: 10px;
    padding: .8rem 2rem;
    font-size: .95rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer;
    transition: background .2s;
    box-shadow: none;
    width: 100%;
    justify-content: center;
}
.ct-submit-btn:hover {
    background: var(--c-brand-dark);
    box-shadow: none;
}
.ct-submit-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ── Panel lateral info ──────────────────────────────────────────────── */
.ct-info-panel { padding-top: 2rem; }

/* Tarjetas de dato de contacto */
.ct-info-card {
    display: flex; align-items: flex-start; gap: 1rem;
    background: #fff;
    border: 1px solid #F5F1EA;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: .85rem;
    transition: box-shadow .2s, transform .2s;
}
.ct-info-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.ct-info-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(194,154,89,.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-brand); font-size: 1.15rem; flex-shrink: 0;
}
.ct-info-label { font-size: .73rem; font-weight: 700; color: #6B655D; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem; }
.ct-info-value { font-size: .9rem; color: var(--c-dark); font-weight: 500; line-height: 1.4; }
.ct-info-value a { color: var(--c-brand); text-decoration: none; }
.ct-info-value a:hover { text-decoration: underline; }

/* Horario — mismo estilo que ct-info-card */
.ct-schedule {
    display: flex; align-items: flex-start; gap: 1rem;
    background: #fff;
    border: 1px solid #F5F1EA;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: .85rem;
    transition: box-shadow .2s, transform .2s;
    flex-direction: column;
}
.ct-schedule:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.ct-schedule h6 {
    font-size: .73rem; font-weight: 700; color: #6B655D;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 .6rem;
    display: flex; align-items: center; gap: 7px;
}
.ct-schedule h6 i { color: var(--c-brand); }
.ct-schedule-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .88rem; padding: .25rem 0;
    border-bottom: 1px solid #F5F1EA;
    color: var(--c-text); width: 100%;
}
.ct-schedule-row:last-child { border-bottom: none; }
.ct-schedule-row .day { font-weight: 500; color: var(--c-dark); }
.ct-schedule-row .time { font-weight: 600; color: var(--c-dark); }

/* Redes sociales */
.ct-social-label {
    font-size: .73rem; font-weight: 700; color: #6B655D;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .6rem; display: block;
}
.ct-social-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ct-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #fff; text-decoration: none;
    transition: opacity .18s, transform .18s;
}
.ct-social-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.ct-social-btn.fb  { background: #1877F2; }
.ct-social-btn.ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.ct-social-btn.wa  { background: #25D366; }
.ct-social-btn.tk  { background: #010101; }

/* ── Mapa de ubicación (contacto) ────────────────────────────────────── */
.ct-mapa-marco {
    position: relative;
    margin-top: .9rem;
    border-radius: 16px;
    overflow: hidden;
    height: 300px;
    background: #F5F1EA;
    border: 1px solid #E4E0D8;
    box-shadow: 0 1px 2px rgba(41,39,36,.04), 0 14px 34px rgba(41,39,36,.09);
}
.ct-mapa-marco iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: saturate(.88) contrast(1.02);
}
.ct-mapa-marco::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(194,154,89,.18);
}
.ct-mapa-ampliar {
    position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(4px);
    border: 1px solid #E4E0D8;
    font-size: .73rem; font-weight: 600;
    color: var(--verde-marca-oscuro); text-decoration: none;
    box-shadow: 0 4px 14px rgba(41,39,36,.12);
    transition: background .18s, color .18s, transform .18s;
}
.ct-mapa-ampliar:hover { background: var(--fondo-oscuro-hover); color: #fff; transform: translateY(-1px); }

@media (max-width: 575px) {
    .ct-mapa-marco { height: 240px; }
}

/* ── Separador decorativo ────────────────────────────────────────────── */
.ct-divider {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
}
.ct-divider span { height: 2px; flex: 1; background: #F5F1EA; border-radius: 2px; }
.ct-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); }

/* ── Upload zone ─────────────────────────────────────────────────────── */
.ct-upload-zone {
    position: relative;
    border: 2px dashed #E4E0D8;
    border-radius: 12px;
    padding: 1.4rem 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: #faf8f6;
    min-height: 90px;
    display: flex; align-items: center; justify-content: center;
}
.ct-upload-zone:hover,
.ct-upload-zone.drag-over {
    border-color: #C29A59;
    background: #F5F1EA;
}
.ct-upload-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 2;
}
.ct-upload-content { pointer-events: none; }
.ct-upload-link {
    color: #86662F; font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer;
}
.ct-upload-preview {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .25rem;
}
.ct-upload-clear {
    background: none; border: none; padding: 0; line-height: 1;
    color: #6B655D; cursor: pointer; font-size: 1rem;
    transition: color .15s;
}
.ct-upload-clear:hover { color: #e53e3e; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ct-form-card { margin-top: -30px; padding: 1.75rem; }
    .ct-info-panel { padding-top: 1.5rem; }
}
@media (max-width: 576px) {
    .ct-form-card { border-radius: 14px; }
    .ct-hero-body { padding: 2.5rem 1rem 3.5rem; }
}

/* ======================================== */
/* BOTÓN FLOTANTE WHATSAPP (views/layout/footer.php) */
/* ======================================== */
#wa-float-wrap {
    position: fixed; bottom: 28px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    /* El contenedor no debe capturar clics: su caja invisible (incluye el
       espacio que reserva el tooltip oculto) tapaba el candado de acceso y
       el acordeón del pie en móvil. Solo el botón real recibe la pulsación. */
    pointer-events: none;
}
#wa-float-btn { pointer-events: auto; }
#wa-tooltip.show { pointer-events: auto; }
#wa-tooltip {
    background: #fff; color: #333;
    font-size: .82rem; font-weight: 500;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,.15);
    white-space: nowrap;
    opacity: 0; transform: translateY(6px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    max-width: 220px; text-align: center;
}
#wa-float-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: #25d366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
}
.wa-pulse-ring {
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.45);
    animation: waPulse 2s ease-out infinite;
}
@keyframes waPulse {
    0%   { opacity: .8; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.5); }
    100% { opacity: 0;  transform: scale(1.5); }
}
@media (max-width: 576px) {
    #wa-float-wrap { bottom: 18px; right: 14px; }
    #wa-float-btn  { width: 36px; height: 36px; }
}
#wa-tooltip.show { opacity: 1; transform: translateY(0); }

/* ======================================== */
/* HOME - hero wrapper y secciones          */
/* ======================================== */
.nb-hero-wrapper { position: relative; height: 90vh; overflow: hidden; }
.nb-section-divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 2rem 3rem;
    background: #F5F1EA;
}
.nb-section-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #B8B2AA, transparent);
}
.nb-section-divider-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--verde-marca);
    white-space: nowrap;
}

/* Crema, el mismo de categorías: el durazno anterior partía la página en
   una franja fuerte justo debajo del separador. */
.nb-home-bg-light { background: #F5F1EA; padding: 3rem 0 3.5rem; }
/* Encabezado centrado, gemelo del de categorías. Antes iba a la
   izquierda con el botón a la derecha, y encima llevaba una banda
   separadora: entre las tres cosas quedaba un vacío enorme y el mismo
   mensaje repetido tres veces. */
.nb-home-section-head {
    max-width: 720px;
    margin: 0 auto 2.25rem;
    text-align: center;
}
.nb-home-section-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: #6F5325; margin-bottom: .6rem;
}
.nb-home-section-desc {
    font-size: .95rem; color: #6B655D;
    line-height: 1.7; margin: .5rem 0 0;
}
/* El enlace al catálogo va arriba, a la derecha del encabezado (en celular, centrado debajo) */
.nb-home-head-row { position: relative; margin: 0 0 2.25rem; }
.nb-home-head-row .nb-home-section-head { margin-bottom: 0; }
.nb-home-head-link { position: absolute; right: 0; bottom: .15rem; }
@media (max-width: 991.98px) {
    .nb-home-head-row { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
    .nb-home-head-link { position: static; }
}
.nb-home-bg-white { background: white; padding: 3rem 0; }
.nb-home-section-title { color: #292724; font-size: clamp(1.6rem, 3vw, 2.15rem); font-family: 'Playfair Display', Georgia, serif; font-weight: 700; margin: 0; line-height: 1.15; }
/* Pastilla oliva de navegación, gemela del "Ver todo" de categorías. El
   rosa queda solo para el botón de compra. */
.nb-btn-ver-catalogo {
    flex: none;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.3rem; border-radius: 50px;
    border: 1px solid #4A4540;
    background: #4A4540; color: #fff;
    font-size: .8rem; font-weight: 600; text-decoration: none;
    white-space: nowrap;
    transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.nb-btn-ver-catalogo:hover {
    background: #292724; color: #fff; border-color: #292724; text-decoration: none;
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(41,39,36,.18);
}
.nb-btn-ver-catalogo:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }
.nb-btn-taupe-sm { background: #C29A59; color: #292724; border-radius: 8px; }

/* ---- Tarjetas de producto destacado ---- */
.nb-prod-card { border-radius: 14px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.nb-prod-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.nb-prod-card-link { color: inherit; }
.nb-prod-thumb-wrap { height: 220px; }
.nb-prod-badge-agotado { font-size: .75rem; }
.nb-prod-img { max-height: 200px; max-width: 90%; object-fit: contain; }
.nb-prod-placeholder { color: #6B655D; text-align: center; }
.nb-prod-placeholder .bi { font-size: 3rem; }
.nb-prod-category { font-size: .7rem; font-weight: 600; color: #86662F; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.nb-prod-title { font-size: .95rem; color: #222; font-weight: 700; font-family: 'Inter', sans-serif; }
.nb-prod-price { color: #292724; font-size: 0.95rem; }
.nb-prod-cta { border: none; border-radius: 8px; font-size: .8rem; }
.nb-prod-cta-active { background: #C29A59; }
.nb-prod-empty-icon { font-size: 2.5rem; color: #6B655D; display: block; margin-bottom: .75rem; }

/* ======================================== */
/* DETALLE DE PRODUCTO — nb-pd-*             */
/* ======================================== */

/* Wrapper de página */
.nb-pd-page { background: #F5F1EA; min-height: 60vh; }

/* Layout principal */
.nb-pd-row { align-items: flex-start; }

/* ── Columna imagen ── */
.nb-pd-gallery-wrap {
    position: relative;
}
.nb-pd-badges {
    position: absolute;
    top: 1rem; left: 1rem; right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 4;
    pointer-events: none;
}
.nb-pd-badge-pill {
    background: var(--fondo-oscuro);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 2rem;
}
.nb-pd-badge-agotado {
    background: rgba(26,26,26,.75);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 2rem;
}

/* Miniaturas */
.nb-pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.nb-pd-thumb-item {
    /* Es un <button>: se le quita la apariencia nativa para que se vea
       igual que cuando era un div. */
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    display: block;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1/1;
    background: #E4E0D8;
    transition: border-color .2s;
}
.nb-pd-thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }
.nb-pd-thumb-item:hover { border-color: var(--verde-marca); }
.nb-pd-thumb-item.is-active { border-color: var(--verde-marca); }

/* Imagen principal */
.nb-pd-main-img-wrap {
    position: relative;
    background: #ffffff;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.nb-pd-main-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 2rem;
    opacity: 0;
    transition: opacity .35s ease;
}
.nb-pd-main-img.is-active { opacity: 1; }
.nb-pd-noimg { font-size: 5rem; color: #6B655D; }

/* Flechas carrusel */
.nb-pd-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #E4E0D8;
    background: rgba(255,255,255,.96);
    color: #292724;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 4px 12px rgba(41,39,36,.14);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.nb-pd-prev { left: .6rem; }
.nb-pd-next { right: .6rem; }
.nb-pd-arrow:hover,
.nb-pd-arrow:focus-visible {
    background: #C29A59; border-color: #C29A59; color: #292724;
    box-shadow: 0 6px 16px rgba(194,154,89,.35);
}

/* ── Panel info ── */
.nb-pd-info { padding-left: 2rem; }

/* Eyebrow: MARCA y CATEGORÍA separados */
.nb-pd-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.nb-pd-eyebrow-marca {
    color: #6B655D;
}
.nb-pd-eyebrow-cat {
    color: #86662F;
    margin-bottom: .8rem;
}

/* Título */
.nb-pd-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #292724;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 .4rem;
}

/* Subtítulo (presentación) */
.nb-pd-subtitle {
    font-size: .85rem;
    color: #6B655D;
    margin-bottom: 1.2rem;
}

/* Precio */
.nb-pd-price-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
    padding: .8rem 1rem;
    background: #F5F1EA;
    border-left: 3px solid #C29A59;
}
.nb-pd-price {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #292724;
    letter-spacing: -.01em;
}
.nb-pd-price-meta {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #86662F;
    border: 1px solid #C29A59;
    padding: .15rem .5rem;
}
.nb-pd-price-consulta {
    font-size: 1rem;
    color: #6B655D;
    margin-bottom: 1rem;
}

/* Stock badge */
.nb-pd-stock {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2d8a5e;
    margin-bottom: 1.4rem;
}
.nb-pd-stock::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2d8a5e;
    flex-shrink: 0;
}
.nb-pd-stock-out { color: #c0392b; }
.nb-pd-stock-out::before { background: #c0392b; }

/* Fila de botones */
.nb-pd-btn-row {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.4rem;
}

/* Botón CTA */
.nb-pd-btn-cart {
    flex: 1;
    background: #C29A59;
    color: #292724;
    border: none;
    border-radius: 12px;
    padding: .85rem 2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 0;
}
.nb-pd-btn-cart:hover { background: #C29A59; }
.nb-pd-btn-cart:disabled { background: #ccc; cursor: not-allowed; }

/* WhatsApp secundario */
.nb-pd-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 1;
    padding: .75rem 1rem;
    background: transparent;
    color: #177A45;
    border: 1.5px solid #25d366;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background .2s, color .2s;
    margin-bottom: 0;
}
.nb-pd-btn-wa:hover { background: #25d366; color: #fff; text-decoration: none !important; }

/* WhatsApp citas virtuales */
.nb-help-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    padding: .65rem 1.6rem;
    font-size: .95rem;
    transition: background .2s, color .2s;
}
.nb-help-btn-wa:hover { background: #1ebe5a; color: #fff; text-decoration: none; }

/* Divider + sección detalles */
.nb-pd-divider {
    border: none;
    border-top: 1px solid #E4E0D8;
    margin: 0 0 1.2rem;
}
.nb-pd-section-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6B655D;
    margin-bottom: .8rem;
}
.nb-pd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 0;
    border-bottom: 1px solid #E4E0D8;
    font-size: .82rem;
}
.nb-pd-detail-label { color: #555; font-weight: 400; }
.nb-pd-detail-val { color: #292724; font-weight: 600; text-align: right; }

/* Enlace volver */
.nb-pd-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: #6B655D;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color .15s;
}
.nb-pd-back:hover { color: var(--verde-marca); }

/* ── Sección descripción inferior ── */
.nb-pd-desc-section {
    border-top: 1px solid #E4E0D8;
    padding-top: 2.5rem;
    margin-top: 2.5rem;
}
.nb-pd-desc-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #292724;
    margin-bottom: 1rem;
}
.nb-pd-desc-heading em {
    font-style: italic;
    color: var(--verde-marca);
    font-weight: 400;
}
.nb-pd-desc {
    font-size: .9rem;
    color: #555;
    line-height: 1.85;
    font-style: italic;
    max-width: 680px;
}

/* Relacionados */
.nb-pd-related { border-top: 1px solid #E4E0D8; margin-top: 2.5rem; padding-top: 2rem; }
.nb-pd-related-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #292724;
    margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════
   DETALLE DE PRODUCTO EN MOVIL
   ------------------------------------------------------------------
   En escritorio la pagina es de dos columnas (miniaturas + imagen a
   la izquierda, informacion a la derecha). Ese mismo grid en un
   telefono dejaba las miniaturas encerradas en una columna del 16%
   del ancho y el panel de informacion con margenes desiguales.
   Aqui se rompe el grid y la pagina se rearma como una ficha de
   producto: imagen, tira de miniaturas, y una hoja blanca con toda
   la informacion de compra.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    .nb-pd-page { background: #F5F1EA; }
    .nb-pd-page > .container {
        padding: .5rem 0 2.5rem !important;
        max-width: 100%;
    }

    /* ── Miga de pan: una sola linea, sin romper palabras ────────── */
    .nb-pd-page .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 1.1rem;
        margin-bottom: 1rem !important;
        scrollbar-width: none;
    }
    .nb-pd-page .breadcrumb::-webkit-scrollbar { display: none; }
    .nb-pd-page .breadcrumb-item { flex: none; }
    .nb-pd-page .breadcrumb-item.active {
        max-width: 45vw; overflow: hidden; text-overflow: ellipsis;
    }

    /* ── Se deshace el grid de Bootstrap y se ordena a mano ──────── */
    /* El .row del tema arrastra un margen negativo de 15px heredado de
       Bootstrap 4 que hacia desbordar la pagina a lo ancho. */
    .nb-pd-row {
        display: flex !important;
        flex-direction: column;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 .9rem;
    }
    .nb-pd-row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    .nb-pd-gallery-wrap { order: 1; }
    .nb-pd-thumbs       { order: 2; }
    .nb-pd-info         { order: 3; }

    /* ── Imagen principal: una tarjeta, no un bloque suelto ──────── */
    .nb-pd-gallery-wrap { padding: 0 !important; }
    .nb-pd-main-img-wrap {
        border-radius: 20px;
        border: 1px solid #E4E0D8;
        background: #fff;
        aspect-ratio: 1 / 1;
    }
    .nb-pd-main-img { padding: 1.5rem; }

    .nb-pd-badges { top: 1.6rem; left: 1.9rem; right: 1.9rem; }
    .nb-pd-badge-pill,
    .nb-pd-badge-agotado { font-size: .58rem; padding: .3rem .7rem; }

    .nb-pd-arrow {
        width: 38px; height: 38px;
        background: rgba(255,255,255,.94);
        border-color: #E4E0D8;
        font-size: .9rem;
    }
    .nb-pd-prev { left: .8rem; }
    .nb-pd-next { right: .8rem; }

    /* ── Miniaturas: tira horizontal deslizable ──────────────────── */
    .nb-pd-row > .nb-pd-thumbs {
        flex-direction: row;
        gap: .55rem;
        overflow-x: auto;
        padding: .8rem 0 0 !important;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .nb-pd-thumbs::-webkit-scrollbar { display: none; }
    .nb-pd-thumb-item {
        width: 64px; height: 64px;
        flex: none;
        border-radius: 12px;
        border-width: 1.5px;
        border-color: #E4E0D8;
        background: #fff;
        scroll-snap-align: start;
    }
    .nb-pd-thumb-item.is-active { border-color: #C29A59; }
    .nb-pd-thumb-item img { object-fit: contain; padding: .3rem; }

    /* ── Hoja de informacion ─────────────────────────────────────── */
    .nb-pd-row > .nb-pd-info {
        margin: 1.1rem 0 0;
        padding: 1.6rem 1.2rem 1.4rem !important;
        background: #fff;
        border: 1px solid #F4ECDF;
        border-radius: 20px;
    }

    /* Fichas de marca y categoria, sobre el titulo en importancia */
    .nb-pd-tags {
        display: flex; flex-wrap: wrap; gap: .4rem;
        margin-bottom: .9rem;
    }
    .nb-pd-eyebrow {
        margin: 0 !important;
        padding: .3rem .68rem;
        border-radius: 999px;
        font-size: .58rem;
        letter-spacing: .14em;
    }
    .nb-pd-eyebrow-marca { background: #F5F1EA; color: #6B655D; }
    .nb-pd-eyebrow-cat   { background: #F4ECDF; color: #b0576a; }

    /* Titulo: sin mayusculas forzadas, que los nombres largos se lean */
    .nb-pd-title {
        font-size: 1.5rem;
        line-height: 1.22;
        text-transform: none;
        letter-spacing: -.01em;
        margin-bottom: 1rem;
    }

    /* ── Precio: el dato que el cliente busca primero ────────────── */
    .nb-pd-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .45rem;
        padding: 1.05rem 1.1rem;
        margin-bottom: .9rem;
        background: #F4ECDF;
        border: 1px solid #F4ECDF;
        border-left: 3px solid #C29A59;
        border-radius: 14px;
    }
    .nb-pd-price {
        font-size: 1.95rem;
        line-height: 1;
        color: #292724;
    }
    .nb-pd-price-meta {
        border-radius: 999px;
        padding: .22rem .6rem;
        font-size: .56rem;
    }
    .nb-pd-price-consulta {
        padding: 1rem 1.1rem; margin-bottom: .9rem;
        background: #faf7f4; border-radius: 14px;
        color: #6B655D; font-size: 1.05rem;
    }

    /* Disponibilidad como distintivo, no como texto suelto */
    .nb-pd-stock {
        padding: .42rem .8rem;
        background: #eef5f0;
        border-radius: 999px;
        margin-bottom: 1.3rem;
        font-size: .62rem;
    }
    .nb-pd-stock-out { background: #F5F1EA; }

    /* ── Acciones: a lo ancho y comodas al tacto ─────────────────── */
    .nb-pd-btn-row {
        flex-direction: column;
        gap: .55rem;
        margin-bottom: 1.6rem;
    }
    .nb-pd-btn-cart,
    .nb-pd-btn-wa {
        width: 100%;
        min-height: 52px;
        border-radius: 14px;
        font-size: .74rem;
        letter-spacing: .1em;
    }
    .nb-pd-btn-wa { border-width: 1.5px; }

    /* ── Ficha tecnica en dos columnas ───────────────────────────── */
    .nb-pd-divider { margin-bottom: 1rem; }
    .nb-pd-section-label { margin-bottom: .7rem; }
    .nb-pd-specs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
    .nb-pd-detail-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .18rem;
        padding: .7rem .8rem;
        background: #faf7f4;
        border: 1px solid #F5F1EA;
        border-radius: 12px;
        min-width: 0;
    }
    .nb-pd-detail-label {
        font-size: .56rem; font-weight: 700;
        letter-spacing: .12em; text-transform: uppercase;
        color: #6B655D;
    }
    .nb-pd-detail-val {
        text-align: left;
        font-size: .82rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    /* Los datos largos ocupan la fila completa */
    .nb-pd-specs > .nb-pd-detail-row:first-child { grid-column: auto; }

    .nb-pd-back {
        margin-top: 1.2rem !important;
        margin-bottom: 0;
        font-size: .74rem;
    }

    /* ── Descripcion: tarjeta aparte, sin cursiva ────────────────── */
    .nb-pd-desc-section {
        margin: 1rem .9rem 0;
        padding: 1.5rem 1.2rem 1.6rem;
        background: #fff;
        border: 1px solid #F4ECDF;
        border-top: 1px solid #F4ECDF;
        border-radius: 20px;
    }
    .nb-pd-desc-heading { font-size: 1.35rem; margin-bottom: .8rem; }
    .nb-pd-desc {
        font-style: normal;
        font-size: .87rem;
        line-height: 1.8;
        color: #6B655D;
    }

    /* ── Relacionados ────────────────────────────────────────────── */
    .nb-pd-related {
        margin: 1.6rem .9rem 0;
        padding: 1.5rem 0 0;
        border-top: 1px solid #E4E0D8;
    }
    .nb-pd-related-title { font-size: 1.15rem; margin-bottom: 1rem; }
}

/* Telefonos angostos */
@media (max-width: 400px) {
    .nb-pd-title { font-size: 1.34rem; }
    .nb-pd-price { font-size: 1.75rem; }
    .nb-pd-specs { grid-template-columns: 1fr; }
    .nb-pd-row { padding: 0 .7rem; }
    .nb-pd-desc-section { margin-left: .7rem; margin-right: .7rem; }
}

/* ══════════════════════════════════════════════════════════════
   CATEGORIAS — tarjetas con foto (views/layout/categorias.php)
   ------------------------------------------------------------
   Diseño original de cuatro tarjetas: encabezado centrado, foto
   arriba y boton oliva a lo ancho. El marcado ahora recorre las
   categorias reales de la base de datos, asi que el enlace lleva
   el id numerico que el catalogo espera en ?cat=
   ══════════════════════════════════════════════════════════════ */
.nb-cat-wrapper {
    background: #F5F1EA;
    padding: 3rem 1.5rem 3.5rem;
}

/* Encabezado centrado */
.nb-cat-header {
    max-width: 720px;
    margin: 0 auto 2.25rem;
    text-align: center;
}
.nb-cat-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: #6F5325; margin-bottom: .6rem;
}
.nb-cat-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 700; color: #292724;
    margin: 0 0 .5rem; line-height: 1.15;
}
.nb-cat-desc {
    font-size: .95rem; color: #6B655D;
    line-height: 1.7; margin: 0;
}

/* Rejilla de tarjetas */
.nb-cat-section {
    max-width: 1180px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.nb-cat-card { display: block; text-decoration: none; }
.nb-cat-card:hover, .nb-cat-card:focus { text-decoration: none; }
.nb-cat-card:focus-visible { outline: 2px solid #C29A59; outline-offset: 4px; border-radius: 16px; }

.nb-cat-inner {
    background: #fff;
    border: 1px solid rgba(41,39,36,.07);
    border-radius: 16px;
    padding: .85rem .85rem 1rem;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nb-cat-card:hover .nb-cat-inner {
    transform: translateY(-4px);
    border-color: rgba(41,39,36,.28);
    box-shadow: 0 14px 30px rgba(41,39,36,.13);
}

/* La foto manda la altura: recorte fijo para que fotos de
   proporciones distintas no descuadren la fila. */
.nb-cat-thumb {
    border-radius: 11px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #F5F1EA;
}
.nb-cat-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.nb-cat-card:hover .nb-cat-img { transform: scale(1.05); }

/* Respaldo cuando la categoria no tiene ninguna foto asociada */
.nb-cat-thumb.is-sinfoto {
    display: flex; align-items: center; justify-content: center;
    background: #F5F1EA; color: #6F5325; font-size: 2.4rem;
}

.nb-cat-body {
    padding: .95rem .35rem 0;
    display: flex; flex-direction: column;
    flex: 1;
}
.nb-cat-subtitle {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #6F5325;
    margin: 0 0 .3rem;
}
/* Nombre y "Ver" comparten renglon; margin-top auto lo mantiene pegado
   al fondo del cuerpo para que la fila cierre pareja aunque un nombre
   ocupe dos lineas. */
.nb-cat-titlerow {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .3rem .75rem;
    /* Si el nombre no cabe en un renglon, "Ver" baja a su propia linea en
       vez de quedar descolgado a media altura del nombre partido. */
    flex-wrap: wrap;
    margin-top: auto;
}
.nb-cat-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.22rem; font-weight: 700; color: #292724;
    line-height: 1.25;
    margin: 0;
    min-width: 0;
}
/* Enlace, no boton: la tarjeta entera ya lleva a la categoria, asi que
   el bloque oliva a lo ancho pesaba de mas y competia con el boton de
   compra de las tarjetas de producto. */
.nb-cat-cta {
    flex: none;
    display: inline-flex; align-items: center; gap: .4rem;
    color: #1C1A18;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    padding-bottom: .2rem;
    border-bottom: 1px solid transparent;
    transition: color .22s ease, border-color .22s ease;
}
.nb-cat-cta i { transition: transform .22s ease; }
.nb-cat-card:hover .nb-cat-cta {
    color: #292724;
    border-bottom-color: rgba(74,82,57,.45);
}
.nb-cat-card:hover .nb-cat-cta i { transform: translateX(4px); }

/* ── Tarjetas de categoría: mosaico de fotos con el texto encima ──
   Mismo diseño en escritorio y en móvil. El nombre va sobre un
   degradado oscuro al pie de la foto y "Ver" es un botón redondo.
   Escritorio: la etiqueta dice "Categoría".
   Móvil: la etiqueta muestra el número de productos, en dos columnas,
   y si la cantidad es impar la última ocupa todo el ancho. */
.nb-cat-count { display: none; }

.nb-cat-section.categories,
.nb-cat-section {
    padding: 0;
    width: 100%;
    max-width: 1040px;
    /* 185px en vez de 210px: con 5 categorias activas (skincare, topicos,
       cabina, casa, aparatologia) el minimo anterior solo dejaba caber 4
       por fila y la quinta se iba sola a una fila aparte. Con 185px las
       5 caben alineadas en una sola fila en escritorio. */
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1.25rem;
}

.nb-cat-inner {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #4A4540;
    box-shadow: 0 6px 18px rgba(41,39,36,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.nb-cat-card:hover .nb-cat-inner {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(41,39,36,.22);
}
.nb-cat-card:active .nb-cat-inner { transform: scale(.98); }

/* Las fotos son apaisadas (16:10): una proporción 1:1 recorta mucho
   menos que la vertical 4:5 y se ven más completas. */
.nb-cat-thumb {
    position: relative;
    border-radius: 0;
    aspect-ratio: 1 / 1;
}
.nb-cat-thumb .nb-cat-img { object-position: center 40%; }
.nb-cat-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(26,21,19,0) 48%,
        rgba(26,21,19,.45) 70%,
        rgba(26,21,19,.84) 100%);
    pointer-events: none;
}
.nb-cat-card:hover .nb-cat-img { transform: scale(1.04); }
.nb-cat-thumb.is-sinfoto {
    background: linear-gradient(145deg, #4A4540, #3A3632);
    color: rgba(255,255,255,.35);
    align-items: flex-start;
    padding-top: 22%;
    font-size: 3rem;
}

.nb-cat-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: .9rem .95rem .9rem;
}
/* Etiqueta sobre la foto (escritorio: "Categoría") */
.nb-cat-subtitle,
.nb-cat-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: #F4ECDF;
    margin: 0 0 .3rem;
}
.nb-cat-titlerow {
    flex-wrap: nowrap;
    align-items: center;
    gap: .6rem;
}
.nb-cat-title {
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
    overflow-wrap: anywhere;
}
/* "Ver" como botón redondo con la flecha */
.nb-cat-cta {
    width: 34px; height: 34px;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C29A59;
    color: #292724;
    font-size: 0;            /* oculta la palabra, deja la flecha */
    letter-spacing: 0;
    transition: background .22s ease, transform .22s ease;
}
.nb-cat-cta i { font-size: .92rem; }
.nb-cat-card:hover .nb-cat-cta {
    color: #292724;
    background: #A9834A;
    border-bottom-color: transparent;
}

@media (max-width: 767px) {
    .nb-cat-wrapper  { padding: 2.25rem 1rem 2.5rem; }
    .nb-cat-header   { margin-bottom: 1.5rem; }

    .nb-cat-section.categories,
    .nb-cat-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
    .nb-cat-card:nth-child(odd):last-child { grid-column: 1 / -1; }
    .nb-cat-card:nth-child(odd):last-child .nb-cat-thumb { aspect-ratio: 16 / 9; }

    .nb-cat-inner { border-radius: 16px; }
    .nb-cat-card:hover .nb-cat-inner { transform: none; box-shadow: 0 6px 18px rgba(41,39,36,.12); }
    .nb-cat-card:active .nb-cat-inner { transform: scale(.97); }
    .nb-cat-card:hover .nb-cat-img { transform: none; }
    .nb-cat-thumb.is-sinfoto { font-size: 2.6rem; }

    .nb-cat-body { padding: .85rem .8rem .8rem; }
    /* En móvil la etiqueta muestra el número de productos */
    .nb-cat-subtitle { display: none; }
    .nb-cat-count {
        display: block;
        font-size: .58rem;
        letter-spacing: .14em;
        margin-bottom: .25rem;
    }
    .nb-cat-titlerow { gap: .5rem; }
    .nb-cat-title { font-size: 1.08rem; }
    .nb-cat-cta { width: 32px; height: 32px; }
    .nb-cat-cta i { font-size: .9rem; }
    .nb-cat-card:hover .nb-cat-cta i { transform: none; }
}

@media (max-width: 359px) {
    .nb-cat-title { font-size: .95rem; }
    .nb-cat-cta   { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .nb-cat-inner, .nb-cat-img, .nb-cat-cta, .nb-cat-cta i { transition: none; }
    .nb-cat-card:hover .nb-cat-inner { transform: none; }
    .nb-cat-card:hover .nb-cat-img { transform: none; }
    .nb-cat-card:hover .nb-cat-cta i { transform: none; }
}


.nb-cat-spacer { background: #F5F1EA; padding: 1.5rem 0; }

/* ══════════════════════════════════════════════════════════════
   FRANJA DE CONFIANZA
   Banda sobria entre el catalogo y la formacion. Sin fondo propio
   fuerte para no sumar otra franja de color al home: solo filetes
   arriba y abajo.
   ══════════════════════════════════════════════════════════════ */
.nb-conf {
    background: #F5F1EA;
    border-block: 1px solid rgba(41,39,36,.07);
    padding: 1.6rem 1.5rem;
}
.nb-conf-row {
    max-width: 1180px; margin: 0 auto;
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem 1.5rem;
}
.nb-conf-item { display: block; }
.nb-conf-item,
.nb-conf-link {
    display: flex; align-items: center; gap: .8rem;
    text-decoration: none; color: inherit;
}
.nb-conf-link:hover { text-decoration: none; }
.nb-conf-link:hover .nb-conf-ico { background: #C29A59; color: #292724; }
.nb-conf-link:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; border-radius: 10px; }
.nb-conf-ico {
    flex: none;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F5F1EA; color: #6F5325; font-size: 1.15rem;
    transition: background .22s ease, color .22s ease;
}
.nb-conf-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nb-conf-tit { font-size: .84rem; font-weight: 600; color: #292724; }
.nb-conf-sub { font-size: .75rem; color: #6B655D; line-height: 1.45; }

@media (max-width: 767px) {
    .nb-conf { padding: 1.25rem 1.25rem; }
    .nb-conf-row { grid-template-columns: 1fr 1fr; gap: 1rem .9rem; }
    .nb-conf-ico { width: 36px; height: 36px; font-size: 1rem; }
    .nb-conf-tit { font-size: .78rem; }
    .nb-conf-sub { display: none; }
}
@media (max-width: 400px) {
    .nb-conf-row { grid-template-columns: 1fr; }
    .nb-conf-sub { display: block; }
}

/* ══════════════════════════════════════════════════════════════
   FORMACION EN PORTADA
   Texto a la izquierda, proximas fechas a la derecha. Si no hay
   eventos cargados el texto ocupa el ancho completo y el bloque
   sigue teniendo sentido.
   ══════════════════════════════════════════════════════════════ */
.nb-form {
    background: #F5F1EA;
    padding: 3rem 1.5rem 3.25rem;
}
.nb-form-inner {
    max-width: 1180px; margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2rem 3rem;
    align-items: center;
}
.nb-form-inner:not(:has(.nb-form-lista)) { grid-template-columns: minmax(0, 1fr); }
.nb-form-txt { max-width: 520px; }
.nb-form-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase;
    color: #1C1A18; margin-bottom: .6rem;
}
.nb-form-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700; color: #292724;
    margin: 0 0 .55rem; line-height: 1.15;
}
.nb-form-desc {
    font-size: .92rem; color: #6B655D;
    line-height: 1.7; margin: 0 0 1.4rem;
}
.nb-form-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.5rem; border-radius: 50px;
    background: #4A4540; color: #fff;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, transform .22s ease;
}
.nb-form-btn:hover { background: #3A3632; color: #fff; transform: translateY(-2px); text-decoration: none; }
.nb-form-btn:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }

.nb-form-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.nb-form-item-link {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1rem;
    background: #fff; border: 1px solid rgba(41,39,36,.07);
    border-radius: 14px; text-decoration: none;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nb-form-item-link:hover {
    border-color: rgba(41,39,36,.35);
    box-shadow: 0 8px 20px rgba(41,39,36,.09);
    transform: translateX(3px);
    text-decoration: none;
}
.nb-form-item-link:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }
.nb-form-fecha {
    flex: none;
    width: 52px; height: 52px; border-radius: 12px;
    background: #F5F1EA; color: #1C1A18;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.nb-form-dia { font-size: 1.2rem; font-weight: 700; }
.nb-form-mes {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .58rem; letter-spacing: .1em; margin-top: .15rem;
}
.nb-form-item-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.nb-form-item-tit { font-size: .88rem; font-weight: 600; color: #292724; line-height: 1.35; }
.nb-form-item-sub { font-size: .76rem; color: #6B655D; line-height: 1.45; }
.nb-form-item-flecha { flex: none; color: #6B655D; font-size: .9rem; }
.nb-form-item-link:hover .nb-form-item-flecha { color: #1C1A18; }

@media (max-width: 900px) {
    .nb-form-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .nb-form-txt { max-width: none; }
}
@media (max-width: 767px) {
    .nb-form { padding: 2.25rem 1.25rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nb-form-btn, .nb-form-item-link, .nb-conf-ico { transition: none; }
    .nb-form-btn:hover, .nb-form-item-link:hover { transform: none; }
}

/* ======================================== */
/* FOOTER - Horario de atención              */
/* ======================================== */
.ft-links li.ft-hours-block { display: block; margin-top: .8rem; }
.ft-hours-label {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: .75rem; font-weight: 700; color: #F5F1EA;
    font-style: italic; letter-spacing: .04em; margin-bottom: .5rem;
}
.ft-hours-table { width: 100%; border-collapse: collapse; font-size: .79rem; font-family: 'Inter', sans-serif; }
.ft-hours-day    { color: rgba(245,241,234,.92); padding-bottom: .28rem; white-space: nowrap; }
.ft-hours-value  { color: rgba(245,241,234,.8); text-align: right; padding-bottom: .28rem; }
.ft-hours-closed-day   { color: rgba(245,241,234,.88); }
.ft-hours-closed-value { color: rgba(245,241,234,.88); text-align: right; }

/* ======================================== */
/* FOOTER REDISEÑADO (views/layout/footer.php) */
/* ======================================== */
.ft-main {
    position: relative;
    background: var(--footer-bg);
    color: rgba(245,241,234,1);
    padding-top: 4rem;
    font-family: 'Inter', sans-serif;
}
.ft-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1.6fr;
    gap: 3rem;
}
/* MARCA */
.ft-brand {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ft-logo {
    max-width: 180px;
    
    height: auto;
    margin-bottom: .5rem;
    /* Logo en su dorado original */
}
.ft-tagline {
    font-family: 'Inter', sans-serif;
    font-size: .83rem;
    color: rgba(245,241,234,.93);
    line-height: 1.75;
    margin-bottom: 1.4rem;
    max-width: 260px;
}
.ft-socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.ft-social {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    color: rgba(245,241,234,.78);
    font-size: .95rem; text-decoration: none;
    border: 1px solid rgba(245,241,234,.22);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.ft-social:hover {
    background: #C29A59; color: #292724; border-color: #C29A59;
    transform: translateY(-2px);
}

/* COLUMNAS */
/* ── Acordeón footer estilo card (móvil) ────────────────────────────── */
/* Filas separadas por hilos, sin cajas ni píldoras: se lee como el
   índice de un documento y no como una lista de botones sueltos. */
.ft-mobile-accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1.75rem;
    padding: 0;
    border-top: 1px solid rgba(245,241,234,.16);
}
.ft-acc-item {
    border: 0;
    border-bottom: 1px solid rgba(245,241,234,.16);
    border-radius: 0;
    background: none;
    overflow: hidden;
}
.ft-acc-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 1.05rem .15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: left;
}
.ft-acc-left {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}
/* El icono queda como una marca discreta, no como un botón de color */
.ft-acc-icon-wrap {
    width: auto; height: auto;
    border-radius: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    font-size: .82rem;
    color: rgba(194,154,89,.85);
    flex-shrink: 0;
}
.ft-acc-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #F5F1EA;
}
.ft-acc-chevron {
    color: rgba(245,241,234,.45);
    font-size: .75rem;
    transition: transform .3s ease, color .2s;
    flex-shrink: 0;
}
.ft-acc-btn[aria-expanded="true"] .ft-acc-chevron {
    transform: rotate(180deg);
    color: #C29A59;
}
.ft-acc-btn[aria-expanded="true"] .ft-acc-label { color: #fff; }
.ft-acc-body {
    padding: 0 0 1.1rem .15rem;
    border-top: 0;
}

.ft-col { padding-top: .25rem; }
/* Boletín como bloque destacado: en un pie con solo listas de enlaces,
   la suscripción es la única acción que le interesa al negocio, así que
   se resalta con una tarjeta propia en vez de verse igual que el resto. */
.ft-col-newsletter {
    background: rgba(245,241,234,.06);
    border: 1px solid rgba(245,241,234,.14);
    border-radius: 14px;
    padding: 1.5rem 1.4rem;
}
#ftNewsletter.ft-acc-body {
    background: rgba(245,241,234,.06);
    border: 1px solid rgba(245,241,234,.14);
    border-radius: 14px;
    padding: 1.1rem 1.1rem 1.25rem;
    margin: 0 .15rem 1.1rem;
}
.ft-col-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: #F5F1EA;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    letter-spacing: .01em;
    text-transform: none;
    margin-bottom: 1.2rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(194,154,89,.35);
}
.ft-links {
    list-style: none;
    padding: 0; margin: 0;
}
.ft-links li {
    display: flex; align-items: flex-start; gap: 7px;
    margin-bottom: .65rem;
    font-size: .83rem;
    color: rgba(245,241,234,.93);
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
}
.ft-links a {
    display: flex; align-items: center; gap: 6px;
    color: rgba(245,241,234,.93);
    text-decoration: none;
    font-size: .83rem;
    font-family: 'Inter', sans-serif;
    transition: color .18s, gap .18s;
}
.ft-links a:hover { color: #F5F1EA; gap: 9px; }
.ft-links a i { font-size: .68rem; flex-shrink: 0; }
.ft-ic { color: #C29A59; font-size: .78rem; margin-top: 2px; flex-shrink: 0; }


/* NEWSLETTER */
.ft-nl-desc {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    color: rgba(245,241,234,.55);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.ft-nl-wrap {
    display: flex;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(245,241,234,.22);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}
.ft-nl-wrap:focus-within { border-color: #C29A59; }
.ft-nl-input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: .65rem 1rem;
    color: #F5F1EA; font-size: .83rem;
    font-family: 'Inter', sans-serif;
}
.ft-nl-input::placeholder { color: rgba(245,241,234,.88); }
.ft-nl-btn {
    background: #C29A59;
    border: none; color: #292724;
    padding: 0 1rem; cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
}
.ft-nl-btn:hover { background: #A9834A; }
.ft-nl-note {
    font-family: 'Inter', sans-serif;
    font-size: .73rem;
    color: rgba(245,241,234,.88);
    margin-top: .6rem; margin-bottom: 0;
}

/* DIVISOR */
.ft-divider {
    border: none;
    border-top: 1px solid rgba(245,241,234,.12);
    margin-top: 3rem;
}

/* COPYRIGHT */
.ft-bottom {
    background: rgba(0,0,0,.18);
    padding: 1rem 0;
}
.ft-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.ft-bottom p {
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    color: rgba(245,241,234,.9);
    margin: 0;
}
.ft-bottom a { color: rgba(245,241,234,.93); text-decoration: none; }
.ft-bottom a:hover { color: #F5F1EA; }
.ft-bottom span { color: rgba(245,241,234,.93); font-weight: 400; }

/* Acceso del personal — candado del pie, sin bordes */
.ft-acceso {
    margin-left: auto;
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(245,241,234,.50);
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.ft-acceso:hover,
.ft-acceso:focus-visible {
    color: #F5F1EA;
    transform: translateY(-1px);
}
.ft-acceso:focus-visible { outline: 2px solid rgba(245,241,234,.88); outline-offset: 3px; }

/* El crédito del desarrollador se recuesta hacia la derecha,
   junto al candado, en lugar de quedar centrado */
.ft-bottom-inner p:nth-of-type(2) { margin-left: auto; }
.ft-bottom-inner .ft-acceso { margin-left: 1.25rem; }

@media (max-width: 575px) {
    .ft-bottom-inner .ft-acceso { margin-left: 0; }
    .ft-bottom-inner p:nth-of-type(2) { margin-left: 0; }
}

/* ── Modal de acceso del personal (candado del pie) ───────────────── */
.apm-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: rgba(28,32,22,.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s ease;
}
.apm-overlay.is-open { opacity: 1; }
.apm-overlay[hidden] { display: none; }

.apm-card {
    position: relative;
    width: 100%; max-width: 400px;
    max-height: 92vh; overflow-y: auto;
    background: #fff;
    border: 1px solid #E4E0D8;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(41,39,36,.05), 0 22px 60px rgba(41,39,36,.28);
    font-family: 'Inter', sans-serif;
    color: #292724;
    transform: translateY(14px) scale(.985);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.apm-overlay.is-open .apm-card { transform: none; }

.apm-cerrar {
    position: absolute; top: .7rem; right: .7rem; z-index: 2;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    font-size: .8rem; cursor: pointer;
    transition: background .18s, color .18s;
}
.apm-cerrar:hover { background: rgba(255,255,255,.28); color: #fff; }

/* Banda superior */
.apm-top {
    background: var(--fondo-oscuro-hover);
    padding: 1.6rem 1.9rem 1.4rem;
    text-align: center;
    border-radius: 15px 15px 0 0;
    position: relative;
}
.apm-top::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #3A3632, var(--fondo-oscuro), #3A3632);
}
.apm-logo { max-width: 132px; } /* logo en su dorado original */
.apm-kicker {
    margin-top: .9rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.66);
}

.apm-body { padding: 1.9rem 1.9rem 1.6rem; }

.apm-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #F5F1EA; border: 1px solid #E4E0D8; border-radius: 999px;
    padding: .24rem .7rem; margin-bottom: .85rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--verde-marca-oscuro);
}
.apm-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0 0 .3rem;
    color: #292724;
}
.apm-sub { font-size: .8rem; color: #6B655D; margin: 0 0 1.5rem; line-height: 1.55; }

.apm-field { margin-bottom: 1rem; }
.apm-label {
    display: block; font-size: .72rem; font-weight: 700;
    letter-spacing: .03em; color: #6B655D; margin-bottom: .35rem;
}
.apm-input {
    width: 100%; padding: .72rem .9rem;
    border: 1px solid #E4E0D8; border-radius: 9px;
    font-size: .88rem; font-family: inherit; color: #292724;
    background: #fcfcfa; outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.apm-input:focus { border-color: var(--verde-marca-oscuro); background: #fff; box-shadow: 0 0 0 3px rgba(41,39,36,.11); }
.apm-input::placeholder { color: #6B655D; }

.apm-pass { position: relative; }
.apm-pass .apm-input { padding-right: 2.9rem; }
.apm-eye {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #6B655D; cursor: pointer;
    padding: .3rem .4rem; font-size: 1rem; line-height: 1;
}
.apm-eye:hover { color: var(--verde-marca-oscuro); }

.apm-btn {
    width: 100%; margin-top: .4rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--fondo-oscuro-hover); color: #fff; border: 0; border-radius: 9px;
    padding: .8rem 1rem; font-size: .9rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s;
}
.apm-btn:hover { background: #3A3632; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(41,39,36,.26); }

.apm-foot {
    border-top: 1px solid #E4E0D8;
    padding: .95rem 1.9rem 1.2rem;
    text-align: center; background: #fbfbf8;
    border-radius: 0 0 15px 15px;
}
.apm-cliente {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: var(--verde-marca-oscuro);
    text-decoration: none;
}
.apm-cliente:hover { color: #1C1A18; text-decoration: underline; }

@media (max-width: 480px) {
    .apm-body, .apm-top, .apm-foot { padding-left: 1.3rem; padding-right: 1.3rem; }
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .ft-grid { grid-template-columns: 1fr 1fr; }
    .ft-brand { grid-column: 1 / -1; }
    .ft-mobile-accordion { grid-column: 1 / -1; }
    .ft-tagline { max-width: 100%; }
}
@media (max-width: 575px) {
    .ft-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .ft-bottom-inner { flex-direction: column; text-align: center; }

    /* Bloque de marca centrado y con jerarquía clara */
    .ft-brand { align-items: center; text-align: center; gap: .35rem; }
    .ft-logo { max-width: 148px; margin: 0 auto .35rem; }
    .ft-tagline {
        font-size: .8rem; line-height: 1.7;
        margin: 0 auto 1.35rem; max-width: 30ch;
    }
    .ft-socials { justify-content: center; gap: .6rem; }

    /* El acordeón vuelve a alinearse a la izquierda: es una lista */
    .ft-mobile-accordion { margin-top: 1.5rem; text-align: left; }
    .ft-acc-body { padding-bottom: 1rem; }
}

/* ================================================================
   RESPONSIVE GLOBAL — STETIK LAB ACADEMY
   Cubre todos los elementos del sitio que no tenían reglas móviles.
   NO modifica el diseño desktop (>992px).
   Breakpoints: 991px (tablet), 767px (landscape phone), 575px (portrait)
================================================================ */

/* ─────────────────────────────────────────────────────────────────
   HERO PRINCIPAL (home) — nb-hero-wrapper
───────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .nb-hero-wrapper          { height: 55vh; min-height: 280px; }
    .nb-hero-desc             { font-size: 1rem; }
}
@media (max-width: 575px) {
    /* iOS Safari svh fallback */
    .nb-hero-wrapper          { height: 50vh; min-height: 320px; }
    .nb-hero-eyebrow          { font-size: 1rem; letter-spacing: 2px; }
    .nb-hero-desc             { font-size: .9rem; }
    .nb-hero-content-inner    { padding: 0 1rem; }
}

/* ─────────────────────────────────────────────────────────────────
   SEPARADOR DE SECCIÓN
───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .nb-section-divider { padding: 1.5rem 1.5rem; }
}
@media (max-width: 575px) {
    .nb-section-divider { padding: 1.2rem 1rem; }
    .nb-section-divider-label { font-size: .65rem; letter-spacing: .14em; }
}

/* ─────────────────────────────────────────────────────────────────
   SECCIÓN CATEGORÍAS
───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   HOME — secciones de productos
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .nb-home-bg-light,
    .nb-home-bg-white { padding: 2rem 0; }
    .nb-home-section-title { font-size: 1.3rem; }
    .nb-prod-thumb-wrap { height: 180px; }
}

/* ─────────────────────────────────────────────────────────────────
   FILOSOFIA — quote + banner + social embeds
───────────────────────────────────────────────────────────────── */

/* Tarjeta de embed (Facebook, Instagram, TikTok) */
.fil-embed-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(0,0,0,.08);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 580px;
}
.fil-embed-card-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.fil-embed-card-body iframe,
.fil-embed-card-body blockquote {
    width: 100% !important;
    max-width: 100% !important;
}
.fil-embed-card-body iframe {
    display: block;
    height: 100%;
    border: none;
}

@media (max-width: 991px) {
    .fil-embed-card { height: 480px; }
}
@media (max-width: 767px) {
    .fil-quote-text     { max-width: 20ch; }
    .fil-quote-nombre   { font-size: .76rem; letter-spacing: .16em; }
    .fil-quote-rol      { font-size: .62rem; letter-spacing: .1em; }
    .fil-social-banner  { padding: 2rem 1.25rem; }
    .fil-embed-card     { height: 420px; }
    .fil-embed-card-body iframe { height: 380px !important; }
}
@media (max-width: 575px) {
    .fil-social-banner  { padding: 1.75rem 1rem; }
    .fil-embed-card     { height: 380px; }
    .fil-embed-card-body iframe { height: 340px !important; }
    .ct-hero-body       { padding: 2rem 1rem 3rem; }
}

/* ─────────────────────────────────────────────────────────────────
   NEWSLETTER MODAL
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .nb-nl-dialog       { margin: .75rem; }
    .nb-nl-content      { border-radius: 14px; }
    .nb-nl-header       { padding: 1.25rem 1rem .75rem; }
    .nb-nl-header img.nb-nl-logo { max-width: 100px; }
    .nb-nl-body         { padding: 1.25rem 1rem; }
    .nb-nl-title        { font-size: 1.15rem; }
    .nb-nl-benefits     { gap: .4rem; }
}

/* ─────────────────────────────────────────────────────────────────
   LOGIN PAGE — pequeños ajustes extra
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    body.login-page { background-size: cover; }
    body.login-page .login-card { padding: 2rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────────
   SERVICIO / CATÁLOGO — encabezados de página
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .nb-cat-spacer  { padding: .75rem 0; }
}

/* ─────────────────────────────────────────────────────────────────
   GENERAL — imagen de logo en footer y modal sin desborde
───────────────────────────────────────────────────────────────── */
img { max-width: 100%; }

/* Evitar desborde horizontal global */
body { overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────────────
   SOBRE MI — founder section extra tweaks
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .founder-mision  { padding: .65rem 1rem; }
}

/* ─────────────────────────────────────────────────────────────────
   BOTÓN "AGENDAR CITA" oculto en xs para que no rompa navbar
───────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .nb-btn-agendar { padding: .4rem 1rem !important; font-size: .76rem !important; }
}


/* ── Navbar mobile: fondo oscuro cuando el menú hamburguesa está abierto ── */
/* (Movido a "BARRA DE NAVEGACIÓN EN MÓVIL" al final del archivo) */

/* ======================================== */
/* CATÁLOGO DE PRODUCTOS — filtros SkinLab  */
/* views/layout/service_*.php               */
/* ======================================== */

/* Hero / cabecera del catálogo */
.nb-clog-hero {
    position: relative;
    min-height: 510px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #4A4540 0%, #4A4540 60%, var(--fondo-oscuro) 100%);
    overflow: hidden;
}
.nb-clog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/catalogo.webp) center/cover no-repeat;
    opacity: .45;
}

@media (max-width: 768px) {
    .nb-clog-hero { min-height: 400px !important; }
    .nb-clog-hero::before { background-image: url(../img/catalogo-mobile.webp) !important; }
}

@media (max-width: 576px) {
    .nb-clog-hero { min-height: 250px !important; }
}

/* Ola de transición */
.nb-clog-wave { position: relative; z-index: 5; margin-top: 0; margin-bottom: 0; line-height: 0; }
.nb-clog-wave svg { display: block; width: 100%; }

/* nav compacto para carrito/checkout/detalle */
/* overflow-x: clip en vez de overflow: hidden: el fondo sigue recortado a
   lo ancho, pero los menús desplegables de la barra (Mi cuenta) pueden
   salir por debajo de la franja sin quedar cortados. */
.nb-clog-hero2 { background: linear-gradient(135deg, #4A4540 0%, #4A4540 60%, var(--fondo-oscuro) 100%); position: relative; overflow: visible; overflow-x: clip; padding-bottom: 3rem; }
.nb-clog-hero2::before { content: ''; position: absolute; inset: 0; background: url(../img/productos.webp) center/cover no-repeat; opacity: .35; }
@media (max-width: 768px) {
    .nb-clog-hero2::before { background-image: url(../img/productos-mobile.webp) !important; }
}
.nb-clog-hero2-nav { position: relative; z-index: 10; }
.nb-clog-hero2-divider { display: none; }

/* Sección principal */
.nb-clog-main { background: #F5F1EA; padding: 0 0 5rem; }

/* ── Banner de sección catálogo ── */
.nb-catalog-banner {
    background: var(--fondo-oscuro);
    padding: 1.6rem 0 1.4rem;
    margin-bottom: 2.2rem;
    position: relative;
    overflow: hidden;
}
.nb-catalog-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 0 3.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.nb-catalog-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #F5F1EA;
    opacity: .85;
    margin-bottom: .6rem;
}
.nb-catalog-banner-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: .55rem;
}
.nb-catalog-banner-title em {
    color: #F5F1EA;
    font-style: italic;
}
.nb-catalog-banner-sub {
    font-size: .84rem;
    color: rgba(255,255,255,.72);
    max-width: 480px;
    margin: 0;
    line-height: 1.55;
}
.nb-catalog-banner-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    flex-shrink: 0;
}
.nb-catalog-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .38rem .9rem;
    border-radius: 50px;
    letter-spacing: .03em;
    backdrop-filter: blur(4px);
}
@media (max-width: 767px) {
    .nb-catalog-banner-inner { flex-direction: column; align-items: flex-start; }
    .nb-catalog-banner-title { font-size: 1.45rem; }
    .nb-catalog-banner { padding: 2rem 0 1.8rem; }
}

/* ── Filter bar rediseñada ── */
.nb-fbar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    margin: 2rem 0 1.75rem;
    position: sticky;
    top: 12px;
    z-index: 100;
    overflow: hidden;
}
.nb-fbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem 0 0;
    min-height: 58px;
    flex-wrap: wrap;
}

/* Tabs */
.nb-ftabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}
.nb-ftabs::-webkit-scrollbar { display: none; }

.nb-ftab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 1.1rem;
    height: 58px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6B655D;
    font-size: .82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
    flex-shrink: 0;
}
.nb-ftab:hover { color: #86662F; }
.nb-ftab.is-active {
    color: #292724;
    border-bottom-color: #C29A59;
}

.nb-ftab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 .4rem;
    border-radius: 2rem;
    background: #F5F1EA;
    color: #86662F;
    font-size: .65rem;
    font-weight: 700;
    transition: background .18s, color .18s;
}
.nb-ftab.is-active .nb-ftab-badge {
    background: #C29A59;
    color: #292724;
}

/* Derecha */
.nb-fbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.nb-fbar-count {
    font-size: .78rem;
    color: #6B655D;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.nb-fbar-count strong { color: #555; font-weight: 700; }
.nb-fbar-count i { font-size: .75rem; }

.nb-fbar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.nb-fbar-search i {
    position: absolute;
    left: .75rem;
    color: #ccc;
    font-size: .85rem;
    pointer-events: none;
}
.nb-fbar-search input {
    width: 180px;
    padding: .4rem .9rem .4rem 2.1rem;
    border: 1.5px solid #E4E0D8;
    border-radius: 2rem;
    background: #F5F1EA;
    font-size: .82rem;
    color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s, width .25s;
    font-family: 'Inter', sans-serif;
}
.nb-fbar-search input:focus {
    border-color: #C29A59;
    box-shadow: 0 0 0 3px rgba(194,154,89,.1);
    width: 220px;
    background: #fff;
}

/* ── Sidebar filter ── */
.nb-catalog-row { align-items: flex-start; padding-top: 2rem; }

.nb-sf-aside {
    position: sticky;
    top: 80px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
}

.nb-sf-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    padding: 1.25rem 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.nb-sf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
}
.nb-sf-title {
    font-size: 1rem;
    font-weight: 700;
    color: #292724;
    font-family: 'Playfair Display', Georgia, serif;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.nb-sf-title i { color: #86662F; font-size: .95rem; }

.nb-sf-subtitle {
    font-size: .75rem;
    color: #6B655D;
    margin: 0 0 .75rem;
}

.nb-sf-clear {
    font-size: .72rem;
    color: #86662F;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

.nb-sf-hr {
    border: none;
    border-top: 1px solid #F5F1EA;
    margin: .75rem 0;
}

.nb-sf-section-btn {
    width: 100%;
    background: none;
    border: none;
    padding: .3rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    font-weight: 700;
    color: #555;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.nb-sf-section-btn:hover { color: #292724; }
.nb-sf-chevron {
    font-size: .7rem;
    transition: transform .2s;
    color: #6B655D;
}
.nb-sf-chevron-down { transform: rotate(180deg); }

.nb-sf-list {
    list-style: none;
    padding: .5rem 0 0;
    margin: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    max-height: 600px;
}
.nb-sf-list.nb-sf-collapsed { max-height: 0; padding: 0; }

/* Ítems de categoría */
.nb-sf-item {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .6rem;
    border-radius: 8px;
    font-size: .84rem;
    color: #666;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.nb-sf-item:hover { background: #F5F1EA; color: #86662F; }
.nb-sf-item.is-active {
    background: #F5F1EA;
    color: #86662F;
    font-weight: 600;
}
.nb-sf-item.is-active .nb-sf-icon { color: #86662F; }
.nb-sf-icon { font-size: .75rem; color: #ccc; flex-shrink: 0; }

/* Checkboxes de marca */
.nb-sf-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .4rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .83rem;
    color: #555;
    font-family: 'Inter', sans-serif;
    transition: background .15s;
    user-select: none;
}
.nb-sf-check:hover { background: #F5F1EA; color: #86662F; }
.nb-sf-check input[type="checkbox"] { display: none; }
.nb-sf-check-box {
    width: 16px; height: 16px;
    border: 1.5px solid #B8B2AA;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s, background .15s;
}
.nb-sf-check input:checked ~ .nb-sf-check-box {
    background: #C29A59;
    border-color: #C29A59;
}
.nb-sf-check input:checked ~ .nb-sf-check-box::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* Badge de conteo */
.nb-sf-count {
    margin-left: auto;
    font-size: .63rem;
    color: #6B655D;
    font-weight: 600;
    flex-shrink: 0;
}
.nb-sf-item.is-active .nb-sf-count { color: #86662F; }
.nb-sf-link.is-active .nb-sf-count { color: #86662F; }

/* Lista de marcas — scroll cuando hay muchas */
.nb-sf-brands {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #C29A59 #F5F1EA;
    padding-right: .25rem;
}
.nb-sf-brands::-webkit-scrollbar { width: 5px; }
.nb-sf-brands::-webkit-scrollbar-track { background: #F5F1EA; border-radius: 99px; }
.nb-sf-brands::-webkit-scrollbar-thumb { background: #C29A59; border-radius: 99px; }

/* Barra superior del área de productos */
.nb-clog-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0 1rem;
    flex-wrap: wrap;
}

/* Grid de productos */
.nb-clog-item { transition: opacity .2s; }
.nb-clog-item.nb-hidden { display: none !important; }

/* ── Sidebar filtros ── */
.nb-sf-aside { position: sticky; top: 80px; }

/* Buscador */
.nb-sf-search-wrap {
    position: relative;
    margin-bottom: 1.75rem;
}
.nb-sf-search-wrap i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6B655D;
    font-size: .85rem;
    pointer-events: none;
}
.nb-sf-search-wrap input {
    width: 100%;
    padding: .5rem 1rem .5rem 2.2rem;
    border: 1.5px solid #E4E0D8;
    border-radius: 8px;
    background: #fff;
    font-size: .8rem;
    color: #333;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.nb-sf-search-wrap input::placeholder { color: #6B655D; }
.nb-sf-search-wrap input:focus {
    border-color: #C29A59;
    box-shadow: 0 0 0 3px rgba(194,154,89,.1);
}

/* Grupo de filtro */
.nb-sf-group {
    margin-bottom: 0;
    border-bottom: 1px solid #F5F1EA;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
}
.nb-sf-group:last-child { border-bottom: none; margin-bottom: 0; }

.nb-sf-group-label {
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #6B655D;
    margin: 0 0 .55rem;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.nb-sf-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Ítem de categoría */
.nb-sf-link {
    background: none;
    border: none;
    padding: .3rem .45rem;
    font-size: .78rem;
    color: #777;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: left;
    width: 100%;
    border-radius: 6px;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.nb-sf-link::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    border: 1.5px solid #B8B2AA;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.nb-sf-link:hover { background: #F5F1EA; color: #86662F; }
.nb-sf-link:hover::before { border-color: #C29A59; }
.nb-sf-link.is-active {
    background: #F5F1EA;
    color: #86662F;
    font-weight: 600;
}
.nb-sf-link.is-active::before {
    background: #C29A59;
    border-color: #C29A59;
}

/* Checkboxes de marca */
.nb-sf-check {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .76rem;
    color: #777;
    font-family: 'Inter', sans-serif;
    user-select: none;
    transition: background .15s, color .15s;
    width: 100%;
}
.nb-sf-check:hover { background: #F5F1EA; color: #86662F; }
.nb-sf-check-label { flex: 1; min-width: 0; }
.nb-sf-check input[type="checkbox"] { display: none; }
.nb-sf-check-box {
    width: 13px; height: 13px;
    border: 1.5px solid #B8B2AA;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    transition: border-color .15s, background .15s;
    background: #fff;
}
.nb-sf-check:hover .nb-sf-check-box { border-color: #C29A59; }
.nb-sf-check input:checked ~ .nb-sf-check-box {
    background: #C29A59;
    border-color: #C29A59;
}
.nb-sf-check input:checked ~ .nb-sf-check-box::after {
    content: '';
    position: absolute;
    left: 2px; top: 0px;
    width: 4px; height: 7px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.nb-sf-check input:checked ~ span:last-child { color: #86662F; font-weight: 600; }

/* ── Barra superior productos ── */
.nb-clog-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 1.1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #F5F1EA;
    margin-bottom: 1.25rem;
}
.nb-topbar-count {
    font-size: .88rem;
    color: #888;
}
.nb-topbar-count strong { color: #333; }
.nb-topbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.nb-topbar-sort {
    font-size: .82rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.nb-topbar-sort select {
    border: 1.5px solid #E4E0D8;
    border-radius: 8px;
    padding: .28rem .7rem;
    font-size: .82rem;
    color: #333;
    background: #fff;
    cursor: pointer;
    outline: none;
    font-family: 'Inter', sans-serif;
}
.nb-topbar-views {
    display: flex;
    gap: .25rem;
}
.nb-view-btn {
    background: none;
    border: 1.5px solid #E4E0D8;
    border-radius: 7px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: #6B655D;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-size: .9rem;
}
.nb-view-btn:hover,
.nb-view-btn.is-active {
    border-color: #C29A59;
    color: #86662F;
}

/* ── Tarjeta de producto nueva ── */
/* ── Product Card ─────────────────────────────────────────────────── */
.nb-pc {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.nb-pc:hover {
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    transform: translateY(-6px);
}

/* Imagen */
.nb-pc-thumb {
    position: relative;
    background: #f5f3f0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}
.nb-pc-fav { display: none; }
.nb-pc-img-link {
    display: contents;
    cursor: pointer;
}
.nb-pc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.nb-pc:hover .nb-pc-img { transform: scale(1.05); }
/* Producto sin foto cargada. Un cuadro gris con un icono enorme se lee
   como error del sitio; esto se lee como "todavia no hay foto". */
.nb-pc-noimg {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .5rem;
    width: 100%; height: 100%;
    background: #F5F1EA; color: #6B655D;
    font-size: 2rem; text-decoration: none;
}
.nb-pc-noimg span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .58rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: #6B655D;
}
.nb-pc-noimg:hover { color: #86662F; text-decoration: none; }

/* Carrusel */
.nb-pc-carousel { cursor: default; }
.nb-pc-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.nb-pc-slide.is-active { opacity: 1; pointer-events: auto; }
.nb-pc-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #E4E0D8;
    background: rgba(255,255,255,.96);
    color: #292724;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity .2s, background .2s, border-color .2s;
    padding: 0; line-height: 1;
    box-shadow: 0 3px 10px rgba(41,39,36,.14);
}
.nb-pc-prev { left: .4rem; }
.nb-pc-next { right: .4rem; }
.nb-pc-carousel:hover .nb-pc-arrow,
.nb-pc-arrow:focus-visible { opacity: 1; }
.nb-pc-arrow:hover { background: #C29A59; border-color: #C29A59; color: #292724; }
/* En pantallas táctiles no hay "hover": las flechas se muestran siempre */
@media (hover: none) { .nb-pc-arrow { opacity: 1; } }
.nb-pc-dots {
    position: absolute;
    bottom: .5rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .3rem; z-index: 5;
}
.nb-pc-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.nb-pc-dot.is-active { background: var(--fondo-oscuro); transform: scale(1.3); }

/* Badge agotado */
.nb-pc-badge-agotado {
    border-radius: 6px;
    position: absolute;
    top: .8rem; left: .8rem;
    background: rgba(30,30,30,.7);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .28rem .7rem;
    border-radius: 2rem;
    letter-spacing: .06em;
    z-index: 7;
    backdrop-filter: blur(4px);
}
/* Badges ocultos en este diseño */
.nb-pc-badge-desc,
.nb-pc-badge-star { display: none; }

/* Body */
.nb-pc-body {
    padding: 1rem 1.25rem 0.9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.nb-pc-name {
    font-size: .95rem;
    font-weight: 700;
    color: #292724;
    margin: 0 0 .15rem;
    line-height: 1.3;
    font-family: 'Playfair Display', Georgia, serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nb-pc-name a { color: inherit; text-decoration: none; }
.nb-pc-name a:hover { color: var(--verde-marca); }
.nb-pc-meta {
    font-size: .67rem;
    color: var(--verde-marca);
    margin: 0 0 .1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
.nb-pc-cat {
    font-size: .72rem;
    color: #888;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.nb-pc-stars,
.nb-pc-desc { display: none; }

/* Footer — precio izq | botón der */
.nb-pc-footer {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(0,0,0,.06);
}
.nb-pc-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.nb-pc-price-col { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.nb-pc-price-row { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.nb-pc-price {
    font-size: 1rem;
    font-weight: 800;
    color: #292724;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.nb-pc-price-old {
    font-size: .78rem;
    color: #6B655D;
    text-decoration: line-through;
    font-weight: 400;
}
.nb-pc-price-consulta { color: #6B655D; font-size: .88rem; font-weight: 500; }
.nb-pc-unit { font-size: .65rem; color: #6B655D; margin: 0; }
.nb-pc-info-icons {
    display: flex;
    gap: .5rem;
    margin-top: .2rem;
}
.nb-pc-info-icons i { font-size: .9rem; color: #6B655D; }

/* Botón — píldora teal derecha con label debajo */
.nb-pc-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}
.nb-pc-btn {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 44px;
    border-radius: 50px;
    border: none;
    background: var(--fondo-oscuro);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.nb-pc-btn .nb-btn-label {
    display: block;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    color: #555;
    line-height: 1.2;
    margin-top: .15rem;
}
.nb-pc-btn:hover { background: #4A4540; transform: translateY(-2px); box-shadow: none; }
.nb-pc-btn-agotado {
    background: #ccc !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Usadas en home */
.nb-pc-badges { display: flex; gap: .35rem; }
.nb-pc-badge-icon {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .62rem;
    color: #888;
    background: #F5F1EA;
    border-radius: 6px;
    padding: .18rem .5rem;
    font-weight: 500;
}
.nb-pc-badge-icon i { font-size: .72rem; color: var(--verde-marca); }
.nb-pc-puntos { display: none; }

/* Vista lista */
.nb-prod-grid-list .nb-clog-item { flex: 0 0 100%; max-width: 100%; }
.nb-prod-grid-list .nb-pc { flex-direction: row; }
.nb-prod-grid-list .nb-pc-thumb {
    width: 140px; min-width: 140px;
    aspect-ratio: 1/1;
    flex: none;
    border-radius: 12px;
}
.nb-prod-grid-list .nb-pc-body { padding: 1rem 1.25rem; flex: 1; }
.nb-prod-grid-list .nb-pc-footer { flex-direction: row; align-items: center; justify-content: space-between; }
.nb-prod-grid-list .nb-pc-btn { width: auto; padding: 0 1.5rem; }

/* Estado vacío */
.nb-clog-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #6B655D;
}
.nb-clog-empty .bi { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.nb-clog-empty p { margin: 0; font-size: .95rem; }

/* Responsive */
@media (max-width: 767px) {
    .nb-clog-title   { font-size: 2rem; }
    .nb-clog-hero-body { padding: 2rem 1rem 3.5rem; }
    .nb-filter-row   { flex-direction: column; }
    .nb-clog-search  { max-width: 100%; }
}
@media (max-width: 575px) {
    .nb-clog-title   { font-size: 1.6rem; }
    .nb-filter-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: none; }
    .nb-filter-pills::-webkit-scrollbar { display: none; }
}

/* ======================================== */
/* CARDS ESTILO SKINLAB — nb-sc-*           */
/* ======================================== */
.nb-sc-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.nb-sc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* Imagen */
.nb-sc-thumb {
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    padding: 1rem;
}
.nb-sc-img {
    max-height: 180px;
    max-width: 85%;
    object-fit: contain;
}
.nb-sc-noimg {
    font-size: 3.5rem;
    color: #ddd;
}

/* Badges */
.nb-sc-badge {
    position: absolute;
    top: .65rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #B8B2AA;
    color: #fff;
    padding: .22rem .6rem;
    border-radius: 2rem;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nb-sc-badge-left  { left: .65rem; }
.nb-sc-badge-right { right: .65rem; }
.nb-sc-badge-agotado { background: #aaa; }

/* Body */
.nb-sc-body {
    padding: .85rem 1rem .4rem;
    flex: 1;
}
.nb-sc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
    gap: .4rem;
}
.nb-sc-meta > span {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #6B655D;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nb-sc-ficha {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #86662F;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1.5px solid rgba(194,154,89,.3);
    padding-bottom: 1px;
    transition: border-color .15s;
}
.nb-sc-ficha:hover { border-color: #C29A59; color: #86662F; }

.nb-sc-name {
    font-size: .98rem;
    font-weight: 700;
    color: #292724;
    margin: 0 0 .2rem;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
}
.nb-sc-cat {
    font-size: .8rem;
    color: #6B655D;
    margin: 0;
}

/* Footer */
.nb-sc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid #F5F1EA;
    gap: .5rem;
}
.nb-sc-price {
    font-size: 1rem;
    font-weight: 700;
    color: #292724;
    white-space: nowrap;
}
.nb-sc-price-consulta { color: #6B655D; font-size: .85rem; font-weight: 600; }

.nb-sc-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .38rem .9rem;
    background: #B8B2AA;
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 2rem;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background .18s, transform .15s;
}
.nb-sc-btn:hover { background: #6B655D; transform: scale(1.03); }
.nb-sc-btn-off {
    background: #E4E0D8;
    color: #6B655D !important;
    cursor: default;
    font-size: .75rem;
    font-weight: 700;
    padding: .38rem .9rem;
    border-radius: 2rem;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 575px) {
    .nb-sc-thumb  { height: 160px; }
    .nb-sc-name   { font-size: .88rem; }
    .nb-sc-price  { font-size: .9rem; }
    .nb-sc-btn    { font-size: .68rem; padding: .3rem .7rem; }
    .nb-sc-badge  { font-size: .55rem; padding: .18rem .5rem; }
}

/* ======================================== */
/* CARRITO DE COMPRAS — nb-cart-*           */
/* ======================================== */
/* ── Contenedor de filas del carrito ────────────────────────── */
#cartItems {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden;
}

/* ── Fila de producto ───────────────────────────────────────── */
.nb-cart-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #f2f2f2;
}
.nb-cart-row:last-child { border-bottom: none; }

/* Imagen */
.nb-cart-img-wrap {
    width: 80px; height: 80px; flex-shrink: 0;
    background: #f7f7f7; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.nb-cart-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Nombre + badge */
.nb-cart-info { flex: 1; min-width: 0; }
.nb-cart-nombre {
    font-size: .88rem; font-weight: 700;
    color: #292724; margin: 0 0 .35rem;
    line-height: 1.35; text-transform: uppercase;
}
.nb-cart-badge-desc {
    display: inline-block;
    background: #f5a623; color: #fff;
    font-size: .7rem; font-weight: 700;
    padding: .15rem .45rem; border-radius: 4px;
}

/* Cantidad — columna central */
.nb-cart-qty { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nb-qty-btn {
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: #C29A59; color: #292724; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s; padding: 0; line-height: 1;
}
.nb-qty-btn:hover { background: #C29A59; }
.nb-qty-val {
    font-size: .95rem; font-weight: 700; color: #292724;
    min-width: 32px; text-align: center;
    background: #fff; border: 1px solid #e8e8e8;
    border-radius: 6px; padding: .2rem .4rem;
}

/* Precio — columna derecha */
.nb-cart-sub {
    display: flex; flex-direction: column; align-items: flex-end;
    min-width: 90px; flex-shrink: 0;
}
.nb-cart-sub-efectivo {
    font-family: 'Inter', sans-serif;
    font-size: 1rem; font-weight: 700; color: #86662F;
}
.nb-cart-sub-original {
    font-family: 'Inter', sans-serif;
    font-size: .8rem; color: #6B655D; text-decoration: line-through;
    margin-top: .15rem;
}

/* X eliminar — inline al final */
.nb-cart-del {
    background: none; border: none;
    color: #6B655D; font-size: 1.2rem; line-height: 1;
    cursor: pointer; transition: color .15s;
    padding: 0; flex-shrink: 0; margin-left: .25rem;
}
.nb-cart-del:hover,
.nb-cart-del:focus-visible { color: #A2463B; }

/* Fila de ahorro en resumen */
.nb-cart-ahorro-row {
    display: flex;
    justify-content: space-between;
    font-size: .88rem;
    color: #2ecc71;
    font-weight: 700;
    padding: .5rem 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* Campos de precio (legacy, por compatibilidad) */
.nb-cart-price-unit  { font-size: .78rem; color: #6B655D; margin: 0; }
.nb-cart-price-wrap  { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.nb-cart-price-normal{ font-family:'Inter', sans-serif; font-size:.85rem; font-weight:600; color:#292724; }
.nb-cart-price-original{ font-family:'Inter', sans-serif; font-size:.78rem; color:#6B655D; text-decoration:line-through; }
.nb-cart-price-desc  { font-family:'Inter', sans-serif; font-size:.88rem; font-weight:700; color:#86662F; }
.nb-cart-price-cu    { font-size:.72rem; color:#6B655D; }
.nb-cart-marca       { font-size:.62rem; font-weight:700; letter-spacing:.1em; color:#6B655D; text-transform:uppercase; }

/* Resumen lateral */
.nb-cart-summary {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    position: sticky;
    top: 100px;
}
.nb-cart-summary-title {
    font-size: 1.15rem; font-weight: 800;
    font-family: 'Playfair Display', Georgia, serif;
    color: #292724; margin-bottom: 1.1rem;
    text-align: center;
}
.nb-cart-summary-row {
    display: flex; justify-content: space-between;
    font-size: .9rem; color: #555; margin-bottom: .6rem;
}
.nb-summary-divider {
    border: none; border-top: 1px solid #f0f0f0; margin: .85rem 0;
}
.nb-cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .85rem 1rem;
    background: #C29A59;
    color: #292724;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .03em;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s;
    text-decoration: none !important;
}
.nb-cart-checkout-btn:hover {
    background: #C29A59;
    color: #292724;
}

/* ── Cupón ──────────────────────────────────────────────────── */
.nb-cupon-wrap {
    display: flex; align-items: center; gap: .4rem;
    background: #f7f7f7; border-radius: 8px;
    padding: .45rem .75rem;
    margin-bottom: .85rem;
}
.nb-cupon-icon { color: #6B655D; font-size: 1rem; flex-shrink: 0; }
.nb-cupon-input {
    flex: 1; border: none; background: transparent;
    font-size: .85rem; color: #555; outline: none;
}
.nb-cupon-input::placeholder { color: #6B655D; }
.nb-cupon-btn {
    background: #C29A59; color: #292724;
    border: none; border-radius: 6px;
    padding: .3rem .85rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: background .15s; white-space: nowrap;
}
.nb-cupon-btn:hover { background: #C29A59; }
.nb-cupon-msg {
    font-size: .8rem; padding: .25rem .5rem;
    border-radius: 4px; margin-bottom: .5rem;
}
.nb-cupon-msg.ok  { background: #e6f9f0; color: #27ae60; }
.nb-cupon-msg.err { background: #fdecea; color: #e05252; }

/* ── Hero Carrito ───────────────────────────────────────────── */
.nb-carrito-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #4A4540 0%, #4A4540 55%, var(--fondo-oscuro) 100%);
    overflow: hidden;
}
.nb-carrito-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../img/catalogo-2.webp') center/cover no-repeat;
    opacity: .45;
}

@media (max-width: 992px) {
    .nb-carrito-hero:not(.nb-checkout-hero) { min-height: 420px !important; }
    .nb-carrito-hero:not(.nb-checkout-hero)::before { background-position: 35% center !important; }
}

@media (max-width: 768px) {
    .nb-carrito-hero:not(.nb-checkout-hero) { min-height: 340px !important; }
    .nb-carrito-hero:not(.nb-checkout-hero)::before { background-image: url(../img/catalogo-2-mobile.webp) !important; background-position: 25% center !important; }
}

@media (max-width: 576px) {
    .nb-carrito-hero:not(.nb-checkout-hero) { min-height: 280px !important; }
    .nb-carrito-hero:not(.nb-checkout-hero)::before { background-image: url(../img/catalogo-2-mobile.webp) !important; background-position: 20% center !important; }
}

.nb-checkout-hero::before {
    background: url('../img/checkout.webp') 90% center/cover no-repeat !important;
}

@media (max-width: 992px) {
    .nb-checkout-hero { min-height: 380px !important; }
    .nb-checkout-hero::before { background-position: 85% center !important; }
}

@media (max-width: 768px) {
    .nb-checkout-hero { min-height: 300px !important; }
    .nb-checkout-hero::before { background-image: url(../img/checkout-mobile.webp) !important; background-position: 80% center !important; }
}

@media (max-width: 576px) {
    .nb-checkout-hero { min-height: 260px !important; }
    .nb-checkout-hero::before { background-image: url(../img/checkout-mobile.webp) !important; background-position: 75% center !important; }
}
.nb-carrito-hero-body {
    position: relative; z-index: 5;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem 1.5rem 3.5rem;
}
.nb-carrito-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(194,154,89,.22);
    border: 1px solid rgba(194,154,89,.5);
    color: #E4E0D8;
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: 6px 18px; border-radius: 100px; margin-bottom: 1rem;
}
.nb-carrito-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: .7rem;
    text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.nb-carrito-hero-title span { color: #E4E0D8; }
.nb-carrito-hero-sub {
    font-size: .92rem; color: rgba(255,255,255,.7);
    max-width: 400px; line-height: 1.6;
}
.nb-carrito-wave { position: relative; z-index: 5; margin-top: -2px; margin-bottom: -3px; line-height: 0; }
.nb-carrito-wave svg { display: block; width: 100%; }

/* Checkout */
.nb-checkout-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
}
.nb-checkout-section-title {
    font-size: 1rem; font-weight: 800;
    font-family: 'Playfair Display', Georgia, serif;
    color: #292724; margin-bottom: 1.25rem;
}
.nb-checkout-label {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #888; display: block; margin-bottom: .35rem;
}
.nb-checkout-input {
    width: 100%;
    padding: .55rem 1rem;
    border: 1.5px solid #E4E0D8;
    border-radius: 10px;
    background: #F5F1EA;
    font-size: .9rem; color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: 'Inter', sans-serif;
    resize: vertical;
}
.nb-checkout-input:focus {
    border-color: #C29A59;
    box-shadow: 0 0 0 3px rgba(194,154,89,.12);
    background: #fff;
}

/* Tarjetas método de pago en checkout */
.nb-pago-card {
    border: 1.5px solid #E4E0D8;
    border-radius: 12px;
    padding: .75rem .6rem;
    text-align: center;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}
.nb-pago-card:hover { border-color: #C29A59; }
.nb-pago-card-active {
    border-color: #C29A59 !important;
    background: #F5F1EA;
    box-shadow: 0 0 0 3px rgba(194,154,89,.12);
}
.nb-pago-radio:checked + .nb-pago-card {
    border-color: #C29A59;
    background: #F5F1EA;
    box-shadow: 0 0 0 3px rgba(194,154,89,.12);
}

/* Responsive carrito */
@media (max-width: 575px) {
    .nb-cart-row {
        flex-wrap: wrap;
        gap: .6rem .75rem;
        padding: 1rem 2.5rem 1rem 1rem;
        position: relative;
    }
    .nb-cart-img-wrap { width: 56px; height: 56px; order: 1; }
    .nb-cart-info { order: 2; flex: 1 1 auto; min-width: 0; }
    .nb-cart-nombre { font-size: .8rem; }
    .nb-cart-qty { order: 4; }
    .nb-cart-sub {
        order: 5;
        margin-left: auto;
        min-width: auto;
        align-items: flex-end;
    }
    .nb-cart-del {
        order: 3;
        position: absolute;
        top: 1rem;
        right: 1rem;
        margin-left: 0;
    }
}

/* ======================================== */
/* ELIMINAR ILUMINACIÓN DE BOTONES (GLOBAL) */
/* ======================================== */
.btn:hover,
.btn:focus,
.btn:active,
.btn:focus-visible,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary:hover, .btn-secondary:focus,
.btn-success:hover, .btn-success:focus,
.btn-danger:hover, .btn-danger:focus,
.btn-warning:hover, .btn-warning:focus,
.btn-info:hover, .btn-info:focus,
.btn-light:hover, .btn-light:focus,
.btn-dark:hover, .btn-dark:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-check:focus + .btn,
.btn-check:checked + .btn {
    box-shadow: none !important;
    transform: none !important;
}

/* Botones custom del proyecto */
.nb-pc-btn:hover,
.nb-pd-btn-cart:hover,
.nb-cta-btn:hover,
.nb-btn:hover,
.nb-hero-cta:hover,
.ct-cta-btn:hover,
.fil-cta-btn:hover,
.fil-social-btn:hover,
.ct-social-btn:hover,
.contact-social-btn:hover,
.wa-big-btn:hover,
.nb-prod-card:hover,
a[class*="btn"]:hover,
button[class*="btn"]:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ======================================== */
/* MARQUEE LOGOS MARCAS                     */
/* ======================================== */
.nb-brands-marquee-wrap {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 1.2rem 0;
    overflow: hidden;
    width: 100%;
    display: block;
    margin: 0;
    position: relative;
    z-index: 10;
    margin-top: -4px;
}
.nb-brands-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: nb-marquee 60s linear infinite;
}
.nb-brands-marquee-wrap:hover .nb-brands-track {
    animation-play-state: paused;
}
.nb-brand-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nb-brand-item img {
    height: 44px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: .85;
    transition: opacity .3s;
}
.nb-brand-item.brand-lg img {
    height: 44px;
    width: auto;
    max-width: 120px;
}
.nb-brand-item img:hover {
    opacity: 1;
}
@keyframes nb-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* ======================================== */
/* SECCIÓN NOSOTROS                         */
/* ======================================== */
.nb-nosotros-header {
    background: #F5F1EA;
    padding: 5rem 1.5rem 4rem;
    position: relative;
    margin-top: -6px;
    z-index: 8;
    text-align: center;
}
.nb-nosotros-header-inner {
    max-width: 700px;
    margin: 0 auto;
}
.nb-nosotros-brand-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--verde-marca);
    margin-bottom: 1.5rem;
    line-height: 1;
}
.nb-nosotros-brand-desc {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    max-width: 620px;
    margin: 1.5rem auto 0;
    text-wrap: pretty;   /* evita que la última línea quede huérfana */
}
.nb-nosotros-brand-desc strong { color: var(--verde-marca); font-weight: 600; }
.nb-mv-section {
    display: flex;
    min-height: 520px;
    position: relative;
    overflow: hidden;
}
.nb-mv-left {
    flex: 0 0 58%;
    /* Rosa mas profundo de la misma familia: con #C29A59 el texto blanco
       quedaba en 3,12:1 y WCAG AA pide 4,5:1 para texto normal. */
    background: #C29A59;
    padding: 4rem clamp(2rem, 8vw, 10rem) 4rem clamp(1.5rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    position: relative;
    z-index: 1;
}
.nb-mv-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: .8rem;
    line-height: 1.1;
    text-align: right;
}
.nb-mv-block:first-child .nb-mv-title {
    text-align: right;
}
.nb-mv-text {
    font-size: 1rem;
    color: #fff;                          /* 4,85:1 sobre #C29A59 */
    text-align: right;
    line-height: 1.75;
    max-width: 100%;
    margin: 0;
}
.nb-mv-right {
    flex: 1;
    overflow: hidden;
    margin-left: -8%;
}
.nb-mv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
/* Tablet: el corte diagonal se suaviza para no comerse el texto */
@media (max-width: 991px) {
    .nb-mv-left { clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%); }
    .nb-mv-right { margin-left: -5%; }
}

@media (max-width: 767px) {
    .nb-mv-section { flex-direction: column; min-height: 0; }
    .nb-mv-left {
        flex: none;
        padding: 3rem 1.5rem;
        gap: 2.25rem;
        /* Sin diagonal: en una columna el corte recortaba las últimas
           letras de cada línea y los títulos. */
        clip-path: none;
    }
    .nb-mv-title,
    .nb-mv-block:first-child .nb-mv-title,
    .nb-mv-text { text-align: left; }
    .nb-mv-title { font-size: clamp(1.9rem, 9vw, 2.4rem); margin-bottom: .6rem; }
    .nb-mv-text  { font-size: .94rem; line-height: 1.8; }
    .nb-mv-right { flex: none; height: 300px; margin-left: 0; }
    .nb-nosotros-header { padding: 3rem 1.25rem 2.5rem; }
}

.nb-nosotros-brand-logo {
    height: auto;
    width: clamp(280px, 45vw, 600px);
    max-width: 100%;
    display: block;
    margin: 0 auto 0;
    object-fit: contain;
}

/* ======================================== */
/* CARDS V2 — ESTILO REFERENCIA             */
/* ======================================== */
/* ── Cards catálogo v2 ── */
.nb-pc-v2 {
    border: 1px solid #E4E0D8; border-radius: 16px;
    background: #fff; overflow: hidden;
    /* Columna con altura completa: el cuerpo se estira y el boton queda
       clavado abajo, de modo que toda la fila mide igual aunque un
       nombre ocupe una linea y otro dos. */
    height: 100%;
    display: flex; flex-direction: column;
    transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.nb-pc-v2:hover {
    box-shadow: 0 14px 32px rgba(41,39,36,.13);
    border-color: rgba(194,154,89,.55);
    transform: translateY(-4px);
}
.nb-pc-v2 .nb-pc-thumb { background: #F5F1EA; aspect-ratio: 1/1; position: relative; overflow: hidden; }
/* contain, no cover: son fotos de envase sobre fondo claro y recortarlas
   dejaba la tapa y la base del frasco fuera de la tarjeta. */
.nb-pc-v2 .nb-pc-img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.nb-pc-v2:hover .nb-pc-img { transform: scale(1.04); }
/* badge descuento % */
.nb-pc-badge-pct {
    position: absolute; top: .6rem; left: .6rem;
    background: #C29A59; color: #292724;
    font-size: .68rem; font-weight: 700;
    padding: .2rem .5rem; border-radius: 20px;
    z-index: 2; letter-spacing: .02em;
}
.nb-pc-v2-body {
    padding: .95rem 1rem 1.05rem;
    display: flex; flex-direction: column; gap: .3rem;
    flex: 1;
}
/* marca */
.nb-pc-v2-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6rem; color: #6B655D; margin: 0;
    font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
}
/* categoría: pastilla, para que no parezca una segunda marca */
.nb-pc-v2-cat { margin: .1rem 0 0; }
.nb-pc-v2-cat span {
    display: inline-block;
    font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: #6F5325; background: #F4ECDF;
    border: 1px solid rgba(194,154,89,.3);
    border-radius: 20px; padding: .16rem .55rem;
}
/* nombre: el titulo de la tarjeta, no una etiqueta mas.
   Antes iba en Playfair Display (serif decorativa): en una tarjeta que ya
   mezclaba monoespaciada (marca) + sans (categoría/botón), sumar una
   tercera familia serif leía como descuido, no como elegancia. Se deja
   la serif para titulares grandes (hero, secciones) y en la grilla de
   producto, donde hay que leer rápido muchas tarjetas seguidas, se usa
   la misma sans del resto del sitio. */
.nb-pc-v2-name {
    font-family: 'Inter', sans-serif;
    font-size: .95rem; font-weight: 700;
    color: #292724; margin: .15rem 0 0; line-height: 1.32;
    letter-spacing: -.005em;
    /* Alto fijo de dos líneas: todas las tarjetas alinean precio y botón */
    min-height: calc(1.32em * 2);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.nb-pc-v2-name a { color: inherit; text-decoration: none; transition: color .2s ease; }
.nb-pc-v2-name a:hover,
.nb-pc-v2:hover .nb-pc-v2-name a { color: #86662F; }
.nb-pc-v2-desc { font-size: .71rem; color: #777; margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* precio */
.nb-pc-v2-price {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(41,39,36,.07);
}
.nb-pc-v2-price-current {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem; font-weight: 700; color: #292724;
    letter-spacing: -.01em; white-space: nowrap;
}
/* "COP" antes del monto: en Colombia el peso se escribe con el mismo
   símbolo $ que el dólar, así que sin esta etiqueta una tarjeta con
   precios en dos monedas sería ambigua. Chico y apagado para que no
   compita con el número, igual que ya se hace en el total del checkout. */
.nb-pc-v2-price-cop {
    font-size: .58rem; font-weight: 700; color: #6B655D;
    text-transform: uppercase; letter-spacing: .05em;
    margin-right: .2rem;
}
.nb-pc-v2-price-old { font-size: .78rem; color: #6B655D; text-decoration: line-through; }
.nb-pc-price-consulta { font-size: .9rem !important; color: #6B655D !important; font-weight: 600 !important; }
/* botón: pegado al fondo para que toda la fila cierre a la misma altura */
.nb-pc-v2-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; padding-top: .7rem; }
.nb-pc-v2-btn-outline {
    display: block; text-align: center;
    border: 1.5px solid #C29A59; color: #86662F;
    background: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .5rem; border-radius: 6px;
    text-decoration: none; transition: background .18s, color .18s;
}
.nb-pc-v2-btn-outline:hover { background: #C29A59; color: #292724; }
.nb-pc-v2-btn-dark {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    width: 100%; text-align: center;
    border: none; background: #C29A59; color: #292724;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .7rem .6rem; border-radius: 10px; cursor: pointer;
    transition: background .18s;
}
.nb-pc-v2-btn-dark:hover { background: #C29A59; }
.nb-pc-v2-btn-dark.is-agotado,
.nb-pc-v2-btn-dark:disabled {
    background: #E4E0D8; color: #B8B2AA;
    cursor: not-allowed; box-shadow: none;
}
.nb-pc-v2-btn-dark.is-agotado:hover,
.nb-pc-v2-btn-dark:disabled:hover { background: #E4E0D8; transform: none; box-shadow: none; }

/* Dos tarjetas por fila en móvil: hay que bajar los cuerpos de texto o
   el nombre y el precio se comen el ancho. */
@media (max-width: 575px) {
    .nb-pc-v2-body      { padding: .75rem .7rem .85rem; }
    .nb-pc-v2-name      { font-size: .78rem; }
    .nb-pc-v2-price-current { font-size: .9rem; }
    .nb-pc-v2-price     { margin-top: .45rem; padding-top: .45rem; }
    .nb-pc-v2-cat span  { font-size: .55rem; padding: .14rem .45rem; }
    .nb-pc-v2 .nb-pc-img { padding: .6rem; }
    .nb-pc-noimg        { font-size: 1.5rem; }
    .nb-pc-noimg span   { font-size: .5rem; letter-spacing: .1em; }
}

/* ── Accordion filtros ── */
.nb-acc-group { border-bottom: 1px solid #F5F1EA; }
.nb-acc-header {
    width: 100%; background: none; border: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 0; font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: #292724;
    cursor: pointer;
}
.nb-acc-header:hover { color: #86662F; }
.nb-acc-header.open { color: #86662F; }
.nb-acc-chevron { font-size: .7rem; transition: transform .25s; color: #86662F; }
.nb-acc-header.open .nb-acc-chevron { transform: rotate(180deg); }
.nb-acc-body { overflow: hidden; max-height: 1200px; transition: max-height .4s ease; }
.nb-acc-body.nb-acc-open { overflow: visible; }
.nb-acc-body.nb-acc-collapsed { max-height: 0; }

/* ═══════════════════════════════════════════════════════════════ */
/* MEJORAS PROFESIONALES CATÁLOGO — Rediseño 2026               */
/* ═══════════════════════════════════════════════════════════════ */

/* Tarjetas mejoradas */
.nb-pc {
    border: 1px solid #f0f0f0;
    transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nb-pc:hover {
    border-color: #e8e8e8;
}

/* Imagen más elegante */
.nb-pc-img {
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nb-pc:hover .nb-pc-img {
    transform: scale(1.08);
}

/* Overlay sutil en hover */
.nb-pc-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.05);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.nb-pc:hover .nb-pc-thumb::after {
    opacity: 1;
}

/* Mejoras de body */
.nb-pc-body {
    gap: .5rem;
}

.nb-pc-name {
    letter-spacing: -.01em;
}

.nb-pc-meta {
    opacity: .7;
}

/* Badge más elegante */
.nb-pc-badge-agotado {
    background: rgba(41, 39, 36, .85);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Botones más profesionales */
.nb-pc-v2-btn-dark {
    font-weight: 600;
    letter-spacing: .04em;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(194, 154, 89, .15);
}

.nb-pc-v2-btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(194, 154, 89, .25);
}

.nb-pc-v2-btn-outline {
    transition: all .25s ease;
}

.nb-pc-v2-btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(194, 154, 89, .15);
}

/* Topbar mejorado */
.nb-clog-topbar {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Grid spacing — el espacio lo dan las canaletas de Bootstrap (g-4).
   Un `gap` aquí se suma al ancho de cada columna y hacía que la tercera
   tarjeta no cupiera en la fila. */
.nb-prod-grid { row-gap: 1.5rem; }

/* Sidebar refinado */
.nb-sf-aside {
    border-right: 1px solid #f5f5f5;
    padding-right: 1.5rem;
}

.nb-acc-header {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
    color: #3a3a3a;
}

.nb-sf-link {
    transition: all .2s ease;
}

.nb-sf-link:hover {
    color: var(--verde-marca);
    padding-left: .3rem;
}

/* Filtros más elegantes */
.nb-acc-group {
    border-bottom: 1px solid #f5f5f5;
}

/* Responsive */
@media (max-width: 768px) {
    .nb-sf-aside {
        /* En móvil los filtros van arriba, no pegados al hacer scroll */
        position: static;
        top: auto;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .nb-prod-grid {
        row-gap: 1rem;
    }
    
    .nb-pc-body {
        padding: .85rem 1rem 0.8rem;
    }
}

/* ==========================================================
   RED DE SEGURIDAD RESPONSIVE — sitio público
   Ningún medio embebido puede ensanchar la página en móvil.
   ========================================================== */
img, svg, video, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
table { max-width: 100%; }

@media (max-width: 575.98px) {
    /* Textos largos sin espacios (correos, enlaces) parten de línea */
    p, li, td, dd, .nb-pc-title { overflow-wrap: break-word; }
}

/* ==========================================================
   CATÁLOGO — tarjeta compacta y paginación
   La ficha era casi cuadrada y ocupaba media pantalla: se
   reduce la foto y los espacios sin tocar la jerarquía.
   ========================================================== */
.nb-pc-thumb { aspect-ratio: 4 / 3; }
.nb-pc-body  { padding: .7rem .85rem .55rem; }
.nb-pc-name  { font-size: .84rem; line-height: 1.25; margin-bottom: .1rem; }
.nb-pc-meta  { font-size: .62rem; }
.nb-pc-cat   { font-size: .65rem; }
.nb-pc-footer { margin-top: .55rem; padding-top: .55rem; }
.nb-pc-price { font-size: .95rem; }
.nb-pc-btn   { width: 62px; height: 38px; }

/* La vista de lista conserva su formato horizontal */
.nb-prod-grid-list .nb-pc-thumb { aspect-ratio: 1 / 1; }
.nb-prod-grid-list .nb-pc-body  { padding: .85rem 1.1rem; }

/* Tarjetas ocultas por el paginador */
.nb-clog-item.nb-pag-off { display: none !important; }

/* ── Barra de paginación ─────────────────────────────────── */
.nb-pag {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-top: 2rem; padding-top: 1.25rem;
    border-top: 1px solid #F5F1EA;
}
.nb-pag[hidden] { display: none; }
.nb-pag-rango { font-size: .8rem; color: #6B655D; }
.nb-pag-rango b { color: #292724; font-weight: 700; }
.nb-pag-flechas { display: flex; align-items: center; gap: .35rem; }
.nb-pag-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #E4E0D8; border-radius: 10px;
    background: #fff; color: var(--verde-marca-oscuro); font-size: .9rem; cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.nb-pag-btn:hover:not(:disabled) {
    background: #C29A59; border-color: #C29A59; color: #292724; transform: translateY(-1px);
}
.nb-pag-btn:disabled { color: #E4E0D8; background: #faf7f4; cursor: not-allowed; }
.nb-pag-actual {
    min-width: 84px; text-align: center;
    padding: .35rem .8rem; margin: 0 .3rem;
    border-radius: 999px; background: #F4ECDF;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .76rem; font-weight: 700; color: #86662F;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .nb-pag { justify-content: center; text-align: center; }
    .nb-pc-thumb { aspect-ratio: 1 / 1; }
    .nb-pc-name { font-size: .8rem; }
}

/* ==========================================================
   CATÁLOGO EN MÓVIL — barra de acciones y panel de filtros
   En escritorio la columna de filtros vive a la izquierda; en
   móvil se convierte en una hoja deslizante y su lugar lo toma
   una barra pegajosa con Filtrar / Ordenar / Vista.
   ========================================================== */

/* Fuera del móvil, todo esto no existe */
.nb-mbar,
.nb-chips,
.nb-drawer-fondo,
.nb-drawer-head,
.nb-drawer-pie,
.nb-mbar-buscar { display: none; }

@media (max-width: 767.98px) {

    /* Buscador debajo de Filtrar / Ordenar (el del panel lateral se oculta para no repetirlo) */
    .nb-mbar-buscar { display: block; position: relative; margin: -.35rem 0 1rem; }
    .nb-mbar-buscar i {
        position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
        color: #6B655D; font-size: .9rem; pointer-events: none;
    }
    .nb-mbar-buscar input {
        box-sizing: border-box; width: 100%; height: 42px;
        padding: 0 1rem 0 2.4rem; margin: 0;
        border: 1px solid #E4E0D8; border-radius: 10px; background: #fff;
        font-size: 1rem; /* 16px: evita el zoom automático de iOS al enfocar */
        color: #2b2320; -webkit-appearance: none; appearance: none;
    }
    .nb-mbar-buscar input:focus { outline: none; border-color: #c9a96a; box-shadow: 0 0 0 3px rgba(201,169,106,.2); }
    .nb-drawer-head ~ .nb-sf-search-wrap { display: none; }

    /* ── Barra pegajosa ─────────────────────────────────── */
    .nb-mbar {
        display: flex; align-items: center; gap: .5rem;
        position: sticky; top: 0; z-index: 40;
        margin: 0 -.75rem 1rem;
        padding: .6rem .75rem;
        background: rgba(245, 241, 234, .94);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #F5F1EA;
    }
    /* Los tres controles comparten caja exacta. margin:0 anula el
       margin-bottom global de <label>, que subía el selector y dejaba
       la barra desalineada. */
    .nb-mbar-btn,
    .nb-mbar-orden,
    .nb-mbar-vistas {
        box-sizing: border-box;
        height: 42px; margin: 0;
        border: 1px solid #E4E0D8; border-radius: 10px;
        background: #fff;
        line-height: 1;
    }

    .nb-mbar-filtros {
        display: inline-flex; align-items: center; gap: .4rem;
        padding: 0 .85rem;
        font-size: .82rem; font-weight: 600; color: #292724;
        cursor: pointer; flex: none;
    }
    .nb-mbar-filtros i { color: #86662F; font-size: .95rem; }
    .nb-mbar-filtros:active { background: #F4ECDF; }
    .nb-mbar-num {
        min-width: 18px; height: 18px; padding: 0 5px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 999px; background: #C29A59; color: #292724;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: .62rem; font-weight: 700;
    }

    .nb-mbar-orden {
        position: relative; flex: 1; min-width: 0;
        display: flex; align-items: center; gap: .35rem;
        padding: 0 .6rem;
    }
    .nb-mbar-orden i { color: #6B655D; font-size: .85rem; flex: none; }
    .nb-mbar-orden select {
        flex: 1; min-width: 0; height: 100%;
        border: 0; outline: none; background: transparent;
        font-size: .82rem; color: #292724; font-family: inherit;
        -webkit-appearance: none; appearance: none; cursor: pointer;
        margin: 0; padding: 0; box-shadow: none;
    }

    .nb-mbar-vistas { display: flex; overflow: hidden; flex: none; }
    .nb-mbar-vistas .nb-view-btn {
        width: 40px; height: 100%;
        border-radius: 0; margin: 0; font-size: .95rem;
        display: flex; align-items: center; justify-content: center;
        border: 0; background: #fff; color: #6B655D; cursor: pointer;
    }
    .nb-mbar-vistas .nb-view-btn + .nb-view-btn { border-left: 1px solid #F5F1EA; }
    .nb-mbar-vistas .nb-view-btn.is-active { background: #F4ECDF; color: #86662F; }

    /* La barra de escritorio sobra aquí */
    .nb-clog-topbar { display: none; }

    /* ── Filtros aplicados ──────────────────────────────── */
    .nb-chips {
        display: flex; flex-wrap: wrap; gap: .4rem;
        margin: -.4rem 0 1rem;
    }
    .nb-chip {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .28rem .5rem .28rem .7rem;
        border-radius: 999px;
        background: #F4ECDF; border: 1px solid #F4ECDF;
        font-size: .74rem; color: #b5606c;
    }
    .nb-chip button {
        border: 0; background: none; padding: 0; line-height: 1;
        color: #86662F; cursor: pointer; font-size: .8rem;
    }
    .nb-chip-limpiar {
        border: 0; background: none; padding: .28rem .3rem;
        font-size: .74rem; color: #6B655D; text-decoration: underline; cursor: pointer;
    }

    /* ── Panel deslizante ───────────────────────────────── */
    .nb-drawer-fondo {
        display: block;
        position: fixed; inset: 0; z-index: 1050;
        background: rgba(41, 39, 36, .45);
        opacity: 0; pointer-events: none;
        transition: opacity .28s ease;
    }
    body.nb-drawer-abierto .nb-drawer-fondo { opacity: 1; pointer-events: auto; }
    body.nb-drawer-abierto { overflow: hidden; }

    .nb-sf-aside {
        position: fixed !important;
        top: 0; right: 0; bottom: 0; left: auto;
        width: min(86vw, 340px);
        z-index: 1060;
        margin: 0 !important; padding: 0 !important;
        background: #fff;
        border: 0 !important;
        box-shadow: -12px 0 40px rgba(41, 39, 36, .18);
        transform: translateX(102%);
        transition: transform .32s cubic-bezier(.4, 0, .2, 1);
        display: flex; flex-direction: column;
        overflow: hidden;
    }
    body.nb-drawer-abierto .nb-sf-aside { transform: none; }

    /* Cabecera fija del panel */
    .nb-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        flex: none; padding: 1rem 1.15rem;
        border-bottom: 1px solid #F5F1EA;
    }
    .nb-drawer-tit {
        display: inline-flex; align-items: center; gap: .5rem;
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.05rem; font-weight: 600; color: #292724;
    }
    .nb-drawer-tit i { color: #86662F; font-size: .9rem; }
    .nb-drawer-x {
        width: 34px; height: 34px; flex: none;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid #E4E0D8; border-radius: 50%;
        background: #fff; color: #6B655D; cursor: pointer;
    }
    .nb-drawer-x:active { background: #F5F1EA; }

    /* Cuerpo con desplazamiento propio */
    .nb-sf-search-wrap { margin: 1rem 1.15rem .25rem; }
    .nb-acc-group { padding: 0 1.15rem; border-bottom: 1px solid #F5F1EA; }
    .nb-sf-aside > .nb-acc-group:last-of-type { border-bottom: 0; }
    .nb-sf-aside > .nb-sf-search-wrap,
    .nb-sf-aside > .nb-acc-group { flex: none; }
    .nb-sf-aside {
        scrollbar-width: thin;
    }
    .nb-sf-aside > .nb-acc-group:first-of-type { margin-top: .25rem; }

    /* Todo lo que va entre cabecera y pie se desplaza */
    .nb-drawer-head ~ .nb-sf-search-wrap,
    .nb-drawer-head ~ .nb-acc-group { flex: none; }

    /* Pie fijo con la acción principal */
    .nb-drawer-pie {
        display: flex; align-items: center; gap: .6rem;
        flex: none; margin-top: auto;
        padding: .85rem 1.15rem;
        border-top: 1px solid #F5F1EA;
        background: #fff;
    }
    .nb-drawer-limpiar {
        flex: none; padding: .7rem .9rem;
        border: 1px solid #E4E0D8; border-radius: 10px;
        background: #fff; color: #6B655D;
        font-size: .84rem; font-weight: 600; cursor: pointer;
    }
    .nb-drawer-ver {
        flex: 1; padding: .7rem 1rem;
        border: 0; border-radius: 10px;
        background: #C29A59; color: #292724;
        font-size: .86rem; font-weight: 700; cursor: pointer;
    }
    .nb-drawer-ver:active { background: #A9834A; }

    /* Los acordeones abren de entrada dentro del panel */
    .nb-acc-body { max-height: none; }

    /* ── Tarjetas ───────────────────────────────────────── */
    .nb-pc { border-radius: 14px; }
    .nb-pc-v2-btn-dark {
        font-size: .68rem !important;
        letter-spacing: .02em;
        padding: .55rem .4rem !important;
    }
    .nb-pc-badge-pct, .nb-pc-badge-agotado { font-size: .62rem; padding: .2rem .45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nb-sf-aside, .nb-drawer-fondo { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   BOTONES SIN ILUMINACIÓN — regla global del proyecto
   ------------------------------------------------------------
   Ningún botón lleva resplandor: ni sombras de color, ni halos de
   foco, ni texto con sombra, ni filtros de brillo. El relieve se
   consigue con color plano y borde, no con luz.
   Este bloque va al final del archivo a propósito: cierra la
   cascada para que ninguna regla anterior lo contradiga.
   ══════════════════════════════════════════════════════════════ */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[class*="btn"],
[class*="Btn"],
.nb-hero-cta,
.nb-ev-footer-cta,
button::before, button::after,
[class*="btn"]::before, [class*="btn"]::after {
    box-shadow: none !important;
    text-shadow: none !important;
}
button:hover, button:focus, button:active, button:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active,
[class*="btn"]:hover, [class*="btn"]:focus, [class*="btn"]:active,
[class*="btn"]:focus-visible, [class*="btn"]:focus-within,
[class*="btn"].active, [class*="btn"].show, [class*="btn"]:disabled,
.btn-check:checked + .btn, .btn-check:focus + .btn,
.nb-hero-cta:hover, .nb-hero-cta:focus,
.nb-ev-footer-cta:hover, .nb-ev-footer-cta:focus {
    box-shadow: none !important;
    text-shadow: none !important;
}
/* El brillo por filtro también queda fuera */
button:hover, [class*="btn"]:hover,
button:focus, [class*="btn"]:focus {
    filter: none !important;
}
/* Quitar la sombra no puede dejar el foco invisible para quien
   navega con teclado: se reemplaza por un contorno sólido. */
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[class*="btn"]:focus-visible {
    /* Color fijo oscuro y halo crema: asi el foco se ve tanto sobre un
       boton claro como sobre uno de color. Con currentColor el contorno
       era blanco sobre fondo crema, es decir invisible. */
    outline: 3px solid #292724;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(245,241,234,.95) !important;
}

/* Los campos de formulario tambien necesitan un foco visible: la regla
   heredada de Bootstrap ponia el borde en blanco y un halo al 25% de
   opacidad (1.18:1), que no cumple el minimo de 3:1 del criterio 1.4.11. */
.form-control:focus,
.custom-select:focus,
.co-input:focus,
.co-select:focus,
.lg-input:focus,
textarea:focus,
select:focus {
    border-color: #C29A59 !important;
    outline: 2px solid #C29A59;
    outline-offset: 1px;
    box-shadow: none !important;
}

/* ── Franja legal del pie ─────────────────────────────────────────
   Obligación del art. 50 de la Ley 1480: quién vende y bajo qué
   condiciones, visible en todas las páginas. */
.ft-legal {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .4rem 1.4rem;
    margin-bottom: .9rem;
}
.ft-legal a {
    color: rgba(245,241,234,.92);
    font-size: .8rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(245,241,234,.28);
    padding-bottom: 1px;
}
.ft-legal a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }

.ft-comerciante {
    font-size: .76rem;
    line-height: 1.7;
    color: rgba(245,241,234,.8);
    margin-bottom: .8rem;
}

/* Casilla de autorización del boletín: obligatoria, sin marcar. */
.ft-nl-legal {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .7rem;
    font-size: .74rem; line-height: 1.55;
    color: rgba(245,241,234,.85);
    cursor: pointer;
}
.ft-nl-legal input[type="checkbox"] {
    width: 16px; height: 16px; flex: none; margin-top: .1rem;
    accent-color: #C29A59; cursor: pointer;
}
.ft-nl-legal a { color: #F5F1EA; text-decoration: underline; }

/* Casilla de autorización en la inscripción a eventos. */
.nb-ev-legal {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .8rem; line-height: 1.6; color: #292724;
    cursor: pointer;
}
.nb-ev-legal input[type="checkbox"] {
    width: 17px; height: 17px; flex: none; margin-top: .12rem;
    accent-color: #C29A59; cursor: pointer;
}
.nb-ev-legal a { color: #86662F; text-decoration: underline; }
.nb-ev-req { color: #86662F; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   SALTO AL CONTENIDO
   Fuera de la vista hasta que recibe el foco. Quien navega con teclado
   no tiene que recorrer toda la navegación en cada página.
   ══════════════════════════════════════════════════════════════════ */
.nb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: .75rem 1.25rem;
    background: #4A4540;
    color: #F5F1EA;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 10px 0;
}
.nb-skip-link:focus {
    left: 0;
    color: #F5F1EA;
    outline: 3px solid #C29A59;
    outline-offset: -3px;
}

/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Quien lo pide en su sistema tiene motivos: mareo, migraña o
   trastorno vestibular. Las animaciones infinitas del sitio (el pulso
   del botón de WhatsApp, el anillo giratorio y la marquesina de
   marcas) no lo respetaban.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* La marquesina de marcas se detiene también con el teclado, no solo
   al pasar el cursor (criterio 2.2.2: contenido en movimiento). */
.nb-brands-marquee-wrap:focus-within .nb-brands-track {
    animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════════════
   ÁREAS TÁCTILES
   ------------------------------------------------------------------
   El mínimo recomendado es 44x44 px (criterio 2.5.5). Varios controles
   funcionales quedaban entre 28 y 38 px, justo en móvil, que es donde
   más importa. Se amplía la zona activa con un pseudoelemento en vez
   de agrandar el botón, para no alterar el diseño.
   ══════════════════════════════════════════════════════════════════ */
/* Solo los controles que no tienen posición propia. Las flechas de las
   galerías y el cierre de la modal ya son position:absolute (eso también
   sirve de referencia para el ::after); forzarles relative las sacaba de
   su sitio y quedaban amontonadas en el centro, debajo de la foto. */
.nb-qty-btn,
.nb-pag-btn,
.nb-view-btn,
.ft-social,
.nb-topbar-social {
    position: relative;
}
.nb-qty-btn::after,
.nb-pag-btn::after,
.nb-pc-arrow::after,
.nb-pd-arrow::after,
.nb-view-btn::after,
.nb-nl-close-btn::after,
.ft-social::after,
.nb-topbar-social::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}



/* ══════════════════════════════════════════════════════════════════
   PÁGINA DE CURSOS — cur-*
   ══════════════════════════════════════════════════════════════════ */
.cur-page { background: #F5F1EA; padding: 0 1.25rem 5rem; }
.cur-wrap { max-width: 940px; margin: 0 auto; }

.cur-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 600; color: #292724;
    margin: 0 0 1rem; line-height: 1.25;
}
.cur-intro { padding: 3rem 0 1rem; max-width: 680px; }
.cur-intro p { font-size: .97rem; line-height: 1.85; color: #292724; margin: 0; }

.cur-bloques { padding: 2.5rem 0; }
.cur-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.cur-card {
    background: #fff;
    border: 1px solid #F4ECDF;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
}
.cur-card-ico {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #F4ECDF; color: #86662F;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.cur-card-tit {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.12rem; font-weight: 600; color: #292724;
    margin: 0 0 .6rem; line-height: 1.3;
}
.cur-card p { font-size: .89rem; line-height: 1.75; color: #6f6f6f; margin: 0; }

.cur-proximas { padding: 2rem 0 0; border-top: 1px solid #E4E0D8; }
.cur-lista { list-style: none; padding: 0; margin: 1.5rem 0; }
.cur-item {
    display: flex; gap: 1.25rem; align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #F4ECDF;
}
.cur-item-fecha {
    flex: none; min-width: 7.5rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .78rem; font-weight: 700;
    color: var(--verde-marca);
}
.cur-item-tit {
    font-size: 1rem; font-weight: 600; color: #292724;
    margin: 0 0 .25rem;
}
.cur-item-sub { font-size: .86rem; color: #6f6f6f; margin: 0; }
.cur-vacio {
    font-size: .93rem; line-height: 1.8; color: #6f6f6f;
    background: #F5F1EA; border-left: 3px solid var(--verde-marca);
    border-radius: 0 12px 12px 0;
    padding: 1.1rem 1.25rem; margin: 1.5rem 0;
}

.cur-acciones {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin: 2rem 0 0;
}
.cur-btn-wa {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 46px; padding: 0 1.4rem;
    border: 1.5px solid #25d366; border-radius: 12px;
    background: transparent; color: #16874a;
    font-size: .84rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.cur-btn-wa:hover { background: #25d366; color: #fff; text-decoration: none; }

/* Botón principal de cursos: misma forma que el de WhatsApp,
   relleno con el rosa de la marca */
.cur-btn-inscribir {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: 0 1.4rem;
    border: 1.5px solid #C29A59; border-radius: 12px;
    background: #C29A59; color: #292724;
    font-size: .84rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s;
}
.cur-btn-inscribir:hover,
.cur-btn-inscribir:focus-visible {
    background: #A9834A; border-color: #A9834A;
    color: #292724; text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .cur-page { padding: 0 1rem 3.5rem; }
    .cur-intro { padding: 2rem 0 .5rem; }
    .cur-item { flex-direction: column; gap: .35rem; }
    .cur-btn-inscribir,
    .cur-btn-wa { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════
   BARRA DE NAVEGACIÓN EN MÓVIL (≤ 991px)
   Una sola fila: logo a la izquierda; carrito, cuenta y menú a la
   derecha. El menú se abre como un panel flotante debajo de la
   barra, por encima del hero, en vez de empujar (y quedar recortado
   por) la foto o el video.
   ══════════════════════════════════════════════════════════════════ */
.nb-burger { display: none; }

@media (max-width: 991.98px) {
    .nb-navbar-transparent.navbar {
        position: relative;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
        padding: .7rem 1rem !important;
    }
    .nb-navbar-transparent .navbar-brand {
        margin: 0;
        padding: 0;
        flex: 0 1 auto;
        min-width: 0;
    }
    .nb-nav-logo { max-width: 132px; }

    /* Carrito y cuenta */
    .nb-nav-actions {
        gap: .45rem !important;
        margin: 0 0 0 auto;
        padding: 0;
        border: 0;
        flex: none;
    }
    .nb-nav-actions .nb-icon-btn {
        width: 42px; height: 42px;
        font-size: 1.1rem;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.28);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .nb-nav-actions .nb-icon-btn:hover,
    .nb-nav-actions .nb-icon-btn:focus-visible,
    .nb-nav-actions .nb-icon-btn.show {
        background: var(--verde-marca, #4A4540);
        border-color: var(--verde-marca, #292724);
        transform: none;
    }
    .nb-nav-actions .nb-icon-btn.nb-admin-active {
        background: var(--verde-marca, #4A4540);
        border-color: var(--verde-marca, #292724);
    }
    .nb-cart-badge {
        top: -4px; right: -4px;
        width: 19px; height: 19px;
        font-size: .64rem;
        border: 2px solid #fff;
    }

    /* Botón de menú: mismo tamaño y estilo que los iconos */
    .nb-nav-toggler.navbar-toggler {
        flex: none;
        width: 42px; height: 42px;
        padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.28);
        background: rgba(255,255,255,.14);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: none !important;
    }
    .nb-nav-toggler:not(.collapsed)[aria-expanded="true"] {
        background: #C29A59;
        border-color: #C29A59;
    }
    .nb-burger {
        display: inline-flex; flex-direction: column; justify-content: space-between;
        width: 18px; height: 13px;
    }
    .nb-burger span {
        display: block; height: 2px; border-radius: 2px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
        transform-origin: center;
    }
    .nb-nav-toggler[aria-expanded="true"] .nb-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    .nb-nav-toggler[aria-expanded="true"] .nb-burger span:nth-child(2) { opacity: 0; }
    .nb-nav-toggler[aria-expanded="true"] .nb-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

    /* Panel del menú */
    .nb-navbar-transparent .navbar-collapse {
        position: absolute;
        top: calc(100% + 4px);
        left: .75rem; right: .75rem;
        z-index: 1050;
        background: #4A4540;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(0,0,0,.35);
        padding: 0 1.1rem;
    }
    .nb-navbar-transparent .navbar-collapse.show,
    .nb-navbar-transparent .navbar-collapse.collapsing {
        padding: .5rem 1.1rem .9rem;
    }
    .nb-navbar-transparent .navbar-collapse .navbar-nav {
        margin: 0 !important;
        width: 100%;
    }
    .nb-navbar-transparent .navbar-collapse .nav-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: .85rem .15rem !important;
        font-size: 1rem;
        color: rgba(255,255,255,.9) !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nb-navbar-transparent .navbar-collapse .nav-link::after {
        content: '\F285';                   /* bi-chevron-right */
        font-family: 'bootstrap-icons';
        font-size: .75rem;
        color: rgba(255,255,255,.35);
    }
    .nb-navbar-transparent .navbar-collapse .nav-link.active {
        color: #F4ECDF !important;
    }
    /* Agendar cita: último ítem, como botón */
    .nb-navbar-transparent .navbar-collapse .nav-link.nb-nav-agendar {
        margin-top: .75rem;
        justify-content: center;
        gap: .35rem;
        border: 0;
        border-radius: 12px;
        background: #C29A59;
        color: #292724 !important;
        font-weight: 600;
    }
    .nb-navbar-transparent .navbar-collapse .nav-link.nb-nav-agendar::after { content: none; }
    .nb-navbar-transparent .navbar-collapse .nav-link.nb-nav-agendar i { color: #fff; }

    /* Mientras el menú está abierto el hero no recorta el panel */
    .ct-hero:has(.navbar-collapse.show),
    .ct-hero:has(.navbar-collapse.collapsing),
    .nb-hero-wrapper:has(.navbar-collapse.show),
    .nb-hero-wrapper:has(.navbar-collapse.collapsing),
    .nb-clog-hero:has(.navbar-collapse.show),
    .nb-clog-hero:has(.navbar-collapse.collapsing),
    body.nb-nav-abierto .ct-hero,
    body.nb-nav-abierto .nb-hero-wrapper,
    body.nb-nav-abierto .nb-clog-hero { overflow: visible; }
    .ct-hero:has(.navbar-collapse.show)::before,
    body.nb-nav-abierto .ct-hero::before { clip-path: inset(0); }
    .nb-nav-wrap { z-index: 1040; }
}

@media (max-width: 359px) {
    .nb-nav-logo { max-width: 112px; }
    .nb-nav-actions .nb-icon-btn,
    .nb-nav-toggler.navbar-toggler { width: 38px; height: 38px; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO DEL INICIO EN MÓVIL
   El video ocupa todo el alto del hero y el texto se apoya abajo,
   lejos de la barra, con botones para seguir navegando.
   ══════════════════════════════════════════════════════════════════ */
/* Antes estos botones solo existian dentro del media query movil (con
   d-lg-none en el HTML), por eso no tenian ningun estilo en escritorio.
   Ahora se muestran en todos los tamaños (base aqui, el media query de
   abajo solo ajusta detalles para pantallas chicas). */
.nb-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: 1.4rem;
}
.nb-hero-cta {
    flex: 1 1 0;
    max-width: 220px;
    min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    border-radius: 12px;
    font-size: .88rem; font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .15s;
}
.nb-hero-cta:active { transform: scale(.97); }
.nb-hero-cta--main {
    background: #C29A59; color: #292724; border: 1px solid #C29A59;
}
.nb-hero-cta--main:hover { background: #A9834A; color: #292724; }
.nb-hero-cta--ghost {
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.nb-hero-cta--ghost:hover { background: rgba(255,255,255,.22); color: #fff; }

@media (max-width: 991.98px) {
    .nb-hero-wrapper {
        height: auto;
        min-height: 88vh;
        min-height: 88svh;
        display: flex;
        flex-direction: column;
    }
    .nb-hero-video-wrap { height: 100%; }
    .nb-hero-overlay {
        background: linear-gradient(180deg,
            rgba(20,17,15,.55) 0%,
            rgba(20,17,15,.20) 35%,
            rgba(20,17,15,.55) 65%,
            rgba(20,17,15,.85) 100%);
    }
    .nb-hero-content-wrap {
        justify-content: flex-end !important;
        padding: 150px 0 2.25rem;
    }
    .nb-hero-content-inner {
        width: 100%;
        max-width: 560px;
        padding: 0 1.25rem !important;
    }
    .nb-hero-eyebrow {
        font-size: .95rem;
        letter-spacing: 1.5px;
        color: #F4ECDF;
    }
    .nb-hero-title.display-4,
    .nb-hero-title.display-5 {
        font-size: clamp(1.9rem, 8.2vw, 2.7rem);
        line-height: 1.12;
        margin-bottom: .85rem !important;
    }
    .nb-hero-desc {
        font-size: .95rem;
        line-height: 1.6;
        margin-bottom: 1.4rem !important;
    }
    .nb-hero-ctas {
        margin-top: 1.4rem;
        display: flex;
        gap: .6rem;
        justify-content: center;
    }
    .nb-hero-cta {
        flex: 1 1 0;
        max-width: 220px;
        min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
        border-radius: 12px;
        font-size: .88rem; font-weight: 600;
        text-decoration: none;
        transition: background .2s, border-color .2s, transform .15s;
    }
    .nb-hero-cta:active { transform: scale(.97); }
    .nb-hero-cta--main {
        background: #C29A59; color: #292724; border: 1px solid #C29A59;
    }
    .nb-hero-cta--main:hover { background: #A9834A; color: #292724; }
    .nb-hero-cta--ghost {
        background: rgba(255,255,255,.12); color: #fff;
        border: 1px solid rgba(255,255,255,.45);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    .nb-hero-cta--ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
}


/* ====== Franja de envios nacionales (SEO nacional) — portada ====== */
.nb-hero-envios {
    margin: 1.1rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.nb-hero-envios i { color: #C29A59; font-size: 1.05em; }

@media (max-width: 991.98px) {
    .nb-hero-envios {
        font-size: .8rem;
        padding: .45rem .9rem;
        margin-top: .85rem;
        max-width: 92%;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════
   DETALLE DE PRODUCTO — rediseño 2026 (views/layout/producto_detalle.php)
   Galería a la izquierda (foto grande + miniaturas debajo) y bloque de
   compra a la derecha, que se queda fijo al hacer scroll en escritorio.
   ══════════════════════════════════════════════════════════════════ */
.nb-pd-page { background: #F5F1EA; }
.nb-pdx-crumb { font-size: .75rem; letter-spacing: .03em; margin-bottom: 1.5rem; }
.nb-pdx-crumb a { color: #6B655D; text-decoration: none; }
.nb-pdx-crumb a:hover { color: #86662F; }
.nb-pdx-crumb .active { color: #292724; font-weight: 500; }

.nb-pdx {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* Galería */
.nb-pdx-gallery { position: relative; }
.nb-pdx-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #FFFFFF;
    border: 1px solid #E4E0D8;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(41,39,36,.07);
}
.nb-pdx-stage .nb-pd-main-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 2.5rem;
    opacity: 0;
    transition: opacity .35s ease, transform .5s ease;
}
.nb-pdx-stage .nb-pd-main-img.is-active { opacity: 1; }
.nb-pdx-stage:hover .nb-pd-main-img.is-active { transform: scale(1.03); }
.nb-pdx-stage .nb-pd-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: #B8B2AA;
}
.nb-pdx-stage .nb-pd-arrow { width: 40px; height: 40px; font-size: .9rem; }
.nb-pdx-stage .nb-pd-prev { left: 1rem; }
.nb-pdx-stage .nb-pd-next { right: 1rem; }

.nb-pdx-badges {
    position: absolute; top: 1rem; left: 1rem; z-index: 5;
    display: flex; gap: .4rem; flex-wrap: wrap;
}
.nb-pdx-badge {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: .35rem .8rem; border-radius: 50px;
    background: #4A4540; color: #FFFFFF;
}
.nb-pdx-badge-oferta { background: #C29A59; color: #292724; }
.nb-pdx-badge-agotado { background: #A2463B; }

.nb-pdx-thumbs {
    display: flex; gap: .65rem; margin-top: .9rem;
    overflow-x: auto; padding-bottom: .2rem;
}
.nb-pdx-thumbs .nb-pd-thumb-item {
    flex: 0 0 76px; width: 76px; height: 76px;
    padding: .35rem;
    background: #FFFFFF;
    border: 1.5px solid #E4E0D8;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.nb-pdx-thumbs .nb-pd-thumb-item img { width: 100%; height: 100%; object-fit: contain; }
.nb-pdx-thumbs .nb-pd-thumb-item:hover { border-color: rgba(194,154,89,.6); }
.nb-pdx-thumbs .nb-pd-thumb-item.is-active {
    border-color: #C29A59;
    box-shadow: 0 0 0 3px rgba(194,154,89,.18);
}

/* Bloque de compra */
.nb-pdx-info { position: sticky; top: 1.5rem; }
.nb-pdx-eyebrow {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #86662F; margin: 0 0 .7rem;
}
.nb-pdx-dot { color: #C29A59; }
.nb-pdx-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    font-weight: 700; line-height: 1.15;
    color: #292724; margin: 0 0 .6rem;
}
.nb-pdx-sub { font-size: .88rem; color: #6B655D; margin: 0 0 1.4rem; display: flex; align-items: center; gap: .4rem; }
.nb-pdx-sub i { color: #86662F; }

.nb-pdx-pricebox {
    background: #FFFFFF;
    border: 1px solid #E4E0D8;
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.1rem;
}
.nb-pdx-price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.nb-pdx-price {
    font-family: 'Inter', sans-serif;
    font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
    color: #292724; line-height: 1.1;
}
.nb-pdx-price small {
    font-size: .62rem; font-weight: 700; letter-spacing: .08em;
    color: #6B655D; vertical-align: middle; margin-right: .15rem;
}
.nb-pdx-price-consulta { font-size: 1.25rem; color: #6B655D; }
.nb-pdx-price-old { font-size: .95rem; color: #6B655D; text-decoration: line-through; }
.nb-pdx-save {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    background: #F4ECDF; color: #6F5325;
    border: 1px solid rgba(194,154,89,.35);
    border-radius: 50px; padding: .2rem .65rem;
}
.nb-pdx-stock {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 600; color: #4F7A5A;
    margin: .75rem 0 0;
}
.nb-pdx-stock-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4F7A5A; box-shadow: 0 0 0 4px rgba(79,122,90,.15);
}
.nb-pdx-stock.is-out { color: #A2463B; }
.nb-pdx-stock.is-out .nb-pdx-stock-dot { background: #A2463B; box-shadow: 0 0 0 4px rgba(162,70,59,.15); }

.nb-pdx-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: .7rem; margin-bottom: 1.4rem; }
.nb-pdx-btn-cart,
.nb-pdx-btn-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 54px; padding: .8rem 1.2rem;
    border-radius: 50px;
    font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.nb-pdx-btn-cart { background: #C29A59; color: #292724; border: 1px solid #C29A59; }
.nb-pdx-btn-cart:hover:not(:disabled),
.nb-pdx-btn-cart:focus-visible {
    background: #A9834A; border-color: #A9834A; color: #292724;
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(194,154,89,.35);
}
.nb-pdx-btn-cart:disabled { background: #E4E0D8; border-color: #E4E0D8; color: #6B655D; cursor: not-allowed; }
.nb-pdx-btn-wa { background: #FFFFFF; color: #177A45; border: 1.5px solid #25D366; }
.nb-pdx-btn-wa:hover,
.nb-pdx-btn-wa:focus-visible {
    background: #25D366; color: #FFFFFF; border-color: #25D366; text-decoration: none;
    transform: translateY(-2px);
}

.nb-pdx-trust {
    list-style: none; margin: 0 0 1.4rem; padding: 1rem 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
    border-top: 1px solid #E4E0D8; border-bottom: 1px solid #E4E0D8;
}
.nb-pdx-trust li { display: flex; gap: .55rem; align-items: flex-start; font-size: .72rem; color: #6B655D; line-height: 1.35; }
.nb-pdx-trust i {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #F4ECDF; color: #86662F; font-size: .95rem;
}
.nb-pdx-trust strong { display: block; color: #292724; font-size: .76rem; font-weight: 600; }

.nb-pdx-specs {
    background: #FFFFFF; border: 1px solid #E4E0D8; border-radius: 18px;
    padding: 1.1rem 1.4rem .6rem;
}
.nb-pdx-specs-title {
    font-family: 'Inter', sans-serif;
    font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #86662F; margin: 0 0 .5rem;
}
.nb-pdx-specs dl { margin: 0; }
.nb-pdx-specs dl > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6rem 0; border-bottom: 1px solid #F5F1EA;
    font-size: .85rem;
}
.nb-pdx-specs dl > div:last-child { border-bottom: none; }
.nb-pdx-specs dt { font-weight: 400; color: #6B655D; }
.nb-pdx-specs dd { margin: 0; font-weight: 600; color: #292724; text-align: right; }

/* Descripción y relacionados */
.nb-pdx-section-eyebrow {
    font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: #86662F; margin: 0 0 .4rem;
}
.nb-pdx-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700;
    color: #292724; margin: 0 0 1.2rem;
}
.nb-pdx-section-title em { color: #86662F; }
.nb-pdx-desc {
    margin-top: 4rem;
    background: #FFFFFF; border: 1px solid #E4E0D8; border-radius: 22px;
    padding: 2.2rem 2.5rem;
}
.nb-pdx-desc-body { font-size: .96rem; line-height: 1.8; color: #4A4540; max-width: 75ch; }

.nb-pdx-related { margin-top: 4rem; }
.nb-pdx-related-head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    margin-bottom: 1.3rem; flex-wrap: wrap;
}
.nb-pdx-related-head .nb-pdx-section-title { margin-bottom: 0; }
.nb-pdx-link-all {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; color: #FFFFFF; text-decoration: none;
    background: #4A4540; border-radius: 50px; padding: .6rem 1.25rem;
    transition: background .2s;
}
.nb-pdx-link-all:hover { background: #292724; color: #FFFFFF; }
.nb-pdx-rel {
    display: flex; flex-direction: column; height: 100%;
    background: #FFFFFF; border: 1px solid #E4E0D8; border-radius: 18px;
    overflow: hidden; text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nb-pdx-rel:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(41,39,36,.12); border-color: rgba(194,154,89,.55); }
/* La tarjeta entera es un enlace: sin el subrayado global de los enlaces */
.nb-pdx-rel,
.nb-pdx-rel:hover,
.nb-pdx-rel:focus,
.nb-pdx-rel *,
.nb-pdx-rel:hover * { text-decoration: none !important; }
.nb-pdx-rel:focus-visible { outline: 2px solid #C29A59; outline-offset: 3px; }
/* La regla global a:hover { underline } también subrayaba los nombres y
   precios de las tarjetas de producto y categoría. En tarjetas el estado
   hover ya se marca con color, sombra y borde dorado. */
.nb-pc a, .nb-pc a:hover, .nb-pc a:focus,
.nb-pc-v2-name a:hover,
.nb-cat-card, .nb-cat-card:hover,
.nb-pdx-link-all, .nb-pdx-link-all:hover,
.nb-pd-thumb-item:hover { text-decoration: none !important; }
.nb-pdx-rel-img {
    aspect-ratio: 1/1; background: #F5F1EA;
    display: flex; align-items: center; justify-content: center;
    color: #B8B2AA; font-size: 2.5rem;
}
.nb-pdx-rel-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.nb-pdx-rel-body { padding: .9rem 1rem 1.1rem; }
.nb-pdx-rel-marca { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6B655D; margin: 0 0 .25rem; }
.nb-pdx-rel-name {
    font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700; color: #292724;
    line-height: 1.3; margin: 0 0 .5rem; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nb-pdx-rel:hover .nb-pdx-rel-name { color: #86662F; }
.nb-pdx-rel-price { font-size: 1rem; font-weight: 700; color: #292724; margin: 0; }
.nb-pdx-rel-price.is-consulta { font-size: .85rem; color: #6B655D; }

/* Tablet y móvil */
@media (max-width: 991.98px) {
    .nb-pdx { grid-template-columns: 1fr; gap: 2rem; }
    .nb-pdx-info { position: static; }
}
@media (max-width: 575.98px) {
    .nb-pdx-stage { border-radius: 18px; }
    .nb-pdx-stage .nb-pd-main-img { padding: 1.5rem; }
    .nb-pdx-price { font-size: 1.7rem; }
    .nb-pdx-actions { grid-template-columns: 1fr; }
    .nb-pdx-trust { grid-template-columns: 1fr; gap: .7rem; }
    .nb-pdx-desc { padding: 1.5rem 1.3rem; border-radius: 18px; }
    .nb-pdx-thumbs .nb-pd-thumb-item { flex-basis: 64px; width: 64px; height: 64px; }
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN FUNDADORA — fondo mármol negro con vetas y ramas doradas
   y placa de vidrio esmerilado sobre la foto (rediseño 2026).
   El fondo es un SVG (public/img/fundadora-marmol.svg): liviano y nítido
   en cualquier pantalla; se puede cambiar por una foto de mármol real.
   ══════════════════════════════════════════════════════════════════ */
.founder-section .founder-content-col {
    background-color: #1F1D1B;
    background-image: url('../img/fundadora-marmol.svg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    isolation: isolate;
}
/* Velo oscuro detrás del texto: las vetas se ven con fuerza a la derecha
   y apenas se insinúan bajo el texto, que así se lee sin esfuerzo. */
.founder-section .founder-content-col::before {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(24,23,21,.86) 0%,
        rgba(24,23,21,.72) 38%,
        rgba(24,23,21,.30) 68%,
        rgba(24,23,21,0) 100%);
    pointer-events: none;
}
.founder-section .founder-inner { position: relative; z-index: 1; }

/* Placa "Fundadora · Kelis Ariza": vidrio esmerilado con filo dorado */
.founder-section .founder-photo-caption {
    background: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 100%);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(214,178,110,.65);
    border-radius: 18px;
    padding: 1rem 1.5rem 1.05rem;
    gap: .15rem;
    box-shadow:
        0 12px 36px rgba(24,23,21,.28),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 0 0 1px rgba(255,255,255,.06);
}
.founder-section .founder-caption-label {
    font-size: .66rem;
    letter-spacing: .32em;
    color: #F5F1EA;
    text-shadow: 0 1px 6px rgba(24,23,21,.45);
}
.founder-section .founder-caption-name {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.1;
    background: linear-gradient(180deg, #F6E2B0 0%, #E3BF78 45%, #C29A59 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(24,23,21,.35));
}
/* Si el navegador no soporta vidrio esmerilado, placa oscura translúcida */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .founder-section .founder-photo-caption { background: rgba(41,39,36,.78); }
}
@media (max-width: 767.98px) {
    .founder-section .founder-content-col { background-position: 78% center; }
    .founder-section .founder-content-col::before {
        background: linear-gradient(180deg, rgba(24,23,21,.82) 0%, rgba(24,23,21,.70) 100%);
    }
}

/* Botones de la sección fundadora: rectangulares (4px), estilo lujo,
   a juego con el fondo de mármol. Principal dorado con degradado y
   secundario con borde dorado que se rellena suave al pasar el mouse. */
.founder-section .founder-actions {
    /* La regla vieja de .founder-actions (mas abajo, para pantallas
       chicas) pone flex-direction:column: sin esto ambos botones
       terminaban en una grilla de 2 columnas y el segundo quedaba
       fuera de la vista. Forzamos fila + wrap para que se apilen
       uno debajo del otro, a todo el ancho, sin desbordarse. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}
.founder-section .founder-btn,
.founder-section .founder-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: .75rem 1.7rem;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: .88rem; font-weight: 600; letter-spacing: .01em;
    text-decoration: none !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.founder-section .founder-btn {
    background: linear-gradient(180deg, #E3C07C 0%, #C29A59 100%);
    color: #292724;
    border: 1px solid #D6B26E;
    box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.founder-section .founder-btn:hover,
.founder-section .founder-btn:focus-visible {
    background: linear-gradient(180deg, #EACB8C 0%, #B98F4E 100%);
    color: #1C1A18;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.4);
}
.founder-section .founder-btn-outline {
    background: rgba(24,23,21,.25);
    color: #F5F1EA;
    border: 1px solid #C29A59;
    padding-bottom: .75rem;
}
.founder-section .founder-btn-outline::after { display: none; }
.founder-section .founder-btn-outline:hover,
.founder-section .founder-btn-outline:focus-visible {
    background: rgba(194,154,89,.16);
    color: #FFFFFF;
    border-color: #E3C07C;
    transform: translateY(-2px);
}
@media (max-width: 575.98px) {
    .founder-section .founder-btn,
    .founder-section .founder-btn-outline { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   FORMACIÓN (inicio) — rediseño 2026: titular serif con "master class"
   en dorado, tarjeta de evento con doble filo dorado, fecha en bloque
   dorado.
   ══════════════════════════════════════════════════════════════════ */
.nb-form { position: relative; overflow: hidden; }
.nb-form-inner { position: relative; z-index: 1; }
.nb-form .nb-form-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .95rem; font-weight: 500;
    letter-spacing: .35em; text-transform: uppercase;
    color: #292724;
}
.nb-form .nb-form-heading {
    font-family: 'Playfair Display', Georgia, serif;
    /* !important: una regla global "h1, h2 { font-weight: 700 !important }"
       forzaba negrita en todos los h2 */
    font-weight: 400 !important;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.15;
    color: #292724;
}
.nb-form .nb-form-heading em {
    font-style: normal; font-weight: 700 !important;
    color: #C29A59;
    white-space: nowrap; /* "master class" nunca se parte en dos líneas */
}
.nb-form .nb-form-desc { color: #292724; }
.nb-form .nb-form-btn {
    background: #4A4540; color: #FFFFFF;
    border-radius: 50px; padding: .85rem 1.9rem;
    font-weight: 600; text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(41,39,36,.18);
}
.nb-form .nb-form-btn i { color: #C29A59; transition: transform .2s ease; }
.nb-form .nb-form-btn:hover { background: #292724; color: #FFFFFF; }
.nb-form .nb-form-btn:hover i { transform: translateX(4px); }

/* Tarjeta del evento: blanca, con un segundo filo dorado por dentro */
.nb-form .nb-form-item-link {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #F0EBE2;
    border-radius: 22px;
    padding: 1.35rem 1.6rem;
    gap: 1.3rem;
    box-shadow: 0 16px 38px rgba(41,39,36,.10);
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.nb-form .nb-form-item-link::before {
    content: '';
    position: absolute; inset: 7px;
    border: 1.5px solid rgba(194,154,89,.55);
    border-radius: 16px;
    pointer-events: none;
    transition: border-color .25s ease;
}
.nb-form .nb-form-item-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(41,39,36,.14);
}
.nb-form .nb-form-item-link:hover::before { border-color: #C29A59; }
.nb-form .nb-form-fecha {
    flex: 0 0 88px; width: 88px; height: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #D4AE6C 0%, #C29A59 100%);
    border: none;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.nb-form .nb-form-dia {
    font-family: 'Inter', sans-serif;
    font-size: 2rem; font-weight: 800; line-height: 1;
    color: #292724;
}
.nb-form .nb-form-mes {
    font-family: 'Inter', sans-serif;
    font-size: .8rem; font-weight: 500; letter-spacing: .06em;
    color: #292724; margin-top: .2rem;
}
.nb-form .nb-form-item-tit {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.45rem; font-weight: 700; line-height: 1.2;
    color: #292724;
}
.nb-form .nb-form-item-sub { font-size: 1rem; color: #4A4540; margin-top: .15rem; }
.nb-form .nb-form-item-flecha { color: #C29A59; font-size: 1.4rem; transition: transform .2s ease; }
.nb-form .nb-form-item-link:hover .nb-form-item-flecha { transform: translateX(4px); }
@media (max-width: 575.98px) {
    .nb-form .nb-form-item-link { padding: 1.1rem 1.15rem; gap: .9rem; border-radius: 18px; }
    .nb-form .nb-form-item-link::before { inset: 6px; border-radius: 13px; }
    .nb-form .nb-form-fecha { flex-basis: 68px; width: 68px; height: 66px; border-radius: 13px; }
    .nb-form .nb-form-dia { font-size: 1.55rem; }
    .nb-form .nb-form-item-tit { font-size: 1.1rem; }
    .nb-form .nb-form-item-sub { font-size: .88rem; }
}

/* Encabezado de categorías (inicio): "Tienda de" en carbón y el resto en
   dorado, con la misma voz tipográfica de la sección Formación. */
.nb-cat-wrapper .nb-cat-header { max-width: 1040px; }
.nb-cat-wrapper .nb-cat-eyebrow {
    font-size: .88rem; font-weight: 500;
    letter-spacing: .32em; color: #292724;
    margin-bottom: .75rem;
}
.nb-cat-wrapper .nb-cat-heading {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 700 !important;
    line-height: 1.12;
    margin-bottom: .8rem;
}
.nb-cat-wrapper .nb-cat-heading em { font-style: normal; color: #C29A59; }
.nb-cat-wrapper .nb-cat-desc {
    max-width: 980px; margin: 0 auto;
    font-size: 1.02rem; line-height: 1.75; color: #292724;
}

/* ══════════════════════════════════════════════════════════════════
   COMUNIDAD / REDES (rediseño 2026): titular en dos líneas con la
   segunda en dorado, perfiles como píldoras con borde dorado y tarjetas
   de las redes blancas con filo dorado y cabecera clara (sin los
   colores de cada red), para que la sección hable el idioma de la marca.
   ══════════════════════════════════════════════════════════════════ */
.fil-social-section .fil-social-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .3em;
    text-transform: uppercase; color: #86662F;
}
.fil-social-section .fil-social-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 700 !important;
    line-height: 1.15; color: #292724;
}
.fil-social-section .fil-social-title em { font-style: normal; color: #C29A59; }
.fil-social-section .fil-social-subtitle { font-size: 1.05rem; color: #292724; }

.fil-social-section .fil-social-btns { gap: 1.1rem; }
.fil-social-section .fil-social-btn {
    display: inline-flex; align-items: center; gap: .7rem;
    background: #FFFFFF;
    border: 1.5px solid #D6B26E;
    border-radius: 50px;
    padding: .8rem 1.6rem;
    color: #292724; font-weight: 700; font-size: .98rem;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(41,39,36,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fil-social-section .fil-social-btn i { color: #C29A59; font-size: 1.4rem; line-height: 1; }
.fil-social-section .fil-social-btn:hover,
.fil-social-section .fil-social-btn:focus-visible {
    border-color: #C29A59; color: #292724;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(194,154,89,.22);
}

.fil-social-section .fil-embed-card {
    background: #FFFFFF;
    border: 1.5px solid #D6B26E;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(41,39,36,.06);
}
.fil-embed-head {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1.1rem .7rem;
    background: #FFFFFF;
    flex-shrink: 0;
}
.fil-embed-ico {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #C29A59; color: #FFFFFF; font-size: 1rem;
}
.fil-embed-name { font-weight: 700; font-size: .98rem; color: #292724; }
.fil-embed-follow {
    margin-left: auto;
    background: #C29A59; color: #FFFFFF;
    border-radius: 50px; padding: .4rem 1.1rem;
    font-size: .85rem; font-weight: 700;
    text-decoration: none !important;
    transition: background .2s ease;
}
.fil-embed-follow:hover,
.fil-embed-follow:focus-visible { background: #A9834A; color: #FFFFFF; }
.fil-embed-scroll { background: #FFFFFF; padding: .2rem .7rem .7rem; overflow-y: auto; }
@media (min-width: 992px) {
    .fil-social-section .fil-social-banner-content { max-width: 900px; }
    .fil-social-section .fil-social-btns { flex-wrap: nowrap; justify-content: center; }
}
@media (max-width: 575.98px) {
    .fil-social-section .fil-social-btn { width: 100%; justify-content: center; }
}

/* ===== Recién llegados (inicio): tarjetas con borde dorado ===== */
.nb-home-bg-light .nb-pc-v2 {
    border: 1.5px solid #D2B07A;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(41, 39, 36, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.nb-home-bg-light .nb-pc-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(41, 39, 36, .10);
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-thumb {
    background: #F5F1EA;
    padding: 16px;
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-img-link { display: block; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-img { width: 100%; height: 100%; padding: 0; object-fit: cover; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-noimg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; height: 100%;
    color: #86662F; text-decoration: none !important;
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-noimg i { font-size: 2.2rem; color: #C29A59; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-noimg span {
    font-family: inherit; font-size: .9rem; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: #86662F;
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-meta { color: #86662F; letter-spacing: .18em; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-name,
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-name a { color: #292724; font-weight: 600; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-cat span {
    background: #F4ECDF; color: #5A4520;
    border: 1px solid #E8D6B4; border-radius: 50px;
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-price { border-top: 1px solid #ECE6DC; }
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-btn-dark {
    background: #C29A59; color: #292724;
    border-radius: 8px; min-height: 42px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(194, 154, 89, .25);
    transition: background .2s ease;
}
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-btn-dark:hover,
.nb-home-bg-light .nb-pc-v2 .nb-pc-v2-btn-dark:focus-visible { background: #B38A4A; color: #292724; }

/* ===== Antetítulos del inicio con el mismo tamaño que Formación ===== */
.nb-cat-wrapper .nb-cat-eyebrow,
.fil-social-section .fil-social-eyebrow,
.nb-home-bg-light .nb-home-section-eyebrow,
.nb-tl-eyebrow,
.nb-pil-eyebrow {
    font-size: .95rem !important;
    font-weight: 500 !important;
    letter-spacing: .35em !important;
}

/* ===== Tienda: título del banner con cierre en dorado cursiva ===== */
.nb-clog-hero .ct-hero-title { max-width: 980px; margin-left: auto; margin-right: auto; }
.nb-clog-hero .ct-hero-title .nb-clog-hero-em,
.fil-hero .ct-hero-title .nb-clog-hero-em {
    font-style: italic; color: #D6B26E;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* ══════════════════════════════════════════════════════════════
   REDISEÑO CONTACTO — campos marfil, bordes dorados, redes con aro
   ══════════════════════════════════════════════════════════════ */
.ct-main .ct-form-card {
    background: #FFFFFF;
    border: 1.5px solid #D2B07A;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(41, 39, 36, .07);
}
.ct-main .ct-divider span { background: #E4D3B2; height: 1px; }
.ct-main .ct-divider-dot { background: #C29A59; }
.ct-main .ct-form-card h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400 !important;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    color: #292724;
}
.ct-main .ct-form-card .form-label { font-size: .92rem; font-weight: 600; color: #292724; }
.ct-main .ct-form-card .form-control,
.ct-main #contactForm .form-control {
    background: #FBF8F3 !important;
    border: 1.5px solid #D9C4A0 !important;
    border-radius: 8px;
    color: #292724;
    font-size: .98rem;
    padding: .65rem .95rem;
}
.ct-main .ct-form-card .form-control::placeholder { color: #6B655D; opacity: 1; }
.ct-main .ct-form-card .form-control:focus,
.ct-main #contactForm .form-control:focus {
    background: #FFFFFF !important;
    border-color: #C29A59 !important;
    box-shadow: 0 0 0 3px rgba(194, 154, 89, .18);
}
.ct-main .ct-form-card textarea.form-control { min-height: 120px; }
/* El borde dorado no debe tapar el aviso de campo con error */
.ct-main #contactForm .form-control.is-invalid,
.ct-main #contactForm.was-validated .form-control:invalid,
.ct-main .ct-form-card .form-control.is-invalid,
.ct-main .was-validated .form-control:invalid { border-color: #A2463B !important; }

/* Zona de anexo: borde punteado dorado */
.ct-main .ct-upload-zone {
    background: #FFFFFF;
    border: 1.5px dashed #C9A56A;
    border-radius: 12px;
}
.ct-main .ct-upload-zone:hover { background: #FBF8F3; border-color: #C29A59; }
.ct-main .ct-upload-content p { color: #292724 !important; font-size: .95rem !important; }
.ct-main .ct-upload-link { color: #86662F; text-decoration: underline; text-underline-offset: 3px; }

/* Botón enviar */
.ct-main .ct-submit-btn {
    background: #C29A59; color: #292724;
    border-radius: 10px; font-weight: 700; font-size: 1rem;
    min-height: 50px;
}
.ct-main .ct-submit-btn:hover { background: #B38A4A; color: #292724; }

/* Tarjetas de información */
.ct-main .ct-info-card {
    background: #FFFFFF;
    border: 1px solid #EFE6D6;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(41, 39, 36, .05);
}
.ct-main .ct-info-icon { background: #F4ECDF; border-radius: 12px; }
.ct-main .ct-info-icon i { color: #C29A59; }
.ct-main .ct-info-label { color: #292724; font-weight: 600; letter-spacing: .12em; }
.ct-main .ct-info-value,
.ct-main .ct-info-value span { color: #292724 !important; font-size: 1rem; }
.ct-main .ct-info-value span.d-block { font-size: .88rem !important; color: #3E3A35 !important; }

/* Redes: aro dorado con el logo de cada red en su color */
.ct-main .ct-social-label { color: #292724; font-weight: 600; letter-spacing: .12em; }
.ct-main .ct-social-btn {
    width: 48px; height: 48px;
    background: #FFFFFF !important;
    border: 1.5px solid #C29A59;
    font-size: 1.3rem;
}
.ct-main .ct-social-btn.fb { color: #1877F2 !important; }
.ct-main .ct-social-btn.ig { color: #C13584 !important; }
.ct-main .ct-social-btn.tk { color: #111111 !important; }
.ct-main .ct-social-btn.wa { color: #1B9E57 !important; }
.ct-main .ct-social-btn.tk svg { width: 20px; height: 20px; }
.ct-main .ct-social-btn:hover { background: #FBF7F0 !important; transform: translateY(-2px); }

/* Mapa con borde dorado */
.ct-main .ct-mapa-marco {
    border: 1.5px solid #D2B07A;
    border-radius: 16px;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   TIENDA — tarjetas y filtros con borde dorado (igual que el inicio)
   ══════════════════════════════════════════════════════════════ */
.nb-prod-grid .nb-pc-v2 {
    border: 1.5px solid #D2B07A;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(41, 39, 36, .06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.nb-prod-grid .nb-pc-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(41, 39, 36, .10);
}
.nb-prod-grid .nb-pc-v2 .nb-pc-thumb { background: #F5F1EA; padding: 16px; }
.nb-prod-grid .nb-pc-v2 .nb-pc-img-link { display: block; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; }
.nb-prod-grid .nb-pc-v2 .nb-pc-img { padding: 0; object-fit: cover; }
.nb-prod-grid .nb-pc-v2 .nb-pc-noimg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; height: 100%;
    color: #86662F; text-decoration: none !important;
}
.nb-prod-grid .nb-pc-v2 .nb-pc-noimg i { font-size: 2.2rem; color: #C29A59; }
.nb-prod-grid .nb-pc-v2 .nb-pc-noimg span {
    font-family: inherit; font-size: .9rem; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: #86662F;
}
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-meta { color: #86662F; letter-spacing: .18em; }
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-name,
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-name a { color: #292724; font-weight: 600; }
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-cat span {
    background: #F4ECDF; color: #5A4520;
    border: 1px solid #E8D6B4; border-radius: 50px;
}
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-price { border-top: 1px solid #ECE6DC; }
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-btn-dark {
    background: #C29A59; color: #292724;
    border-radius: 8px; min-height: 42px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s ease;
}
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-btn-dark:not(:disabled):hover,
.nb-prod-grid .nb-pc-v2 .nb-pc-v2-btn-dark:not(:disabled):focus-visible { background: #B38A4A; color: #292724; }

/* Panel de filtros: tarjeta blanca con borde dorado */
@media (min-width: 768px) {
    .nb-clog-main .nb-sf-aside > .nb-sf-search-wrap,
    .nb-clog-main .nb-sf-aside > .nb-acc-group { background: transparent; }
    .nb-clog-main .nb-sf-aside {
        align-self: flex-start;
    }
    .nb-clog-main .nb-sf-aside::before { content: none; }
    .nb-clog-main .nb-sf-aside {
        background: #FFFFFF;
        border: 1.5px solid #D2B07A;
        border-radius: 16px;
        box-shadow: 0 8px 22px rgba(41, 39, 36, .06);
        padding: 1.2rem 1.1rem 1rem !important;
    }
}
.nb-clog-main .nb-sf-search-wrap input {
    background: #FFFFFF;
    border: 1.5px solid #D9C4A0;
    border-radius: 12px;
    color: #292724;
}
.nb-clog-main .nb-sf-search-wrap input:focus {
    border-color: #C29A59;
    box-shadow: 0 0 0 3px rgba(194, 154, 89, .18);
    outline: none;
}
.nb-clog-main .nb-sf-search-wrap i { color: #6B655D; }
.nb-clog-main .nb-acc-header { color: #86662F; font-weight: 700; letter-spacing: .06em; }
.nb-clog-main .nb-sf-link { color: #292724; }
.nb-clog-main .nb-sf-link.is-active { background: #F4ECDF; color: #5A4520; font-weight: 700; border-radius: 8px; }
.nb-clog-main .nb-sf-count { color: #3E3A35; }

/* Casillas de marca: cuadro dorado con chulo blanco al marcarlas */
.nb-clog-main .nb-sf-check-box {
    border: 1.5px solid #C29A59 !important;
    border-radius: 4px;
    background: #FFFFFF;
}
.nb-clog-main .nb-sf-check input:checked + .nb-sf-check-box {
    background: #C29A59 !important;
    border-color: #C29A59 !important;
}

/* Barra superior: orden y vistas */
.nb-clog-main .nb-topbar-sort select {
    border: 1.5px solid #D9C4A0; border-radius: 10px; background-color: #FFFFFF; color: #292724;
}
.nb-clog-main .nb-view-btn { border: 1.5px solid #E4E0D8; border-radius: 10px; color: #6B655D; background: #FFFFFF; }
.nb-clog-main .nb-view-btn.is-active { border-color: #C29A59; color: #86662F; background: #FBF7F0; }
/* Vista de lista: el aviso sin foto cabe en la miniatura */
.nb-prod-grid-list .nb-pc-v2 .nb-pc-thumb { padding: 10px; }
.nb-prod-grid-list .nb-pc-v2 .nb-pc-noimg { gap: .4rem; text-align: center; }
.nb-prod-grid-list .nb-pc-v2 .nb-pc-noimg i { font-size: 1.6rem; }
.nb-prod-grid-list .nb-pc-v2 .nb-pc-noimg span { font-size: .72rem; line-height: 1.3; }

/* ══════════════════════════════════════════════════════════════
   CARRITO — tarjetas con borde dorado y resumen elegante
   ══════════════════════════════════════════════════════════════ */
.nb-cart-head { display: flex; align-items: center; gap: 1.1rem; margin: .5rem 0 1.8rem; }
.nb-cart-head-ico { font-size: 3.2rem; color: #C29A59; line-height: 1; }
.nb-cart-head-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400 !important;
    font-size: clamp(2.1rem, 4vw, 3rem);
    color: #292724; line-height: 1.05; margin: 0;
}
.nb-cart-head-count { margin: .35rem 0 0; font-size: 1.05rem; color: #6B655D; }

/* Tarjeta de producto: foto | marca, nombre, cantidad | precio y papelera */
#cartItems .nb-cart-row {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 1.4rem;
    background: #FFFFFF;
    border: 1.5px solid #D2B07A;
    border-radius: 16px;
    padding: 14px 20px 14px 14px;
    margin-bottom: 1.1rem;
    box-shadow: 0 6px 18px rgba(41, 39, 36, .05);
}
#cartItems .nb-cart-img-wrap {
    width: 150px; height: 150px;
    background: #F5F1EA;
    border: 1px solid #EFE6D6;
    border-radius: 12px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
#cartItems .nb-cart-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
#cartItems .nb-cart-main { min-width: 0; }
#cartItems .nb-cart-marca {
    margin: 0 0 .35rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: #86662F;
}
#cartItems .nb-cart-info { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
#cartItems .nb-cart-nombre {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 400;
    color: #292724; line-height: 1.25;
}
#cartItems .nb-cart-qty { display: inline-flex; align-items: center; gap: .6rem; }
#cartItems .nb-qty-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: #FFFFFF; border: 1.5px solid #C29A59; color: #86662F;
    font-size: 1.15rem; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
#cartItems .nb-qty-btn:hover { background: #FBF7F0; }
#cartItems .nb-qty-val {
    min-width: 38px; height: 36px; padding: 0 .6rem;
    border: 1.5px solid #D9C4A0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #292724; background: #FFFFFF;
}
#cartItems .nb-cart-side {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
    gap: 1rem; align-self: stretch; padding: .3rem 0;
}
#cartItems .nb-cart-sub,
#cartItems .nb-cart-sub-efectivo { font-size: 1.15rem; font-weight: 700; color: #292724; text-align: right; }
#cartItems .nb-cart-sub-original { display: block; font-size: .82rem; color: #6B655D; text-decoration: line-through; font-weight: 400; }
#cartItems .nb-cart-del {
    background: none; border: 0; padding: .25rem;
    color: #C29A59; font-size: 1.35rem; cursor: pointer;
}
#cartItems .nb-cart-del:hover { color: #A2463B; }

/* Resumen */
.nb-cart-summary {
    background: #FFFFFF;
    border: 1.5px solid #D2B07A;
    border-radius: 18px;
    padding: 1.9rem 1.7rem 1.6rem;
    box-shadow: 0 10px 28px rgba(41, 39, 36, .07);
}
.nb-cart-summary-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400 !important;
    font-size: 1.75rem; color: #292724; margin-bottom: 1rem;
}
.nb-cart-summary .nb-summary-divider { border-color: #EADFCB; opacity: 1; margin: 1.1rem 0; }
.nb-cart-summary .nb-cart-summary-row { font-size: .98rem; color: #292724; padding: .35rem 0; }
.nb-cart-summary .nb-cart-summary-row #cartTotal { font-weight: 700; }
.nb-cart-summary .nb-cart-convenir { color: #6B655D; }
.nb-cart-summary .nb-cart-total-row { align-items: baseline; }
.nb-cart-summary .nb-cart-total-row span:first-child {
    font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; font-weight: 400;
}
.nb-cart-summary .nb-cart-total-row #cartTotalFinal { font-size: 1.6rem; font-weight: 800; color: #292724; }
.nb-cart-summary .nb-cart-checkout-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 54px;
    background: #C29A59; color: #292724;
    border-radius: 10px; font-size: 1.05rem; font-weight: 700;
    text-decoration: none;
}
.nb-cart-summary .nb-cart-checkout-btn:hover { background: #B38A4A; color: #292724; }
.nb-cart-summary .nb-cart-seguir {
    display: block; text-align: center; margin-top: 1rem;
    font-size: .95rem; color: #86662F;
    text-decoration: underline; text-underline-offset: 4px;
}
.nb-cart-summary .nb-cart-seguir:hover { color: #5A4520; }

@media (max-width: 575.98px) {
    #cartItems .nb-cart-row { grid-template-columns: 96px 1fr; gap: .9rem; padding: 12px; }
    #cartItems .nb-cart-img-wrap { width: 96px; height: 96px; }
    #cartItems .nb-cart-side {
        grid-column: 1 / -1; flex-direction: row; align-items: center;
        border-top: 1px solid #EFE6D6; padding-top: .7rem;
    }
    .nb-cart-head-ico { font-size: 2.4rem; }
}
/* Ajustes del carrito: sin caja de fondo detrás de las tarjetas, nombre sin mayúsculas forzadas */
#cartItems { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
#cartItems .nb-cart-nombre { text-transform: none !important; letter-spacing: 0 !important; }
.nb-cart-summary-title { text-align: left; }

/* ══════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA ÚNICA — todo el sitio público
   Antes cada sección tenía su tamaño (títulos de 34 a 64 px).
   Ahora hay 4 niveles fijos que se reducen solos en celular:
     1. Título del banner (H1) ......... máx. 44 px
     2. Título de sección (H2) ......... máx. 38 px
     3. Título de bloque / tarjeta ..... máx. 28–30 px
     4. Frase destacada / cita ......... máx. 30 px
   (Va al final y con !important porque varias páginas cargan su
   propia hoja después de esta.)
   ══════════════════════════════════════════════════════════════ */

/* 1 · Títulos de banner */
.nb-hero-wrapper h1:not(.nb-hero-sub),
.ct-hero-title,
.nb-ev-hero-title,
.citas-hero-title,
.nb-carrito-hero-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important;
    line-height: 1.15 !important;
}

/* 2 · Títulos de sección */
.nb-cat-wrapper .nb-cat-heading,
.nb-form .nb-form-heading,
.fil-social-section .fil-social-title,
.nb-home-bg-light .nb-home-section-title,
.nb-pil-title,
.nb-tl-title {
    font-size: clamp(1.75rem, 2.6vw, 2.4rem) !important;
    line-height: 1.18 !important;
}
.nb-mv-title { font-size: clamp(1.9rem, 2.8vw, 2.5rem) !important; line-height: 1.1 !important; }

/* 3 · Títulos de bloque y de tarjeta */
.founder-title          { font-size: clamp(1.6rem, 2.2vw, 2rem) !important; }
.founder-caption-name   { font-size: clamp(1.4rem, 1.9vw, 1.8rem) !important; }
.nb-pdx-title           { font-size: clamp(1.6rem, 2.3vw, 2.1rem) !important; }
.nb-pdx-price           { font-size: clamp(1.4rem, 1.9vw, 1.75rem) !important; }
.nb-pdx-section-title   { font-size: clamp(1.5rem, 2.1vw, 1.9rem) !important; }
.nb-ev-title            { font-size: clamp(1.45rem, 2vw, 1.85rem) !important; }
.citas-main .nb-side-title        { font-size: clamp(1.5rem, 1.9vw, 1.75rem) !important; }
.citas-main .nb-side-title--sm    { font-size: clamp(1.3rem, 1.6vw, 1.45rem) !important; }
.nb-help-section .nb-help-title   { font-size: 1.4rem !important; }
.nb-cart-head-title     { font-size: clamp(1.8rem, 2.6vw, 2.25rem) !important; }
.nb-cart-head-ico       { font-size: 2.5rem !important; }
.nb-cart-head-count     { font-size: .95rem !important; }
#cartItems .nb-cart-nombre { font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important; }
.nb-cart-summary-title  { font-size: 1.5rem !important; }
.nb-cart-summary .nb-cart-total-row span:first-child,
.nb-cart-summary .nb-cart-total-row #cartTotalFinal { font-size: 1.4rem !important; }
.ct-main .ct-form-card h3 { font-size: clamp(1.4rem, 1.9vw, 1.65rem) !important; }

/* 4 · Frase destacada (cita de Nosotros) */
.fil-quote-text { font-size: clamp(1.35rem, 2.1vw, 1.9rem) !important; line-height: 1.45 !important; }

/* Carrito: el nombre en Playfair descuadraba los números ("5% 30 ML" con
   cifras de altura variable). Se usa la misma letra de las tarjetas de la
   tienda, y precio, nombre y cantidad quedan alineados. */
#cartItems .nb-cart-nombre {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #292724 !important;
    font-variant-numeric: lining-nums;
}
#cartItems .nb-cart-marca { font-size: .7rem; margin-bottom: .3rem; }
#cartItems .nb-cart-info { margin-bottom: .75rem; }
#cartItems .nb-cart-row { align-items: center; }
#cartItems .nb-cart-side { align-self: stretch; justify-content: space-between; padding: .2rem 0; }
#cartItems .nb-cart-sub,
#cartItems .nb-cart-sub-efectivo {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.1rem; font-variant-numeric: lining-nums tabular-nums;
}
#cartItems .nb-qty-val { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.nb-cart-summary .nb-cart-total-row #cartTotalFinal,
.nb-cart-summary .nb-cart-summary-row span { font-variant-numeric: lining-nums tabular-nums; }
.nb-cart-summary-title { margin-bottom: .4rem; }

/* ══ Carrito — tarjeta compacta (según diseño aprobado) ══════════ */
#cartItems .nb-cart-row {
    grid-template-columns: 104px 1fr auto;
    gap: 1.2rem;
    padding: 12px 22px 12px 12px;
    border-radius: 14px;
    margin-bottom: .9rem;
}
#cartItems .nb-cart-img-wrap { width: 104px; height: 104px; border-radius: 10px; }
#cartItems .nb-cart-marca {
    font-size: .68rem !important; letter-spacing: .22em; font-weight: 500;
    color: #86662F; margin-bottom: .2rem;
}
/* Nombre en Playfair como en el diseño, con cifras alineadas (lnum)
   para que "5% 30 ML" no se vea descuadrado */
#cartItems .nb-cart-nombre {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
    font-feature-settings: "lnum" 1, "pnum" 1;
    font-variant-numeric: lining-nums proportional-nums;
    line-height: 1.25 !important;
}
#cartItems .nb-cart-info { margin-bottom: .55rem; }
#cartItems .nb-qty-btn { width: 30px; height: 30px; font-size: 1rem; }
#cartItems .nb-qty-val { min-width: 32px; height: 30px; font-size: .92rem; border-radius: 6px; }
#cartItems .nb-cart-qty { gap: .45rem; }
#cartItems .nb-qty-btn:disabled {
    border-color: #E4E0D8; color: #B8B2AA; background: #F7F5F1; cursor: not-allowed;
}
#cartItems .nb-cart-tope { margin: .35rem 0 0; font-size: .74rem; color: #86662F; min-height: 0; }
#cartItems .nb-cart-tope:empty { display: none; }
/* Precio centrado a la altura del nombre y papelera debajo */
#cartItems .nb-cart-side {
    align-self: center; justify-content: center; gap: .55rem; padding: 0;
}
#cartItems .nb-cart-sub,
#cartItems .nb-cart-sub-efectivo { font-size: 1.05rem; }
#cartItems .nb-cart-del { font-size: 1.2rem; padding: 0; }
/* Una regla vieja (de cuando la fila era flex, no grilla) le dejo
   order:1 a la foto: en la grilla eso la sacaba de su celda y la
   mandaba a una fila aparte, debajo de todo. La foto debe ir siempre
   primero, junto a la información del producto. */
#cartItems .nb-cart-img-wrap { order: 0; }
@media (max-width: 575.98px) {
    #cartItems .nb-cart-row { grid-template-columns: 84px 1fr; padding: 10px; }
    #cartItems .nb-cart-img-wrap { width: 84px; height: 84px; }
    #cartItems .nb-cart-side { flex-direction: row; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO DEL INICIO — diseño de referencia (badge, titular serif, trazo
   dorado, bajada de dos líneas y dos botones sobre fondo azul noche).
   Va al final y con el prefijo .nb-hero-content-inner para ganarle a
   las reglas móviles anteriores de .nb-hero-cta.
   ══════════════════════════════════════════════════════════════════ */
.nb-hero-wrapper .nb-hero-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.18) 50%,
        rgba(0,0,0,.35) 100%);
}
.nb-hero-content-inner { max-width: 860px; }

.nb-hero-content-inner .nb-hero-badge {
    display: inline-flex; align-items: center; gap: .55rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.25rem;
    border: 1.5px solid #C9A265;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    color: #F2E6D0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .82rem; font-weight: 500; line-height: 1.2;
}
.nb-hero-content-inner .nb-hero-badge i { color: #C9A265; font-size: 1.15em; }

.nb-hero-content-inner .nb-hero-headline {
    margin: 0;
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -.015em;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
    margin-bottom: 1.1rem;
}

.nb-hero-content-inner .nb-hero-sub {
    margin: 0 auto;
    max-width: 620px;
    color: rgba(255,255,255,.88);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .95rem;
    /* !important: una regla global "h1, h2 { font-weight: 700 !important }"
       la dejaba en negrita; en el diseño la bajada va en peso normal. */
    font-weight: 400 !important;
    line-height: 1.6;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.nb-hero-content-inner .nb-hero-sub-l2 { display: block; }

/* En escritorio el contenido se centra en el alto del video y el badge
   quedaba pegado al menú superpuesto: se reserva su alto arriba. */
@media (min-width: 992px) {
    .nb-hero-wrapper .nb-hero-content-wrap { padding-top: 100px; }
}

.nb-hero-content-inner .nb-hero-ctas {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.nb-hero-content-inner .nb-hero-cta {
    flex: 0 1 170px;
    max-width: 170px;
    min-height: 44px;
    padding: 0 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .9rem; font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.nb-hero-content-inner .nb-hero-cta--main {
    background: #D4B07A; color: #1E1B17; border: 1.5px solid #D4B07A;
}
.nb-hero-content-inner .nb-hero-cta--main:hover,
.nb-hero-content-inner .nb-hero-cta--main:focus-visible {
    background: #C29A59; border-color: #C29A59; color: #1E1B17;
}
.nb-hero-content-inner .nb-hero-cta--ghost {
    background: rgba(0,0,0,.30); color: #D4B07A;
    border: 1.5px solid #C9A265;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nb-hero-content-inner .nb-hero-cta--ghost:hover,
.nb-hero-content-inner .nb-hero-cta--ghost:focus-visible {
    background: rgba(201,162,101,.14); color: #E6C995;
}

@media (max-width: 991.98px) {
    .nb-hero-wrapper .nb-hero-overlay {
        background: linear-gradient(180deg,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.20) 45%,
            rgba(0,0,0,.55) 100%);
    }
    .nb-hero-content-inner .nb-hero-badge { font-size: .9rem; margin-bottom: 1.1rem; }
    /* Una sola linea: el texto mide ~11,1 veces el tamaño de letra en
       Playfair; se descuenta el padding lateral (2 x 1.25rem) con margen. */
    .nb-hero-content-inner .nb-hero-headline {
        font-size: clamp(1.1rem, calc((100vw - 48px) / 11.5), 2.1rem);
        white-space: nowrap;
    }
    .nb-hero-content-inner .nb-hero-headline { margin-bottom: .9rem; }
    .nb-hero-content-inner .nb-hero-sub { font-size: .98rem; }
    .nb-hero-content-inner .nb-hero-ctas { gap: .75rem; margin-top: 1.6rem; flex-wrap: nowrap; }
    .nb-hero-content-inner .nb-hero-cta { flex: 1 1 0; min-height: 52px; padding: 0 .75rem; font-size: 1rem; }
}
@media (max-width: 359.98px) {
    .nb-hero-content-inner .nb-hero-ctas { flex-wrap: wrap; }
    .nb-hero-content-inner .nb-hero-cta { flex: 1 1 100%; max-width: none; }
}