@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");
/* ==========================================================================
   GRAN MANTRA · BASE COMPARTIDA (inicio, capacitación y lotificación)
   Lo que tiene que verse igual en las tres páginas: color, tipografía,
   dorado, botones e íconos. Cada página carga este archivo antes del suyo.

   01 Tokens · 02 Tipografía · 03 Dorado · 04 Botones · 05 Íconos · 06 Píldoras
   ========================================================================== */

/* Títulos: Cormorant Garamond (serif clásica, cercana a las letras del logo), en mayúsculas con aire.
   Texto, cifras, datos y botones: Montserrat. Ni Faktum ni Maharlika (Maharlika es de Akumal). */

/* 01 · TOKENS (manual de identidad GM RC) */
:root{
  --gm-navy:#152486;          /* principal */
  --gm-navy-2:#24389E;
  --gm-noche:#0E1540;         /* fondos oscuros */
  --gm-petroleo:#00263C;
  --gm-bronce:#B78350;        /* principal degradado */
  --gm-bronce-dk:#8A5A2B;     /* bronce para texto chico sobre claro */
  --gm-oro-claro:#E2C29A;
  --gm-crema:#EFE8DA;         /* acento y fondo claro */
  --gm-papel:#FBF8F2;
  --gm-arena:#F3EDE1;
  --gm-niebla:#EDEFF6;
  --gm-tinta:#1B2540;
  --gm-tinta-suave:rgba(27,37,64,.72);
  --gm-linea:rgba(27,37,64,.12);
  --gm-linea-oro:rgba(183,131,80,.45);

  --gm-display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --gm-texto:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* El dorado: un degradado con brillo al centro. Para fondos y texto grande. */
  --gm-oro:linear-gradient(115deg,#9A6A3B 0%,#C08E59 26%,#F0DAB2 50%,#C08E59 74%,#9A6A3B 100%);
  /* Dorado oscuro: para texto sobre fondos claros, sin perder lectura */
  --gm-oro-texto-claro:linear-gradient(100deg,#7E5226,#A87644 45%,#C4935D 60%,#7E5226);
  /* Dorado claro: para texto sobre fondos oscuros */
  --gm-oro-texto-oscuro:linear-gradient(100deg,#D4A86F,#F4E2C0 45%,#E2C29A 60%,#C99A64);

  --gm-radio:18px;
  --gm-radio-chico:12px;
  --gm-sombra:0 22px 50px -24px rgba(14,21,64,.35);
  --gm-sombra-suave:0 10px 30px -18px rgba(14,21,64,.3);
}

/* 02 · TIPOGRAFÍA */
.gm-titulo{font-family:var(--gm-display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;line-height:1.05;text-wrap:balance;margin:0}
.gm-sub{font-family:var(--gm-texto);font-weight:600;letter-spacing:.005em;line-height:1.3;margin:0}
.gm-rotulo{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 12px/1 var(--gm-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--gm-bronce-dk)}
.gm-rotulo::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.gm-oscuro .gm-rotulo,.gm-rotulo--claro{color:var(--gm-oro-claro)}
/* La Q mayúscula de Cormorant tiene una cola larga que se lee como subrayado bajo «QUÉ» o «QUE».
   En los títulos cada Q va en <span class="gm-q"> (lo hace el builder) y aquí se le recorta la cola al ancho de la letra.
   El detalle de los títulos va en la palabra clave (.gm-dorado: cursiva en bronce), no en un trazo bajo la frase. */
.gm-qw{white-space:nowrap}
.gm-q{display:inline-block;line-height:1;-webkit-clip-path:inset(-.6em 0 -.09em -.2em);clip-path:inset(-.6em 0 -.09em -.2em)}

/* 03 · DORADO */
/* El degradado dorado se reserva para botones y cifras clave (.gm-dorado--brillo).
   El acento de los títulos es bronce liso en cursiva, sin brillo. */
.gm-dorado{color:var(--gm-bronce-dk);font-style:italic;text-transform:none;letter-spacing:.01em}
.gm-oscuro .gm-dorado,.gm-dorado--claro{color:var(--gm-oro-claro)}
.gm-dorado--brillo{background:var(--gm-oro-texto-claro);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.gm-oscuro .gm-dorado--brillo{background:var(--gm-oro-texto-oscuro);-webkit-background-clip:text;background-clip:text;color:transparent}
.gm-linea-oro{display:block;width:72px;height:1px;border:0;margin:0;background:var(--gm-bronce)}

/* 04 · BOTONES · una sola forma (cápsula), siempre en mayúsculas */
.gm-btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:700 12.5px/1 var(--gm-texto);letter-spacing:.16em;text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease,background-position .6s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
.gm-btn .gm-ico{width:18px;height:18px;stroke-width:1.6}
.gm-btn:focus-visible{outline:2px solid var(--gm-bronce);outline-offset:3px}
.gm-btn--oro{color:var(--gm-noche);background:var(--gm-oro);background-size:220% 100%;background-position:0 0;box-shadow:0 14px 30px -14px rgba(138,90,43,.75),inset 0 1px 0 rgba(255,255,255,.45)}
.gm-btn--linea{color:inherit;background:transparent;border-color:var(--gm-linea-oro)}
.gm-btn--claro{color:var(--gm-navy);background:#fff;box-shadow:var(--gm-sombra-suave)}
.gm-btn--navy{color:#fff;background:var(--gm-navy);box-shadow:0 14px 30px -16px rgba(21,36,134,.8)}
.gm-btn--chico{--h:40px;padding:0 18px;font-size:11px;letter-spacing:.14em}
.gm-btn[disabled],.gm-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none!important}
@media (hover:hover){
  .gm-btn:hover{transform:translateY(-2px)}
  .gm-btn--oro:hover{background-position:100% 0;box-shadow:0 18px 34px -14px rgba(138,90,43,.85),inset 0 1px 0 rgba(255,255,255,.5)}
  .gm-btn--linea:hover{border-color:var(--gm-bronce);background:rgba(183,131,80,.08)}
  .gm-btn--claro:hover{background:var(--gm-papel)}
  .gm-btn--navy:hover{background:var(--gm-navy-2)}
}

/* 05 · ÍCONOS · línea fina y elegante */
.gm-ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* Ícono en círculo: el formato para fichas y datos */
.gm-ico-circ{display:inline-grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;color:var(--gm-bronce-dk);
  background:radial-gradient(circle at 30% 25%,#fff,var(--gm-papel));border:1px solid var(--gm-linea-oro)}
.gm-ico-circ .gm-ico{width:24px;height:24px}
.gm-oscuro .gm-ico-circ{color:var(--gm-oro-claro);background:rgba(255,255,255,.06);border-color:rgba(226,194,154,.4)}

/* 06 · PÍLDORAS */
.gm-pildora{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:600 12.5px/1.2 var(--gm-texto);
  color:var(--gm-navy);background:#fff;border:1px solid var(--gm-linea)}
.gm-pildora .gm-ico{width:16px;height:16px;color:var(--gm-bronce)}
.gm-oscuro .gm-pildora{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

@media (prefers-reduced-motion:reduce){.gm-btn{transition:none}}

/* 07 · BARRA SUPERIOR (igual en las tres páginas; marcado en fuente/barra.html)
   Clara, con el logo a color. Lotificación lleva una flecha de «se abre aparte»;
   Capacitación va con contorno dorado e ícono propio porque es interna. */
.gm-barra{position:fixed;inset:0 0 auto 0;z-index:100;height:72px;display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:0 clamp(16px,3.5vw,40px);background:rgba(251,248,242,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gm-linea);font-family:var(--gm-texto);transition:box-shadow .25s ease}
.gm-barra::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gm-linea-oro)}
.gm-barra--sombra{box-shadow:0 10px 30px -18px rgba(14,21,64,.4)}
.gm-barra__marca{display:flex;align-items:center;flex:none}
.gm-barra__marca img{height:50px;width:auto;display:block}
.gm-barra__nav{display:flex;align-items:center;gap:clamp(4px,1.2vw,14px);margin-left:auto}
.gm-barra__nav a{display:inline-flex;align-items:center;gap:7px;padding:10px 6px;border-bottom:2px solid transparent;text-decoration:none;
  font:600 12px/1 var(--gm-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--gm-tinta);white-space:nowrap}
.gm-barra__nav a .gm-ico{width:16px;height:16px;stroke-width:1.6;color:var(--gm-bronce)}
.gm-barra__nav a[aria-current="true"],.gm-barra__nav a[aria-current="page"]{color:var(--gm-navy);border-bottom-color:var(--gm-bronce)}
/* Masterplan: botón de línea (cápsula navy), igual que los botones del sitio */
.gm-barra__nav a.gm-barra__btn{padding:10px 18px;border:1.5px solid rgba(21,36,134,.45);border-radius:999px;color:var(--gm-navy);transition:background-color .25s,color .25s,border-color .25s}
.gm-barra__nav a.gm-barra__btn[aria-current]{background:var(--gm-navy);border-color:var(--gm-navy);color:#fff}
.gm-barra__nav a.gm-barra__cap{margin-left:6px;padding:10px 16px;border:1.5px solid var(--gm-bronce);border-radius:999px;color:var(--gm-bronce-dk)}
.gm-barra__nav a.gm-barra__cap[aria-current]{background:var(--gm-oro);color:var(--gm-noche);border-color:transparent}
.gm-barra__menu{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--gm-navy);cursor:pointer;align-items:center;justify-content:center}
.gm-barra__menu .gm-ico{width:26px;height:26px}
@media (hover:hover){
  .gm-barra__nav a:hover{color:var(--gm-navy);border-bottom-color:var(--gm-linea-oro)}
  .gm-barra__nav a.gm-barra__cap:hover{background:rgba(183,131,80,.1)}
  .gm-barra__nav a.gm-barra__btn:hover{border-color:var(--gm-navy);background:rgba(21,36,134,.06)}
  .gm-barra__nav a.gm-barra__btn[aria-current]:hover{background:var(--gm-navy-2)}
}
@media (max-width:1080px){
  .gm-barra{height:64px}
  .gm-barra__marca img{height:42px}
  .gm-barra__menu{display:inline-flex}
  .gm-barra__nav{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;background:var(--gm-papel);
    border-bottom:1px solid var(--gm-linea);box-shadow:0 20px 40px -20px rgba(14,21,64,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s}
  .gm-barra__nav.abierto{transform:none;opacity:1;visibility:visible}
  .gm-barra__nav a{padding:15px 4px;border-bottom:1px solid var(--gm-linea)}
  .gm-barra__nav a.gm-barra__btn{margin:12px 0 0;justify-content:center;border-bottom:1.5px solid rgba(21,36,134,.45)}
  .gm-barra__nav a.gm-barra__btn[aria-current]{border-bottom-color:var(--gm-navy)}
  .gm-barra__nav a.gm-barra__cap{margin:12px 0 0;justify-content:center}
}

/* 08 · IDIOMA · botón ESP/ENG (lo pone fuente/ingles/ingles.py en las páginas en español y en inglés).
   Cápsula partida: el idioma actual va relleno; toda la cápsula lleva a la otra versión, en la misma sección. */
.gm-idioma{flex:none;display:inline-flex;align-items:center;padding:3px;border:1.5px solid rgba(21,36,134,.28);border-radius:999px;text-decoration:none;
  font:700 11px/1 var(--gm-texto);letter-spacing:.14em;color:var(--gm-tinta);transition:border-color .25s}
.gm-idioma span{padding:7px 10px;border-radius:999px;transition:background-color .25s,color .25s}
.gm-idioma span[aria-current]{background:var(--gm-navy);color:#fff}
@media (hover:hover){ .gm-idioma:hover{border-color:var(--gm-navy)} .gm-idioma:hover span:not([aria-current]){color:var(--gm-navy)} }
@media (max-width:1080px){
  .gm-idioma{margin-left:auto}
  .gm-barra__menu{margin-left:4px}
}
/* En la barra del recorrido (lotificación), que es clara como la del sitio */
.nav .gm-idioma{align-self:center;margin:0 14px}

/* ---------- Doble moneda (js/doble-moneda.js): MXN oficial + equivalencia USD a la vista ----------
   El precio en MXN conserva su estilo; la equivalencia va debajo, en Montserrat, más chica y tenue.
   Toma el color del texto que la rodea: no va dentro de cifras con texto degradado. */
.gm-usd{display:block;margin-top:.35em;font:500 clamp(11.5px,.55em,15px)/1.35 var(--gm-texto);letter-spacing:.02em;text-transform:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.78}
.gm-usd--linea{display:inline;margin:0 0 0 .45em}
.gm-usd-nota{margin:10px 0 0;font:400 11.5px/1.5 var(--gm-texto);letter-spacing:0;text-transform:none;opacity:.72}
/* ---------- Doble medida (js/doble-medida.js): 1,088 m² / 11,711 ft² ----------
   Junto a la medida, sin paréntesis; misma letra, peso y tono que el USD en línea (.gm-usd--linea).
   Solo aparece dentro de zonas marcadas con data-pies. Clase doble a propósito: le gana a reglas de
   página que ponen mayúsculas o interletrado a todo span. */
.gm-ft.gm-ft{display:inline;margin:0 0 0 .45em;padding:0;border:0;background:none;font:500 clamp(11.5px,.55em,15px)/1.35 var(--gm-texto);
  letter-spacing:.02em;text-transform:none;font-style:normal;font-variant:normal;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.78}
.gm-ft.gm-ft::before{content:"/";margin-right:.4em;opacity:.55}