/* ==========================================================================
   OLIVA SURF · Tema hijo de YOOtheme Pro (estilo Copper Hill) · v1.5.1
   yootheme-child/css/custom.css  (YOOtheme Pro lo carga automáticamente)

   Los colores y la fuente base (verde #90b160, Verdana) ya están en
   YOOtheme → Estilo. Este archivo añade lo que el personalizador no cubre.

   ÍNDICE
   1. Tokens
   2. Base y accesibilidad
   3. UIkit: botones · cabecera, menú y barra superior · tarjetas · tablas · acordeón
   4. Componentes propios (.os-*)
      4.1 Cajas de la home (servicios)
      4.2 Etiqueta (pill)
      4.3 Cifras
      4.4 Lista "incluye" con check
      4.5 Tabla de tarifas
      4.6 Banda de llamada a la acción
   5. WhatsApp: botón flotante
   6. Movimiento reducido
   7. Diseño moderno de las páginas (rediseño 2026)
   8. Home · Regata
   9. Tablas de tarifas responsivas
   10. Colores Oliva Surf (azul y rojo del logo)
   11. Regata en toda la web
   ========================================================================== */


/* 0. TIPOGRAFÍA «Regata»: Fraunces (titulares) + Figtree (texto) =========
   Servidas desde el propio servidor (licencia OFL, carpeta fonts/). */
@font-face {
  font-display: swap;
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-var.woff2") format("woff2");
}


/* 1. TOKENS ============================================================== */

:root {
  /* Marca Oliva Surf (colores del logo). Las variables conservan el nombre
     «green» de la versión anterior para no tener que tocar el resto del CSS. */
  --os-navy: #1B3171;         /* azul del logo: titulares, cabeceras, fondos oscuros */
  --os-red: #DF1C24;          /* rojo del logo: botones de acción y detalles */
  --os-red-700: #C8141C;      /* rojo al pasar el ratón */
  --os-sea: #2A6FB5;          /* azul mar: enlaces y bordes activos */
  --os-sky: #8EC5FF;          /* cielo: detalles sobre fondo azul */
  --os-sand: #F6EEDF;         /* arena: fondos cálidos */
  --os-green: var(--os-sea);
  --os-green-700: var(--os-navy);
  --os-green-800: var(--os-navy);
  --os-green-soft: #EAF2FB;

  /* Neutros */
  --os-ink: #12233F;
  --os-ink-soft: #4A5872;
  --os-line: #DCE3EE;
  --os-muted: #EEF2F6;        /* bruma: fondos suaves (Regata) */

  /* Forma */
  --os-radius-s: 6px;
  --os-radius-m: 6px;          /* Regata: esquinas más rectas */
  --os-measure: 70ch;
  --os-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --os-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}


/* 2. BASE Y ACCESIBILIDAD ================================================ */

html,
body,
.uk-navbar-nav > li > a,
.uk-navbar-dropdown-nav > li > a,
.uk-nav > li > a,
.uk-button,
.uk-subnav > * > a,
input,
select,
textarea {
  font-family: var(--os-font);
}

body {
  -webkit-font-smoothing: antialiased;
}

:is(h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, [class*="uk-heading"], .el-title) {
  font-family: var(--os-font-display) !important;
  font-optical-sizing: auto;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.uk-navbar-nav > li > a {
  color: var(--os-ink);
  font-weight: 500;
  letter-spacing: .005em !important;
  text-transform: none !important;
}

/* Menú: página activa en rojo del logo, al pasar el ratón en azul */
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > a[aria-current="page"] {
  color: var(--os-red) !important;
}

.uk-navbar-nav > li:not(.uk-active) > a:hover,
.uk-navbar-nav > li > a[aria-expanded="true"] {
  color: var(--os-navy) !important;
}

::selection {
  background: var(--os-green-700);
  color: #fff;
}

h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
  color: var(--os-navy);
  font-family: var(--os-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

/* El verde de marca no se lee bien como texto: los enlaces del contenido
   usan el verde oscuro (contraste 5,6:1). */
:where(.uk-section, .tm-main) :where(p, td, dd, .el-content li) a:not([class*="uk-button"]):not(:where(.uk-light *)) {
  color: var(--os-green-800);
  text-decoration: underline;
  text-underline-offset: .15em;
}

:where(.uk-section, .tm-main) :where(p, td, dd, .el-content li) a:not([class*="uk-button"]):not(:where(.uk-light *)):hover {
  color: var(--os-ink);
}

em, .uk-text-primary {
  color: var(--os-green-800);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--os-green-700);
  outline-offset: 3px;
}

.uk-light :where(a, button, [tabindex]):focus-visible {
  outline-color: #fff;
}

.uk-section-muted {
  background-color: var(--os-muted);
}


/* 3. UIKIT =============================================================== */

/* Botones: sin mayúsculas, radio pequeño */
.uk-button {
  border-radius: var(--os-radius-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.uk-button-primary,
.uk-light .uk-button-primary {
  background-color: var(--os-green-700);
  border-color: transparent;
  color: #fff;
}

.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-light .uk-button-primary:hover {
  background-color: var(--os-green-800);
  color: #fff;
}

.uk-button-secondary {
  background-color: var(--os-ink);
  border-color: transparent;
  color: #fff;
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background-color: #000;
  color: #fff;
}

.uk-button-default {
  background-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--os-green-700);
  color: var(--os-green-800);
}

.uk-button-default:hover,
.uk-button-default:focus {
  background-color: var(--os-green-700);
  color: #fff;
}

.uk-light .uk-button-default {
  box-shadow: inset 0 0 0 2px #fff;
  color: #fff;
}

.uk-light .uk-button-default:hover {
  background-color: #fff;
  color: var(--os-ink);
}

/* Cabecera: el menú mantiene el estilo original de la plantilla (mayúsculas,
   verde en la página activa). Solo se ajusta el espacio para que quepan los
   7 apartados en una línea junto al logo y los iconos. */
@media (min-width: 1200px) {
  .tm-header .uk-navbar {
    flex-wrap: nowrap;
  }

  .tm-header .uk-navbar-nav > li > a {
    font-size: .9375rem;   /* 15 px */
    font-weight: 500;
    letter-spacing: .005em;
    white-space: nowrap;
  }

  .tm-header .uk-navbar-nav {
    column-gap: clamp(14px, 1.5vw, 28px);
  }

  .tm-header .uk-navbar-nav > li > a {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Entre 1200 y 1399 px no caben los iconos de redes: se ocultan ahí
   (siguen el WhatsApp flotante y la barra superior). */
@media (min-width: 1200px) and (max-width: 1439px) {
  .tm-header :is(.uk-navbar-item, .uk-navbar-right > div, .uk-navbar-right > ul):has(.uk-icon-button),
  .tm-header .uk-icon-button {
    display: none !important;
  }
}

/* Barra superior (Haz tu reserva · WhatsApp · Trabaja con nosotros), como la web antigua */
.tm-toolbar {
  background: var(--os-navy);
  color: #fff;
}

.os-toolbar {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0;
  text-transform: uppercase;
}

.os-toolbar a {
  color: #fff;
  text-decoration: none;
}

.os-toolbar a:hover {
  color: var(--os-sky);
}

.os-toolbar .os-tel {
  color: var(--os-sky);
}

.os-toolbar .os-tel:hover {
  color: #fff;
}

.os-toolbar .os-trabaja {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.os-toolbar [uk-icon] {
  margin: 0 2px;
  vertical-align: -2px;
}

/* Tarjetas: borde fino en lugar de sombra genérica */
.uk-card {
  border-radius: var(--os-radius-m);
}

.uk-card-default {
  border: 1px solid var(--os-line);
  box-shadow: none;
}

.uk-card-default:has(> .uk-card-media-top) {
  overflow: hidden;
}

/* Tablas */
.uk-table th {
  color: var(--os-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Acordeón (preguntas frecuentes) */
.uk-accordion > :nth-child(n+2) {
  margin-top: 0;
}

.uk-accordion > * {
  border-bottom: 1px solid var(--os-line);
  padding: 16px 0;
}

.uk-accordion > :first-child {
  border-top: 1px solid var(--os-line);
}

.uk-accordion-title {
  color: var(--os-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.uk-accordion-title:hover {
  color: var(--os-green-800);
}


/* 4. COMPONENTES PROPIOS ================================================= */

/* 4.1 Cajas de la home: clase os-cajas en el elemento Grid de YOOtheme.
   Primera fila 3 cajas, segunda fila 4 (columnas en el propio Grid). */
.os-cajas .el-item {
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius-m);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}

.os-cajas .el-item:hover {
  border-color: var(--os-green);
  transform: translateY(-2px);
}

.os-cajas .el-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.os-cajas .el-title {
  color: var(--os-ink);
  font-size: 1.25rem;
  margin-top: 0 !important;
}

.os-cajas .el-meta {
  color: var(--os-green-800);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.os-cajas .el-content {
  color: var(--os-ink-soft);
}

/* 4.2 Etiqueta (clase os-pill en un elemento Titular) */
.os-pill {
  font-family: var(--os-font-display);
  letter-spacing: .02em;
  width: fit-content;
  align-items: center;
  background: var(--os-green-soft);
  border-radius: 999px;
  color: var(--os-green-800);
  display: inline-flex;
  font-size: .8125rem;
  font-weight: 700;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
}

.uk-light .os-pill {
  background: var(--os-green);
  color: #fff;
}

/* 4.3 Cifras (desde 1993, homologada…) */
.os-cifras {
  display: grid;
  gap: 24px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

@media (min-width: 960px) {
  .os-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.os-cifra dt {
  color: var(--os-green-800);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
}

.os-cifra dd {
  color: var(--os-ink-soft);
  margin: 8px 0 0;
}

/* 4.4 Lista con check verde: <ul class="os-incluye"> */
.os-incluye {
  display: grid;
  gap: 10px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 960px) {
  .os-incluye.os-2col {
    grid-template-columns: 1fr 1fr;
  }
}

.os-incluye > li {
  padding-left: 32px;
  position: relative;
}

.os-incluye > li::before {
  background: var(--os-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-radius: 50%;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: .15em;
  width: 20px;
}

/* 4.5 Tarifas: <div class="os-tarifas"><table>… */
.os-tarifas {
  overflow-x: auto;
}

.os-tarifas table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.os-tarifas th,
.os-tarifas td {
  border-bottom: 1px solid var(--os-line);
  padding: 12px 14px;
  text-align: right;
}

.os-tarifas th:first-child,
.os-tarifas td:first-child {
  text-align: left;
}

.os-tarifas thead th {
  border-bottom: 2px solid var(--os-green-700);
  color: var(--os-ink-soft);
}

.os-tarifas td {
  color: var(--os-ink);
  font-weight: 600;
}

.os-tarifas .is-destacado {
  background: var(--os-green-soft);
}

/* 4.6 Banda de llamada a la acción: clase os-cta en la sección */
.os-cta {
  border-top: 6px solid var(--os-green);
}


/* 5. WHATSAPP ============================================================ */
/* El botón lo pinta functions.php en todas las páginas */
.os-wa {
  align-items: center;
  background: #25D366;
  border-radius: 999px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 24px rgba(34, 39, 31, .25);
  color: #fff !important;
  display: inline-flex;
  font-family: var(--os-font);
  font-weight: 600;
  gap: 8px;
  padding: 12px 20px 12px 14px;
  position: fixed;
  right: 20px;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 980;
}

.os-wa:hover,
.os-wa:focus {
  box-shadow: 0 12px 28px rgba(34, 39, 31, .32);
  color: #fff !important;
  transform: translateY(-2px);
}

@media (max-width: 639px) {
  .os-wa {
    padding: 14px;
  }

  .os-wa-label {
    display: none;
  }
}

@media print {
  .os-wa {
    display: none;
  }
}


/* 6. MOVIMIENTO REDUCIDO ================================================= */

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


/* 7. DISEÑO MODERNO (rediseño 2026) ====================================== */

/* 7.1 Titular grande de portada y cabeceras */
.os-display {
  font-family: var(--os-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.uk-light .os-display,
.uk-light :is(h1, h2, h3) {
  color: #fff;
}

.uk-light .uk-text-lead {
  color: rgba(255, 255, 255, .9);
}

/* 7.2 Cajas de la home (columnas con clase os-caja) */
.os-caja {
  background: #fff;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius-m);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 24px !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.os-caja:hover {
  border-color: var(--os-green);
  box-shadow: 0 18px 40px rgba(34, 39, 31, .10);
  transform: translateY(-3px);
}

.os-caja > * {
  margin-left: 24px;
  margin-right: 24px;
}

.os-caja > :first-child {
  margin: 0 0 20px;
}

.os-caja > :first-child :is(img, video) {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  display: block;
  object-fit: cover;
  width: 100%;
}

.os-caja > .uk-margin:last-child,
.os-caja > :last-child {
  margin-top: auto !important;
  padding-top: 8px;
}

.os-caja-meta {
  color: var(--os-green-800);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Tarjetas en rejilla (clase os-cajas en Grid): foto 4:3 y texto con aire */
.os-cajas .uk-card {
  height: 100%;
}

.os-cajas .uk-card-media-top img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.os-cajas .el-link {
  font-weight: 700;
}

/* 7.3 Cifras (clase os-cifras-grid en Grid sin imágenes) */
.os-cifras-grid .el-title {
  color: var(--os-green-800);
  font-family: var(--os-font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.os-cifras-grid .el-content {
  color: var(--os-ink-soft);
  margin-top: 8px !important;
  max-width: 24ch;
}

/* 7.4 Razones, tarifas, cursos y tardes: tarjetas sin foto */
:is(.os-razones, .os-tarifas-cards, .os-cursos, .os-tardes, .os-iconos, .os-contacto) .uk-card {
  border-radius: var(--os-radius-m);
  height: 100%;
}

.os-razones .el-meta {
  color: var(--os-green);
  font-family: var(--os-font-display);
  font-size: 2rem !important;
  font-weight: 700;
  line-height: 1;
}

.os-tarifas-cards .el-title {
  font-size: 1.75rem;
}

.os-tarifas-cards .el-content strong {
  color: var(--os-green-800);
  font-family: var(--os-font-display);
  font-size: 1.375rem;
}

.os-tarifas-cards .el-content p {
  margin: 4px 0 0;
}

.os-tarifas-cards > div:nth-child(3) .uk-card {
  border: 2px solid var(--os-green);
}

/* Cursos con su color */
.os-cursos .uk-card {
  border-top: 6px solid var(--os-curso, var(--os-green));
}

.os-cursos > div:nth-child(1) { --os-curso: #4F9D3A; }
.os-cursos > div:nth-child(2) { --os-curso: #2C6FB7; }
.os-cursos > div:nth-child(3) { --os-curso: #C8372D; }
.os-cursos > div:nth-child(4) { --os-curso: #8A8F86; }

.os-cursos .el-title {
  color: var(--os-curso, var(--os-ink));
}

/* Iconos en tarjetas (seguridad, contacto) */
:is(.os-iconos, .os-contacto) .el-image,
:is(.os-iconos, .os-contacto) [uk-icon] {
  color: var(--os-green-700);
}

.os-contacto .el-content {
  font-family: var(--os-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* 7.5 Listas de precios con puntos guía */
.os-precios-lista .el-meta {
  font-weight: 700;
  white-space: nowrap;
}

/* 7.6 Galerías y vídeos con esquinas redondeadas */
.uk-gallery .el-item,
.el-item.uk-inline-clip,
.uk-section video,
.uk-section iframe {
  border-radius: var(--os-radius-m);
  overflow: hidden;
}

/* 7.7 Acordeón (cronograma, notas, Oliva) */
.uk-accordion-content .uk-list {
  margin-top: 0;
}

/* 7.8 Textos legales */
.os-legal :is(h2, h3) {
  margin-top: 1.6em;
}

/* 7.9 Pie de página */
.tm-footer :is(h3, h4, .uk-h4) {
  font-family: var(--os-font-display);
  letter-spacing: 0;
}

.tm-footer .uk-list a,
.tm-footer .el-content a {
  text-decoration: none;
}

.os-footer-logos img {
  background: #fff;
  border-radius: var(--os-radius-s);
  max-height: 56px;
  padding: 6px;
  width: auto;
}

/* 7.10 Móvil */
@media (max-width: 639px) {
  .os-caja > * {
    margin-left: 18px;
    margin-right: 18px;
  }

  .os-display {
    font-size: clamp(2rem, 1.2rem + 6vw, 2.75rem) !important;
  }
}

/* 8. HOME · REGATA =====================================================
   Editorial: fotos grandes, titulares serif, servicios en zigzag.
   Clases os-rg-* (solo en la home). */

.os-rg-hero .uk-position-cover {
  background: linear-gradient(0deg, rgba(20, 33, 61, .88) 0%, rgba(20, 33, 61, .35) 45%, rgba(20, 33, 61, 0) 75%) !important;
}

.os-rg-h1 {
  color: #fff;
  font-size: clamp(2.75rem, 1.4rem + 5.6vw, 7rem) !important;
  font-weight: 400 !important;
  line-height: .98;
  max-width: 12ch;
}

.os-rg-lead {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem);
  max-width: 44ch;
}

.os-rg-kicker {
  color: var(--os-red);
  font-family: var(--os-font) !important;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.os-rg-statement {
  color: var(--os-navy);
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.12;
}

.os-rg-h2 {
  color: var(--os-navy);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.02;
}

.uk-light .os-rg-h2 {
  color: #fff;
}

/* Zigzag */
.os-rg-zig-img img,
img.os-rg-zig-img {
  aspect-ratio: 11 / 8;
  border-radius: 4px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.os-rg-zig-txt {
  color: var(--os-ink-soft);
  font-size: 1.1875rem;
  max-width: 38ch;
}

.os-rg .uk-button-text {
  color: var(--os-navy);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 4px;
  text-transform: none;
}

.os-rg .uk-button-text::before {
  border-bottom: 3px solid var(--os-red);
  right: 0;
}

/* Y además: lista a dos columnas con foto redonda */
.uk-section.os-rg-mist {
  background: var(--os-muted);
}

.os-rg-lista .el-item {
  border-top: 1px solid #C9D3DE;
  padding-top: 22px;
}

.os-rg-lista .el-image {
  aspect-ratio: 1;
  border-radius: 50%;
  height: 88px;
  object-fit: cover;
  width: 88px;
}

.os-rg-lista .el-title {
  color: var(--os-navy);
  font-size: 1.75rem !important;
  font-weight: 500 !important;
}

.os-rg-lista .el-meta {
  color: var(--os-red);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.os-rg-lista .el-content {
  color: var(--os-ink-soft);
  margin-top: 4px !important;
}

/* Cita */
.os-rg-quote {
  color: var(--os-navy);
  font-family: var(--os-font-display) !important;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem) !important;
  font-style: italic;
  font-weight: 300 !important;
  line-height: 1.15;
  margin-inline: auto;
  max-width: 22ch;
}

/* Cifras con regla superior */
.os-rg-cifras {
  border-top: 2px solid var(--os-navy);
  padding-top: 28px;
}

.os-rg-cifras .el-title {
  color: var(--os-red);
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem) !important;
  font-weight: 400 !important;
  line-height: 1;
}

.os-rg-cifras .el-content {
  color: var(--os-ink-soft);
  margin-top: 8px !important;
  max-width: 24ch;
}

/* Galería: una grande y dos pequeñas */
@media (min-width: 960px) {
  .os-rg-mosaico .uk-grid {
    display: grid !important;
    gap: 14px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 300px 300px;
    margin-left: 0 !important;
  }

  .os-rg-mosaico .uk-grid > * {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .os-rg-mosaico .uk-grid > :first-child {
    grid-row: span 2;
  }

  .os-rg-mosaico .uk-grid > * :is(.el-item, a, .uk-inline-clip) {
    display: block;
    height: 100%;
  }

  .os-rg-mosaico .el-image {
    height: 100% !important;
    object-fit: cover;
    width: 100% !important;
  }
}

.os-rg-mosaico .el-item {
  border-radius: 4px;
  overflow: hidden;
}

/* Contacto en azul */
.uk-section.os-rg-contacto {
  background: var(--os-navy);
}

.os-rg-datos .el-meta {
  color: rgba(255, 255, 255, .7) !important;
  font-size: .875rem;
  letter-spacing: 0;
  text-transform: none;
}

.os-rg-datos .el-title {
  color: #fff;
  font-size: 1.875rem !important;
  font-weight: 500 !important;
}

.os-rg-datos .el-content {
  color: rgba(255, 255, 255, .85);
}

.os-rg-contacto .uk-button-default {
  background: #fff;
  border: 0;
  color: var(--os-navy);
}

@media (max-width: 959px) {
  .os-rg-lista .el-image {
    height: 64px;
    width: 64px;
  }
}

/* 9. TABLAS DE TARIFAS RESPONSIVAS ======================================
   Tablas dentro del elemento Texto (class="os-tabla"). En el ordenador,
   tabla normal; en el móvil, cada fila es una tarjeta con sus etiquetas
   (las toma de data-label). Pestañas: elemento Switcher con clase
   os-tarifas-tabs. */

.os-tarifas-tabs .uk-subnav {
  gap: 8px;
  margin-left: 0;
}

.os-tarifas-tabs .uk-subnav > * {
  padding-left: 0;
}

.os-tarifas-tabs .uk-subnav > * > a {
  background: var(--os-green-soft);
  border-radius: 999px;
  color: var(--os-green-800);
  font-family: var(--os-font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 18px;
  text-transform: none;
}

.os-tarifas-tabs .uk-subnav > .uk-active > a {
  background: var(--os-green-700);
  color: #fff;
}

.os-tabla-wrap {
  margin: 0 0 12px;
}

.os-tabla-wrap + .os-tabla-wrap {
  margin-top: 28px;
}

.os-tabla {
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.os-tabla caption {
  color: var(--os-ink);
  font-family: var(--os-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  padding-bottom: 12px;
  text-align: left;
}

.os-tabla thead th {
  background: var(--os-green-700);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 12px 14px;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

.os-tabla thead th:first-child {
  border-radius: var(--os-radius-m) 0 0 0;
  text-align: left;
}

.os-tabla thead th:last-child {
  border-radius: 0 var(--os-radius-m) 0 0;
}

.os-tabla tbody th,
.os-tabla tbody td {
  border-bottom: 1px solid var(--os-line);
  padding: 12px 14px;
  vertical-align: middle;
}

.os-tabla tbody th {
  color: var(--os-ink);
  font-weight: 700;
  text-align: left;
}

.os-tabla tbody td {
  color: var(--os-ink);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.os-tabla tbody tr:nth-child(even) > * {
  background: var(--os-muted);
}

.os-tabla tbody tr:hover > * {
  background: var(--os-green-soft);
}

.os-tabla .os-sub {
  color: var(--os-ink-soft);
  display: block;
  font-size: .8125rem;
  font-weight: 400;
}

/* Pestañas: cada panel con su propia altura (YOOtheme iguala las alturas
   al panel más alto y deja huecos en blanco en los cortos). */
.os-tarifas-tabs .uk-switcher,
.os-tarifas-tabs .uk-switcher > *,
.os-tarifas-tabs .uk-switcher > * > *,
.uk-switcher > *[style*="min-height"] {
  height: auto !important;
  min-height: 0 !important;
}

/* Columnas de texto largo (kitesurf, lancha) */
.os-tabla-kite tbody td:nth-child(2),
.os-tabla-compacta tbody td:nth-child(2),
.os-tabla td.os-span {
  font-weight: 400;
  min-width: 220px;
  text-align: left;
  white-space: normal;
}

.os-tabla td.os-span {
  background: var(--os-green-soft) !important;
  text-align: center;
}

/* Tablas de dos columnas: más estrechas en el ordenador */
@media (min-width: 960px) {
  .os-tabla-2 {
    max-width: 640px;
  }
}

.os-tabla-nota {
  color: var(--os-ink-soft);
  font-size: .875rem;
  margin: 8px 0 0;
}

.os-tabla-nota + .os-tabla-wrap {
  margin-top: 32px;
}

/* Móvil: cada fila, una tarjeta con los precios en columnas */
@media (max-width: 639px) {
  .os-tabla,
  .os-tabla tbody {
    display: block;
    width: 100%;
  }

  .os-tabla caption {
    display: block;
    width: 100%;
  }

  .os-tabla thead {
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .os-tabla tbody tr {
    border: 1px solid var(--os-line);
    border-radius: var(--os-radius-m);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .os-tabla tbody tr > * {
    background: #fff !important;
    border-bottom: 0;
    box-sizing: border-box;
    padding: 10px 8px;
    width: auto;
  }

  .os-tabla tbody th {
    background: var(--os-green-soft) !important;
    flex: 1 1 100%;
    font-size: 1.0625rem;
    padding: 12px 14px;
  }

  .os-tabla tbody td {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    white-space: normal;
  }

  .os-tabla tbody td::before {
    color: var(--os-ink-soft);
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 400;
  }

  /* Textos largos ocupan toda la tarjeta */
  .os-tabla tbody td.os-span,
  .os-tabla-kite tbody td:nth-child(2),
  .os-tabla-compacta tbody td:nth-child(2) {
    align-items: flex-start;
    border-bottom: 1px solid var(--os-line);
    flex: 1 1 100%;
    min-width: 0;
    padding: 10px 14px;
    text-align: left;
  }

  .os-tabla tbody td.os-span {
    align-items: center;
    border-bottom: 0;
    text-align: center;
  }

  /* Tablas de dos columnas: concepto a la izquierda, precio a la derecha */
  .os-tabla-2 tbody tr {
    align-items: center;
    flex-wrap: nowrap;
  }

  .os-tabla-2 tbody th {
    background: #fff !important;
    flex: 1 1 auto;
    font-size: 1rem;
  }

  .os-tabla-2 tbody td {
    flex: 0 0 auto;
  }

  .os-tabla-2 tbody td {
    padding-right: 14px;
  }

  .os-tabla-2 tbody td::before {
    display: none;
  }
}


/* 10. COLORES OLIVA SURF: acentos =========================================
   Azul del logo para la estructura, rojo del logo para las acciones. */

/* Botón principal: rojo (llamada a la acción) */
.uk-button-primary,
.uk-light .uk-button-primary {
  background-color: var(--os-red);
  color: #fff;
}

.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-light .uk-button-primary:hover {
  background-color: var(--os-red-700);
  color: #fff;
}

/* Enlaces de texto en azul mar */
:where(.uk-section, .tm-main) :where(p, td, dd, .el-content li) a:not([class*="uk-button"]):not(:where(.uk-light *)) {
  color: var(--os-sea);
}

/* Detalles en rojo */
.os-razones .el-meta,
.os-caja-meta {
  color: var(--os-red) !important;
}

.os-tarifas-cards > div:nth-child(3) .uk-card,
.os-caja:hover,
.os-cajas .uk-card:hover {
  border-color: var(--os-red) !important;
}

.os-cta {
  border-top-color: var(--os-red);
}

.uk-light .os-pill {
  background: var(--os-red);
}

/* Pie de página en azul del logo */
.uk-section.tm-footer-os,
.tm-footer .uk-section-secondary {
  background: #14244F;
}


/* 11. REGATA EN TODA LA WEB ==============================================
   Adapta los componentes de las páginas interiores (cabeceras, tarjetas,
   cifras, bloque de contacto) al estilo editorial de la home. */

/* Cabeceras de página con foto: degradado azul desde abajo */
.uk-section.uk-background-cover > .uk-position-cover,
.uk-section[style*="background-image"] > .uk-position-cover {
  background: linear-gradient(0deg, rgba(20, 33, 61, .9) 0%, rgba(20, 33, 61, .45) 50%, rgba(20, 33, 61, .1) 85%) !important;
}

.os-display {
  font-family: var(--os-font-display) !important;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1;
}

/* Titulares de sección: serif ligera, azul */
.uk-section :is(h2, .uk-h2) {
  font-weight: 400 !important;
}

.uk-section:not(.uk-light) :is(h2, h3) {
  color: var(--os-navy);
}

/* Etiquetas: texto rojo en negrita, sin cápsula */
.os-pill {
  background: none !important;
  border-radius: 0;
  color: var(--os-red) !important;
  font-family: var(--os-font) !important;
  font-size: .9375rem;
  font-weight: 700;
  padding: 0;
}

.uk-light .os-pill {
  color: rgba(255, 255, 255, .85) !important;
}

/* Tarjetas: borde fino, sin sombra, título serif */
.uk-card-default {
  border: 1px solid var(--os-line);
  border-radius: 4px;
  box-shadow: none;
}

.uk-card-default:hover {
  border-color: var(--os-navy);
}

.uk-card .el-title {
  color: var(--os-navy);
  font-weight: 500 !important;
}

.os-cajas .uk-card-media-top img,
.uk-gallery .el-item,
.uk-section .el-image {
  border-radius: 4px;
}

/* Cifras de todas las páginas: como en la home */
.os-cifras-grid {
  border-top: 2px solid var(--os-navy);
  padding-top: 24px;
}

.os-cifras-grid .el-title {
  color: var(--os-red);
  font-family: var(--os-font-display) !important;
  font-weight: 400 !important;
}

.os-razones .el-meta {
  font-family: var(--os-font-display) !important;
  font-weight: 400;
}

/* Bloque final de contacto: banda azul */
.uk-section.os-cta {
  background: var(--os-navy);
  border-top: 0;
}

.os-cta :is(h2, .uk-h2),
.os-cta .uk-text-lead,
.os-cta > .uk-container > * > * > * > p {
  color: #fff !important;
}

.os-cta .uk-card,
.os-cta .uk-card-default {
  background: #fff;
  border: 0;
}

.os-cta .uk-card :is(.el-title, .el-content, .el-meta, p) {
  color: var(--os-navy) !important;
}

/* Acordeones: títulos en serif */
.uk-accordion-title {
  font-family: var(--os-font-display);
  font-size: 1.25rem;
  font-weight: 500;
}