/* ==========================================================================
   INMERSIÓN INGLESA · Child theme de YOOtheme Pro
   yootheme-inmersion/css/custom.css  (YOOtheme Pro lo carga automáticamente)

   Colores y fuente principales: configurarlos TAMBIÉN en el Style Customizer
   (Lexend se sirve en local desde ahí; este archivo no carga fuentes).

   ÍNDICE
   1. Tokens
   2. Base y accesibilidad
   3. UIkit: botones · cabecera · tarjetas · tablas · acordeón · migas
   4. Blog
   5. Componentes propios (.ii-*)
      5.1 Categorías de actividad
      5.2 Chips y leyenda
      5.3 Cronograma
      5.4 Turnos
      5.5 Tarifas
      5.6 Qué incluye
      5.7 Talleres (elemento Grid)
      5.8 Scroll horizontal
      5.9 Titular grande
      5.10 Comparativa (tabla que se apila en móvil)
   6. Movimiento reducido
   7. Verde Playa Oliva: secciones, cifras, ventajas, pestañas, CTA
   8. WhatsApp: botón flotante
   9. Área de familias: listado, página del turno y formulario de contraseña
   10. Contacto: tarjetas de canales (página Presupuesto)
   ========================================================================== */


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

:root {
  /* Marca */
  --ii-navy: #012169;        /* azul Union Jack: títulos, cabecera, pie */
  --ii-navy-600: #0A2D7A;
  --ii-red: #C8102E;         /* rojo Union Jack: acción principal */
  --ii-red-700: #A50D26;
  --ii-olive: #90B160;       /* verde Playa Oliva: solo fondos/tintes */
  --ii-olive-600: #6E9440;   /* iconos sobre blanco (contraste 3.5:1) */
  --ii-olive-ink: #4E6B2A;   /* texto verde sobre blanco */
  --ii-white: #FFFFFF;       /* blanco */

  /* Neutros (fríos, nada de crema) */
  --ii-ink: #1B2440;
  --ii-muted: #5A6583;
  --ii-mist: #F2F6FA;
  --ii-line: #D8E0EC;
  --ii-field: #7D8BA6;       /* borde del campo de contraseña (contraste 3.4:1) */

  /* Categorías de actividad (cronograma, chips, leyenda) */
  --ii-cat-lengua: #D4A017;
  --ii-cat-escena: #D6336C;
  --ii-cat-media: #7048E8;
  --ii-cat-ciencia: #0CA678;
  --ii-cat-aire: #F76707;
  --ii-cat-taller: #9C6644;
  --ii-cat-visita: #1C7ED6;
  --ii-cat-premio: #C8102E;

  /* Forma y medida */
  --ii-radius-s: 6px;
  --ii-radius-m: 12px;
  --ii-measure: 68ch;
}


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

::selection {
  background: var(--ii-navy);
  color: #fff;
}

h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
  text-wrap: balance;
}

/* Títulos: Lexend, azul marino y con peso, sea cual sea el estilo base.
   En secciones oscuras (.uk-light) UIkit los pasa a blanco automáticamente. */
h1, h2, h3, h4,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
  color: var(--ii-navy);
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.01em;
}

h1, h2, .uk-h1, .uk-h2,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
  font-weight: 700;
}

h3, h4, .uk-h3, .uk-h4 {
  font-weight: 600;
}

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

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

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

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


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

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

/* Primario: rojo siempre, también sobre fondos oscuros */
.uk-button-primary,
.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary {
  background-color: var(--ii-red);
  border-color: transparent;
  color: #fff;
}

.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-light .uk-button-primary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover {
  background-color: var(--ii-red-700);
  color: #fff;
}

/* Secundario: azul marino (sobre fondo claro) */
.uk-button-secondary {
  background-color: var(--ii-navy);
  border-color: transparent;
  color: #fff;
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background-color: var(--ii-navy-600);
  color: #fff;
}

/* Default: contorno azul (borde con sombra interior para no cambiar la altura) */
.uk-button-default {
  background-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--ii-navy);
  color: var(--ii-navy);
}

.uk-button-default:hover,
.uk-button-default:focus {
  background-color: var(--ii-navy);
  border-color: transparent;
  color: #fff;
}

.uk-light .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px #fff;
  color: #fff;
}

.uk-light .uk-button-default:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover {
  background-color: #fff;
  color: var(--ii-navy);
}

/* Cabecera y menú
   Sin depender de .tm-header y con !important en lo esencial: el estilo base
   (Oakville) usa selectores más fuertes. Las zonas oscuras (.uk-light, p. ej.
   el enlace "Familias" sobre la foto) no se tocan. */
.uk-navbar-container:not(.uk-navbar-transparent):not(:where(.uk-light *)) {
  background: #fff;
}

/* Menú agrupado y centrado (en vez de repartido a todo el ancho) */
.uk-navbar-justify .uk-navbar-nav {
  column-gap: clamp(16px, 2.2vw, 36px);
  justify-content: center;
}

.uk-navbar-justify .uk-navbar-nav > li {
  flex-grow: 0 !important;
}

/* Enlaces: azul marino y en negrita */
.uk-navbar-nav > li > a:not(:where(.uk-light *)) {
  color: var(--ii-navy) !important;
  font-size: .9375rem;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
}

.uk-navbar-nav > li > a:not(:where(.uk-light *)):hover,
.uk-navbar-nav > li > a[aria-expanded="true"]:not(:where(.uk-light *)) {
  color: var(--ii-red) !important;
}

/* Página activa: subrayado rojo */
.uk-navbar-nav > li.uk-active > a:not(:where(.uk-light *)) {
  text-decoration: underline;
  text-decoration-color: var(--ii-red);
  text-decoration-thickness: 3px;
  text-underline-offset: .55em;
}

/* Botón del menú: clase ii-menu-cta en el elemento "Pedir presupuesto"
   (Apariencia → Menús → Opciones de pantalla → Clases CSS) */
.uk-navbar-nav > li.ii-menu-cta {
  align-items: center;
  display: flex;
  margin-left: 12px;
}

.uk-navbar-nav > li.ii-menu-cta > a {
  align-self: center;
  background: var(--ii-red) !important;
  border-radius: var(--ii-radius-s);
  color: #fff !important;
  height: 42px;
  min-height: 0 !important;
  padding: 0 18px !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}

.uk-navbar-nav > li.ii-menu-cta > a:hover {
  background: var(--ii-red-700) !important;
  color: #fff !important;
}

/* Submenú: tarjeta blanca con aire y opciones como botones suaves */
.uk-navbar-dropdown {
  background: #fff !important;
  border: 1px solid var(--ii-line) !important;
  border-radius: var(--ii-radius-m) !important;
  box-shadow: 0 14px 40px rgba(1, 33, 105, .14) !important;
  min-width: 250px;
  padding: 8px !important;
  width: auto !important;
}

.uk-navbar-dropdown-nav > li > a {
  border-radius: var(--ii-radius-s);
  color: var(--ii-navy) !important;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 10px 12px !important;
  text-transform: none;
  transition: background-color .15s ease;
}

.uk-navbar-dropdown-nav > li + li {
  margin-top: 2px !important;
}

.uk-navbar-dropdown-nav > li > a:hover {
  background: var(--ii-mist) !important;
  color: var(--ii-navy) !important;
}

.uk-navbar-dropdown-nav > li.uk-active > a {
  background: #EEF4E6 !important;
  font-weight: 600;
}

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

.uk-card-default {
  background-color: #fff;
  border: 1px solid var(--ii-line);
  box-shadow: none;
  color: var(--ii-ink);
}

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

/* Tablas: cabeceras sin mayúsculas */
.uk-table th {
  color: var(--ii-navy);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

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

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

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

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

.uk-accordion-title:hover {
  color: var(--ii-red);
}

.uk-accordion-content {
  margin-top: 12px;
}

.uk-accordion-content > :last-child {
  margin-bottom: 0;
}

/* Migas de pan */
.uk-breadcrumb > * > * {
  color: var(--ii-muted);
}

.uk-breadcrumb > :last-child > * {
  color: var(--ii-navy);
}


/* 4. BLOG ================================================================ */

.single-post .uk-article {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.single-post .uk-article :where(p, ul, ol, blockquote, h2, h3, h4) {
  max-width: var(--ii-measure);
}

.single-post .uk-article :where(h2, h3) {
  margin-top: 2em;
}

.single-post .uk-article img {
  border-radius: var(--ii-radius-m);
}

.single-post .uk-article blockquote {
  border-left: 4px solid var(--ii-olive);
  color: var(--ii-navy);
  font-style: normal;
  padding-left: 1.25em;
}

.single-post .uk-article figcaption,
.wp-element-caption {
  color: var(--ii-muted);
  font-size: .875rem;
  margin-top: .5em;
}

.uk-article-meta {
  color: var(--ii-muted);
  font-size: .875rem;
}

.uk-article-meta a {
  color: inherit;
}

.uk-article-title a:hover {
  color: var(--ii-red);
  text-decoration: none;
}

.wp-block-gallery img {
  border-radius: var(--ii-radius-s);
}


/* 5. COMPONENTES PROPIOS ================================================= */

/* 5.1 Categorías de actividad
   Se combinan con .ii-chip, .ii-act y la leyenda.
   Ej.: <span class="ii-chip ii-cat-escena">Theatre</span> */
.ii-cat-lengua  { --ii-c: var(--ii-cat-lengua); }
.ii-cat-escena  { --ii-c: var(--ii-cat-escena); }
.ii-cat-media   { --ii-c: var(--ii-cat-media); }
.ii-cat-ciencia { --ii-c: var(--ii-cat-ciencia); }
.ii-cat-aire    { --ii-c: var(--ii-cat-aire); }
.ii-cat-taller  { --ii-c: var(--ii-cat-taller); }
.ii-cat-visita  { --ii-c: var(--ii-cat-visita); }
.ii-cat-premio  { --ii-c: var(--ii-cat-premio); }


/* 5.2 Chips y leyenda */
.ii-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ii-chip {
  align-items: center;
  background: var(--ii-mist);
  background: color-mix(in srgb, var(--ii-c, var(--ii-muted)) 14%, #fff);
  border-radius: var(--ii-radius-s);
  box-shadow: inset 4px 0 0 var(--ii-c, var(--ii-muted));
  color: var(--ii-ink);
  display: inline-flex;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 6px 12px 6px 14px;
}

.ii-grupo + .ii-grupo {
  margin-top: 24px;
}

.ii-grupo-title {
  color: var(--ii-navy);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.ii-legend {
  color: var(--ii-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  gap: 6px 18px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.ii-legend > li {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.ii-legend > li::before {
  background: var(--ii-c, var(--ii-muted));
  border-radius: 4px;
  content: "";
  flex: none;
  height: 14px;
  width: 14px;
}


/* 5.3 Cronograma (tabla dentro de .ii-scroll) */
.ii-timetable {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: .875rem;
  line-height: 1.25;
  min-width: 760px;
  table-layout: fixed;   /* columnas de día iguales */
  width: 100%;
}

.ii-timetable thead th:first-child {
  width: 96px;
}

.ii-timetable thead th {
  background: var(--ii-navy);
  border-radius: var(--ii-radius-s);
  color: #fff;
  font-weight: 600;
  padding: 10px 8px;
  text-align: center;
}

.ii-timetable thead th:first-child {
  background: transparent;
  color: var(--ii-muted);
  font-weight: 500;
  text-align: left;
}

.ii-timetable tbody th {
  background: #fff;
  color: var(--ii-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  left: 0;
  padding: 10px 10px 10px 4px;
  position: sticky;
  text-align: left;
  white-space: nowrap;
  z-index: 1;
}

.ii-timetable td {
  border-radius: var(--ii-radius-s);
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
}

.ii-act {
  background: var(--ii-mist);
  background: color-mix(in srgb, var(--ii-c, var(--ii-muted)) 16%, #fff);
  box-shadow: inset 4px 0 0 var(--ii-c, var(--ii-muted));
  color: var(--ii-ink);
  font-weight: 600;
}

.ii-act small {
  color: var(--ii-muted);
  display: block;
  font-size: .75rem;
  font-weight: 400;
  margin-top: 2px;
}

.ii-rutina {
  background: var(--ii-mist);
  color: var(--ii-muted);
}

.ii-vacio {
  background: transparent;
}


/* 5.4 Turnos */
.ii-turnos {
  display: grid;
  gap: 32px;             /* un periodo debajo de otro */
}

.ii-mes-title {
  color: var(--ii-navy);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
}

.ii-turnos-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ii-turno {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ii-line);
  border-radius: var(--ii-radius-m);
  display: grid;
  gap: 12px;
  grid-template-columns: 44px 1fr auto;
  padding: 8px 12px 8px 8px;
}

.ii-turno-letra {
  background: var(--ii-navy);
  border-radius: var(--ii-radius-s);
  color: #fff;
  display: grid;
  font-size: 1.25rem;
  font-weight: 700;
  height: 44px;
  place-items: center;
  width: 44px;
}

.ii-turno-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ii-turno-fechas {
  color: var(--ii-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ii-turno-nivel {
  align-self: flex-start;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  padding: 2px 8px;
}

.ii-turno-nivel.is-primaria {
  background: #EEF4E6;
  color: var(--ii-olive-ink);
}

.ii-turno-nivel.is-eso {
  background: #E7ECF6;
  color: var(--ii-navy);
}

.ii-turno-estado {
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
}

.ii-turno.is-ultimas .ii-turno-estado {
  background: #FBE7EA;
  color: var(--ii-red-700);
}

.ii-turno.is-completo {
  background: var(--ii-mist);
}

.ii-turno.is-completo .ii-turno-letra {
  background: var(--ii-line);
  color: var(--ii-muted);
}

.ii-turno.is-completo .ii-turno-fechas {
  color: var(--ii-muted);
}

.ii-turno.is-completo .ii-turno-estado {
  background: #E3E8F0;
  color: var(--ii-muted);
}

/* Móvil: turnos en 2 columnas (1 en pantallas muy estrechas) */
@media (max-width: 639px) {
  .ii-turnos {
    gap: 24px;
  }

  .ii-turnos-list {
    grid-template-columns: 1fr 1fr;
  }

  .ii-turno {
    gap: 10px;
    grid-template-columns: 36px 1fr;
    padding: 6px 8px 6px 6px;
  }

  .ii-turno-letra {
    font-size: 1.0625rem;
    height: 36px;
    width: 36px;
  }

  .ii-turno-fechas {
    font-size: .875rem;
  }

  .ii-turno-estado {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 374px) {
  .ii-turnos-list {
    grid-template-columns: 1fr;
  }
}


/* 5.5 Tarifas */
.ii-tarifas table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.ii-tarifas caption {
  caption-side: top;
  color: var(--ii-navy);
  font-weight: 600;
  padding-bottom: 12px;
  text-align: left;
}

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

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

.ii-tarifas thead th {
  border-bottom: 2px solid var(--ii-navy);
  color: var(--ii-muted);
  font-size: .875rem;
  font-weight: 600;
}

.ii-tarifas tbody th {
  color: var(--ii-ink);
  font-weight: 500;
}

.ii-tarifas td {
  color: var(--ii-navy);
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
}

.ii-tarifas .is-destacado {
  background: #EEF4E6;
}

.ii-tarifas thead .is-destacado {
  color: var(--ii-olive-ink);
}

.ii-nota {
  color: var(--ii-muted);
  font-size: .875rem;
  margin-top: 12px;
}

@media (max-width: 639px) {
  .ii-tarifas th,
  .ii-tarifas td {
    padding: 12px 8px;
  }

  .ii-tarifas td {
    font-size: 1rem;
    white-space: normal;   /* los precios llevan &nbsp; y no se parten */
  }
}


/* 5.6 Qué incluye (lista con check verde) */
.ii-incluye {
  display: grid;
  gap: 12px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ii-incluye > li {
  padding-left: 34px;
  position: relative;
}

.ii-incluye > li::before {
  background: var(--ii-olive-600) 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 / 14px no-repeat;
  border-radius: 50%;
  content: "";
  height: 22px;
  left: 0;
  position: absolute;
  top: .1em;
  width: 22px;
}

.ii-incluye strong {
  color: var(--ii-navy);
}

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


/* 5.7 Talleres: clase ii-talleres en el elemento Grid o Slider de YOOtheme */

/* Tarjeta: fondo blanco y padding aunque YOOtheme no añada uk-card-body */
.ii-talleres .uk-card-default:not(.uk-card-body):not(:has(.uk-card-body)) {
  padding: 22px 24px;
}

/* Si la tarjeta lleva foto arriba, la foto sigue a sangre */
.ii-talleres .uk-card-default:not(.uk-card-body):not(:has(.uk-card-body)) > .uk-card-media-top,
.ii-talleres .uk-card-default:not(.uk-card-body):not(:has(.uk-card-body)) > img:first-child {
  margin: -22px -24px 18px;
  max-width: none;
  width: calc(100% + 48px);
}

.ii-talleres .el-title {
  color: var(--ii-navy);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.ii-talleres .el-meta {
  background: #EEF4E6;
  border-radius: var(--ii-radius-s);
  color: var(--ii-olive-ink);
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 8px !important;
  padding: 3px 10px;
  text-transform: none;
}

.ii-talleres .el-content {
  color: var(--ii-ink);
  margin-top: 12px !important;
}

.ii-talleres .el-content > :last-child {
  margin-bottom: 0;
}

/* Filtro (Todos · Aire libre · Ciencia…): botones compactos con los colores de marca */
.ii-talleres .el-nav,
.ii-talleres .uk-tab,
.ii-talleres .uk-subnav {
  gap: 6px;
  margin-left: 0;
}

.ii-talleres .uk-tab::before {
  display: none;
}

.ii-talleres :is(.el-nav, .uk-tab, .uk-subnav) > * {
  padding-left: 0;
}

.ii-talleres :is(.el-nav, .uk-tab, .uk-subnav) > * > a {
  background: #F1F3F5;
  border: 0;
  border-radius: var(--ii-radius-s);
  color: var(--ii-ink);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 14px;
  text-transform: none;
}

.ii-talleres :is(.el-nav, .uk-tab, .uk-subnav) > * > a:hover {
  background: #E5E8EC;
  color: var(--ii-navy);
}

.ii-talleres :is(.el-nav, .uk-tab, .uk-subnav) > .uk-active > a,
.ii-talleres :is(.el-nav, .uk-tab, .uk-subnav) > .uk-active > a:hover {
  background: var(--ii-navy);
  color: #fff;
}


/* 5.8 Scroll horizontal (tablas anchas en móvil) */
.ii-scroll {
  background: #fff;
  border: 1px solid var(--ii-line);
  border-radius: var(--ii-radius-m);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px;
}

.ii-scroll-hint {
  color: var(--ii-muted);
  display: none;
  font-size: .8125rem;
  margin: 8px 0 0;
}

@media (max-width: 959px) {
  .ii-scroll-hint {
    display: block;
  }
}


/* 5.9 Titular grande (hero) */
.ii-display {
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}


/* 5.10 COMPARATIVA ======================================================= */
/* Tabla de texto. En escritorio, tabla; en móvil, una tarjeta por fila.
   Cada <td> lleva data-label con el nombre de su columna. */
.ii-comparativa table {
  border-collapse: collapse;
  width: 100%;
}

.ii-comparativa caption {
  caption-side: top;
  color: var(--ii-navy);
  font-weight: 600;
  padding-bottom: 12px;
  text-align: left;
}

.ii-comparativa th,
.ii-comparativa td {
  border-bottom: 1px solid var(--ii-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.ii-comparativa thead th {
  border-bottom: 2px solid var(--ii-navy);
  color: var(--ii-muted);
  font-size: .875rem;
  font-weight: 600;
}

.ii-comparativa tbody th {
  color: var(--ii-navy);
  font-weight: 600;
  width: 22%;
}

.ii-comparativa td {
  color: var(--ii-ink);
}

.ii-comparativa .is-destacado {
  background: #EEF4E6;
  color: var(--ii-navy);
  font-weight: 600;
}

.ii-comparativa thead .is-destacado {
  color: var(--ii-olive-ink);
}

@media (max-width: 639px) {
  .ii-comparativa thead {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .ii-comparativa table,
  .ii-comparativa caption,
  .ii-comparativa tbody,
  .ii-comparativa tr,
  .ii-comparativa th,
  .ii-comparativa td {
    display: block;
    width: auto;
  }

  .ii-comparativa tbody tr {
    background: #fff;
    border: 1px solid var(--ii-line);
    border-radius: var(--ii-radius-m);
    margin-bottom: 12px;
    overflow: hidden;
  }

  .ii-comparativa tbody th {
    background: var(--ii-mist);
    padding: 10px 14px;
    width: auto;
  }

  .ii-comparativa td {
    border-bottom: 0;
    padding: 10px 14px;
  }

  .ii-comparativa td + td {
    border-top: 1px solid var(--ii-line);
  }

  .ii-comparativa td::before {
    color: var(--ii-muted);
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: 2px;
  }

  .ii-comparativa td.is-destacado::before {
    color: var(--ii-olive-ink);
  }
}


/* 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. VERDE PLAYA OLIVA (#90B160) ========================================= */
/* Texto sobre verde: siempre azul marino (contraste 6.2:1). Blanco no pasa. */

/* Secciones: añadir la clase en Sección → Avanzado → Clase */
.ii-verde {
  background-color: var(--ii-olive) !important;
  color: var(--ii-navy);
}

.ii-verde :where(h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4, p, li, dt, dd, a:not(.uk-button)) {
  color: var(--ii-navy);
}

.ii-verde-soft {
  background-color: #EEF4E6 !important;
}

/* Etiqueta verde (hero) */
.ii-pill {
  align-items: center;
  background: var(--ii-olive);
  border-radius: 999px;
  color: var(--ii-white);    /* blanco: decisión de diseño */
  display: inline-flex;
  font-size: .875rem;
  font-weight: 600;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
}

/* Cifras (banda verde) */
.ii-cifras {
  display: grid;
  gap: 28px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

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

.ii-cifra dt {
  color: var(--ii-white);
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ii-cifra dd {
  color: var(--ii-navy);
  font-weight: 500;
  margin: 8px 0 0;
  max-width: 22ch;
}

/* Ventajas: clase ii-ventajas en el elemento Grid */
.ii-ventajas .el-item {
  border-left: 4px solid var(--ii-olive);
  padding-left: 20px;
}

.ii-ventajas .el-title {
  color: var(--ii-navy);
}

/* Programas: clase ii-programas en el elemento Switcher */
.ii-programas .uk-tab > * > a {
  border-bottom: 3px solid transparent;
  color: var(--ii-muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ii-programas .uk-tab > .uk-active > a {
  background: var(--ii-navy);
  border-bottom-color: var(--ii-olive);
  border-radius: var(--ii-radius-s) var(--ii-radius-s) 0 0;
  color: var(--ii-white);
}

.ii-programas .uk-tab > * > a:hover {
  color: var(--ii-olive);
}

/* Caja "El precio incluye" */
.ii-incluye-box {
  background: #EEF4E6;
  border-radius: var(--ii-radius-m);
  padding: clamp(20px, 3vw, 36px);
}

.ii-incluye-box h3 {
  color: var(--ii-navy);
  margin-top: 0;
}

/* CTA final: clase ii-cta en la sección */
.ii-cta {
  border-top: 6px solid var(--ii-olive);
}

.ii-cta .ii-pill {
  margin-bottom: 8px;
}


/* 8. WHATSAPP ============================================================ */
/* Botón flotante: va en el footer (HTML), así aparece en todas las páginas */
.ii-wa {
  align-items: center;
  background: #25D366;
  border-radius: 999px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 24px rgba(1, 33, 105, .25);
  color: var(--ii-white) !important;
  display: inline-flex;
  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;
}

.ii-wa:hover,
.ii-wa:focus {
  box-shadow: 0 12px 28px rgba(1, 33, 105, .32);
  color: var(--ii-navy) !important;
  transform: translateY(-2px);
}

/* Móvil: solo icono */
@media (max-width: 639px) {
  .ii-wa {
    padding: 14px;
  }

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

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


/* 9. ÁREA DE FAMILIAS ==================================================== */
/* Sus estilos van dentro de functions.php (se imprimen solo en esas páginas),
   así no dependen de que este archivo esté actualizado o en caché. */


/* 10. CONTACTO (página Presupuesto) ====================================== */
.ii-canal {
  border-top: 4px solid var(--ii-navy);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ii-canal-destacado {
  border-top-color: var(--ii-olive);
}

.ii-canal-icon {
  color: var(--ii-navy);
}

.ii-canal-tag {
  align-self: flex-start;
  background: #EEF4E6;
  border-radius: 999px;
  color: var(--ii-olive-ink);
  font-size: .75rem;
  font-weight: 600;
  margin: 0;
  padding: 2px 10px;
}

.ii-canal .uk-card-title {
  color: var(--ii-navy);
  margin: 4px 0 0;
}

.ii-canal-dato {
  color: var(--ii-ink);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
  overflow-wrap: break-word;
}

.ii-canal .uk-button {
  margin-top: auto;
}