/* ==========================================================================
   N~FOQUE THEME - COMPREHENSIVE STYLESHEET
   Montserrat Sans-serif, full ThemeGoods PPB / Formidable / booking compat
   ========================================================================== */

/* Tokens de color. Antes había cuatro familias de color sin jerarquía
   (negro, azul marino, dorado, azules de acento de Tailwind) y tres escalas
   de gris neutro mezcladas (zinc/gray/slate). Se centraliza aquí: la marca
   es el azul marino (así lo llama el propio walkthrough del proyecto),
   el dorado queda como único acento de hover/interacción, y el gris neutro
   pasa a ser uno solo (slate, que es el que ya usaba el footer). Cambiar
   cualquier color de marca es ahora una edición en un único sitio. */
:root {
  /* Marca: Paleta Corporativa Azul N~Foque */
  --nf-navy: #0b1726;               /* Azul marino corporativo base (botones, cabeceras) */
  --nf-navy-deep: #08121d;          /* Azul marino profundo (footer, contrastes) */
  --nf-blue-accent: #2563eb;        /* Azul interactivo (hover menú, enlaces, botones activos) */
  --nf-blue-light: #3b82f6;         /* Azul claro de acento y resaltado (marcos de tarjetas, focus) */
  --nf-blue-subtle: #eff6ff;        /* Fondo azul suave para opciones y tarjetas seleccionadas */
  --nf-gold: var(--nf-blue-light);  /* Compatibilidad retroactiva hacia azul claro */
  --nf-ink: #0b1726;                /* Encabezados, títulos y elementos oscuros (sustituye al negro neutro #111111) */

  /* Texto y superficies sobre fondo claro */
  --nf-body: #162032;               /* Texto de cuerpo: azul noche profundo de alta legibilidad (contraste 14.8:1) */
  --nf-muted: #64748b;              /* Texto secundario (slate gris azulado) */
  --nf-muted-strong: #475569;       /* Texto secundario de mayor contraste */
  --nf-border: #e2e8f0;             /* Bordes neutros con matiz azul pizarra */
  --nf-surface: #f8fafc;            /* Fondo de bloques y tarjetas claras */
  --nf-surface-alt: #f1f5f9;        /* Fondo alternativo */
  --nf-white: #ffffff;

  /* Texto sobre fondo oscuro (footer, etc.) */
  --nf-on-navy-body: #cbd5e1;
  --nf-on-navy-muted: #94a3b8;
  --nf-on-navy-border: rgba(255, 255, 255, 0.08);

  /* Estado y utilidad */
  --nf-danger: #ef4444;
  --nf-focus: var(--nf-blue-light);

  /* Movimiento */
  --nf-transition-fast: 0.2s ease;
  --nf-transition-base: 0.25s ease;
}


/* 1. TIPOGRAFÍA Y RESETS GLOBALES */
/* Antes este selector era universal (*, *::before, *::after incluidos):
   pisaba también <code>/<pre>/<kbd> y cualquier icon font de un plugin que
   dependiera de su propia font-family (Dashicons, Formidable...). Se acota
   a los elementos de texto reales. */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, ul, ol,
button, input, select, textarea,
.page-title, .hero-title, .service-title, .promo-title,
.ppb_title, .ppb_subtitle, .gallery_archive_desc, .gallery_image_caption {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Iconos de plugins (Dashicons, Formidable...): nunca deben heredar
   Montserrat, o se convierten en cuadraditos. */
[class*="dashicons"],
.frm-icon-font,
[class^="icon-"],
[class*=" icon-"] {
  font-family: inherit;
}

html {
  /* 100%, no un valor fijo en px: así se respeta el tamaño de fuente que
     el visitante haya configurado en su navegador. Como el resto de la
     hoja usa rem, el resultado visual por defecto es idéntico. */
  font-size: 100%;
  line-height: 1.6;
  color: var(--nf-body);
  background-color: var(--nf-white);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nf-ink);
  font-weight: 700;
  line-height: 1.25;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Foco visible consistente en toda la web. Antes no había ni un solo
   :focus-visible: la navegación por teclado dependía del outline por
   defecto del navegador, que varios fondos oscuros y overflow:hidden
   tapaban por completo. */
:focus-visible {
  outline: 3px solid var(--nf-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respeta "reducir movimiento" del sistema operativo: sin esto, el
   carrusel de portada seguía haciendo fundidos cada 5s para quien lo tiene
   activado por motivos vestibulares o migrañas (WCAG 2.2.2 / 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Supresión de subrayados: correcto en navegación, botones y tarjetas
   (donde el enlace es un bloque completo, no una palabra en medio de una
   frase). Se restaura en enlaces dentro de texto corrido más abajo, donde
   quitar el subrayado deja el enlace indistinguible del texto para quien
   no percibe bien el color. */
a, a:visited, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

/* Enlaces dentro de contenido en prosa (entradas, páginas legales, extracto
   de galería): sí necesitan una señal distinta del color para ser
   identificables como enlaces. */
.entry-content a,
.page-inner-content a,
.gallery-intro a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--nf-blue-accent);
  transition: color var(--nf-transition-fast);
}

.entry-content a:hover,
.page-inner-content a:hover,
.gallery-intro a:hover {
  color: var(--nf-navy);
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Contenedores Estándar */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.container-wide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.container-narrow {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* El skip-link existe en el DOM pero, sin esta regla, nunca reaparece al
   recibir el foco: un usuario de teclado sin lector de pantalla lo activa
   a ciegas (WCAG 2.4.7). Es el bloque estándar de Underscores/WordPress. */
.screen-reader-text:focus {
  background-color: var(--nf-white);
  border-radius: 4px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);
  clip: auto !important;
  clip-path: none;
  color: var(--nf-ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  height: auto;
  left: 20px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 20px;
  width: auto;
  z-index: 100000;
}

/* 2. HEADER Y NAVEGACIÓN */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: var(--nf-white);
  border-bottom: 1px solid var(--nf-border);
  z-index: 1000;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-branding .site-logo {
  max-height: 48px;
  width: auto;
  display: block;
}

.main-navigation {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--nf-body);
  padding: 10px 0;
  display: inline-block;
  letter-spacing: 0.02em;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
  color: var(--nf-blue-accent);
}

.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 1010;
}

.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu .sub-menu li a {
  display: block;
  padding: 9px 20px;
  font-size: 0.88rem;
  color: var(--nf-body);
  white-space: nowrap;
  transition: all var(--nf-transition-fast);
}

.nav-menu .sub-menu li a:hover,
.nav-menu .sub-menu li.current-menu-item > a {
  background-color: var(--nf-surface);
  color: var(--nf-blue-accent);
}

.btn-nav {
  background-color: var(--nf-navy);
  color: var(--nf-white) !important;
  padding: 8px 18px !important;
  border-radius: 4px;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all var(--nf-transition-fast);
}

.btn-nav:hover,
.btn-nav:focus-visible {
  background-color: var(--nf-blue-accent) !important;
  color: var(--nf-white) !important;
  transform: translateY(-1px);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* El icono visual sigue siendo pequeño (32×26px, ver .hamburger-bar),
     pero el área táctil real crece a 44×44px: es el único acceso a la
     navegación en móvil y tablet, y por debajo de eso incumple las guías
     de accesibilidad táctil de iOS/Android. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1020;
}

.menu-toggle .hamburger-bar {
  width: 26px;
}

.hamburger-bar {
  width: 100%;
  height: 3px;
  background-color: var(--nf-ink);
  border-radius: 2px;
}

/* 3. SLIDER VISUAL EN PORTADA */
.slider-section {
  position: relative;
  width: 100%;
  background-color: var(--nf-white) !important;
  overflow: hidden;
}

.nfoque-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* Altura proporcional adaptada a fotos de formato 16:9 y 3:2 (resolviendo el recorte de cabezas y pies generado por 21:9) */
  height: 720px;
  max-height: 750px;
  overflow: hidden;
  background-color: var(--nf-white) !important;
}

@media (max-width: 1200px) {
  .nfoque-slider-wrapper {
    height: 640px;
  }
}

@media (max-width: 991px) {
  .nfoque-slider-wrapper {
    height: 500px;
  }
}

@media (max-width: 640px) {
  .nfoque-slider-wrapper {
    height: 400px;
  }
}

.nfoque-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.nfoque-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s;
  z-index: 1;
}

.nfoque-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.gallery_image_caption {
  position: absolute;
  bottom: 35px;
  left: 35px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  padding: 12px 24px;
  color: var(--nf-white);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: var(--nf-white);
  border: none;
  font-size: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
}

.slider-arrow:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: translateY(-50%) scale(1.05);
}

.slider-prev { left: 20px; }
.slider-next { right: 20px; }

/* Botón de pausa del carrusel: WCAG 2.2.2 exige un mecanismo para detener
   cualquier movimiento automático de más de 5s. mouseenter/mouseleave (que
   ya pausaba el autoplay) no cuenta como tal: no existe en táctil ni con
   teclado, así que en móvil el carrusel era literalmente imparable. */
.slider-pause {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: var(--nf-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--nf-transition-base);
}

.slider-pause:hover {
  background: rgba(0, 0, 0, 0.85);
}

.slider-pause .icon-pause {
  display: none;
}

.slider-pause.is-paused .icon-play {
  display: none;
}

.slider-pause.is-paused .icon-pause {
  display: block;
}

.slider-dots {
  position: absolute;
  bottom: 25px;
  right: 35px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.slider-dot {
  /* Área táctil de 24×24px con el punto visual centrado más pequeño
     (::after), en vez de un botón de 11×11px directamente clicable. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--nf-white);
  background: transparent;
  transition: all var(--nf-transition-base);
}

.slider-dot.active::after,
.slider-dot:hover::after {
  background: var(--nf-white);
  transform: scale(1.15);
}

/* 4. COMPATIBILIDAD TOTAL THEMEGOODS PAGE BUILDER (PPB) */
.ppb-fullwidth-page,
.ppb_wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  clear: both;
}

.one {
  width: 100%;
  clear: both;
  box-sizing: border-box;
}

.standard_wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Banners de Cabecera PPB */
.one.withsmallpadding.ppb_header {
  width: 100%;
  box-sizing: border-box;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.ppb_header .standard_wrapper {
  width: 100%;
}

h2.ppb_title,
.ppb_title {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.2;
}

.ppb_subtitle {
  font-size: 0.85rem !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  color: var(--nf-blue-accent);
}

hr.title_break {
  width: 46px;
  height: 2px;
  margin: 20px auto;
  border: none;
  background-color: currentColor;
  display: block;
}

hr.title_break.left {
  margin: 20px 0;
}

.ppb_header_content {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 850px;
  margin: 0 auto;
}

.ppb_header_content p {
  margin-bottom: 0;
}

/* Secciones Divididas 50/50 (.one_half_bg) */
.page_content_wrapper.nopadding {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: stretch;
}

.one_half_bg {
  flex: 1 1 50%;
  width: 50%;
  min-height: 520px;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.one_half_bg.textright {
  text-align: left;
}

.one_half_bg h2.ppb_title,
.one_half_bg .ppb_title {
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  margin-bottom: 16px;
  text-transform: none !important;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.one_half_bg p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #3f3f46;
  margin-bottom: 18px;
}

/* Legibilidad garantizada y alto contraste en cajas de fondo oscuro (Retrato, Comercial, etc.) */
.ppb_wrapper[style*="background-color:#0"] p,
.ppb_wrapper[style*="background-color: #0"] p,
.ppb_wrapper[style*="background-color:#1"] p,
.ppb_wrapper[style*="background-color: #1"] p,
.ppb_wrapper[style*="color:#fff"] p,
.ppb_wrapper[style*="color: #fff"] p,
.one[style*="background-color:#0"] p,
.one[style*="background-color: #0"] p,
.one[style*="background-color:#1"] p,
.one[style*="background-color: #1"] p,
.one[style*="color:#fff"] p,
.one[style*="color: #fff"] p,
.one_half_bg[style*="color:#fff"] p,
.one_half_bg[style*="color: #fff"] p,
.one_half_bg[style*="background-color:#0"] p,
.one_half_bg[style*="background-color: #0"] p,
.one[style*="background-color:#0"] .one_half_bg p,
.one[style*="background-color: #0"] .one_half_bg p,
.ppb_wrapper[style*="background-color:#0"] .one_half_bg p,
.ppb_wrapper[style*="background-color: #0"] .one_half_bg p,
.ppb_wrapper[style*="background-color:#1"] .one_half_bg p,
.ppb_wrapper[style*="background-color: #1"] .one_half_bg p,
.ppb_wrapper[style*="color:#fff"] .one_half_bg p,
.ppb_wrapper[style*="color: #fff"] .one_half_bg p,
.one[style*="color:#fff"] .one_half_bg p,
.one[style*="color: #fff"] .one_half_bg p,
.dark-bg p,
.black_bg p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.ppb_wrapper[style*="background-color:#0"] hr.title_break,
.ppb_wrapper[style*="background-color: #0"] hr.title_break,
.one[style*="background-color:#0"] hr.title_break,
.one[style*="background-color: #0"] hr.title_break {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Transición a Azul Marino Corporativo N~Foque (#0b1726) en cajas oscuras PPB */
.one[style*="background-color:#000000"],
.one[style*="background-color: #000000"],
.one[style*="background-color:#000"],
.one[style*="background-color: #000"],
.ppb_wrapper[style*="background-color:#000000"],
.ppb_wrapper[style*="background-color: #000000"],
.ppb_wrapper[style*="background-color:#000"],
.ppb_wrapper[style*="background-color: #000"] {
  background-color: var(--nf-navy) !important;
  background: linear-gradient(145deg, var(--nf-navy) 0%, var(--nf-navy-deep) 100%) !important;
}

/* Cuadrícula de Galerías de 3 Columnas (Bodas y Reportajes) */
.portfolio_filter_wrapper.gallery.three_cols,
.portfolio_filter_wrapper.gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 1360px !important;
  margin: 60px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  clear: both;
}

.portfolio_filter_wrapper .element {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--nf-navy);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  aspect-ratio: 1 / 1;
}

.portfolio_filter_wrapper .element .image_frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.portfolio_filter_wrapper .element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.portfolio_filter_wrapper .element:hover img {
  transform: scale(1.08);
}

.gallery_archive_desc {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.82) 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  box-sizing: border-box;
  transition: background 0.3s ease;
}

.portfolio_filter_wrapper .element:hover .gallery_archive_desc {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.9) 100%);
}

.gallery_archive_desc_inner h3,
.gallery_archive_desc_inner h4 {
  color: var(--nf-white) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* Botones y Barras PPB a ancho completo (Área de Clientes y Call to Actions) */
.one.ppb_fullwidth_button {
  background-color: var(--nf-white) !important;
  background: var(--nf-white) !important;
  color: var(--nf-ink) !important;
  padding: 55px 0;
  margin-top: 40px;
  width: 100%;
  clear: both;
  border-top: 1px solid var(--nf-border);
  border-bottom: 1px solid var(--nf-border);
  box-shadow: 0 4px 20px rgba(11, 23, 38, 0.04);
}

.ppb_fullwidth_button .standard_wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.ppb_fullwidth_button h2.title {
  font-size: 1.65rem !important;
  color: var(--nf-ink) !important;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ppb_fullwidth_button .button,
.ppb_fullwidth_button a.button,
a.button,
.button {
  background-color: var(--nf-navy) !important;
  color: var(--nf-white) !important;
  padding: 13px 32px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  display: inline-block;
  border: 1px solid var(--nf-navy);
  box-shadow: 0 2px 8px rgba(11, 23, 38, 0.18);
}

.ppb_fullwidth_button .button:hover,
.ppb_fullwidth_button a.button:hover,
a.button:hover,
.button:hover {
  background-color: var(--nf-blue-accent) !important;
  border-color: var(--nf-blue-accent) !important;
  color: var(--nf-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.28);
}

/* Columnas de Texto PPB */
.ppb_text {
  padding: 30px 0;
}

.ppb_text .standard_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.one_half.withsmallpadding.ppb_text {
  flex: 1 1 calc(50% - 15px);
  box-sizing: border-box;
}

/* 5. PROMOCIONES Y DESTACADOS DE PORTADA */
.promotions-section {
  padding: 60px 0;
  background-color: var(--nf-surface-alt);
}

.section-header {
  text-align: center;
  margin-bottom: 35px;
}

.section-title {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}

.promotions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.promo-card {
  background-color: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.promo-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

.promo-thumb-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--nf-surface);
}

.promo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.promo-card:hover .promo-thumb {
  transform: scale(1.04);
}

.promo-body {
  padding: 20px 22px;
}

.promo-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #71717a;
  margin-bottom: 8px;
}

.promo-cat {
  background-color: var(--nf-surface);
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 500;
  color: var(--nf-body);
}

.promo-title {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--nf-ink);
  margin-top: 4px;
  line-height: 1.35;
}

.highlights-triptych-section {
  padding: 40px 0 60px;
  background-color: var(--nf-white);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.highlight-item-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background-color: var(--nf-surface);
}

.highlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.highlight-item-box:hover .highlight-img {
  transform: scale(1.05);
}

/* 6. BLOQUE SEO LOCAL */
.seo-local-section {
  padding: 50px 0;
  background-color: var(--nf-surface-alt);
  border-top: 1px solid var(--nf-border);
}

.seo-box {
  background-color: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: 6px;
  padding: 40px;
}

.seo-content-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.seo-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--nf-ink);
  margin-bottom: 14px;
}

.seo-text-col p {
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.65;
}

.seo-cta-card {
  background-color: var(--nf-surface-alt);
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}

.seo-cta-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--nf-ink);
}

.seo-cta-card p {
  font-size: 0.88rem;
  color: #6b7280;
  margin-bottom: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.btn-primary {
  background-color: var(--nf-navy);
  color: var(--nf-white) !important;
  border: 1px solid var(--nf-navy);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--nf-blue-accent);
  border-color: var(--nf-blue-accent);
  color: var(--nf-white) !important;
}

.btn-outline-dark {
  background-color: transparent;
  color: var(--nf-navy);
  border-color: var(--nf-border);
}

.btn-outline-dark:hover {
  border-color: var(--nf-blue-accent);
  color: var(--nf-blue-accent);
  background-color: var(--nf-white);
}

.btn-block {
  width: 100%;
  display: block;
  margin-top: 10px;
}

/* 7. PÁGINAS CLÁSICAS ESTÁNDAR */
.page-header-banner {
  background-color: var(--nf-white);
  color: var(--nf-ink);
  padding: 50px 0 15px 0;
  text-align: center;
}

.page-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--nf-ink);
  letter-spacing: -0.02em;
}

.page-content-wrapper {
  padding: 45px 0;
  min-height: 50vh;
}

.entry-content {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--nf-body);
}

.entry-content h2 {
  font-size: 1.5rem;
  margin: 28px 0 14px;
}

.entry-content p {
  margin-bottom: 18px;
}

/* 8. FORMULARIOS (Formidable Forms) Y FINE ART GALLERY */
.frm_forms, .frm_form_fields {
  max-width: 800px;
  margin: 0 auto;
}

.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms textarea,
.frm_forms select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 1rem;
  margin-top: 6px;
  background-color: var(--nf-white);
  color: var(--nf-ink);
}

.frm_forms .frm_submit input[type="submit"],
.frm_forms .frm_submit button {
  background-color: var(--nf-navy);
  color: var(--nf-white);
  padding: 14px 36px;
  border-radius: 4px;
  border: 1px solid var(--nf-navy);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.frm_forms .frm_submit input[type="submit"]:hover,
.frm_forms .frm_submit button:hover {
  background-color: var(--nf-blue-accent);
  border-color: var(--nf-blue-accent);
  color: var(--nf-white);
}

.fap-gallery-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.fap-filter-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 15px auto 45px !important;
  border-bottom: 1px solid #eeeeee !important;
  padding-bottom: 18px !important;
  flex-wrap: wrap !important;
}

.fap-filter-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #666666 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.25s ease !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
}

.fap-filter-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--nf-ink) !important;
  box-shadow: none !important;
}

.fap-filter-btn.active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--nf-ink) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.fap-filter-btn.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -19px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--nf-ink) !important;
}

/* 9. FOOTER (Azul Marino Corporativo N~Foque) */
.site-footer,
#colophon.site-footer {
  background-color: var(--nf-navy) !important;
  background: linear-gradient(180deg, var(--nf-navy) 0%, var(--nf-navy-deep) 100%) !important;
  color: var(--nf-on-navy-body);
  padding: 55px 0 20px;
  margin-top: auto;
  border-top: 1px solid var(--nf-on-navy-border);
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-logo {
  margin-bottom: 14px;
}

.footer-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--nf-on-navy-muted);
}

.footer-legal-entity {
  font-size: 0.78rem;
  /* Antes #64748b: 3,79:1 sobre el navy del footer, no llega ni a AA.
     Es la razón social y el NIF, información con obligación legal de ser
     identificable, así que era justo el texto menos legible de la página. */
  color: var(--nf-on-navy-muted);
}

.footer-heading {
  font-size: 0.95rem;
  color: var(--nf-white);
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.footer-links li {
  margin-bottom: 9px;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--nf-on-navy-body);
  transition: color var(--nf-transition-fast);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--nf-white);
}

.site-footer .text-accent {
  color: #60a5fa !important;
}

.site-footer .text-accent:hover {
  color: #93c5fd !important;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--nf-on-navy-border);
  font-size: 0.8rem;
  color: var(--nf-on-navy-muted);
}

.footer-legal-links {
  display: flex;
  gap: 12px;
}

.footer-legal-links a {
  color: var(--nf-on-navy-muted);
  transition: color var(--nf-transition-fast);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--nf-white);
}

/* 10. RESPONSIVE MEDIA QUERIES */
@media (max-width: 991px) {
  .menu-toggle {
    display: flex;
  }

  .menu-wrapper {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background-color: var(--nf-white);
    border-bottom: 1px solid var(--nf-border);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 24px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
  }

  .menu-wrapper.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .nav-menu .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 14px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .page_content_wrapper.nopadding {
    flex-direction: column;
  }

  .one_half_bg {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 380px !important;
  }

  .one_half_bg[style*="padding:125px"],
  .one_half_bg[style*="padding: 125px"],
  .one_half_bg[style*="padding:65px"],
  .one_half_bg[style*="padding: 65px"],
  .one_half_bg[style*="padding:30px"] {
    padding: 45px 24px !important;
  }

  .one.withsmallpadding.ppb_header[style*="padding:235px"],
  .one.withsmallpadding.ppb_header[style*="padding: 235px"],
  .one.withsmallpadding.ppb_header[style*="padding:125px"] {
    padding: 80px 20px !important;
  }

  .highlights-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .seo-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gallery_image_caption {
    bottom: 20px;
    left: 20px;
    padding: 8px 16px;
    font-size: 0.95rem;
  }

  .slider-arrow {
    /* Se mantiene en 44px (mínimo táctil) aunque visualmente el icono se
       vea algo más grande que antes; 38px quedaba por debajo de lo que
       recomiendan las guías táctiles de iOS/Android. */
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .slider-prev { left: 10px; }
  .slider-next { right: 10px; }

  .slider-dots {
    bottom: 15px;
    right: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ==========================================================================
   11. ELEMENTOS DE GALERÍA PPB Y SLIDERS INTERIORES (v1.0.3)
   ========================================================================== */

/* --- Cuadrícula de Galerías PPB (e.g. /vuestra-boda/) --- */
.portfolio_filter_wrapper.gallery.three_cols,
.portfolio_filter_wrapper.gallery,
.portfolio_filter_wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 40px auto 60px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  clear: both;
}

@media (max-width: 991px) {
  .portfolio_filter_wrapper.gallery.three_cols,
  .portfolio_filter_wrapper.gallery,
  .portfolio_filter_wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .portfolio_filter_wrapper.gallery.three_cols,
  .portfolio_filter_wrapper.gallery,
  .portfolio_filter_wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

.portfolio_filter_wrapper.gallery.three_cols .element,
.portfolio_filter_wrapper.gallery .element,
.portfolio_filter_wrapper .element,
.element.grid.classic3_cols,
.element.classic3_cols {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background-color: var(--nf-surface) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio_filter_wrapper.gallery.three_cols .element .one_third,
.portfolio_filter_wrapper.gallery .element .one_third,
.portfolio_filter_wrapper .element .one_third,
.element.grid.classic3_cols .one_third,
.element .gallery_type,
.element .gallery3,
.gallery_type,
.portfolio_type {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  float: none !important;
  overflow: hidden !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio_filter_wrapper.gallery.three_cols .element a,
.portfolio_filter_wrapper.gallery .element a,
.portfolio_filter_wrapper .element a,
.element.grid.classic3_cols a,
.element a {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/* Supresión TOTAL de imágenes secundarias de KenBurns y viñetas */
ul.gallery_img_slides,
.gallery_img_slides {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.gallery_img_slides li,
.gallery_img_slides li {
  display: none !important;
  list-style: none !important;
}

/* Imagen principal de la tarjeta de galería */
.portfolio_filter_wrapper.gallery.three_cols .element img.preview,
.portfolio_filter_wrapper .element img.preview,
.portfolio_filter_wrapper.gallery .element img.preview,
.element img.preview,
.element.grid a > img,
.element.grid a > img.preview,
.portfolio_filter_wrapper.gallery.three_cols img.preview,
.portfolio_filter_wrapper .element img,
.portfolio_filter_wrapper .element .one_third img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.element:hover img.preview,
.portfolio_filter_wrapper .element:hover img.preview,
.element.grid a:hover > img {
  transform: scale(1.06) !important;
}

/* Gradiente y título elegante en la base de la tarjeta */
.portfolio_filter_wrapper .element .gallery_archive_desc,
.gallery_archive_desc {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  padding: 50px 22px 22px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  text-align: left !important;
}

.gallery_archive_desc_inner h3,
.gallery_archive_desc_inner h4,
.gallery_archive_desc h4 {
  color: var(--nf-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

.gallery_archive_desc .post_detail {
  display: none !important;
}

/* --- Sliders de Páginas Interiores (e.g. /orlas/) --- */
.slider_wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 30px auto !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background-color: var(--nf-ink) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

.flexslider,
.flexslider.tg_gallery {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.flexslider ul.slides,
.slider_wrapper ul.slides {
  display: grid !important;
  grid-template-areas: "slide" !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: hidden !important;
}

.flexslider ul.slides > li,
.slider_wrapper ul.slides > li {
  grid-area: slide !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  z-index: 1;
}

/* Por defecto, la primera diapositiva o la activa es visible */
.flexslider:not(.slider-js-ready) ul.slides > li:first-child,
.slider_wrapper:not(.slider-js-ready) ul.slides > li:first-child,
.flexslider ul.slides > li.active,
.slider_wrapper ul.slides > li.active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.slider-js-ready ul.slides > li:not(.active) {
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 1 !important;
}

.flexslider ul.slides > li img,
.slider_wrapper ul.slides > li img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 750px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 4px;
}

/* Flechas de navegación para sliders interiores */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--nf-white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
}

.slider-nav-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: translateY(-50%) scale(1.1);
}

.slider-nav-prev { left: 16px; }
.slider-nav-next { right: 16px; }


/* ==========================================================================
   12. TARJETAS DE RESERVA Y REGALO (CPBC, CBC, CGC) - ESTILO UNIFICADO PREMIUM
   ========================================================================== */

/* Contenedores de Cuadrícula */
.cpbc-grid,
.cbc-grid,
.cgc-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 40px auto 60px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  clear: both !important;
}

@media (max-width: 991px) {
  .cpbc-grid,
  .cbc-grid,
  .cgc-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 640px) {
  .cpbc-grid,
  .cbc-grid,
  .cgc-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
}

/* Tarjeta Individual */
.cpbc-card-item,
.cbc-card-item,
.cgc-card-item {
  background-color: var(--nf-white) !important;
  border: 1px solid var(--nf-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.cpbc-card-item:hover,
.cbc-card-item:hover,
.cgc-card-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px -10px rgba(11, 23, 38, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.35) !important;
  border-color: var(--nf-blue-light) !important;
}

/* Contenedor de Imagen (si la tarjeta incluye cabecera visual) */
.cpbc-card-img-wrapper,
.cbc-card-img-wrapper,
.cgc-card-img-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  background-color: var(--nf-surface) !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f0f0f2 !important;
}

.cpbc-card-img,
.cbc-card-img,
.cgc-card-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cpbc-card-item:hover .cpbc-card-img,
.cbc-card-item:hover .cbc-card-img,
.cgc-card-item:hover .cgc-card-img {
  transform: scale(1.06) !important;
}

/* Cuerpo de la Tarjeta */
.cpbc-card-body,
.cbc-card-body,
.cgc-card-body {
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .cpbc-card-body,
  .cbc-card-body,
  .cgc-card-body {
    padding: 24px 20px !important;
  }
}

/* Título de la Tarjeta */
.cpbc-card-title,
.cbc-card-title,
.cgc-card-title {
  margin: 0 0 14px 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--nf-ink) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* Descripción y Lista de Servicios */
.cpbc-card-desc,
.cbc-card-desc,
.cgc-card-desc {
  font-size: 0.94rem !important;
  color: #4b5563 !important;
  line-height: 1.7 !important;
  margin: 0 0 24px 0 !important;
  flex-grow: 1 !important;
}

.cpbc-card-desc ul,
.cbc-card-desc ul,
.cgc-card-desc ul {
  margin: 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cpbc-card-desc li,
.cbc-card-desc li,
.cgc-card-desc li {
  position: relative !important;
  padding-left: 24px !important;
  margin-bottom: 10px !important;
  line-height: 1.55 !important;
  font-size: 0.91rem !important;
  color: #374151 !important;
  list-style: none !important;
}

.cpbc-card-desc li::before,
.cbc-card-desc li::before,
.cgc-card-desc li::before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--nf-blue-accent) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* Pie de la Tarjeta */
.cpbc-card-footer,
.cbc-card-footer,
.cgc-card-footer {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid #f3f4f6 !important;
  padding-top: 22px !important;
  margin-top: auto !important;
  gap: 16px !important;
}

/* Fila Superior del Pie (Precios) */
.cpbc-footer-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  width: 100% !important;
}

.cpbc-price-box,
.cbc-price-box,
.cgc-price-box {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

.cpbc-price-original,
.cbc-price-original,
.cgc-price-original {
  font-size: 0.95rem !important;
  text-decoration: line-through !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
}

.cpbc-price-current,
.cbc-price-current,
.cgc-price-current {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: var(--nf-ink) !important;
  letter-spacing: -0.02em !important;
}

/* Selector de Modalidad de Pago (Reserva / Total) */
.cpbc-payment-selector {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 4px 0 !important;
}

.cpbc-selector-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.9rem !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background-color: var(--nf-surface-alt) !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.cpbc-selector-label:hover {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.cpbc-selector-label:has(input:checked) {
  background-color: var(--nf-blue-subtle) !important;
  border-color: var(--nf-blue-light) !important;
  color: var(--nf-ink) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18) !important;
}

.cpbc-selector-label input[type="radio"],
.cpbc-radio-choice {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--nf-blue-accent) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Botón de Acción Principal en Tarjetas de Compra / Reserva */
.cpbc-btn,
.cbc-btn,
.cgc-card-item .cgc-btn,
.cgc-btn-buy {
  box-sizing: border-box !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 13px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: var(--nf-navy) !important;
  color: var(--nf-white) !important;
  border: 1px solid var(--nf-navy) !important;
  box-shadow: 0 2px 8px rgba(11, 23, 38, 0.15) !important;
}

.cpbc-btn:hover,
.cbc-btn:hover,
.cgc-card-item .cgc-btn:hover,
.cgc-btn-buy:hover {
  background-color: var(--nf-blue-accent) !important;
  border-color: var(--nf-blue-accent) !important;
  color: var(--nf-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
}

/* Formidable Forms - Estilizado e Integración Fiel */
.frm_forms, .frm_form_fields { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.frm_form_fields fieldset { border: none !important; padding: 0 !important; margin: 0 !important; }
.frm_fields_container { display: flex !important; flex-wrap: wrap !important; gap: 14px 0 !important; }
.frm_form_field { width: 100% !important; box-sizing: border-box !important; margin-bottom: 10px !important; clear: none !important; }
.frm_form_field.frm6 { width: calc(50% - 10px) !important; display: inline-block !important; }
.frm_form_field.frm6.frm_first { margin-right: 20px !important; }
@media (max-width: 640px) { .frm_form_field.frm6 { width: 100% !important; margin-right: 0 !important; } }
.frm_primary_label { display: block !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; color: #4b5563 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 6px !important; }
.frm_required { color: var(--nf-danger) !important; margin-left: 2px !important; }
.frm_forms input[type="text"], .frm_forms input[type="email"], .frm_forms input[type="tel"], .frm_forms select, .frm_forms textarea { width: 100% !important; box-sizing: border-box !important; padding: 10px 14px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; background-color: var(--nf-white) !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.92rem !important; color: #1f2937 !important; transition: border-color 0.2s, box-shadow 0.2s !important; }
.frm_forms input[type="text"]:focus, .frm_forms input[type="email"]:focus, .frm_forms input[type="tel"]:focus, .frm_forms select:focus, .frm_forms textarea:focus { outline: none !important; border-color: var(--nf-focus) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important; }
.frm_forms textarea { min-height: 120px !important; resize: vertical !important; }
/* Ocultar spam, honeypot y clave de registro interna.
   #frm_field_693_container es un ID autoincremental de la base de datos de
   Formidable: si el formulario se reconstruye o se migra, cambia y esta
   regla deja de aplicar sin ningún error visible. Donde sea posible, es
   más robusto asignar una clase CSS a ese campo desde el propio Formidable
   (Ajustes del campo > Avanzado > Clases CSS) y apuntar a esa clase en
   lugar de al ID. Se mantiene el selector por ID por compatibilidad con
   el formulario ya publicado. */
.frm_verify, .frm_hidden, .frm_none_container, .frm_screen_reader, #frm_field_693_container, .nfoque-frm-hidden-field, .frm_form_field:has(input[name="item_key"]), input[name="item_key"] { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
/* Botón Enviar Formidable - Azul fiel al tema actual.
   Mismo caso: #frm_field_672_container es un ID de base de datos. Se añade
   .nfoque-frm-submit-field como alternativa por clase para cuando se migre. */
.frm_submit, .frm_form_field .frm_submit, #frm_field_672_container, .nfoque-frm-submit-field { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; margin-top: 16px !important; clear: both !important; }
.frm_button_submit, button.frm_final_submit, .frm_submit button, .frm_submit input[type="submit"] { display: inline-block !important; visibility: visible !important; opacity: 1 !important; background-color: var(--nf-focus) !important; color: var(--nf-white) !important; border: none !important; padding: 10px 28px !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; border-radius: 6px !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important; transition: all 0.2s ease !important; text-transform: none !important; }
.frm_button_submit:hover, button.frm_final_submit:hover, .frm_submit button:hover, .frm_submit input[type="submit"]:hover { background-color: #2563eb !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important; transform: translateY(-1px) !important; }

/* ==========================================================
   SECCIÓN DE CONTACTO Y 2 COLUMNAS: 2 CONTENEDORES LADO A LADO
   ========================================================== */
.inner:has(> .one_half):has(> .one_half.last),
.nfoque-contact-wrapper {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 50px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 40px auto 80px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.inner > .one_half:not(.last),
.nfoque-contact-col-info {
  flex: 1 1 45% !important;
  width: 45% !important;
  max-width: 45% !important;
  padding-top: 6px !important;
  box-sizing: border-box !important;
}

.nfoque-contact-col-info .ppb_subtitle {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #71717a !important;
  margin: 0 0 10px 0 !important;
}

.nfoque-contact-col-info h2.ppb_title,
.nfoque-contact-col-info .ppb_title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--nf-ink) !important;
  margin: 0 !important;
}

.inner > .one_half:not(.last) img,
.nfoque-contact-col-info img,
.image_classic_frame img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  display: block !important;
  object-fit: contain !important;
}

.inner > .one_half.last,
.nfoque-contact-col-form {
  flex: 1 1 52% !important;
  width: 52% !important;
  max-width: 52% !important;
  box-sizing: border-box !important;
}

.nfoque-contact-col-form > span,
.nfoque-contact-col-form > p,
.nfoque-contact-col-form .content_middle > span {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--nf-body) !important;
  display: block !important;
  margin-bottom: 24px !important;
}

.nfoque-contact-col-info .one_half,
.nfoque-contact-col-form .one_half,
.nfoque-contact-wrapper .page_content_wrapper,
.nfoque-contact-wrapper .inner,
.nfoque-contact-wrapper .standard_wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Supresión de saltos <br> y <p> generados por wpautop dentro del formulario */
.frm_forms br,
.frm_form_field br,
.frm_primary_label br {
  display: none !important;
}

.nfoque-contact-col-form p:empty {
  display: none !important;
}

/* Formidable Forms - Grid 12 Columnas Nativo & Estilizado Fiel */
.nfoque-contact-col-form .frm_forms,
.nfoque-contact-col-form .frm_form_fields,
.nfoque-contact-col-form fieldset {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.nfoque-contact-col-form .frm_fields_container {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  column-gap: 20px !important;
  row-gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nfoque-contact-col-form .frm_form_field {
  grid-column: span 12 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.nfoque-contact-col-form .frm_form_field.frm6,
.nfoque-contact-col-form #frm_field_667_container,
.nfoque-contact-col-form #frm_field_668_container,
.nfoque-contact-col-form #frm_field_657_container,
.nfoque-contact-col-form #frm_field_658_container {
  grid-column: span 6 !important;
  width: 100% !important;
}

.nfoque-contact-col-form .frm_primary_label {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.nfoque-contact-col-form .frm_required {
  color: var(--nf-danger) !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  display: inline !important;
}

.frm_description {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
}

.nfoque-contact-col-form input[type="text"],
.nfoque-contact-col-form input[type="email"],
.nfoque-contact-col-form input[type="tel"],
.nfoque-contact-col-form select,
.nfoque-contact-col-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 15px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background-color: var(--nf-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.92rem !important;
  color: #1f2937 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.nfoque-contact-col-form input:focus,
.nfoque-contact-col-form select:focus,
.nfoque-contact-col-form textarea:focus {
  outline: none !important;
  border-color: var(--nf-focus) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35) !important;
}

.nfoque-contact-col-form select {
  height: 46px !important;
}

.nfoque-contact-col-form textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

.frm_verify,
.frm_hidden,
.frm_none_container,
.frm_screen_reader,
[id*="frm_field_693"],
input[name="item_key"],
.frm_form_field:has(input[name="item_key"]) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nfoque-contact-col-form .frm_submit,
.nfoque-contact-col-form #frm_field_672_container,
.frm_submit {
  grid-column: span 12 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 0 !important;
  clear: both !important;
}

.nfoque-contact-col-form .frm_button_submit,
.nfoque-contact-col-form button.frm_final_submit,
.frm_button_submit,
button.frm_final_submit,
.frm_submit button,
.frm_submit input[type="submit"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: var(--nf-focus) !important;
  color: var(--nf-white) !important;
  border: none !important;
  padding: 12px 34px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
  margin-top: 8px !important;
}

.nfoque-contact-col-form .frm_button_submit:hover,
.nfoque-contact-col-form button.frm_final_submit:hover,
.frm_button_submit:hover,
button.frm_final_submit:hover,
.frm_submit button:hover,
.frm_submit input[type="submit"]:hover {
  background-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 860px) {
  .inner:has(> .one_half):has(> .one_half.last),
  .nfoque-contact-wrapper {
    flex-direction: column !important;
    gap: 40px !important;
    margin: 40px auto 60px auto !important;
  }
  .inner > .one_half:not(.last),
  .nfoque-contact-col-info,
  .inner > .one_half.last,
  .nfoque-contact-col-form {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .nfoque-contact-col-form .frm_form_field.frm6,
  .nfoque-contact-col-form #frm_field_667_container,
  .nfoque-contact-col-form #frm_field_668_container,
  .nfoque-contact-col-form #frm_field_657_container,
  .nfoque-contact-col-form #frm_field_658_container {
    grid-column: span 12 !important;
  }
}

/* ==========================================================
   SISTEMA DE VALIDACIÓN DE TARJETAS REGALO (CGC)
   ========================================================== */
.cgc-val-container {
  max-width: 660px !important;
  margin: 30px auto 80px auto !important;
  background: var(--nf-white) !important;
  padding: 40px 45px !important;
  border-radius: 12px !important;
  border: 1px solid var(--nf-border) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.07) !important;
  box-sizing: border-box !important;
}

.cgc-val-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--nf-ink) !important;
  text-align: center !important;
  margin: 0 0 28px 0 !important;
}

.cgc-val-container .cgc-form-label {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 10px !important;
}

.cgc-val-container form div[style*="display: flex"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

.cgc-val-container input#cgc_val_code.cgc-form-control,
.cgc-val-container .cgc-form-control {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  background-color: #fafbfc !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-family: 'Montserrat', monospace, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.cgc-val-container input#cgc_val_code.cgc-form-control:focus,
.cgc-val-container .cgc-form-control:focus {
  outline: none !important;
  border-color: #0088cc !important;
  background-color: var(--nf-white) !important;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.35) !important;
}

.cgc-val-container input#cgc_val_code::placeholder {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-family: 'Montserrat', monospace, sans-serif !important;
  opacity: 0.9 !important;
}

.cgc-val-container button[type="submit"].cgc-btn,
.cgc-val-container .cgc-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 130px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #0088cc !important;
  background: #0088cc !important;
  color: var(--nf-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 28px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(0, 136, 204, 0.25) !important;
  margin: 0 !important;
}

.cgc-val-container button[type="submit"].cgc-btn:hover,
.cgc-val-container .cgc-btn:hover {
  background-color: #006699 !important;
  background: #006699 !important;
  color: var(--nf-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 153, 0.35) !important;
}

.cgc-val-container .description {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  color: #6b7280 !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
  display: block !important;
}

@media (max-width: 640px) {
  .page-header-banner {
    padding: 35px 15px 10px 15px !important;
  }
  .page-header-banner .page-title,
  .page-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }
  .cgc-val-container {
    padding: 24px 18px !important;
    margin: 15px auto 35px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .cgc-val-title {
    font-size: 1.25rem !important;
    margin-bottom: 20px !important;
  }
  .cgc-val-container form div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cgc-val-container input#cgc_val_code.cgc-form-control,
  .cgc-val-container .cgc-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cgc-val-container button[type="submit"].cgc-btn,
  .cgc-val-container .cgc-btn {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   14. VISTA DE GALERÍA INDIVIDUAL (single-galleries.php)
   Masonry editorial limpio, botón volver estilizado y lightbox overlay
   ========================================================================== */

.gallery-single-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.gallery-header {
  margin: 25px auto 40px;
  text-align: center;
  max-width: 820px;
  padding: 0 20px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nf-muted-strong);
  text-decoration: none;
  margin-bottom: 22px;
  padding: 9px 20px;
  border-radius: 9999px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  transition: all 0.25s ease;
  line-height: 1;
}

.back-link svg {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease;
}

.back-link:hover {
  color: #09090b;
  background: var(--nf-border);
  border-color: #d4d4d8;
  transform: translateX(-3px);
  text-decoration: none;
}

.back-link:hover svg {
  transform: translateX(-2px);
}

.gallery-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #09090b;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  line-height: 1.15;
}

.gallery-intro {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--nf-muted-strong);
  margin: 0 auto;
  max-width: 680px;
}

/* Cuadrícula Horizontal de Galerías (Lectura de izquierda a derecha, fila por fila) */
.nfoque-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 60px;
  padding: 0 20px;
  box-sizing: border-box;
  align-items: start;
}

@media (max-width: 1024px) {
  .nfoque-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .nfoque-gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 14px;
  }
}

.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--nf-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  display: block;
  width: 100%;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.gallery-item a.nfoque-lightbox-link {
  display: block;
  position: relative;
  width: 100%;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  vertical-align: middle;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  border-radius: 8px;
  pointer-events: none;
}

.gallery-item:hover .gallery-hover-overlay {
  opacity: 1;
}

.gallery-hover-overlay .zoom-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18181b;
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.gallery-item:hover .zoom-icon {
  transform: scale(1);
}

.gallery-content-fallback {
  max-width: 900px;
  margin: 30px auto;
  line-height: 1.8;
  color: #3f3f46;
}

/* ==========================================================================
   15. SISTEMA DE RESERVAS Y CITAS CBS (pide-tu-hora / recoge-tu-orla)
   Diseño consistente de tarjeta, cabecera de fechas, botones de navegación y slots
   ========================================================================== */

.cbs-container {
  max-width: 800px !important;
  margin: 30px auto !important;
  font-family: 'Montserrat', sans-serif !important;
  background: var(--nf-white) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  padding: 2.5rem !important;
  color: var(--nf-body) !important;
  box-sizing: border-box !important;
  border: 1px solid #f1f5f9 !important;
}

.cbs-calendar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  gap: 15px !important;
}

.cbs-calendar-header h3 {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #18181b !important;
  text-align: center !important;
  flex-grow: 1 !important;
}

.cbs-nav-btn {
  background: var(--nf-surface) !important;
  border: 1px solid var(--nf-border) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--nf-muted-strong) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.cbs-nav-btn:hover {
  background: var(--nf-border) !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
  transform: scale(1.05) !important;
}

.cbs-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
}

.cbs-no-slots {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  color: var(--nf-muted) !important;
  padding: 2.5rem 1.5rem !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  border: 1px solid #f1f5f9 !important;
}

.cbs-slot-btn {
  background: var(--nf-white) !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: #4a5568 !important;
  text-align: center !important;
}

.cbs-slot-btn:hover {
  border-color: #18181b !important;
  color: #18181b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.cbs-slot-btn.selected {
  background: #18181b !important;
  color: var(--nf-white) !important;
  border-color: #18181b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#cbs-booking-form-wrapper {
  background: #f8fafc !important;
  border-radius: 8px !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
  border: 1px solid #e2e8f0 !important;
}

#cbs-booking-form-wrapper h3 {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.25rem !important;
  color: #1e293b !important;
}

.cbs-form-group {
  margin-bottom: 1.25rem !important;
}

.cbs-form-group label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  color: #475569 !important;
  font-size: 0.9rem !important;
}

.cbs-form-group input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.cbs-form-group input:focus {
  outline: none !important;
  border-color: #18181b !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

.cbs-btn {
  background: #18181b !important;
  color: var(--nf-white) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0.85rem 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.cbs-btn:hover {
  background: var(--nf-body) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.cbs-btn:disabled {
  background: #94a3b8 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

#cbs-form-message {
  margin-top: 1rem !important;
  padding: 1rem !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  display: none;
}

#cbs-form-message.success {
  display: block !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

#cbs-form-message.error {
  display: block !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

@media (max-width: 640px) {
  .cbs-container {
    padding: 1.5rem 1rem !important;
    margin: 15px auto !important;
    border-radius: 8px !important;
  }

  .cbs-calendar-header h3 {
    font-size: 1.1rem !important;
  }

  .cbs-nav-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 1rem !important;
  }

  .cbs-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important;
    gap: 0.5rem !important;
  }
}
/* ==========================================================================
   11. MIGAS DE PAN, BUSCADOR Y PÁGINA 404
   Bloques nuevos: el tema no tenía ninguno de los tres. Ver docs/CHANGELOG.
   ========================================================================== */

.breadcrumbs {
  font-size: 0.82rem;
  color: var(--nf-muted);
  margin-bottom: 18px;
}

.breadcrumbs a {
  color: var(--nf-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--nf-ink);
}

.breadcrumbs .sep {
  margin: 0 8px;
  color: var(--nf-border);
}

.breadcrumbs [aria-current="page"] {
  color: var(--nf-ink);
  font-weight: 600;
}

.nfoque-search-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}

.nfoque-search-form .search-field {
  flex: 1 1 auto;
  padding: 12px 16px;
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  font-size: 0.95rem;
  min-height: 44px;
}

.nfoque-search-form .search-submit {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 20px;
  background-color: var(--nf-navy);
  color: var(--nf-white);
  border: 1px solid var(--nf-navy);
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--nf-transition-base);
}

.nfoque-search-form .search-submit:hover,
.nfoque-search-form .search-submit:focus-visible {
  background-color: var(--nf-blue-accent);
  border-color: var(--nf-blue-accent);
  color: var(--nf-white);
}

.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--nf-ink);
}

.header-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--nf-white);
  border-bottom: 1px solid var(--nf-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 18px 24px;
  z-index: 30;
}

.header-search-panel.is-open {
  display: flex;
}

.error-404-wrapper {
  padding: 90px 0 110px;
  text-align: center;
}

.error-404-wrapper .error-code {
  font-size: 5rem;
  font-weight: 800;
  color: var(--nf-border);
  line-height: 1;
  margin-bottom: 10px;
}

.error-404-wrapper h1 {
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.error-404-wrapper p {
  color: var(--nf-muted);
  max-width: 520px;
  margin: 0 auto 30px;
}

.nfoque-inline-search {
  max-width: 480px;
  margin: 0 auto 40px;
}

.error-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.error-404-links a {
  padding: 10px 20px;
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nf-ink);
  transition: all var(--nf-transition-fast);
}

.error-404-links a:hover,
.error-404-links a:focus-visible {
  border-color: var(--nf-ink);
  background-color: var(--nf-surface);
}

/* Submenús: botón de despliegue accesible junto al enlace padre.
   Antes el propio enlace ("Servicios" -> /vuestra-boda/) tenía que hacer
   de disparador del submenú a la vez que de enlace navegable: en táctil,
   el primer toque navegaba en vez de abrir el submenú, y no había
   aria-expanded/aria-haspopup que anunciara que existía un submenú. */
.submenu-toggle {
  display: none;
}

@media (min-width: 992px) {
  .menu-item-has-children {
    position: relative;
  }

  .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
  }

  .submenu-toggle svg {
    transition: transform var(--nf-transition-fast);
  }

  .submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

@media (max-width: 991px) {
  .menu-item-has-children > a {
    flex: 1 1 auto;
  }

  .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
  }

  .submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .nav-menu .sub-menu {
    display: none;
    width: 100%;
  }

  .nav-menu .sub-menu.is-open {
    display: block;
  }
}

/* ==========================================================================
   12. GALERÍA PROTEGIDA POR CONTRASEÑA
   No tenía ninguna regla propia en el CSS original: se renderizaba sin
   estilo alguno, apoyándose solo en el reset global.
   ========================================================================== */

.gallery-password-box {
  padding: 90px 0 110px;
}

.password-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 36px;
  text-align: center;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.password-card .lock-icon {
  color: var(--nf-navy);
  margin-bottom: 18px;
}

.password-card .gallery-title {
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.password-card .password-notice {
  color: var(--nf-muted);
  font-size: 0.92rem;
  margin-bottom: 24px;
}

.password-card form.post-password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.password-card form.post-password-form label {
  width: 100%;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
}

.password-card form.post-password-form input[type="password"] {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--nf-border);
  border-radius: 4px;
}

.password-card form.post-password-form input[type="submit"] {
  min-height: 44px;
  padding: 0 24px;
  background-color: var(--nf-navy);
  color: var(--nf-white);
  border: 1px solid var(--nf-navy);
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--nf-transition-base);
}

.password-card form.post-password-form input[type="submit"]:hover,
.password-card form.post-password-form input[type="submit"]:focus-visible {
  background-color: var(--nf-blue-accent);
  border-color: var(--nf-blue-accent);
  color: var(--nf-white);
}

/* Menú de pie de página opcional (ubicación "footer"): antes se registraba
   pero no se usaba en ninguna plantilla. Ahora, si un administrador le
   asigna un menú desde Apariencia > Menús, aparece aquí; si no, footer.php
   ni siquiera imprime este bloque. */
.footer-secondary-nav {
  border-top: 1px solid var(--nf-on-navy-border);
  padding-top: 18px;
  margin-top: 4px;
}

.footer-secondary-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
}

.footer-secondary-menu a {
  color: var(--nf-on-navy-muted);
  transition: color var(--nf-transition-fast);
}

.footer-secondary-menu a:hover,
.footer-secondary-menu a:focus-visible {
  color: var(--nf-white);
}