/* ============================================================
   CRESTANEVADA — grid.css
   Sistema de columnas moderno con CSS Grid + Flexbox.
   Nomenclatura: .col-1 a .col-12

   USO BÁSICO:
   <div class="row">
     <div class="col-6">mitad</div>
     <div class="col-6">mitad</div>
   </div>

   ALINEACIÓN VERTICAL (en .row):
   .align-center   → centra verticalmente todos los hijos
   .align-top      → alinea arriba
   .align-bottom   → alinea abajo
   .align-stretch  → estira a la altura máxima (por defecto)

   ALINEACIÓN HORIZONTAL (en .row):
   .justify-start   → hijos al inicio
   .justify-center  → hijos centrados
   .justify-end     → hijos al final
   .justify-between → espacio entre hijos

   GAP:
   .gap-sm   → 1rem entre columnas
   .gap-md   → 2rem entre columnas (por defecto)
   .gap-lg   → 4rem entre columnas
   .gap-none → sin gap

   BREAKPOINTS:
   Mobile first. Por defecto todo ocupa 12 columnas (ancho completo).
   Los modificadores responsivos añaden comportamiento en desktop:
   --bp-md:  768px
   --bp-lg:  992px
   --bp-xl:  1200px
   --bp-xxl: 1366px
   ============================================================ */

/* ── Variables ── */
:root {
  /* Colores */
  --color-black: #000000; /* textos principales */
  --color-blue: #3e85ff; /* acento info / enlaces */
  --color-green: #68bc00; /* estados positivos / etiqueta eco */
  --color-grey: #a3a3a3; /* textos secundarios */
  --color-grey-light: #d9d9d9; /* bordes, separadores */
  --color-red: #e62439; /* color primario de marca */
  --color-bg-light: #f8f8f8; /* fondos de sección */
  --color-red-pale: #fce0e3; /* fondos con tono rojo suave */
  --color-yellow-pale: #fff7ce; /* fondos con tono amarillo suave (hover tarjetas) */
  --color-white: #ffffff; /* blanco puro */
  --color-footer-dark: #383b41; /* borde pie de página */
  --color-red-light: #ff6c7c; /* degradado hover submenú */
  --color-grey-menu: #efefef; /* fondo menú mobile */

  /* ── Tipografía ── */
  --font-family: "Exo", sans-serif;
  --font-base-size: 62.5%; /* 1rem = 10px */

  /* Tamaños */
  --fs-xs: 1.2rem; /* 12px — signboard, detalles mínimos */
  --fs-sm: 1.4rem; /* 14px — textos secundarios, small */
  --fs-base: 1.6rem; /* 16px — body, párrafos, botones */
  --fs-md: 1.9rem; /* 19px — sedes, navegación destacada */
  --fs-nav: clamp(16px, 1.6vw, 16px); /* menú principal fluido */
  --fs-search: clamp(24px, 2.4vw, 24px); /* buscador expandible fluido */
  --fs-h3: 2.1rem; /* 21px */
  --fs-h2: 2.6rem; /* 26px */
  --fs-phone: 2.4rem; /* 24px — teléfono footer */
  --fs-h1: 3.6rem; /* 36px */
  --fs-display: 12rem; /* 120px — puntuación Google Reviews */

  /* Pesos */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Line-height */
  --lh-tight: 1;
  --lh-base: 1.5;
  --lh-relaxed: 1em;

  /* Sombras */
  --shadow-btn: 0 0 8px rgba(99, 99, 99, 0.5);
  --shadow-btn-red: 0 0 8px rgba(224, 17, 17, 0.5);
  --shadow-btn-dark: 0 0 8px rgba(99, 99, 99, 0.9);
  --shadow-card: 0 0 20px 0 rgba(195, 195, 195, 0.5);
  --shadow-line: rgba(0, 0, 0, 0.25);

  /* Grid */
  --grid-columns: 12;
  --grid-gap: 2rem;
  --container-max: 1320px;
  --container-width: 90%;

  /* Breakpoints (solo documentación — usar en media queries directamente) */
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1366px;
}

/* ── Contenedor ── */
.container {
  margin: 0 auto;
  max-width: var(--container-max);
  width: var(--container-width);
  box-sizing: border-box;
}

.index-9 {
  position: relative;
  z-index: 9;
}

.row::after {
    content: "";
    clear: both;
    width: 100%;
    display: block;
}

.row:has(.column) {
    margin-left: -1%; 
    margin-right: -1%;
    display: flex;
}

/* ── Columnas: sistema float (igual que estilos_min.css) ── */
.column {
    margin-left: 1%; 
    margin-right: 1%;
    min-height: 20px;
    box-sizing: border-box;
}

/* Anchos */
:not(.column).full {
  width: 100%;
}
:not(.column).half {
  width: 50%;
}

.column.full {
  width: 100%;
}
.column.half {
  width: calc( 50% - 2% );
}
.column.third,
.column.one-third {
  width: calc( 33.3333% - 2% );
}
.column.two-thirds {
  width: calc( 66.6666% - 2% );
}
.column.one-fourth {
  width: calc( 25% - 2% );
}
.column.two-fourth {
  width: calc( 50% - 2% );
}
.column.tree-fourth {
  width: calc( 75% - 2% );
}
.column.one-fifth {
 width: calc( 20% - 2% );
}
.column.two-fifth {
  width: calc( 40% - 2% );
}
.column.tree-fifth {
  width: calc( 60% - 2% );
}
.column.one-sixth {
  width: calc( 16.6666% - 2% );
}
.column.two-sixth {
  width: calc( 33.3333% - 2% );
}
.column.tree-sixth {
  width: calc( 50% - 2% );
}
.column.fourt-sixth {
  width: calc( 66.6666% - 2% );
}
.column.one-twelfth {
  width: calc(8.3333% - 2%);
}
.column.two-twelfth {
  width: calc( 16.6666% - 2% );
}
.column.tree-twelfth {
  width: calc( 25% - 2% );
}
.column.fourt-twelfth {
  width: calc( 33.3333% - 2% );
}
.column.five-twelfth {
  width: calc( 41.6666% - 2% );
}
.column.six-twelfth {
  width: calc( 50% - 2% );
}
.column.seven-twelfth {
  width: calc( 58.3333% - 2% );
}
.column.eight-twelfth {
  width: calc( 66.6666% - 2% );
}
.column.nine-twelfth {
  width: calc( 74.9999% - 2% );
}
.column.ten-twelfth {
  width: calc( 83.3333% - 2% );
}

@media screen and (max-width: 1600px) {
  .column.full-1600 { width: 100%;  margin-left: 0; }
  .column.half-1600 { width: calc( 50% - 2% ); }
  .column.third-1600,
  .column.one-third-1600 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-1600 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-1600 { width: calc( 25% - 2% ); }
  .column.two-fourth-1600 { width: calc( 50% - 2% ); }
  .column.tree-fourth-1600 { width: calc( 75% - 2% ); }
  .column.one-fifth-1600 {width: calc( 20% - 2% ); }
  .column.two-fifth-1600 { width: calc( 40% - 2% ); }
  .column.tree-fifth-1600 { width: calc( 60% - 2% ); }
  .column.one-sixth-1600 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-1600 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-1600 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-1600 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-1600 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-1600 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-1600 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-1600 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-1600 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-1600 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-1600 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-1600 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-1600 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-1600 { width: calc( 83.3333% - 2% ); }
}

@media screen and (max-width: 1366px) {
  .column.full-1366 { width: 100%;  margin-left: 0; }
  .column.half-1366 { width: calc( 50% - 2% ); }
  .column.third-1366,
  .column.one-third-1366 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-1366 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-1366 { width: calc( 25% - 2% ); }
  .column.two-fourth-1366 { width: calc( 50% - 2% ); }
  .column.tree-fourth-1366 { width: calc( 75% - 2% ); }
  .column.one-fifth-1366 {width: calc( 20% - 2% ); }
  .column.two-fifth-1366 { width: calc( 40% - 2% ); }
  .column.tree-fifth-1366 { width: calc( 60% - 2% ); }
  .column.one-sixth-1366 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-1366 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-1366 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-1366 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-1366 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-1366 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-1366 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-1366 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-1366 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-1366 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-1366 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-1366 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-1366 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-1366 { width: calc( 83.3333% - 2% ); }
}

@media screen and (max-width: 1118px) {
  .column.full-1118 { width: 100%;  margin-left: 0; }
  .column.half-1118 { width: calc( 50% - 2% ); }
  .column.third-1118,
  .column.one-third-1118 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-1118 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-1118 { width: calc( 25% - 2% ); }
  .column.two-fourth-1118 { width: calc( 50% - 2% ); }
  .column.tree-fourth-1118 { width: calc( 75% - 2% ); }
  .column.one-fifth-1118 {width: calc( 20% - 2% ); }
  .column.two-fifth-1118 { width: calc( 40% - 2% ); }
  .column.tree-fifth-1118 { width: calc( 60% - 2% ); }
  .column.one-sixth-1118 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-1118 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-1118 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-1118 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-1118 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-1118 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-1118 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-1118 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-1118 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-1118 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-1118 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-1118 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-1118 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-1118 { width: calc( 83.3333% - 2% ); }
}

@media screen and (max-width: 1025px) {
  .column.full-1025 { width: 100%;  margin-left: 0; }
  .column.half-1025 { width: calc( 50% - 2% ); }
  .column.third-1025,
  .column.one-third-1025 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-1025 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-1025 { width: calc( 25% - 2% ); }
  .column.two-fourth-1025 { width: calc( 50% - 2% ); }
  .column.tree-fourth-1025 { width: calc( 75% - 2% ); }
  .column.one-fifth-1025 {width: calc( 20% - 2% ); }
  .column.two-fifth-1025 { width: calc( 40% - 2% ); }
  .column.tree-fifth-1025 { width: calc( 60% - 2% ); }
  .column.one-sixth-1025 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-1025 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-1025 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-1025 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-1025 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-1025 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-1025 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-1025 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-1025 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-1025 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-1025 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-1025 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-1025 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-1025 { width: calc( 83.3333% - 2% ); }
}

@media screen and (max-width: 834px) {
  .column.full-834 { width: 100%;  margin-left: 0; }
  .column.half-834 { width: calc( 50% - 2% ); }
  .column.third-834,
  .column.one-third-834 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-834 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-834 { width: calc( 25% - 2% ); }
  .column.two-fourth-834 { width: calc( 50% - 2% ); }
  .column.tree-fourth-834 { width: calc( 75% - 2% ); }
  .column.one-fifth-834 {width: calc( 20% - 2% ); }
  .column.two-fifth-834 { width: calc( 40% - 2% ); }
  .column.tree-fifth-834 { width: calc( 60% - 2% ); }
  .column.one-sixth-834 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-834 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-834 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-834 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-834 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-834 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-834 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-834 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-834 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-834 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-834 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-834 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-834 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-834 { width: calc( 83.3333% - 2% ); }
}


/* ── Responsive: mobile — columnas a ancho completo (≤ 640px) ── */
@media screen and (max-width: 590px) {
  .column.eight-twelfth,
  .column.eleven-twelfth,
  .column.five-twelfth,
  .column.fourt-sixth,
  .column.fourt-twelfth,
  .column.full,
  .column.half,
  .column.nine-twelfth,
  .column.one-fifth,
  .column.one-fourth,
  .column.one-sixth,
  .column.one-third,
  .column.seven-twelfth,
  .column.six-twelfth,
  .column.ten-twelfth,
  .column.tree-fifth,
  .column.tree-twelfth,
  .column.two-fifth,
  .column.two-fourth,
  .column.two-thirds,
  .column.two-twelfth,
  .column.third,
  .column.tree-fourth {
    width: 100%;
  }
}


@media screen and (max-width: 590px) {
  .column.full-590 { width: 100%;  margin-left: 0; }
  .column.half-590 { width: calc( 50% - 2% ); }
  .column.third-590,
  .column.one-third-590 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-590 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-590 { width: calc( 25% - 2% ); }
  .column.two-fourth-590 { width: calc( 50% - 2% ); }
  .column.tree-fourth-590 { width: calc( 75% - 2% ); }
  .column.one-fifth-590 {width: calc( 20% - 2% ); }
  .column.two-fifth-590 { width: calc( 40% - 2% ); }
  .column.tree-fifth-590 { width: calc( 60% - 2% ); }
  .column.one-sixth-590 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-590 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-590 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-590 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-590 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-590 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-590 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-590 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-590 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-590 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-590 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-590 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-590 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-590 { width: calc( 83.3333% - 2% ); }
}

@media screen and (max-width: 380px) {
  .column.full-380 { width: 100%;  margin-left: 0; }
  .column.half-380 { width: calc( 50% - 2% ); }
  .column.third-380,
  .column.one-third-380 { width: calc( 33.3333% - 2% ); }
  .column.two-thirds-380 { width: calc( 66.6666% - 2% ); }
  .column.one-fourth-380 { width: calc( 25% - 2% ); }
  .column.two-fourth-380 { width: calc( 50% - 2% ); }
  .column.tree-fourth-380 { width: calc( 75% - 2% ); }
  .column.one-fifth-380 {width: calc( 20% - 2% ); }
  .column.two-fifth-380 { width: calc( 40% - 2% ); }
  .column.tree-fifth-380 { width: calc( 60% - 2% ); }
  .column.one-sixth-380 { width: calc( 16.6666% - 2% ); }
  .column.two-sixth-380 { width: calc( 33.3333% - 2% ); }
  .column.tree-sixth-380 { width: calc( 50% - 2% ); }
  .column.fourt-sixth-380 { width: calc( 66.6666% - 2% ); }
  .column.one-twelfth-380 { width: calc( 8.3333% - 2% ); }
  .column.two-twelfth-380 { width: calc( 16.6666% - 2% ); }
  .column.tree-twelfth-380 { width: calc( 25% - 2% ); }
  .column.fourt-twelfth-380 { width: calc( 33.3333% - 2% ); }
  .column.five-twelfth-380 { width: calc( 41.6666% - 2% ); }
  .column.six-twelfth-380 { width: calc( 50% - 2% ); }
  .column.seven-twelfth-380 { width: calc( 58.3333% - 2% ); }
  .column.eight-twelfth-380 { width: calc( 66.6666% - 2% ); }
  .column.nine-twelfth-380 { width: calc( 74.9999% - 2% ); }
  .column.ten-twelfth-380 { width: calc( 83.3333% - 2% ); }
}

/* Utilidades de float */
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}

.float li {
  float: left;
}
.float::after {
  content: "";
  display: block;
  clear: both;
}

/* ── Alineación de texto ── */
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

.flex {
  display: flex;
  width: 100%;
  align-items: center;
}
.flex:first-child {
  flex: 1;
}

/* ============================================================
   SISTEMA CSS GRID — .row-grid + .col-1 a .col-12
   Para cabecera y casos donde se usa la nomenclatura numérica.

   USO:
   <div class="row-grid">
     <div class="col-8">contenido</div>
     <div class="col-4">sidebar</div>
   </div>

   También funciona con .row si se añade la clase .grid:
   <div class="row grid"> ... </div>
   ============================================================ */

.row-grid,
.row.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  box-sizing: border-box;
}

.gap-0 {
  gap: 0;
}

/* Mobile first: todas las columnas ocupan el ancho completo */
[class*="col-"] {
  grid-column: span 12;
  box-sizing: border-box;
  min-width: 0;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {

  .col-1 {
    grid-column: span 2;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
  }
  .col-5 {
    grid-column: span 5;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-7 {
    grid-column: span 7;
  }
  .col-8 {
    grid-column: span 7;
  }
  .col-9 {
    grid-column: span 9;
  }
  .col-10 {
    grid-column: span 10;
  }
  .col-11 {
    grid-column: span 12;
  }
  .col-12 {
    grid-column: span 12;
  }
}

/* Desktop (≥ 1200px): tamaños reales */
@media (min-width: 1200px) {
  .col-1 {
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
  }
  .col-5 {
    grid-column: span 5;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-7 {
    grid-column: span 7;
  }
  .col-8 {
    grid-column: span 8;
  }
  .col-9 {
    grid-column: span 9;
  }
  .col-10 {
    grid-column: span 10;
  }
  .col-11 {
    grid-column: span 11;
  }
  .col-12 {
    grid-column: span 12;
  }
}

/* Desktop (< 1000px): tamaños reales */
@media (max-width: 1000px) {
        
  .col-1 {
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
  }
  .col-5 {
    grid-column: span 6;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-7 {
    grid-column: span 7;
  }
  .col-8 {
    grid-column: span 8;
  }
  .col-9 {
    grid-column: span 9;
  }
  .col-10 {
    grid-column: span 10;
  }
  .col-11 {
    grid-column: span 11;
  }
  .col-12 {
    grid-column: span 12;
  }
}

/* Desktop (< 1000px): tamaños reales */
@media (max-width: 768px) {
  [class*="col-"] {
    grid-column: span 12;
    box-sizing: border-box;
    min-width: 0;
  }
}

/* Alineación flex */
.flex-wrap-left {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.flex-wrap-right {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.flex-wrap-center {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Alineación vertical (en .row-grid o .row.grid) */
.align-items-center {
  align-items: center;
  margin: auto;
}
.align-items-start {
  align-items: start;
}
.align-items-end {
  align-items: end;
}
.align-items-stretch {
  align-items: stretch;
}

/* Alineación individual de columna */
.self-center {
  align-self: center;
}
.self-top {
  align-self: start;
}
.self-bottom {
  align-self: end;
}
.self-stretch {
  align-self: stretch;
}

/* Alineación horizontal */
.justify-start {
  justify-content: start;
  margin: 0;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: end;
  margin: 0 0 0 auto;
}
.justify-between {
  justify-content: space-between;
}

/* Gap */
.gap-none {
  gap: 0;
}
.gap-sm {
  gap: 1rem;
}
.gap-md {
  gap: 2rem;
}
.gap-lg {
  gap: 4rem;
}

/* ── Visibilidad ── */
.only-desktop {
  display: none;
}
.only-mobile {
  display: block;
}

@media (min-width: 768px) {
  .only-desktop {
    display: block;
  }
  .only-mobile {
    display: none;
  }
}

/* Menú hamburguesa */
.nav-collapsible {
  display: none;
}
.nav-collapsible.show {
  display: flex;
}

@media (min-width: 1367px) {
  .hamburger {
    display: none;
  }
  .nav-collapsible {
    display: flex;
  }
}

/* Label accesible oculto visualmente */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Espaciado ── */
.sp-top-025 {
  margin-top: 0.25rem;
}
.sp-top-05 {
  margin-top: 0.5rem;
}
.sp-top-1 {
  margin-top: 1rem;
}
.sp-top-15 {
  margin-top: 1.5rem;
}
.sp-top-3 {
  margin-top: 3rem;
}

.sp-bottom-025 {
  margin-bottom: 0.25rem;
}
.sp-bottom-05 {
  margin-bottom: 0.5rem;
}
.sp-bottom-1 {
  margin-bottom: 1rem;
}
.sp-bottom-15 {
  margin-bottom: 1.5rem;
}
.sp-bottom-3 {
  margin-bottom: 3rem;
}

.sp-left-025 {
  margin-left: 0.25rem;
}
.sp-left-05 {
  margin-left: 0.5rem;
}
.sp-left-1 {
  margin-left: 1rem;
}
.sp-left-15 {
  margin-left: 1.5rem;
}
.sp-left-3 {
  margin-left: 3rem;
}

.pad-top-025 {
  padding-top: 0.25rem;
}
.pad-top-05 {
  padding-top: 0.5rem;
}
.pad-top-1 {
  padding-top: 1rem;
}
.pad-top-15 {
  padding-top: 1.5rem;
}
.pad-top-3 {
  padding-top: 3rem;
}

.pad-bottom-025 {
  padding-bottom: 0.25rem;
}
.pad-bottom-05 {
  padding-bottom: 0.5rem;
}
.pad-bottom-1 {
  padding-bottom: 1rem;
}
.pad-bottom-15 {
  padding-bottom: 1.5rem;
}
.pad-bottom-3 {
  padding-bottom: 3rem;
}

.pad-left-025 {
  padding-left: 0.25rem;
}
.pad-left-05 {
  padding-left: 0.5rem;
}
.pad-left-1 {
  padding-left: 1rem;
}
.pad-left-15 {
  padding-left: 1.5rem;
}
.pad-left-3 {
  padding-left: 3rem;
}

.pad-right-025 {
  padding-right: 0.25rem;
}
.pad-right-05 {
  padding-right: 0.5rem;
}
.pad-right-1 {
  padding-right: 1rem;
}
.pad-right-15 {
  padding-right: 1.5rem;
}
.pad-right-3 {
  padding-right: 3rem;
}

.padding-1 {
  padding: 1rem;
}
.padding-3 {
  padding: 3rem;
}

.margin-right {
  margin-right: 10px;
}
.margin-0 {
  margin: 0;
}

/* ── Hover ── */
.h-opacity:hover {
  opacity: 0.6;
}
.h-cursor:hover {
  cursor: pointer;
}