/*
Theme Name:   OCV Guaymas San Carlos — Child Theme
Theme URI:    https://ocvguaymas.com
Description:  Child theme de Hello Elementor para OCV Guaymas San Carlos.
              Incluye design tokens completos, paleta institucional, tipografía,
              espaciado, sombras y componentes base.
Author:       OCV Guaymas San Carlos
Author URI:   https://ocvguaymas.com
Template:     hello-elementor
Version:      1.1.0
Text Domain:  ocv-hello-child
Tags:         turismo, ocv, guaymas, san-carlos

Changelog:
  1.1.0 — Sección 18: componentes de plantilla (single CPT, archivo, legal,
          home). Permite construir en Elementor solo con contenedores + clase
          + dato dinámico, sin configurar estilos en el panel.
*/

/* =============================================================================
   1. DESIGN TOKENS — Variables CSS globales
   ============================================================================= */

:root {

  /* --- Colores primarios --- */
  --color-primary:         #f38620;
  --color-primary-light:   #f9b06a;
  --color-primary-dark:    #c26a10;

  /* --- Colores secundarios --- */
  --color-secondary:       #25599d;
  --color-secondary-light: #4a7bbf;
  --color-secondary-dark:  #1a3f6f;
  --color-secondary-xdark: #0f2540;

  /* --- Acentos --- */
  --color-accent-yellow:       #ffc52d;
  --color-accent-yellow-light: #ffe280;
  --color-accent-red:          #cb2127;

  /* --- Neutros --- */
  --color-white:    #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #d1d1d1;
  --color-gray-500: #888888;
  --color-gray-700: #444444;
  --color-gray-900: #1a1a1a;

  /* --- Superficies --- */
  --color-surface-warm: #fef9f0;
  --color-surface-cool: #f0f5fb;

  /* --- Gradientes institucionales --- */
  --gradient-ocean:        linear-gradient(135deg, #ffc52d 0%, #25599d 60%, #1a3f6f 100%);
  --gradient-sunset:       linear-gradient(160deg, #f38620 0%, #cb2127 100%);
  --gradient-sea-deep:     linear-gradient(180deg, #4a7bbf 0%, #1a3f6f 60%, #0f2540 100%);
  --gradient-sand:         linear-gradient(120deg, #ffc52d 0%, #fef9f0 100%);
  --gradient-hero-overlay: linear-gradient(to bottom, rgba(15,37,64,0.15) 0%, rgba(15,37,64,0.65) 100%);

  /* --- Tipografía: familias --- */
  --font-display: 'Above the Beyond Script', 'Dancing Script', cursive;
  --font-body:    'Nunito Sans', 'Hiragino Kaku Gothic ProN', 'Helvetica Neue', sans-serif;

  /* --- Tipografía: tamaños (escala 1.25 Major Third, base 16px) --- */
  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-md:      1.125rem;   /* 18px */
  --text-lg:      1.25rem;    /* 20px */
  --text-xl:      1.5rem;     /* 24px */
  --text-2xl:     1.875rem;   /* 30px */
  --text-3xl:     2.25rem;    /* 36px */
  --text-4xl:     3rem;       /* 48px */
  --text-hero:    4rem;       /* 64px */
  --text-display: 5.5rem;     /* 88px */

  /* --- Tipografía: pesos --- */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* --- Tipografía: interlineado --- */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2.0;

  /* --- Espaciado (múltiplos de 4px) --- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* --- Bordes y radios --- */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   9999px;
  --radius-circle: 50%;
  --border-width-thin:  1px;
  --border-width-base:  2px;
  --border-width-thick: 3px;

  /* --- Sombras --- */
  --shadow-sm:     0 1px 3px rgba(37,89,157,0.10);
  --shadow-md:     0 4px 16px rgba(37,89,157,0.14);
  --shadow-lg:     0 8px 32px rgba(37,89,157,0.18);
  --shadow-xl:     0 16px 48px rgba(37,89,157,0.22);
  --shadow-orange: 0 4px 20px rgba(243,134,32,0.35);
  --shadow-inset:  inset 0 2px 4px rgba(0,0,0,0.08);

  /* --- Contenedores --- */
  --container-sm:        640px;
  --container-md:        960px;
  --container-lg:        1200px;
  --container-xl:        1400px;
  --container-padding-x: 1.5rem;

  /* --- Transiciones globales --- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
}


/* =============================================================================
   2. FUENTE PERSONALIZADA — Above the Beyond Script
   ============================================================================= */

@font-face {
  font-family: 'Above the Beyond Script';
  src: url('assets/fonts/AbovetheBeyondScript.woff2') format('woff2'),
       url('assets/fonts/AbovetheBeyondScript.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   3. RESET Y BASE GLOBAL
   ============================================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary);
}


/* =============================================================================
   4. TIPOGRAFÍA — Jerarquía de encabezados
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  line-height: var(--leading-snug);
  color: var(--color-gray-900);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-secondary-dark);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Clase utilitaria: texto display (tipografía script emocional) */
.ocv-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  color: var(--color-white);
}

/* Texto lead / introductorio */
.ocv-lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-gray-700);
}

/* Metadata y labels */
.ocv-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}


/* =============================================================================
   5. BOTONES
   ============================================================================= */

/* Base compartida */
.ocv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-normal);
  border: var(--border-width-base) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast);
  white-space: nowrap;
}

.ocv-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.ocv-btn:active {
  transform: translateY(0);
}

/* CTA Primario — Naranja */
.ocv-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-orange);
}

.ocv-btn--primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  box-shadow: 0 6px 28px rgba(243,134,32,0.50);
}

/* CTA Secundario — Contorno azul */
.ocv-btn--secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.ocv-btn--secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* CTA Blanco — Sobre fondos oscuros o fotografía */
.ocv-btn--white {
  background-color: var(--color-white);
  color: var(--color-secondary-dark);
  box-shadow: var(--shadow-md);
}

.ocv-btn--white:hover {
  background-color: var(--color-accent-yellow);
  color: var(--color-secondary-dark);
}

/* Tamaño grande */
.ocv-btn--lg {
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-md);
}

/* Tamaño pequeño */
.ocv-btn--sm {
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
}


/* =============================================================================
   6. LAYOUT — Contenedores y secciones
   ============================================================================= */

.ocv-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.ocv-container--sm  { max-width: var(--container-sm); }
.ocv-container--md  { max-width: var(--container-md); }
.ocv-container--xl  { max-width: var(--container-xl); }

/* Padding de sección estándar */
.ocv-section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.ocv-section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* Fondos de sección (alternados) */
.ocv-section--white { background-color: var(--color-white); }
.ocv-section--warm  { background-color: var(--color-surface-warm); }
.ocv-section--cool  { background-color: var(--color-surface-cool); }
.ocv-section--dark  { background-color: var(--color-secondary-dark); }
.ocv-section--xdark { background-color: var(--color-secondary-xdark); }

/* Gradientes de sección */
.ocv-section--ocean  { background: var(--gradient-ocean); }
.ocv-section--sunset { background: var(--gradient-sunset); }
.ocv-section--deep   { background: var(--gradient-sea-deep); }
.ocv-section--sand   { background: var(--gradient-sand); }


/* =============================================================================
   7. CARDS
   ============================================================================= */

.ocv-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.ocv-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.ocv-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ocv-card__image--square {
  aspect-ratio: 1 / 1;
}

.ocv-card__body {
  padding: var(--space-6);
}

.ocv-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.ocv-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.ocv-card__excerpt {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* Ícono en card */
.ocv-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background-color: rgba(243,134,32,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}


/* =============================================================================
   8. HERO
   ============================================================================= */

.ocv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ocv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ocv-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gradient-hero-overlay);
}

.ocv-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-16) var(--container-padding-x);
}

.ocv-hero__tagline {
  font-family: var(--font-display);
  font-size: var(--text-display);
  color: var(--color-accent-yellow);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  display: block;
}

.ocv-hero__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.ocv-hero__subtitle {
  font-size: var(--text-md);
  color: rgba(255,255,255,0.90);
  line-height: var(--leading-relaxed);
  max-width: 560px;
  margin-bottom: var(--space-8);
}

.ocv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Hero desktop */
@media (min-width: 1024px) {
  .ocv-hero {
    min-height: 85vh;
  }
}


/* =============================================================================
   9. NAVEGACIÓN / HEADER
   ============================================================================= */

.ocv-header {
  background-color: var(--color-secondary-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

/* Ajustes al header de Hello Elementor */
.site-header .site-navigation a {
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-base);
  transition: color var(--transition-base);
}

.site-header .site-navigation a:hover {
  color: var(--color-accent-yellow);
}


/* =============================================================================
   10. FOOTER
   ============================================================================= */

.ocv-footer {
  background-color: var(--color-secondary-xdark);
  color: rgba(255,255,255,0.80);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.ocv-footer a {
  color: rgba(255,255,255,0.70);
  transition: color var(--transition-base);
}

.ocv-footer a:hover {
  color: var(--color-accent-yellow);
}

.ocv-footer__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.ocv-footer__divider {
  border-color: rgba(255,255,255,0.12);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.ocv-footer__legal {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}


/* =============================================================================
   11. BADGES Y ETIQUETAS
   ============================================================================= */

.ocv-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ocv-badge--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.ocv-badge--yellow {
  background-color: var(--color-accent-yellow);
  color: var(--color-gray-900);
}

.ocv-badge--red {
  background-color: var(--color-accent-red);
  color: var(--color-white);
}

.ocv-badge--blue {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.ocv-badge--outline {
  background-color: transparent;
  border: var(--border-width-thin) solid var(--color-gray-300);
  color: var(--color-gray-700);
}


/* =============================================================================
   12. FORMULARIOS
   ============================================================================= */

.ocv-input,
.ocv-select,
.ocv-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: var(--border-width-base) solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.ocv-input:focus,
.ocv-select:focus,
.ocv-textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(37,89,157,0.15);
}

.ocv-input::placeholder,
.ocv-textarea::placeholder {
  color: var(--color-gray-500);
}

.ocv-label-field {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}


/* =============================================================================
   13. DIVISORES Y UTILIDADES
   ============================================================================= */

.ocv-divider {
  border: none;
  border-top: var(--border-width-thin) solid var(--color-gray-300);
  margin: var(--space-8) 0;
}

.ocv-divider--primary {
  border-top-color: var(--color-primary);
  border-top-width: var(--border-width-thick);
}

/* Accent bar — línea decorativa bajo títulos */
.ocv-accent-bar {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.ocv-accent-bar--centered {
  margin-left: auto;
  margin-right: auto;
}

/* Texto sobre fondos oscuros */
.ocv-text--white   { color: var(--color-white) !important; }
.ocv-text--yellow  { color: var(--color-accent-yellow) !important; }
.ocv-text--orange  { color: var(--color-primary) !important; }
.ocv-text--muted   { color: rgba(255,255,255,0.70) !important; }

/* Alineación */
.ocv-text-center { text-align: center; }
.ocv-text-left   { text-align: left; }

/* Ocultar en móvil */
.ocv-hide-mobile { display: none; }

@media (min-width: 768px) {
  .ocv-hide-mobile { display: block; }
}


/* =============================================================================
   14. ÍCONOS — Contenedor estándar
   ============================================================================= */

.ocv-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: rgba(243,134,32,0.10);
  color: var(--color-primary);
}

.ocv-icon-wrap--sm  { width: 40px; height: 40px; }
.ocv-icon-wrap--md  { width: 56px; height: 56px; }
.ocv-icon-wrap--lg  { width: 72px; height: 72px; }

.ocv-icon-wrap--dark {
  background-color: rgba(255,255,255,0.10);
  color: var(--color-white);
}


/* =============================================================================
   15. NEWSLETTER — Módulo de captación
   ============================================================================= */

.ocv-newsletter {
  background: var(--gradient-ocean);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}

.ocv-newsletter__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.ocv-newsletter__subtitle {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-6);
}

.ocv-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

.ocv-newsletter__input {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  border: none;
  font-size: var(--text-base);
  outline: none;
}


/* =============================================================================
   16. AJUSTES HELLO ELEMENTOR — Overrides compatibles
   ============================================================================= */

/* Elimina max-width por defecto del tema en secciones full width */
.elementor-section-full_width .elementor-container {
  max-width: 100%;
}

/* Asegura que el body no tenga padding inesperado */
.page .site-content {
  padding: 0;
}

/* Ajuste de fuente base en Elementor */
.elementor-widget-text-editor,
.elementor-widget-heading {
  font-family: var(--font-body);
}


/* =============================================================================
   18. COMPONENTES DE PLANTILLA — Single CPT, archivo, legal y home
       Añadidos v1.1. Diseñados para que Elementor solo cree contenedores,
       les aplique la clase y conecte el dato dinámico. Sin estilos en panel.
   ============================================================================= */

/* --- 18.1 HERO interior (más bajo que el de Home) ------------------------- */
/* Se usa junto a .ocv-hero: <div class="ocv-hero ocv-hero--interior"> */
.ocv-hero--interior {
  min-height: 48vh;
  align-items: flex-end;        /* el contenido se ancla abajo */
}

@media (max-width: 767px) {
  .ocv-hero--interior { min-height: 42vh; }
}

/* Fallback de color: si no carga imagen, el fondo no colapsa.
   Se aplica directamente sobre el div de fondo. */
.ocv-hero__bg {
  background-color: var(--color-secondary-dark);
}

/* Variantes de fallback por tipo de contenido (color sólido coherente) */
.ocv-hero__bg--sunset { background-color: var(--color-primary); }
.ocv-hero__bg--cool   { background-color: var(--color-secondary-light); }
.ocv-hero__bg--ocean  { background: var(--gradient-ocean); }
.ocv-hero__bg--deep   { background: var(--gradient-sea-deep); }

/* Contenido del hero interior: ancho de contenedor y separación interna */
.ocv-hero--interior .ocv-hero__content {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-12) var(--container-padding-x) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ocv-hero--interior .ocv-hero__title {
  font-size: var(--text-4xl);   /* H1 interior, menor que el hero de Home */
  margin-bottom: 0;
}

.ocv-hero--interior .ocv-hero__subtitle {
  margin-bottom: 0;
  max-width: 640px;
}

/* Fila de badges flotante dentro del hero */
.ocv-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}


/* --- 18.2 LAYOUT single: cuerpo principal + sidebar ----------------------- */
/* Estructura: contenedor con clase .ocv-single-grid y dos hijos:
   .ocv-single-grid__main  y  .ocv-single-grid__aside */
.ocv-single-grid {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.ocv-single-grid__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.ocv-single-grid__aside {
  flex: 0 0 360px;
}

@media (max-width: 1023px) {
  .ocv-single-grid { flex-direction: column; }
  .ocv-single-grid__aside { flex-basis: auto; width: 100%; }
}


/* --- 18.3 Card de sidebar (sticky) ---------------------------------------- */
.ocv-sidebar-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  position: sticky;
  top: 80px;
}

.ocv-sidebar-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.ocv-sidebar-card__logo {
  max-height: 90px;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
  .ocv-sidebar-card { position: static; top: auto; }
}


/* --- 18.4 Fila de dato (ícono + etiqueta + valor) en sidebar -------------- */
.ocv-data-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-thin) solid var(--color-gray-100);
  font-size: var(--text-sm);
}

.ocv-data-row:last-child { border-bottom: none; }

.ocv-data-row__icon {
  flex: 0 0 22px;
  text-align: center;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.ocv-data-row__label {
  flex: 0 0 88px;
  color: var(--color-gray-500);
}

.ocv-data-row__value {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
}


/* --- 18.5 Botón a ancho completo dentro de sidebar ------------------------ */
.ocv-btn--block {
  display: flex;
  width: 100%;
  margin-top: var(--space-3);
}


/* --- 18.6 Título de bloque con subrayado amarillo ------------------------- */
.ocv-block-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-thick) solid var(--color-accent-yellow);
  display: inline-block;
}


/* --- 18.7 Caja de dato destacado (fact-box) ------------------------------- */
.ocv-fact-grid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.ocv-fact-grid > * { flex: 1 1 0; min-width: 180px; }

.ocv-fact-box {
  background-color: var(--color-accent-yellow-light);
  border-left: var(--border-width-thick) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}

.ocv-fact-box__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-1);
}

.ocv-fact-box__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-secondary);
  line-height: var(--leading-tight);
}

/* Variante de fact-box a ancho completo (dato curioso) */
.ocv-fact-box--wide { width: 100%; }


/* --- 18.8 Contenedor de mapa / video (16:9 fijo a 280px) ------------------ */
.ocv-media-box {
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-width-thin) solid var(--color-gray-300);
}

.ocv-media-box iframe,
.ocv-media-box .elementor-widget-container,
.ocv-media-box video {
  width: 100%;
  height: 100%;
  border: 0;
}


/* --- 18.9 Texto de dirección / nota auxiliar ------------------------------ */
.ocv-note {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  font-style: italic;
}


/* --- 18.10 Render de textareas tabulares (temperaturas, pesca, salones) --- */
.ocv-data-table {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

.ocv-data-table p { margin-bottom: var(--space-2); }


/* --- 18.11 Lista de chips de servicios (checkbox MICE) -------------------- */
.ocv-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* --- 18.12 Grid de tarjetas (Loop Grid de home y relacionados) ------------ */
/* Se aplica al wrapper del Loop Grid si se quiere control de columnas por CSS.
   Normalmente las columnas se definen en el propio widget Loop Grid. */
.ocv-card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

.ocv-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ocv-card-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1023px) {
  .ocv-card-grid,
  .ocv-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ocv-card-grid,
  .ocv-card-grid--4,
  .ocv-card-grid--2 { grid-template-columns: 1fr; }
}


/* --- 18.13 Barra de meta editorial (blog) --------------------------------- */
.ocv-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-width-thin) solid var(--color-gray-300);
}


/* --- 18.14 Grid de página legal (índice lateral + texto) ------------------ */
.ocv-legal-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

@media (max-width: 1023px) {
  .ocv-legal-grid { grid-template-columns: 1fr; }
}


/* --- 18.15 Fila de dos columnas genérica (teaser home, contacto) ---------- */
.ocv-two-col {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.ocv-two-col > * { flex: 1 1 0; min-width: 0; }

@media (max-width: 1023px) {
  .ocv-two-col { flex-direction: column; align-items: stretch; }
}


/* --- 18.16 Overlay de marca sobre card (submarcas en home) ---------------- */
.ocv-brand-card {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.ocv-brand-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ocv-brand-card__overlay--warm { background: linear-gradient(120deg, rgba(243,134,32,0.65), rgba(203,33,39,0.60)); }
.ocv-brand-card__overlay--cool { background: linear-gradient(120deg, rgba(37,89,157,0.65), rgba(15,37,64,0.80)); }

.ocv-brand-card__content {
  position: relative;
  z-index: 2;
  padding: var(--space-6);
  color: var(--color-white);
}


/* =============================================================================
   17. RESPONSIVE — Ajustes móvil
   ============================================================================= */

@media (max-width: 767px) {

  :root {
    --container-padding-x: 1.25rem;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  .ocv-hero__tagline {
    font-size: clamp(3rem, 14vw, var(--text-display));
  }

  .ocv-hero__title {
    font-size: clamp(1.875rem, 8vw, var(--text-hero));
  }

  .ocv-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .ocv-newsletter {
    padding: var(--space-8) var(--space-4);
  }

  .ocv-newsletter__form {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  .ocv-hero__tagline {
    font-size: clamp(4rem, 10vw, var(--text-display));
  }
}
/* =============================================================================
   19. FIX DE ESPECIFICIDAD — Hero sobre contenedores Elementor
       Elementor aplica position/display a sus contenedores (.e-con) con
       especificidad que gana a las clases simples. Estas reglas refuerzan
       la superposición de capas del hero combinando la clase con el
       contexto del contenedor Elementor.
   ============================================================================= */

/* El padre del hero debe ser contexto de posicionamiento y apilar capas */
.ocv-hero.e-con,
.ocv-hero {
  position: relative;
  display: flex;
  overflow: hidden;
}

/* Capa de fondo: absoluta, cubre todo el hero, va al fondo */
.ocv-hero .ocv-hero__bg.e-con,
.ocv-hero .ocv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Capa de overlay: absoluta, encima del fondo */
.ocv-hero .ocv-hero__overlay.e-con,
.ocv-hero .ocv-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gradient-hero-overlay);
}

/* Capa de contenido: relativa, encima de todo */
.ocv-hero .ocv-hero__content.e-con,
.ocv-hero .ocv-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Título y subtítulo en blanco, ganando a los estilos por defecto del tema */
.ocv-hero .ocv-hero__title,
.ocv-hero .ocv-hero__title a {
  color: var(--color-white);
}

.ocv-hero .ocv-hero__subtitle,
.ocv-hero .ocv-hero__subtitle p {
  color: rgba(255,255,255,0.90);
}

/* Badges en fila horizontal dentro del hero */
.ocv-hero .ocv-hero__badges.e-con,
.ocv-hero .ocv-hero__badges {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Refuerzo: color blanco del título del hero sobre widget Elementor */
.ocv-hero .ocv-hero__title,
.ocv-hero .ocv-hero__title .elementor-heading-title,
.ocv-hero .ocv-hero__title a {
  color: var(--color-white) !important;
}
/* =============================================================================
   20. FIX DE ESPECIFICIDAD — Fact-grid y fact-box sobre Elementor
       Mismo patrón que la sección 19: las clases simples pierden contra
       los contenedores .e-con y los widgets Heading de Elementor.
       Refuerza dirección de fila, tamaños y colores del bloque de datos.
   ============================================================================= */

/* La fila de cajas debe ir en horizontal, ganando a la dirección de .e-con */
.ocv-single-grid .ocv-fact-grid.e-con,
.ocv-fact-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.ocv-fact-grid.e-con > .e-con,
.ocv-fact-grid > * {
  flex: 1 1 0;
  min-width: 180px;
}

/* Caja individual: dirección columna (label arriba, value abajo) */
.ocv-fact-box.e-con,
.ocv-fact-box {
  display: flex;
  flex-direction: column;
  background-color: var(--color-accent-yellow-light);
  border-left: var(--border-width-thick) solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}

/* Etiqueta: pequeña, ganando al tamaño del widget Heading.
   Apuntamos también al elemento interno .elementor-heading-title. */
.ocv-fact-box .ocv-fact-box__label,
.ocv-fact-box .ocv-fact-box__label .elementor-heading-title {
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark) !important;
  line-height: var(--leading-snug) !important;
  margin: 0 0 var(--space-1) 0;
}

/* Valor: mediano y azul, ganando al tamaño del widget Heading */
.ocv-fact-box .ocv-fact-box__value,
.ocv-fact-box .ocv-fact-box__value .elementor-heading-title {
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-weight-extrabold) !important;
  color: var(--color-secondary) !important;
  line-height: var(--leading-tight) !important;
  margin: 0;
}
/* =============================================================================
   21. FIX DE ESPECIFICIDAD — Sidebar (Aside) sobre Elementor
       Mismo patrón que secciones 19 y 20. Refuerza tamaños y colores del
       sidebar de contacto: logo, título, filas de datos y botones.
   ============================================================================= */

/* La tarjeta como contenedor de columna debe apilar en vertical */
.ocv-single-grid__aside .ocv-sidebar-card.e-con,
.ocv-sidebar-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* Logo: limitar altura ganando al tamaño que impone el widget Imagen */
.ocv-sidebar-card .ocv-sidebar-card__logo img,
.ocv-sidebar-card img.ocv-sidebar-card__logo {
  max-height: 90px !important;
  width: auto !important;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

/* Título "Reservaciones": mediano y azul, no gigante naranja */
.ocv-sidebar-card .ocv-sidebar-card__title,
.ocv-sidebar-card .ocv-sidebar-card__title .elementor-heading-title {
  font-size: var(--text-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-secondary) !important;
  line-height: var(--leading-snug) !important;
  margin: 0 0 var(--space-4) 0;
}

/* Fila de dato: en horizontal (ícono + etiqueta + valor) */
.ocv-sidebar-card .ocv-data-row.e-con,
.ocv-data-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-thin) solid var(--color-gray-100);
}

.ocv-data-row:last-of-type {
  border-bottom: none;
}

/* Ícono de la fila: pequeño, naranja */
.ocv-data-row .ocv-data-row__icon,
.ocv-data-row .ocv-data-row__icon .elementor-heading-title {
  font-size: var(--text-base) !important;
  color: var(--color-primary) !important;
  flex: 0 0 22px;
  text-align: center;
  margin: 0;
}

/* Etiqueta de la fila: pequeña, gris */
.ocv-data-row .ocv-data-row__label,
.ocv-data-row .ocv-data-row__label .elementor-heading-title {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-gray-500) !important;
  flex: 0 0 88px;
  margin: 0;
}

/* Valor de la fila: pequeño-mediano, oscuro, semibold */
.ocv-data-row .ocv-data-row__value,
.ocv-data-row .ocv-data-row__value .elementor-heading-title {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-gray-900) !important;
  margin: 0;
  word-break: break-word;
}

/* Botones a ancho completo dentro de la tarjeta */
.ocv-sidebar-card .ocv-btn--block,
.ocv-sidebar-card .ocv-btn--block .elementor-button {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
}
/* --- 21.1 FIX botón a ancho completo dentro de tarjeta ------------------- */
/* El widget lleva ocv-btn--block, pero el botón real es .elementor-button
   interno. Forzamos que ambos respeten el 100% del ancho de la tarjeta
   sin desbordarse, y reseteamos el padding horizontal excesivo del base. */
.ocv-sidebar-card .ocv-btn--block {
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-3);
}

.ocv-sidebar-card .ocv-btn--block .elementor-button,
.ocv-sidebar-card .ocv-btn--block a.elementor-button {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* Asegura que el contenido de la tarjeta no se desborde horizontalmente */
.ocv-sidebar-card {
  overflow: hidden;
}

/* --- 21.2 FIX encimado ícono / etiqueta en filas de datos ---------------- */
/* El ícono y la etiqueta se montan porque el ícono (widget Icon o Heading)
   no respeta su caja. Forzamos alineación en fila con separación clara y
   evitamos que el ícono se encime sobre el texto. */
.ocv-data-row.e-con {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  flex-wrap: nowrap;
}

/* El ícono ocupa un ancho fijo y no se encoge ni se monta sobre el texto */
.ocv-data-row .ocv-data-row__icon {
  flex: 0 0 28px !important;
  max-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La etiqueta con ancho fijo, sin encimarse */
.ocv-data-row .ocv-data-row__label {
  flex: 0 0 90px !important;
  max-width: 90px;
}

/* El valor toma el resto del espacio */
.ocv-data-row .ocv-data-row__value {
  flex: 1 1 auto !important;
  min-width: 0;
}
/* --- 21.3 FIX definitivo botón desbordado en sidebar -------------------- */
/* Causa: ocv-btn base tiene padding horizontal grande (space-8) y
   ocv-btn--block pone width 100%. Sin box-sizing en el elemento correcto,
   el ancho total supera el contenedor. Forzamos border-box en todos los
   niveles del widget de botón dentro de la tarjeta y acotamos el ancho. */
.ocv-sidebar-card .elementor-widget-button,
.ocv-sidebar-card .elementor-widget-button .elementor-button-wrapper,
.ocv-sidebar-card .elementor-widget-button .elementor-button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Reducir el padding horizontal del botón en bloque para que no empuje */
.ocv-sidebar-card .ocv-btn--block .elementor-button {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* La tarjeta recorta cualquier desbordamiento residual */
.ocv-single-grid__aside .ocv-sidebar-card {
  overflow: hidden;
}
/* =============================================================================
   22. FIX DE ESPECIFICIDAD — Grid de dos columnas (Main + Aside)
       Elementor impone flex-direction column a su contenedor .e-con,
       apilando Main y Aside. Forzamos fila en desktop, columna en móvil.
   ============================================================================= */

/* Desktop: dos columnas lado a lado */
.ocv-single-grid.e-con,
.ocv-single-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-12);
  align-items: flex-start;
}

/* Columna principal: ocupa el espacio disponible */
.ocv-single-grid.e-con > .ocv-single-grid__main,
.ocv-single-grid > .ocv-single-grid__main {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
}

/* Columna lateral: ancho fijo de 360px */
.ocv-single-grid.e-con > .ocv-single-grid__aside,
.ocv-single-grid > .ocv-single-grid__aside {
  flex: 0 0 360px !important;
  width: 360px !important;
  max-width: 360px;
}

/* Móvil y tablet: apilar en una columna */
@media (max-width: 1023px) {
  .ocv-single-grid.e-con,
  .ocv-single-grid {
    flex-direction: column !important;
  }
  .ocv-single-grid.e-con > .ocv-single-grid__aside,
  .ocv-single-grid > .ocv-single-grid__aside {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100%;
  }
}
/* =============================================================================
   23. PULIDO FINAL — Íconos de fila y botones del sidebar
   ============================================================================= */

/* --- Íconos de fila: achicar el widget Icon de Elementor (SVG/font) ------- */
/* Cuando se usa widget Icon en vez de Heading, el tamaño se controla por el
   font-size del <i> o el width del <svg>, no por el font-size del contenedor. */
.ocv-data-row .ocv-data-row__icon i,
.ocv-data-row .ocv-data-row__icon svg,
.ocv-data-row__icon .elementor-icon i,
.ocv-data-row__icon .elementor-icon svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--color-primary) !important;
  fill: var(--color-primary) !important;
}

.ocv-data-row__icon .elementor-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* --- Botones del sidebar: más sobrios, como la maqueta -------------------- */
/* Menos abultado: altura controlada, sombra suave, radio moderado */
.ocv-sidebar-card .ocv-btn--block .elementor-button {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
  border-radius: var(--radius-pill);
  box-shadow: none !important;
  font-size: var(--text-base) !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
}

/* Botón primario: naranja sólido, sin sombra exagerada */
.ocv-sidebar-card .ocv-btn--primary .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
}

/* Botón secundario: relleno amarillo o borde, según la maqueta.
   En la maqueta el segundo botón es azul sólido. Ajusta si prefieres. */
.ocv-sidebar-card .ocv-btn--secondary .elementor-button {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border: none !important;
}

/* Separación entre los dos botones */
.ocv-sidebar-card .ocv-btn--block + .ocv-btn--block {
  margin-top: var(--space-3);
}
/* --- 23.1 FIX doble capa de botones en sidebar --------------------------- */
/* La clase ocv-btn--primary/secondary está en el WIDGET exterior, que pinta
   su propio fondo/borde, y el .elementor-button interno pinta otro encima.
   Resultado: doble píldora (halo). Solución: neutralizar el widget exterior
   y dejar que SOLO el botón interno tenga color, forma y tamaño. */

/* Resetear el widget contenedor: sin fondo, sin borde, sin sombra, sin radio */
.ocv-sidebar-card .elementor-widget-button.ocv-btn,
.ocv-sidebar-card .elementor-widget-button.ocv-btn--primary,
.ocv-sidebar-card .elementor-widget-button.ocv-btn--secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* El botón interno toma TODO el estilo visible */
.ocv-sidebar-card .ocv-btn--block .elementor-button {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  border: none !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
}

/* Primario: naranja sólido */
.ocv-sidebar-card .ocv-btn--primary .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Secundario: azul sólido (como la maqueta) */
.ocv-sidebar-card .ocv-btn--secondary .elementor-button {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}
/* --- 18.10 Modificador: fila de dato con valor multilinea (textarea libre) */
/* Uso: añadir junto a ocv-data-row__value cuando el campo origen es textarea
   con saltos de linea reales (p.ej. horario, configuraciones). Respeta los
   \n del campo sin romper el layout de las filas de una sola linea. */
.ocv-data-row__value--multiline {
  white-space: pre-line;
  line-height: var(--leading-snug);
}
/* --- 18.12 Texto destacado de precio/acceso (Entrada libre / desde $X) --- */
/* Uso: texto grande en el sidebar para mostrar si el acceso es gratuito
   o de paga. Va en un widget de texto simple (no Heading), junto con
   Display Conditions para alternar entre "Entrada libre" y el precio. */
.ocv-price-display {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-primary);
  margin: var(--space-2) 0;
  line-height: var(--leading-tight);
}

.ocv-price-note {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}