/*
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);
}


/* =============================================================================
   25. PÁGINA LEGAL — Cabecera, índice lateral y prosa
       Layout editorial de dos columnas. El texto proviene del editor de WP.
       Sustituye funcionalmente a 18.14 (display:grid no sobrevive al flex
       que Elementor impone en .e-con).
   ============================================================================= */

/* --- 25.1 Franja de cabecera oscura -------------------------------------- */
.ocv-legal-header.e-con,
.ocv-legal-header {
  background-color: var(--color-secondary-xdark) !important;
  padding-top: var(--space-12) !important;
  padding-bottom: var(--space-12) !important;
}

.ocv-legal-header .ocv-legal-header__title,
.ocv-legal-header .ocv-legal-header__title .elementor-heading-title {
  color: var(--color-white) !important;
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2) 0;
}

.ocv-legal-header .ocv-legal-header__meta,
.ocv-legal-header .ocv-legal-header__meta .elementor-heading-title,
.ocv-legal-header .ocv-legal-header__meta p {
  color: rgba(255,255,255,0.72) !important;
  font-size: var(--text-sm);
  font-style: italic;
  margin: 0;
}

/* --- 25.2 Grid de dos columnas (índice + cuerpo) -------------------------- */
.ocv-legal-grid.e-con,
.ocv-legal-grid {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-12);
  align-items: flex-start;
}

.ocv-legal-grid.e-con > .ocv-legal-grid__toc,
.ocv-legal-grid > .ocv-legal-grid__toc {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px;
}

.ocv-legal-grid.e-con > .ocv-legal-grid__body,
.ocv-legal-grid > .ocv-legal-grid__body {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
  max-width: 760px;
}

@media (max-width: 1023px) {
  .ocv-legal-grid.e-con,
  .ocv-legal-grid { flex-direction: column !important; }

  .ocv-legal-grid.e-con > .ocv-legal-grid__toc,
  .ocv-legal-grid > .ocv-legal-grid__toc {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100%;
  }
}

/* --- 25.3 Índice de contenido (sticky) ----------------------------------- */
.ocv-toc {
  position: sticky;
  top: 100px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-left: var(--border-width-thick) solid var(--color-accent-yellow);
  padding: var(--space-6);
}

.ocv-toc__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0 0 var(--space-4) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ocv-toc__list {
  list-style: none;
  counter-reset: ocvtoc;
  margin: 0;
  padding: 0;
}

.ocv-toc__list li {
  counter-increment: ocvtoc;
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.ocv-toc__list li::before {
  content: counter(ocvtoc) ". ";
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
}

.ocv-toc__link {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ocv-toc__link:hover { color: var(--color-primary); }

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

/* --- 25.4 Prosa legal ----------------------------------------------------- */
.ocv-legal-prose,
.ocv-legal-prose p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

.ocv-legal-prose p { margin: 0 0 var(--space-4) 0; }

.ocv-legal-prose h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: var(--leading-snug);
  margin: var(--space-10) 0 var(--space-3) 0;
  scroll-margin-top: 110px;
}

.ocv-legal-prose h2:first-child { margin-top: 0; }

.ocv-legal-prose h3 {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: var(--space-6) 0 var(--space-2) 0;
  scroll-margin-top: 110px;
}

.ocv-legal-prose ul,
.ocv-legal-prose ol {
  margin: 0 0 var(--space-4) var(--space-6);
  padding: 0;
}

.ocv-legal-prose li { margin-bottom: var(--space-2); }

.ocv-legal-prose a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.ocv-legal-prose a:hover { color: var(--color-primary); }

.ocv-legal-prose strong { color: var(--color-gray-900); font-weight: var(--font-weight-semibold); }

.ocv-legal-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.ocv-legal-prose th,
.ocv-legal-prose td {
  border: var(--border-width-thin) solid var(--color-gray-300);
  padding: var(--space-3);
  text-align: left;
}

.ocv-legal-prose th {
  background-color: var(--color-surface-cool);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}
/* =============================================================================
   BLOG — Hero por tono editorial, tarjetas y filtro de categorías
   ============================================================================= */

/* --- Hero interior compacto (usado en Archive del blog) -------------------- */
.ocv-hero--compact {
  min-height: 32vh;
  align-items: flex-end;
}

/* --- Tono editorial del post: sustituye el gradiente de fondo del hero ----- */
body.ocv-tema-calido .ocv-hero__bg { background: var(--gradient-sunset); }
body.ocv-tema-frio   .ocv-hero__bg { background: var(--gradient-sea-deep); }
body.ocv-tema-neutro .ocv-hero__bg { background: var(--gradient-ocean); }

/* --- Card como enlace completo (el shortcode de blog envuelve todo en <a>) - */
a.ocv-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

/* --- Meta de card: fecha + tiempo de lectura -------------------------------- */
.ocv-card__meta {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* --- Fila de chips de filtro (categorías del blog) -------------------------- */
.ocv-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.ocv-filter-row .ocv-badge {
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* --- Paginación del archivo -------------------------------------------------- */
.ocv-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}

.ocv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  border: var(--border-width-thin) solid var(--color-gray-300);
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ocv-pagination .page-numbers:hover,
.ocv-pagination .page-numbers.current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* --- Barra de tags al pie del artículo -------------------------------------- */
.ocv-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

/* =============================================================================
   FIX — line-height del título del hero sobre el <h1> interno de Elementor
   El wrapper .ocv-hero__title fija line-height como factor, pero el <h1>
   interno (.elementor-heading-title) hereda un valor colapsado en px que
   aplasta las líneas cuando el título ocupa más de un renglón (títulos
   largos de blog). Los CPT no lo mostraban por tener títulos de una línea.
   Se fija el line-height y el tamaño en el elemento real que pinta el texto.
   ============================================================================= */
.ocv-hero .ocv-hero__title .elementor-heading-title {
  line-height: 1.15 !important;
  font-size: var(--text-4xl) !important;
  font-weight: var(--font-weight-extrabold) !important;
  word-spacing: normal !important;
  display: block;
}

.ocv-hero .ocv-hero__subtitle .elementor-heading-title,
.ocv-hero .ocv-hero__subtitle p {
  line-height: var(--leading-normal) !important;
  word-spacing: normal !important;
}

@media (max-width: 767px) {
  .ocv-hero .ocv-hero__title .elementor-heading-title {
    font-size: var(--text-3xl) !important;
  }
}
/* 
=============================================================================
   26. RESPONSIVE GLOBAL — HEADER (24) Y FOOTER (91)
   Fase 1 de la revisión móvil, 2026-09-24.
   Selectores por ubicación y tipo de widget (no por data-id) para que
   sobrevivan a una reinyección de las plantillas.
   
============================================================================= 
*/

/* --- 26.1 Botón hamburguesa: visible sobre el azul del header 
------------- */
.elementor-location-header .elementor-menu-toggle {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border-radius: 8px;
  padding: 6px;
}
.elementor-location-header .elementor-menu-toggle svg {
  fill: currentColor !important;
  width: 28px;
  height: 28px;
}
.elementor-location-header .elementor-menu-toggle:hover,
.elementor-location-header .elementor-menu-toggle[aria-expanded="true"] 
{
  color: var(--color-accent-yellow) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- 26.2 Menú de escritorio en una sola línea (1200 px o más) 
----------- */
@media (min-width: 1200px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 15px;
    white-space: nowrap;
  }
  .elementor-location-header .elementor-nav-menu--main > 
.elementor-nav-menu {
    flex-wrap: nowrap;
  }
}

/* --- 26.3 Header hasta 1199 px: logo y hamburguesa en la misma fila 
------ */
/* Entre 1025 y 1199 px los 8 elementos del menú no caben junto al logo,
   así que también ahí se usa la hamburguesa (Elementor la oculta desde 
1025). */
@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-location-header .elementor-nav-menu--main {
    display: none !important;
  }
  .elementor-location-header .elementor-menu-toggle {
    display: flex !important;
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown {
    display: block !important;
  }
  .elementor-location-header .elementor-menu-toggle.elementor-active + 
nav.elementor-nav-menu--dropdown {
    max-height: 100vh !important;
    transform: scaleY(1) !important;
    overflow: visible !important;
  }
}

@media (max-width: 1199px) {
  .elementor-location-header > .e-con {
    flex-wrap: nowrap !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: 72px;
  }
  .elementor-location-header .elementor-widget-theme-site-logo {
    width: auto !important;
    flex: 0 1 auto;
    text-align: left !important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo img {
    max-height: 52px;
    width: auto;
  }
  .elementor-location-header .elementor-widget-nav-menu {
    width: auto !important;
    flex: 0 0 auto;
    position: static;
  }

  /* Desplegable a todo el ancho, debajo del header, en azul */
  .elementor-location-header nav.elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    background-color: var(--color-secondary-dark) !important;
    box-shadow: var(--shadow-md);
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu 
{
    background-color: rgba(0, 0, 0, 0.15) !important;
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown .sub-menu 
a {
    padding-left: 40px !important;
    font-size: 15px !important;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a {
    color: var(--color-white) !important;
    font-size: 16px !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .elementor-location-header .elementor-nav-menu--dropdown a:hover,
  .elementor-location-header .elementor-nav-menu--dropdown 
a.elementor-item-active {
    color: var(--color-accent-yellow) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
}

/* --- 26.4 Footer: contraste legible en todas las pantallas 
---------------- */
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.elementor-location-footer .e-con-boxed .elementor-widget-text-editor,
.elementor-location-footer .e-con-boxed .elementor-widget-text-editor p 
{
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 14px;
}
.elementor-location-footer .elementor-heading-title {
  color: var(--color-white) !important;
}

/* --- 26.5 Footer móvil: columnas a todo el ancho y centradas 
-------------- */
@media (max-width: 767px) {
  .elementor-location-footer .e-con.e-parent {
    justify-content: center !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .elementor-location-footer .e-con.e-parent > .e-con,
  .elementor-location-footer .e-con-inner {
    width: 100% !important;
    align-items: center !important;
    text-align: center;
  }
  .elementor-location-footer .elementor-widget,
  .elementor-location-footer .elementor-widget-text-editor {
    text-align: center !important;
    width: 100%;
  }
  .elementor-location-footer .elementor-widget-theme-site-logo img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================================================
   27. HOME — hero responsive y secciones con datos de los CPT
   Fase 2 de la revisión responsive, 2026-09-24.
   Hero: se corrige solo en tablet y móvil; en escritorio queda como estaba.
   Secciones: contenedores inyectados en la página 7 con clases ocv-home-*,
   fichas generadas por [ocv_home_cards] y [ocv_destinos] (inc/ocv-home.php).
   ============================================================================= */

/* --- 27.1 Hero de Home en tablet y móvil ---------------------------------- */
@media (max-width: 1024px) {
  .elementor-7 > .e-con:first-child {
    min-height: 0 !important;
    padding: var(--space-24) var(--space-6) var(--space-12) !important;
  }
  .elementor-7 > .e-con:first-child .elementor-widget-text-editor {
    width: 100% !important;
    max-width: 560px;
  }
  /* Cifras: dejan de flotar en posición absoluta y van debajo de los botones */
  .elementor-7 .hero-stats {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 560px;
    margin-top: var(--space-8) !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
    padding: 0 !important;
  }
  .elementor-7 .hero-stats,
  .elementor-7 .hero-stats > .e-con-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: var(--space-4) !important;
  }
  .elementor-7 .hero-stats .elementor-widget-html {
    flex: 1 1 0;
    width: auto !important;
  }
}

/* Legibilidad del hero en todas las pantallas */
.elementor-7 > .e-con:first-child .elementor-widget-text-editor,
.elementor-7 > .e-con:first-child .elementor-widget-text-editor p {
  color: rgba(255, 255, 255, 0.90) !important;
}
.elementor-7 .hero-stats span + span {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 767px) {
  .elementor-7 > .e-con:first-child {
    padding: var(--space-20) var(--space-5, 1.25rem) var(--space-10) !important;
  }
  /* Botones del hero a todo el ancho, uno debajo del otro */
  .elementor-7 > .e-con:first-child .elementor-widget-button,
  .elementor-7 > .e-con:first-child .elementor-widget-button .elementor-button {
    width: 100% !important;
  }
  .elementor-7 > .e-con:first-child .elementor-widget-button .elementor-button {
    justify-content: center;
  }
  .elementor-7 .hero-stats span:first-child {
    font-size: 1.625rem !important;
  }
}

/* --- 27.2 Contenedor de sección de Home ----------------------------------- */
.e-con.ocv-home-block {
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-16) !important;
  padding-left: var(--container-padding-x, 1.5rem) !important;
  padding-right: var(--container-padding-x, 1.5rem) !important;
  scroll-margin-top: 80px;
}
.e-con.ocv-home-block > .e-con-inner {
  gap: var(--space-4) !important;
}
@media (max-width: 767px) {
  .e-con.ocv-home-block {
    padding-top: var(--space-12) !important;
    padding-bottom: var(--space-12) !important;
  }
}

/* Kicker y título de sección */
.ocv-home-kicker .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--text-xs) !important;
  font-weight: var(--font-weight-extrabold) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-dark) !important;
  margin: 0;
}
.ocv-home-title .elementor-heading-title {
  font-size: var(--text-3xl) !important;
  font-weight: var(--font-weight-extrabold) !important;
  line-height: var(--leading-snug) !important;
  color: var(--color-secondary) !important;
  margin: 0 0 var(--space-4);
}
.ocv-home-text,
.ocv-home-text p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}
@media (max-width: 767px) {
  .ocv-home-title .elementor-heading-title { font-size: var(--text-2xl) !important; }
}

/* Botón "Ver todos" al pie de cada sección */
.ocv-home-more {
  margin-top: var(--space-6);
}
.ocv-home-more .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-pill) !important;
  padding: var(--space-3) var(--space-8) !important;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold) !important;
  font-size: var(--text-base) !important;
  box-shadow: var(--shadow-orange);
  transition: background-color var(--transition-base), transform var(--transition-fast);
}
.ocv-home-more .elementor-button:hover {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
}
@media (max-width: 767px) {
  .ocv-home-more,
  .ocv-home-more .elementor-button {
    width: 100%;
  }
  .ocv-home-more .elementor-button { justify-content: center; }
}

/* Secciones sobre fondo oscuro o degradado */
.ocv-section--sunset .ocv-home-kicker .elementor-heading-title,
.ocv-section--deep .ocv-home-kicker .elementor-heading-title {
  color: var(--color-accent-yellow) !important;
}
.ocv-section--sunset .ocv-home-title .elementor-heading-title,
.ocv-section--deep .ocv-home-title .elementor-heading-title,
.ocv-section--deep .ocv-home-text,
.ocv-section--deep .ocv-home-text p {
  color: var(--color-white) !important;
}
.ocv-section--sunset .ocv-home-more .elementor-button,
.ocv-section--deep .ocv-home-more .elementor-button {
  background-color: var(--color-white) !important;
  color: var(--color-secondary-dark) !important;
}

/* --- 27.3 Fichas de Home -------------------------------------------------- */
.ocv-home-grid {
  width: 100%;
}
.ocv-home-grid--1 { grid-template-columns: 1fr; }
.ocv-home-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .ocv-home-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 601px) and (max-width: 1023px) {
  .ocv-home-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ocv-home-gastronomia__ficha { max-width: 520px; }
}
@media (max-width: 600px) {
  .ocv-home-grid--4 { grid-template-columns: 1fr; }
}

/* Móvil: las fichas de 3 y 4 columnas y las del blog pasan a carrusel
   horizontal con snap, para no apilar 4 tarjetas de 330 px de alto. */
@media (max-width: 600px) {
  .ocv-home-grid--3,
  .ocv-home-grid--4,
  .ocv-home-blog .ocv-card-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--container-padding-x, 1.25rem);
    gap: var(--space-4);
    margin-left: calc(-1 * var(--container-padding-x, 1.25rem));
    margin-right: calc(-1 * var(--container-padding-x, 1.25rem));
    width: calc(100% + 2 * var(--container-padding-x, 1.25rem)) !important;
    max-width: none;
    padding: var(--space-1) var(--container-padding-x, 1.25rem) var(--space-4);
    scrollbar-width: none;
  }
  .ocv-home-grid--3::-webkit-scrollbar,
  .ocv-home-grid--4::-webkit-scrollbar,
  .ocv-home-blog .ocv-card-grid::-webkit-scrollbar {
    display: none;
  }
  .ocv-home-grid--3 > .ocv-card,
  .ocv-home-grid--4 > .ocv-card,
  .ocv-home-blog .ocv-card-grid > .ocv-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

.ocv-home-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.ocv-home-card .ocv-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.ocv-home-card .ocv-card__title {
  font-size: var(--text-lg);
  margin-bottom: 0;
  color: var(--color-gray-900);
}
.ocv-home-card .ocv-card__meta {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

/* --- 27.4 Destinos: Guaymas y San Carlos ---------------------------------- */
.ocv-home-destino {
  min-height: 240px;
  background-color: var(--color-secondary-dark);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.ocv-home-destino--warm { background-color: var(--color-primary); }
.ocv-home-destino:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ocv-home-destino .ocv-brand-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ocv-home-destino__script {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-white);
}
.ocv-home-destino__name {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .ocv-home-destino { min-height: 180px; }
  .ocv-home-destino__name { font-size: var(--text-2xl); }
}

/* --- 27.5 Placeholder de marca para fichas sin foto ----------------------- */
.ocv-card__ph {
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: var(--gradient-sea-deep);
  aspect-ratio: 16 / 9;
}
.ocv-card__ph span {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}
.ocv-card__ph--sitio       { background: var(--gradient-ocean); }
.ocv-card__ph--hospedaje   { background: var(--gradient-sea-deep); }
.ocv-card__ph--evento      { background: var(--gradient-sunset); }
.ocv-card__ph--restaurante { background: linear-gradient(135deg, #f9b06a 0%, #f38620 55%, #c26a10 100%); }
.ocv-card__ph--actividad   { background: linear-gradient(135deg, #4a7bbf 0%, #25599d 60%, #0f2540 100%); }

/* --- 27.6 Próximos eventos: la sección se oculta si no hay fichas --------- */
.ocv-home-eventos:not(:has(.ocv-card)) {
  display: none !important;
}

/* --- 27.7 Gastronomía: texto + ficha con foto ----------------------------- */
.e-con.ocv-two-col {
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-12) !important;
}
.e-con.ocv-two-col,
.e-con.ocv-two-col > .e-con {
  padding: 0 !important;
}
.e-con.ocv-two-col > .e-con {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
}
@media (max-width: 1023px) {
  .e-con.ocv-two-col {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-8) !important;
  }
}

/* --- 27.8 MICE: banda centrada -------------------------------------------- */
.ocv-home-mice > .e-con-inner,
.ocv-home-mice {
  align-items: center !important;
  text-align: center;
}
.ocv-home-mice .ocv-home-text {
  max-width: 640px;
}


/* --- 27.9 Rotación aleatoria de fichas (hospedaje, restaurantes, etc.) ---- */
/* El servidor entrega todas las fichas; el script del footer sortea cuáles se
   ven en cada visita y marca el resto con .ocv-rot-extra. */
.ocv-home-grid .ocv-rot-extra {
  display: none !important;
}


/* =============================================================================
   28. SINGLE CPT — responsive del molde (hospedaje y las otras 6 plantillas)
   Fase 3 de la revisión responsive, 2026-09-24.
   Escritorio (1024 px o más) queda igual, salvo el sidebar pegajoso (28.6).
   ============================================================================= */

/* --- 28.1 Títulos de bloque ("Sobre el hotel", "Ubicación") --------------- */
@media (max-width: 1023px) {
  .ocv-block-title .elementor-heading-title {
    font-size: var(--text-3xl) !important;      /* 36px en tablet */
    line-height: 1.2 !important;
  }
}
@media (max-width: 767px) {
  .ocv-block-title .elementor-heading-title {
    font-size: 1.75rem !important;              /* 28px en móvil (antes 48px, 3 renglones) */
  }
}

/* --- 28.2 Alineación: bloques internos sin sangría extra de 10 px --------- */
@media (max-width: 1023px) {
  .ocv-single-grid__main > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* --- 28.3 Datos destacados (fact-box) en móvil: filas compactas --------- */
/* Etiqueta a la izquierda y valor a la derecha; antes eran 3 cajas de
   100 a 160 px de alto apiladas. */
@media (max-width: 767px) {
  .e-con.ocv-fact-grid {
    flex-direction: column !important;
    gap: var(--space-2) !important;
  }
  .e-con.ocv-fact-grid > .ocv-fact-box {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-3) !important;
    padding: var(--space-3) var(--space-4) !important;
  }
  .ocv-fact-box > .ocv-fact-box__label,
  .ocv-fact-box > .ocv-fact-box__value {
    width: auto !important;
    margin: 0 !important;
  }
  .ocv-fact-box > .ocv-fact-box__value {
    text-align: right;
  }
  .ocv-fact-box__label .elementor-heading-title {
    margin: 0 !important;
  }
  .ocv-fact-box__value .elementor-heading-title {
    font-size: var(--text-lg) !important;       /* 20px */
    margin: 0 !important;
  }
}

/* --- 28.4 Tarjeta de contacto: filas legibles en móvil -------------------- */
@media (max-width: 767px) {
  .e-con.ocv-sidebar-card {
    padding: var(--space-5, 1.25rem) !important;
  }
  .ocv-data-row > .ocv-data-row__label {
    flex: 0 0 76px !important;
    width: 76px !important;
  }
  .ocv-data-row > .ocv-data-row__value {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .ocv-data-row__value .elementor-heading-title {
    overflow-wrap: anywhere;
  }
}

/* --- 28.5 Tarjeta de contacto en tablet: botones lado a lado ------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .e-con.ocv-sidebar-card {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: var(--space-6) !important;
  }
  .e-con.ocv-sidebar-card > * {
    width: 100% !important;
  }
  .e-con.ocv-sidebar-card > .elementor-widget-button {
    width: calc(50% - var(--space-3)) !important;
  }
}

/* --- 28.6 Escritorio: el sidebar acompaña el scroll ----------------------- */
@media (min-width: 1024px) {
  .e-con.ocv-single-grid__aside {
    position: sticky !important;
    top: 88px;
    align-self: flex-start !important;
  }
}

/* --- 28.7 Dato vacío: si el registro no tiene valor, no se muestra la caja - */
/* Elementor omite el widget del valor cuando el campo ACF está vacío y dejaba
   la caja solo con la etiqueta (p. ej. "Categoría" en salones MICE). */
.ocv-fact-box:not(:has(.ocv-fact-box__value)) {
  display: none !important;
}


/* =============================================================================
   29. SINGLE CPT — ajustes específicos por plantilla
   Fase 4 de la revisión responsive, 2026-09-24.
   ============================================================================= */

/* --- 29.1 Tablas de datos (temperatura del agua, pesca) ------------------- */
/* El HTML lo genera inc/ocv-single.php a partir del texto plano del campo. */
.ocv-data-row__value--multiline .ocv-tabla,
.ocv-data-row__value--multiline .elementor-shortcode {
  white-space: normal;
}
.ocv-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.9375rem;
  line-height: var(--leading-normal);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ocv-tabla th,
.ocv-tabla td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  text-align: left;
  vertical-align: top;
}
.ocv-tabla tr:last-child th,
.ocv-tabla tr:last-child td {
  border-bottom: 0;
}
.ocv-tabla tr:nth-child(even) {
  background-color: var(--color-surface-cool);
}
.ocv-tabla th {
  width: 45%;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}
.ocv-tabla td {
  color: var(--color-gray-700);
}
.ocv-tabla__intro {
  margin: 0 0 var(--space-2);
  color: var(--color-gray-700);
}
.ocv-tabla__sub {
  margin: var(--space-6) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}
.ocv-tabla__nota {
  margin: var(--space-2) 0;
  color: var(--color-gray-700);
}
.ocv-tabla__fuente {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-gray-500);
}
@media (max-width: 767px) {
  .ocv-tabla { font-size: var(--text-sm); }
  .ocv-tabla th,
  .ocv-tabla td { padding: var(--space-2) var(--space-3); }
  .ocv-tabla th { width: 42%; }
}

/* --- 29.2 Bloques sin contenido: no mostrar el título huérfano ------------ */
/* Si el registro no tiene servicios (shortcode vacío) o no tiene mapa
   (contenedor de mapa vacío), se ocultan el título y el hueco.
   Nota: el navegador no admite :has() dentro de :has(), por eso el caso del
   mapa se resuelve ocultando por defecto y mostrando cuando hay contenido. */
.ocv-single-grid__main > .ocv-block-title:has(+ .elementor-widget-shortcode .elementor-shortcode:empty),
.ocv-single-grid__main > .elementor-widget-shortcode:has(.elementor-shortcode:empty),
.ocv-single-grid__main > .elementor-widget-shortcode:has(.elementor-shortcode:empty) + .elementor-widget-spacer {
  display: none !important;
}
.ocv-single-grid__main > .ocv-block-title:has(+ .ocv-media-box) {
  display: none !important;
}
.ocv-single-grid__main > .ocv-block-title:has(+ .ocv-media-box > *) {
  display: block !important;
}
.ocv-single-grid__main > .ocv-media-box:not(:has(> *)) {
  display: none !important;
}


/* =============================================================================
   30. BLOG — archivo y entrada
   Fase 5 de la revisión responsive, 2026-09-24.
   ============================================================================= */

/* --- 30.1 Palabra "Descubre" del hero del archivo: legible ---------------- */
.ocv-hero .ocv-hero__script,
.ocv-hero .ocv-hero__script p {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl) !important;
  line-height: 1 !important;
  color: var(--color-accent-yellow) !important;
  margin: 0 !important;
}

/* --- 30.2 Badge de categoría en el hero de la entrada --------------------- */
.ocv-hero .ocv-blog-badges .elementor-shortcode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ocv-hero .ocv-blog-badges .ocv-badge {
  background-color: var(--color-accent-yellow) !important;
  color: var(--color-secondary-xdark) !important;
  border-color: var(--color-accent-yellow) !important;
}

/* --- 30.3 Barra de datos (autor y fecha) ---------------------------------- */
.elementor-widget-post-info .elementor-post-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.elementor-widget-post-info .elementor-post-info a {
  color: inherit;
}

/* --- 30.4 Etiquetas al pie del artículo como chips ------------------------ */
.ocv-post-tags .elementor-shortcode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ocv-post-tags .ocv-badge {
  background-color: transparent !important;
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary-light) !important;
}

/* --- 30.5 Títulos largos de entrada en móvil ------------------------------ */
@media (max-width: 767px) {
  .single-post .ocv-hero .ocv-hero__title .elementor-heading-title {
    font-size: var(--text-2xl) !important;      /* 30px; antes 36px en 4 renglones */
  }
}


/* =============================================================================
   31. PÁGINAS LEGALES sin Elementor (Privacidad, Términos, Cookies)
   Fase 6 de la revisión responsive, 2026-09-24.
   El HTML lo arma inc/ocv-legal.php y reutiliza las clases de la sección 25.
   ============================================================================= */

/* --- 31.1 Contenedor de página: ancho de sitio y sin márgenes del tema ---- */
.ocv-legal-page .site-main {
  max-width: none;
  padding: 0;
}
.ocv-legal-page .page-content {
  margin: 0;
}

/* --- 31.2 Cabecera oscura a todo el ancho --------------------------------- */
.ocv-legal-header--wp {
  background-color: var(--color-secondary-xdark);
  padding: var(--space-16) var(--container-padding-x, 1.5rem) var(--space-12);
}
.ocv-legal-header__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.ocv-legal-header--wp .ocv-legal-header__title {
  color: var(--color-white);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  word-spacing: normal;
  margin: 0 0 var(--space-3);
}
.ocv-legal-header--wp .ocv-legal-header__meta {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  font-style: italic;
  margin: 0;
}

/* --- 31.3 Cuerpo: índice + texto ------------------------------------------ */
.ocv-legal-grid--wp {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-12) var(--container-padding-x, 1.5rem) var(--space-20);
}
.ocv-legal-grid--wp .ocv-toc {
  padding: var(--space-5, 1.25rem) var(--space-6);
}
.ocv-legal-grid--wp .ocv-toc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.ocv-legal-grid--wp .ocv-toc > summary::-webkit-details-marker {
  display: none;
}
.ocv-legal-grid--wp .ocv-toc > summary::after {
  content: "+";
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-primary);
}
.ocv-legal-grid--wp .ocv-toc[open] > summary {
  margin-bottom: var(--space-4);
}
.ocv-legal-grid--wp .ocv-toc[open] > summary::after {
  content: "−";
}
@media (min-width: 1024px) {
  .ocv-legal-grid--wp .ocv-toc > summary {
    cursor: default;
    pointer-events: none;
  }
  .ocv-legal-grid--wp .ocv-toc > summary::after {
    display: none;
  }
}
.ocv-legal-prose h2 {
  word-spacing: normal;
}

/* --- 31.4 Móvil ------------------------------------------------------------ */
@media (max-width: 767px) {
  .ocv-legal-header--wp {
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
  }
  .ocv-legal-header--wp .ocv-legal-header__title {
    font-size: var(--text-2xl);
  }
  .ocv-legal-grid--wp {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
    gap: var(--space-6) !important;
  }
  .ocv-legal-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ocv-legal-prose th,
  .ocv-legal-prose td {
    min-width: 140px;
  }
}

/* --- 31.5 Cabecera a todo el ancho: el tema limita .site-main por media query */
body.ocv-legal-page .site-main,
body.ocv-legal-page:not([class*="elementor-page-"]) .site-main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =============================================================================
   32. CORRECCIONES POSTERIORES (reporte desde celular, 2026-09-24)
   ============================================================================= */

/* --- 32.1 Logo del header sin deformar --------------------------------------
   En 26.3 se limitó la altura a 52 px, pero Elementor fija el ancho en 180 px y
   el logo se estiraba (proporción 3.46 en vez de 2.67). Se deja la altura fija
   y el ancho automático. */
@media (max-width: 1199px) {
  .elementor-location-header .elementor-widget-theme-site-logo img {
    width: auto !important;
    height: 52px !important;
    max-height: none !important;
    max-width: 100% !important;
    object-fit: contain;
  }
}

/* --- 32.2 Home: contenidos de sección siempre en columna ---------------------
   En algunos navegadores el bloque de texto de Gastronomía se acomodaba en
   fila (título, texto y botón uno junto a otro) y ensanchaba la página. */
.ocv-home-gastronomia__texto.e-con,
.ocv-home-gastronomia__ficha.e-con {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.e-con.ocv-home-block > .e-con-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

/* --- 32.3 Red de seguridad: ningún elemento ensancha la página ------------- */
html,
body {
  overflow-x: clip;
}


/* =============================================================================
   33. LISTADOS DE DIRECTORIO Y DESTINOS (fase 8, 2026-09-24)
   Markup en inc/ocv-archivo.php. Reutiliza .ocv-hero, .ocv-card, .ocv-badge
   y .ocv-pagination. Direcciones flex siempre explícitas (iPhone / WebKit).
   ============================================================================= */

/* --- 33.1 Contenedor a todo lo ancho (Hello limita .site-main) ------------- */
body.ocv-archivo-page .site-main.ocv-archivo {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ocv-arch-wrap {
  max-width: var(--container-lg, 1200px);
  margin: 0 auto;
  padding: var(--space-10) var(--container-padding-x, 1.25rem) var(--space-16);
}

/* --- 33.2 Hero ------------------------------------------------------------ */
.ocv-arch-hero {
  min-height: 34vh;
  flex-direction: row;
  align-items: flex-end;
  background-color: var(--color-secondary-dark);
}
.ocv-arch-hero .ocv-hero__bg { background-image: var(--gradient-sea-deep); }
.ocv-arch-hero--restaurante .ocv-hero__bg { background-image: linear-gradient(135deg, #f9b06a 0%, #f38620 55%, #c26a10 100%); }
.ocv-arch-hero--evento .ocv-hero__bg,
.ocv-arch-hero--destino-warm .ocv-hero__bg { background-image: var(--gradient-sunset); }
.ocv-arch-hero--sitio .ocv-hero__bg,
.ocv-arch-hero--destino-cool .ocv-hero__bg { background-image: var(--gradient-ocean); }
.ocv-arch-hero--actividad .ocv-hero__bg { background-image: linear-gradient(135deg, #4a7bbf 0%, #25599d 60%, #0f2540 100%); }
/* Con foto, la imagen inline gana al degradado */
.ocv-arch-hero--foto .ocv-hero__bg { background-size: cover; background-position: center; }
.ocv-arch-hero .ocv-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ocv-arch-hero .ocv-hero__title {
  color: var(--color-white) !important;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.15;
  margin: 0;
}
.ocv-arch-hero .ocv-hero__subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: var(--text-lg);
  margin: 0;
}

/* --- 33.3 Filtros --------------------------------------------------------- */
.ocv-arch-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.ocv-arch-filtros__fila {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}
.ocv-arch-filtros__lbl {
  flex: 0 0 72px;
  padding-top: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.ocv-arch-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.ocv-arch-chips .ocv-badge {
  text-decoration: none;
  padding: 6px 14px;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.ocv-arch-chips .ocv-badge--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ocv-arch-chips .ocv-badge--primary { border: 1px solid var(--color-primary); }
.ocv-arch-conteo {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0 0 var(--space-4);
}

/* --- 33.4 Grid y fichas --------------------------------------------------- */
.ocv-card-grid.ocv-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.ocv-arch-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ocv-arch-card .ocv-card__image {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.ocv-arch-card .ocv-card__body { flex: 1 1 auto; }
.ocv-arch-card .ocv-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  margin: 0;
  color: var(--color-gray-900);
}

/* --- 33.5 Paginación, vacío y secciones de destino ------------------------ */
.ocv-arch-paginacion { margin-top: var(--space-10); }
.ocv-arch-paginacion .page-numbers { text-decoration: none; }
.ocv-arch-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--color-surface-cool, #f3f6fa);
  border-radius: var(--radius-lg);
  color: var(--color-gray-700);
}
.ocv-arch-vacio p { margin: 0; }
.ocv-arch-vacio .ocv-badge { text-decoration: none; padding: 8px 18px; }
.ocv-arch-seccion { margin-top: var(--space-12); scroll-margin-top: 110px; }
.ocv-arch-seccion__head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.ocv-arch-seccion__titulo {
  display: inline-block;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--color-accent-yellow);
}
.ocv-arch-pasados .ocv-arch-seccion__titulo { margin-bottom: var(--space-6); }
.ocv-arch-seccion__mas {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.ocv-arch-seccion__mas::after { content: " \2192"; }
.ocv-arch-pasados .ocv-arch-card { opacity: 0.85; }

/* --- 33.6 Tableta ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .ocv-card-grid.ocv-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 1.25rem); }
  .ocv-arch-hero .ocv-hero__title { font-size: var(--text-3xl); }
}

/* --- 33.7 Móvil: chips en carrusel y fichas horizontales compactas -------- */
@media (max-width: 767px) {
  .ocv-arch-wrap { padding-top: var(--space-6); padding-bottom: var(--space-12); }
  .ocv-arch-hero { min-height: 240px; }
  .ocv-arch-hero .ocv-hero__title { font-size: var(--text-2xl); }
  .ocv-arch-hero .ocv-hero__subtitle { font-size: var(--text-base); }

  .ocv-arch-filtros__fila {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .ocv-arch-filtros__lbl { flex: none; padding-top: 0; }
  .ocv-arch-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--container-padding-x, 1.25rem));
    padding: 2px var(--container-padding-x, 1.25rem);
  }
  .ocv-arch-chips::-webkit-scrollbar { display: none; }
  .ocv-arch-chips .ocv-badge { flex: 0 0 auto; }

  .ocv-card-grid.ocv-arch-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ocv-arch-card {
    flex-direction: row !important;
    align-items: stretch;
    min-height: 104px;
  }
  .ocv-arch-card .ocv-card__image {
    flex: 0 0 108px;
    width: 108px;
    min-height: 104px;
    aspect-ratio: auto;
    height: auto;
  }
  .ocv-arch-card .ocv-card__ph { padding: var(--space-2); }
  .ocv-arch-card .ocv-card__ph span { font-size: var(--text-sm); }
  .ocv-arch-card .ocv-card__body {
    flex-direction: column !important;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3) var(--space-4);
    min-width: 0;
  }
  .ocv-arch-card .ocv-card__title { font-size: var(--text-base); }
  .ocv-arch-card .ocv-card__meta { font-size: var(--text-xs); }
  .ocv-arch-card .ocv-badge { font-size: 10px; padding: 2px 8px; }

  .ocv-arch-seccion { margin-top: var(--space-10); }
  .ocv-arch-seccion__titulo { font-size: var(--text-xl); }
}


/* =============================================================================
   34. CONTACTO (fase 9, 2026-09-25)
   Página Elementor /contacto/ + shortcodes de inc/ocv-contacto.php.
   Direcciones flex siempre explícitas (iPhone / WebKit).
   ============================================================================= */

/* --- 34.1 Hero a todo lo ancho ------------------------------------------- */
.e-con.ocv-contacto-hero-wrap {
  padding: 0 !important;
  --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
}
.ocv-contacto-hero,
.ocv-contacto-hero .elementor-widget-container,
.ocv-contacto-hero .elementor-shortcode { width: 100%; }
.ocv-arch-hero--contacto .ocv-hero__bg { background-image: var(--gradient-ocean); }

/* --- 34.2 Distribución: formulario + datos --------------------------------- */
.e-con.ocv-contacto {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: var(--space-12) !important;
  max-width: var(--container-lg, 1200px);
  margin: 0 auto;
  padding: var(--space-12) var(--container-padding-x, 1.25rem) var(--space-16) !important;
}
.e-con.ocv-contacto > .e-con.ocv-contacto__form {
  flex: 1 1 58% !important;
  width: auto !important;
  flex-direction: column !important;
  gap: var(--space-3) !important;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) !important;
}
.e-con.ocv-contacto > .e-con.ocv-contacto__info {
  flex: 0 0 38% !important;
  width: auto !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.ocv-contacto__titulo,
.ocv-contacto__titulo .elementor-heading-title {
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-secondary) !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--space-2) !important;
}
.ocv-contacto__intro p { margin: 0; color: var(--color-gray-700); }

/* --- 34.3 Formulario Elementor ---------------------------------------------- */
.ocv-contacto-form .elementor-field-group { margin-bottom: var(--space-4); }
.ocv-contacto-form .elementor-field-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: 6px;
}
.ocv-contacto-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.ocv-contacto-form .elementor-select-wrapper select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ocv-contacto-form textarea.elementor-field { min-height: 130px; }
.ocv-contacto-form .elementor-field:focus,
.ocv-contacto-form .elementor-select-wrapper select:focus {
  outline: none;
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(37, 89, 157, 0.15);
}
.ocv-contacto-form .elementor-field-type-acceptance .elementor-field-subgroup label,
.ocv-contacto-form .elementor-field-type-acceptance {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}
.ocv-contacto-form .elementor-field-type-acceptance .elementor-field-label { display: none; }
.ocv-contacto-form .elementor-field-type-acceptance a { color: var(--color-secondary); text-decoration: underline; }
.ocv-contacto-form .elementor-button {
  width: 100%;
  min-height: 50px;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.ocv-contacto-form .elementor-button:hover {
  box-shadow: 0 4px 20px rgba(243, 134, 32, 0.35);
  transform: translateY(-1px);
}
.ocv-contacto-form .elementor-message {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.ocv-contacto-form .elementor-message-success { background: #e8f5ec; color: #1d6b35; }
.ocv-contacto-form .elementor-message-danger { background: #fdecec; color: var(--color-accent-red); }

/* --- 34.4 Datos institucionales ------------------------------------------- */
.ocv-contacto-datos {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ocv-contacto-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.ocv-contacto-card .ocv-contacto__titulo { font-size: var(--text-xl) !important; margin: 0 !important; }
.ocv-contacto-wa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: #1f9d55;
  color: var(--color-white) !important;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  text-align: center;
  transition: background-color var(--transition-fast);
}
.ocv-contacto-wa:hover { background: #17864a; }
.ocv-contacto-wa__lbl { font-weight: var(--font-weight-bold); font-size: var(--text-base); }
.ocv-contacto-wa__num { font-size: var(--text-sm); opacity: 0.9; }
.ocv-contacto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ocv-contacto-lista li {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-100, #f5f5f5);
  font-size: var(--text-sm);
}
.ocv-contacto-lista li:last-child { border-bottom: 0; }
.ocv-contacto-lista__lbl {
  flex: 0 0 76px;
  color: var(--color-gray-500);
}
.ocv-contacto-lista__val {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-gray-900);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}
.ocv-contacto-lista__val a { color: var(--color-secondary); text-decoration: none; }
.ocv-contacto-lista__val small { font-weight: 400; color: var(--color-gray-500); font-size: var(--text-xs); }
.ocv-contacto-redes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ocv-contacto-redes .ocv-badge { text-decoration: none; padding: 6px 14px; }
.ocv-contacto-mapa {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-gray-300);
  height: 260px;
}
.ocv-contacto-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.ocv-contacto-mice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-sea-deep);
  color: var(--color-white);
}
.ocv-contacto-mice p { margin: 0; }
.ocv-contacto-mice__kicker {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-yellow);
}
.ocv-contacto-mice__txt { color: rgba(255, 255, 255, 0.92); font-size: var(--text-sm); }
.ocv-contacto-mice__btn {
  margin-top: var(--space-2);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-secondary-dark) !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  text-decoration: none !important;
}

/* --- 34.5 Tableta y móvil -------------------------------------------------- */
@media (max-width: 1024px) {
  .e-con.ocv-contacto {
    flex-direction: column !important;
    gap: var(--space-8) !important;
    padding-top: var(--space-8) !important;
  }
  .e-con.ocv-contacto > .e-con.ocv-contacto__form,
  .e-con.ocv-contacto > .e-con.ocv-contacto__info {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .e-con.ocv-contacto { padding: var(--space-6) var(--container-padding-x, 1.25rem) var(--space-12) !important; }
  .e-con.ocv-contacto > .e-con.ocv-contacto__form { padding: var(--space-6) var(--space-4) !important; }
  .ocv-contacto-form .elementor-field-group { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .ocv-contacto-mapa { height: 220px; }
}

/* --- 34.6 Menús de las columnas del footer (fase 9b) ------------------------ */
.ocv-footer-menu .elementor-nav-menu--main .elementor-item,
.ocv-footer-menu .elementor-nav-menu .elementor-item {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  padding: 5px 0 !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}
.ocv-footer-menu .elementor-item:hover,
.ocv-footer-menu .elementor-item:focus {
  color: var(--color-accent-yellow) !important;
}
.ocv-footer-menu .elementor-item::before,
.ocv-footer-menu .elementor-item::after { display: none !important; }
.ocv-footer-menu .elementor-menu-toggle,
.ocv-footer-menu .elementor-nav-menu--dropdown { display: none !important; }
.ocv-footer-menu .elementor-nav-menu--main { display: block !important; }
@media (max-width: 767px) {
  .ocv-footer-menu .elementor-item { justify-content: center !important; text-align: center; }
}

/* --- 34.7 Menú principal con "Contacto": cabe en una línea de 1200 a 1365 px */
@media (min-width: 1200px) and (max-width: 1365px) {
  .elementor-location-header nav.elementor-nav-menu--main .elementor-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 15px !important;
  }
}

/* --- 34.8 Enlace "cómo llegar" bajo el mapa ------------------------------- */
.ocv-contacto-mapa-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.ocv-contacto-mapa__link {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary) !important;
  text-decoration: none;
}
.ocv-contacto-mapa__link::after { content: " \2192"; }
.ocv-contacto-mapa__link:hover { text-decoration: underline; }

/* =============================================================================
   35. MENÚ PRINCIPAL 2026 (fase 10.1, 2026-09-27)
   "Contacto" como botón en escritorio; en la hamburguesa se ve como opción normal.
   ============================================================================= */
@media (min-width: 1200px) {
  .elementor-location-header nav.elementor-nav-menu--main .ocv-menu-cta > a.elementor-item {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-pill);
    padding: 8px 18px !important;
    margin-left: 8px;
    line-height: 1.2 !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
  }
  .elementor-location-header nav.elementor-nav-menu--main .ocv-menu-cta > a.elementor-item:hover {
    box-shadow: 0 4px 16px rgba(243, 134, 32, 0.35);
    transform: translateY(-1px);
  }
  .elementor-location-header nav.elementor-nav-menu--main .ocv-menu-cta > a.elementor-item::before,
  .elementor-location-header nav.elementor-nav-menu--main .ocv-menu-cta > a.elementor-item::after {
    display: none !important;
  }
  .elementor-location-header nav.elementor-nav-menu--main > ul > li.ocv-menu-cta { align-self: center; }
}

/* =============================================================================
   36. FOOTER COMPLETO (fase 10.2, 2026-09-28)
   ============================================================================= */
.ocv-footer-redes .elementor-social-icons-wrapper {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.ocv-footer-redes .elementor-grid-item { margin: 0 !important; }
.ocv-footer-redes .elementor-social-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.ocv-footer-redes .elementor-social-icon i { color: var(--color-white) !important; }
.ocv-footer-redes .elementor-social-icon svg { fill: var(--color-white) !important; width: 16px; height: 16px; }
.ocv-footer-redes .elementor-social-icon:hover {
  background-color: var(--color-accent-yellow) !important;
  border-color: var(--color-accent-yellow) !important;
}
.ocv-footer-redes .elementor-social-icon:hover i { color: var(--color-secondary-xdark) !important; }
.ocv-footer-redes .elementor-social-icon:hover svg { fill: var(--color-secondary-xdark) !important; }
.ocv-footer-legal { margin-top: 6px !important; }
.ocv-footer-legal a,
.elementor-location-footer .ocv-footer-legal a {
  color: rgba(255, 255, 255, 0.78) !important;
  text-decoration: none;
}
.ocv-footer-legal a:hover { color: var(--color-accent-yellow) !important; text-decoration: underline; }
@media (max-width: 767px) {
  .ocv-footer-redes .elementor-social-icons-wrapper { justify-content: center; }
}

/* =============================================================================
   37. BLOQUES EXTRA DE FICHAS Y LOGO DE RESPALDO (fase 10.4, 2026-09-28)
   ============================================================================= */
/* Widget de shortcode vacío (registro sin datos): no ocupa espacio */
.ocv-sc-bloque:not(:has(.ocv-fichas-bloque)) { display: none !important; }

.ocv-fichas-bloque { display: flex; flex-direction: column; gap: var(--space-4); }
.ocv-fichas-kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* 37.1 Hospedaje: salones */
.ocv-hotel-salones__lista {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
}
.ocv-hotel-salones__lista li {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-cool, #f0f5fb);
  color: var(--color-secondary-dark);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}
.ocv-hotel-salones__contacto {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ocv-hotel-salones__datos { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.ocv-hotel-salones__nombre { font-weight: var(--font-weight-bold); color: var(--color-gray-900); }
.ocv-hotel-salones__datos a { color: var(--color-secondary); text-decoration: none; overflow-wrap: anywhere; }

/* 37.2 Botones (redes de actividades, cotización MICE) */
.ocv-operador-redes { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ocv-fichas-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold); font-size: var(--text-sm);
  text-decoration: none !important;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-base);
}
.ocv-operador-redes .ocv-fichas-btn { flex: 1 1 0; }
.ocv-fichas-btn--outline { border: 2px solid var(--color-secondary); color: var(--color-secondary) !important; background: transparent; }
.ocv-fichas-btn--outline:hover { background: var(--color-secondary); color: var(--color-white) !important; }
.ocv-fichas-btn--primary { width: 100%; background: var(--color-primary); color: var(--color-white) !important; }
.ocv-fichas-btn--primary:hover { box-shadow: 0 4px 20px rgba(243, 134, 32, 0.35); }

/* 37.3 MICE: fila del ejecutivo */
.ocv-mice-contacto { gap: var(--space-3); margin-top: var(--space-2); }
.ocv-fichas-row {
  display: flex; flex-direction: row; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-gray-100, #f5f5f5);
  font-size: var(--text-sm);
}
.ocv-fichas-row__lbl { flex: 0 0 76px; color: var(--color-gray-500); }
.ocv-fichas-row__val { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-weight: var(--font-weight-semibold); color: var(--color-gray-900); }
.ocv-fichas-row__val small { font-weight: 400; color: var(--color-gray-500); font-size: var(--text-xs); }

/* 37.4 Sitios: video 16:9 */
.ocv-sitio-video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.ocv-sitio-video__marco iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* 37.5 Logo como imagen de respaldo en fichas de Home y listados */
.ocv-card__logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: var(--space-6);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100, #f5f5f5);
}
.ocv-card__logo img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 72%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .ocv-arch-card .ocv-card__logo { padding: var(--space-3); aspect-ratio: auto; }
  .ocv-arch-card .ocv-card__logo img { max-width: 100%; max-height: 80px; }
  .ocv-operador-redes .ocv-fichas-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   FLYER DEL EVENTO: imagen completa dentro de la descripcion (2026-10-15)
   Shortcode [ocv_flyer_evento], codigo en inc/ocv-flyer.php
   ========================================================================== */
.ocv-flyer { margin: 0; text-align: center; }
.ocv-flyer__link { display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.ocv-flyer__img { display: block; max-width: 100%; height: auto; }
.ocv-flyer__cap { margin-top: 8px; font-size: 0.875rem; opacity: 0.7; }


/* ==========================================================================
   SALONES MICE: imagen de configuracion y capacidades (2026-10-15)
   Shortcode [ocv_imagen_salones], codigo en inc/ocv-salones.php
   ========================================================================== */
.ocv-salones { margin: 8px 0 40px; }
.ocv-salones__fig { margin: 16px 0 0; text-align: center; }
.ocv-salones__link { display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.ocv-salones__img { display: block; max-width: 100%; height: auto; }
.ocv-salones__cap { margin-top: 8px; font-size: 0.875rem; opacity: 0.7; }

/* ==========================================================================
   HERO EVENTO: degradado de marca en lugar de foto (2026-10-15)
   Mismo degradado que el hero de Contacto (variable --gradient-ocean).
   El flyer se muestra completo en la descripcion con [ocv_flyer_evento].
   ========================================================================== */
body.single-ocv_evento .ocv-hero .ocv-hero__bg {
  background-image: var(--gradient-ocean);
}