/* ============================================================
   jassyc-brand.css — Ajustes de marca de Jass & C Gymnastic
   sobre el tema editorial (ambios).
   Cargar DESPUÉS de ambios-exact.css.
   ============================================================ */

/* Paleta tomada de la marca real, por muestreo del logo y del uniforme
   (14-08-2026): azul marino de la malla y dorado del logotipo.
   Sobrescribe los tokens del tema ambios sin tocar sus archivos.

   ⚠ EL DORADO NO ES UN COLOR DE TEXTO SOBRE FONDO CLARO.
     #d4af37 sobre blanco da 2.4:1 — reprueba hasta el mínimo de 3.0 para
     componentes de interfaz. El dorado va SOLO sobre los fondos navy
     (ahí rinde 6.4:1). Para dorado sobre claro existe --jc-gold-deep,
     que es el mismo tono oscurecido hasta 4.9:1.

   Contrastes verificados (WCAG AA = 4.5 texto / 3.0 UI):
     blanco        sobre --ambios-navy ..... 13.5:1
     --jc-gold     sobre --ambios-navy ......  6.4:1
     --jc-gold     sobre --ambios-blue ......  5.5:1
     --jc-gold-deep sobre blanco ............  4.9:1
     --ambios-blue-bright sobre blanco ......  6.1:1
     --ambios-blue-300 sobre --ambios-navy ..  6.0:1                       */
:root {
	--ambios-navy:        #1b2e52;  /* navy de marca (títulos, hero, bandas) */
	--ambios-navy-deep:   #111d35;  /* navy más profundo */
	--ambios-blue:        #28395a;  /* azul de la malla — primario */
	--ambios-blue-dark:   #1f2c46;  /* hover/pressed */
	--ambios-blue-bright: #2f5fb8;  /* enlaces / acentos sobre fondo claro */
	--ambios-blue-300:    #93aede;  /* azul claro (texto sobre navy) */
	--ambios-blue-tint:   #e9edf6;  /* chips / bordes suaves */
	--ambios-section:     #f4f6fa;  /* fondo de sección */

	/* Dorado de la marca — acento sobre fondos oscuros */
	--jc-gold:            #d4af37;  /* dorado vivo, sobre navy */
	--jc-gold-soft:       #e3c46b;  /* dorado claro, solo decorativo */
	--jc-gold-deep:       #7a5f18;  /* dorado legible sobre blanco */

	/* El tema ambios viene de un proyecto de biotecnología y su color de
	   realce es un cian (--ambios-aqua, PANTONE 3115 C). Era el único acento
	   frío del sitio y no pertenece a ninguna de las dos marcas. Se reasigna
	   al dorado, que es exactamente el papel que cumple el token: acento.

	   Son TRES tokens porque el tema los usa en contextos opuestos —
	   `--ambios-aqua` siempre sobre navy, `--ambios-aqua-700` siempre sobre
	   claro. Reasignar solo el primero dejaría el cian vivo en los enlaces.

	   Arrastra consigo el eyebrow del hero, `.section-navy .subtitle`, el
	   borde superior del footer, las cifras de `.impact-a`, las migas de
	   `.page-title` y el degradado de `.impact-b`. */
	--ambios-aqua:        #d4af37;  /* realce sobre oscuro     — 6.4:1 sobre navy */
	--ambios-aqua-700:    #7a5f18;  /* realce sobre claro      — 6.0:1 sobre blanco */
	--ambios-aqua-tint:   #faf6e8;  /* fondo dorado muy suave  — 10.7:1 con navy encima */
}

/* ═════════════════════════════════════════════════════════════════════════════
   SISTEMA EDITORIAL — la capa que separa este sitio del que se copió
   ═════════════════════════════════════════════════════════════════════════════

   El sitio y el del CIV salieron de la misma plantilla BootstrapMade. Cambiar
   solo el color no alcanzaba: se seguían reconociendo por otras tres cosas.

     1. La TIPOGRAFÍA de la plantilla (Roboto / Raleway / Ubuntu).
     2. El RITMO de fondos: blanco y navy alternándose sección tras sección.
     3. La SILUETA de tarjetas y botones: radio grande y sombra difusa,
        el acabado por defecto de Bootstrap.

   Esta capa cambia esas tres y no toca una sola línea de marcado: las 14
   secciones de la home, sus módulos y sus consultas siguen exactamente igual.

   Todo se hace sobrescribiendo variables de la plantilla y del tema ambios,
   nunca editando sus archivos — se pisan enteros al actualizarlos.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── 1. Tipografía ──────────────────────────────────────────────────────
	   Las tres variables son de la plantilla (main.css:17-19). Redefinirlas
	   acá alcanza para cambiar el sitio entero: main.css ya las consume en
	   body, títulos y navegación. */
	--default-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nav-font:     "Poppins", system-ui, -apple-system, sans-serif;

	/* ── 2. Superficies: crema, no blanco ──────────────────────────────────
	   El blanco puro es el fondo por defecto de la plantilla. El crema da
	   la temperatura que pide un logotipo dorado y, de paso, es lo primero
	   que se nota al comparar los dos sitios. */
	--jc-crema:       #faf7f0;  /* fondo de página */
	--jc-crema-honda: #f4efe3;  /* secciones alternas */
	--jc-linea:       #e5ddcb;  /* filete hairline de tarjetas y separadores */

	/* Variables de la plantilla Learner */
	--background-color: var(--jc-crema);
	--surface-color:    #ffffff;
	--default-color:    #33322e;  /* 12.0:1 sobre crema */
	--heading-color:    #1b2e52;  /* 12.6:1 sobre crema */

	/* Variables del tema ambios */
	--ambios-surface: #ffffff;
	--ambios-section: var(--jc-crema-honda);
	--ambios-text:    #33322e;
	--ambios-muted:   #6b6a63;    /* 5.1:1 sobre crema */

	/* ── 3. Silueta: los tokens de `ambios-exact.css` (líneas 27-44) ───────
	   Acá está la clave de todo el rediseño. Ese archivo aplica forma,
	   borde y sombra con `!important` —
	       .card { border: 1px solid var(--ex-hair) !important;
	               border-radius: var(--ex-radius) !important; }
	   — así que pelearle regla por regla es perder por definición. Pero los
	   valores salen de variables, y una variable sí se puede redefinir desde
	   acá. Cambiando el token cambian de una sola vez las 6 familias de
	   tarjetas, los chips, las imágenes y la banda de patrocinantes, y
	   además quedan coherentes entre sí — que es justo lo que se pierde
	   cuando uno va parcheando selector por selector.

	   Pastilla → rectángulo, y sombra difusa → filete: son las dos marcas
	   de agua del acabado Bootstrap por defecto. */
	--ex-radius-sm: 3px;
	--ex-radius:    4px;
	--ex-radius-lg: 6px;
	--ex-pill:      3px;

	--ex-shadow:      none;
	--ex-shadow-soft: none;
	--ex-shadow-lg:   0 10px 28px rgba(27, 46, 82, .08);

	--ex-ink:   #1b2e52;   /* titulares */
	--ex-body:  #33322e;   /* cuerpo */
	--ex-hair:  #e5ddcb;   /* líneas finas, ahora cálidas */
	--ex-cream: var(--jc-crema-honda);   /* el alterno de `.light-background` */

	/* Más aire vertical: el ritmo editorial lo da el blanco, no el bloque
	   de color que se le quitó a las secciones. */
	--ex-section-y: clamp(72px, 9vw, 132px);
}

/* ── Superficies ────────────────────────────────────────────────────────────
   El alterno de `.light-background` ya viene de --ex-cream, redefinido
   arriba; acá solo queda el fondo de página. */
body {
	background-color: var(--jc-crema);
}

/* ── Titulares ──────────────────────────────────────────────────────────────
   Poppins es una geométrica de trazo uniforme, y eso cambia los pesos que
   pedía la serif anterior. Playfair iba en 500-600 porque arriba de eso sus
   trazos finos se empastaban; Poppins al revés — en 500 un titular grande se
   ve flojo y sin jerarquía contra el cuerpo, que ya es Poppins 400. Por eso
   los títulos suben a 700 y los subtítulos chicos quedan en 600.

   El interletrado cerrado sí se mantiene: en una geométrica de caja grande
   como Poppins, un titular a tamaño display se abre demasiado sin él. */
h1, h2, h3, h4, h5, h6,
.hvs-inner h1,
.section h2,
.impact h2 {
	font-family: var(--heading-font);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.18;
}
h1, .hvs-inner h1 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }

/* Con una sola familia esta regla ya no cambia la fuente, pero se conserva:
   fija explícitamente la sans en los elementos que podrían quedar bajo un
   `--heading-font` distinto si algún día se vuelve a un par serif + sans. */
.impact-num,
.plan-precio,
.badge,
.btn,
.nav-link {
	font-family: var(--default-font);
}

/* ── Antetítulo con filete ──────────────────────────────────────────────────
   El recurso editorial de la dirección elegida: una línea dorada corta antes
   del texto, en vez del "subtitle" en color suelto de la plantilla.
   El filete es decorativo (`currentColor` a media opacidad basta); el TEXTO
   usa --jc-gold-deep, que sí pasa AA sobre crema (5.6:1). */
.subtitle,
.eyebrow,
.impact-eyebrow {
	font-family: var(--default-font);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
/* `display: inline-block` es obligatorio, no cosmético: un ::before es
   `inline` por defecto y en inline el ancho y el alto se ignoran. El filete
   existía pero medía 0. Tampoco alcanza con hacer flex al padre —
   `ambios-exact.css` fija `.hero-video-sec .eyebrow { display: inline-block }`
   con más especificidad, y ahí el ::before deja de ser ítem flex. */
.subtitle::before,
.eyebrow::before,
.impact-eyebrow::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 28px;
	height: 1px;
	margin-right: 12px;
	background: currentColor;
	opacity: .55;
	flex: 0 0 auto;
}
/* Sobre claro el antetítulo va en dorado oscuro; sobre navy, en dorado vivo.
   Son dos tonos del mismo color: el dorado vivo sobre crema da 2.0:1. */
.section .subtitle,
.section .eyebrow {
	color: var(--jc-gold-deep, #7a5f18) !important;
}
.section-navy .subtitle,
.hvs-inner .eyebrow,
.impact .impact-eyebrow,
.cta-band .impact-eyebrow {
	color: var(--jc-gold, #d4af37) !important;
}

/* ── Encuadre de la foto del hero ───────────────────────────────────────────
   El hero es una franja muy apaisada —hasta 1521x598, o sea 2.5:1— y la foto
   del equipo es 1279x775, 1.65:1. Con `cover` sobra alto y hay que recortar
   unos 320px: centrado (`center/cover` en ambios-exact.css) se comía 160px
   por arriba, que es justo donde están las cabezas de la fila de atrás.

   El ancla baja a 15%: recorta ~48px arriba en vez de 160, y las cabezas
   quedan con aire. Lo que se pierde es el piso azul y las piernas de las
   gimnastas por debajo de la rodilla — cortar ahí es normal en un hero;
   cortar cabezas, no.

   15% y no 25% porque la sección es `min-height: clamp(560px, 82vh, 820px)`:
   el recorte cambia con la altura de la ventana, y 15% deja margen sobre las
   cabezas en todo ese rango, no sólo a la altura con la que se probó.

   Va acá y no en `ambios-exact.css`: ese archivo es de la plantilla y se pisa
   entero al actualizarla. La regla original tiene especificidad (0,2,0), así
   que se repite el mismo selector para ganarle por orden de carga. */
.hero-video-sec .hvs-poster {
	background-position: center 15%;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────────
   Se cambia la silueta entera: filete hairline en vez de sombra difusa,
   radio chico en vez de 14-18px, y un filete dorado arriba que las une como
   familia. La sombra vuelve solo en hover, y muy contenida. */
.valor-card,
.pago-card,
.plan-card,
.post-card,
.info-box,
.team-card {
	background: #fff;
	border: 1px solid var(--jc-linea, #e5ddcb);
	border-radius: 4px;
	box-shadow: none;
	position: relative;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.valor-card::before,
.pago-card::before,
.plan-card::before,
.info-box::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--jc-gold, #d4af37);
}
.valor-card:hover,
.pago-card:hover,
.plan-card:hover,
.post-card:hover,
.info-box:hover {
	transform: none;                      /* el "salto" era muy de plantilla */
	border-color: var(--jc-gold, #d4af37);
	box-shadow: 0 10px 28px rgba(27, 46, 82, .08);
}
.plan-card.destacado {
	border: 1px solid var(--jc-gold, #d4af37);
	box-shadow: 0 10px 30px rgba(212, 175, 55, .14);
}

/* ── Botones ────────────────────────────────────────────────────────────────
   El radio ya lo resolvió --ex-pill; acá va solo lo que ningún token cubre:
   versalitas y peso. */
.btn,
.btn-primary,
.hero-cta a,
.plan-cta,
.jc-btn-primary {
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .82rem;
	padding: 13px 28px;
}
.btn-primary,
.hero-cta .primary {
	background: var(--ambios-navy, #1b2e52);
	border-color: var(--ambios-navy, #1b2e52);
	color: #fff;
}
.btn-primary:hover,
.hero-cta .primary:hover {
	background: var(--ambios-navy-deep, #111d35);
	border-color: var(--jc-gold, #d4af37);
	color: #fff;
}
/* El fantasma sobre el hero oscuro: contorno dorado, relleno nulo. */
.hero-cta .ghost {
	border: 1px solid var(--jc-gold, #d4af37);
	color: #fff;
	background: transparent;
}
.hero-cta .ghost:hover {
	background: var(--jc-gold, #d4af37);
	color: var(--ambios-navy-deep, #111d35);
}

/* ── Separador de sección ───────────────────────────────────────────────────
   Reemplaza el salto de color por un filete fino: el ritmo lo marca el aire,
   no el bloque de fondo. */
.section + .section:not(.light-background):not(.section-navy) {
	border-top: 1px solid var(--jc-linea, #e5ddcb);
}

/* ── Degradados: el dorado va sólido, nunca como parada de degradado ──────────
   El tema remata sus degradados en --ambios-aqua. Con el cian original la
   rampa se movía dentro de la misma familia fría y quedaba limpia; con el
   dorado, que es el complementario del azul, la mezcla pasa por el verde y
   deja una banda verdosa sucia a la derecha.

   Así que los degradados se quedan dentro del azul y el dorado se reserva
   para lo sólido: filetes, bordes, textos de realce. El resultado es el mismo
   contraste de marca sin la zona muerta. */
.impact-b {
	background: linear-gradient(120deg, var(--ambios-navy) 0%, var(--ambios-blue) 55%, #3a5f9e 140%);
}
.page-title,
.page-title.light-background {
	background: linear-gradient(120deg, var(--ambios-navy) 0%, var(--ambios-blue) 55%, #3a5f9e 150%);
	/* El filete inferior sí es dorado: es un sólido sobre navy. */
	border-bottom: 3px solid var(--jc-gold, #d4af37);
}
.ambios-gradient-aqua,
.ambios-gradient-mint {
	background: linear-gradient(135deg, var(--ambios-blue) 0%, #3a5f9e 100%);
}

/* Logo del header.
   El del CIV era un medallón apaisado. El de Jass & C es cuadrado (472x471) y
   lleva el nombre completo dentro del trazo, así que a poca altura el texto
   deja de leerse.

   ⚠ Aquí hace falta `height`, no `max-height`. `ambios-exact.css` fija
     `.header .logo img { height: 42px }` y una altura explícita gana siempre
     sobre un máximo: la regla anterior pedía `max-height: 52px` y no tenía
     ningún efecto — el logo se venía pintando a 42px desde siempre.
     Se conserva `max-height` como red por si esa regla desaparece. */
#header .logo img {
	height: 68px;
	max-height: 68px;
	max-width: none;
	width: auto;
}

/* Insignia blanca redonda para el logo sobre el footer oscuro.
   El logotipo de Jass & C es dorado sobre transparente: sobre el navy del
   footer se leería, pero el degradado del dorado pierde definición. El disco
   blanco lo devuelve al contexto en que fue diseñado, y el aro dorado lo
   integra con la banda de eslóganes. */
.footer-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--jc-gold, #d4af37);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	padding: 6px;
}
.footer-logo-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Fichas de contacto ─────────────────────────────────────────────────────
   `.info-box` no la estilaba NADIE: las únicas reglas con ese nombre en
   main.css están dentro de `.blog-details` y `.terms-of-service`, así que
   nunca alcanzaban a la sección de contacto. El ícono salía suelto y sin
   tamaño, pegado al borde. Se le da forma acá, dentro del sistema. */
.info-box {
	padding: 26px 24px 24px;
}
.info-box i {
	display: block;
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: 14px;
	color: var(--jc-gold-deep, #7a5f18);
}
.info-box h3 {
	font-size: 1.12rem;
	margin: 0 0 8px;
	color: var(--ambios-navy, #1b2e52);
}
.info-box p {
	margin: 0;
	color: var(--ambios-text, #33322e);
	font-size: .95rem;
	line-height: 1.6;
	overflow-wrap: anywhere;   /* el correo largo se salía de la tarjeta */
}

/* Formulario de contacto: misma silueta rectangular que el resto. */
.contact-form .form-control {
	border-radius: 3px;
	padding: 13px 15px;
	border: 1px solid var(--jc-linea, #e5ddcb);
	background: #fff;
	font-size: .95rem;
}
.contact-form .form-control:focus {
	border-color: var(--jc-gold, #d4af37);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}

/* ── Página Nosotros: pilares/valores ── */
.valores-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
/* Forma, borde, sombra y hover los pone el sistema (§ Tarjetas, más arriba).
   Acá queda sólo el relleno, que sí es propio de esta tarjeta. */
.valor-card {
	padding: 30px 26px;
}
/* El chip del ícono iba en azul frío sobre el crema — el único punto de la
   página que seguía delatando la paleta anterior. Pasa a un tinte dorado
   cálido, y de paso al radio del sistema.
   Ojo: el fallback decía `var(--ambios-tint, …)` y ese token NO existe (el
   real es --ambios-blue-tint), así que siempre estuvo usando el literal. */
.valor-ico {
	width: 56px; height: 56px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ambios-aqua-tint, #faf6e8);
	color: var(--jc-gold-deep, #7a5f18);
	font-size: 1.5rem; margin-bottom: 18px;
}
.valor-card h3 { font-size: 1.15rem; color: var(--ambios-navy, #1b2e52); margin-bottom: 8px; }
.valor-card p { color: var(--ambios-muted, #64748b); margin: 0; }

/* ── Mascota en el hero ── */
.hero-mascota {
	position: absolute;
	right: clamp(12px, 5vw, 90px);
	bottom: 0;
	height: 88%;
	max-height: 560px;
	width: auto;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
	animation: mascota-flota 4.5s ease-in-out infinite;
}
@keyframes mascota-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (max-width: 991px) { .hero-mascota { display: none; } }

/* ── Cinta de valores ───────────────────────────────────────────────────────
   Reemplaza a la marquesina navy que había antes. Aquella era, hasta en el
   nombre de las clases (`.slogan-band` / `.slogan-track`) y en el de la
   animación (`slogan-scroll`, 24s lineal), la misma que la del sitio del CIV:
   cambiaba el color y la fuente, pero la forma era idéntica. Diferenciarse
   pedía cambiar la forma, no el color.

   Lo que cambia respecto de aquella:
     · fondo DORADO sólido en vez de navy — el CIV no tiene dorado en ningún
       lado, así que es lo primero que despega a los dos sitios;
     · SIN movimiento — nada que se desplace, y de paso desaparece el problema
       de `prefers-reduced-motion` que toda marquesina infinita arrastra;
     · caja alta y baja en vez de VERSALITAS, y peso 600 en vez de 700;
     · punto medio en vez del rombo ✦;
     · cinco palabras sin repetir, en vez de la lista duplicada que necesitaba
       el bucle del desplazamiento.

   El navy sobre el dorado da 6.4:1 — pasa AA de sobra. Es la única de las dos
   direcciones que sirve: el dorado sobre claro da 2.4:1 y para eso existe
   --jc-gold-deep, pero acá el dorado es FONDO, no texto. */
.valores-band {
	background: var(--jc-gold, #d4af37);
	padding: 15px 0;
}
.valores-lista {
	list-style: none;
	margin: 0;
	padding: 0 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.valores-lista li {
	color: var(--ambios-navy, #1b2e52);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: .01em;
	display: flex;
	align-items: center;
}
/* El separador va como ::after del ítem y no como `gap`: así se lee que
   separa palabras, no que decora la cinta.

   El margen es simétrico y el <li> no lleva padding a propósito: con padding
   en el ítem MÁS margen en el punto, el punto quedaba a 20px de la palabra de
   la izquierda y a 40px de la de la derecha, colgado de la anterior en vez de
   separando a las dos. */
.valores-lista li:not(:last-child)::after {
	content: "·";
	margin: 0 20px;
	opacity: .5;
	font-weight: 700;
}
/* Debajo de 700px las cinco palabras ya no entran en una línea. Al envolverse,
   un separador quedaría colgando al final de un renglón o abriendo el
   siguiente, así que ahí se apaga y el espaciado lo pone el `gap`. */
@media (max-width: 700px) {
	.valores-lista { gap: 4px 22px; }
	.valores-lista li { font-size: .95rem; }
	.valores-lista li:not(:last-child)::after { content: none; }
}

/* ── Métodos de pago ── */
.pago-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
}
/* Forma y sombra: las pone el sistema. */
.pago-card {
	padding: 26px 16px 22px;
	text-align: center;
}
.pago-card i { font-size: 1.7rem; color: var(--jc-gold-deep, #7a5f18); }
.pago-card span { display: block; margin-top: 10px; font-weight: 600; color: var(--ambios-navy, #1b2e52); font-size: .95rem; }

/* ── Síguenos en redes ── */
.redes-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.redes-strip a {
	width: 56px; height: 56px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; color: #fff; text-decoration: none;
	transition: transform .2s, opacity .2s;
}
.redes-strip a:hover { transform: translateY(-4px); opacity: .92; }
.redes-strip .rs-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.redes-strip .rs-fb { background: #1877f2; }
.redes-strip .rs-yt { background: #ff0000; }
.redes-strip .rs-tw { background: #111; }
.redes-strip .rs-wa { background: #25d366; }

/* ── Nuestros Programas (tarjetas de precio) ── */
.planes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
	align-items: stretch;
}
/* Forma, borde, sombra y el estado `.destacado`: los pone el sistema. */
.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 28px 32px;
}
/* La insignia va dorada sobre navy: es el par de la marca, y es sólido. */
.plan-badge {
	position: absolute; top: 18px; right: 18px;
	background: var(--jc-gold, #d4af37); color: var(--ambios-navy-deep, #111d35);
	font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 11px; border-radius: 2px;
}
.plan-head { text-align: center; margin-bottom: 14px; }
.plan-ico {
	width: 58px; height: 58px; border-radius: 4px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ambios-aqua-tint, #faf6e8); color: var(--jc-gold-deep, #7a5f18); font-size: 1.6rem;
}
.plan-head h3 { font-size: 1.35rem; color: var(--ambios-navy, #1b2e52); margin: 0 0 6px; }
.plan-edad {
	display: inline-block; background: var(--ambios-section, #f4f6fa); color: var(--ambios-muted, #64748b);
	font-size: .78rem; font-weight: 600; padding: 4px 11px; border-radius: 2px;
}
.plan-desc { color: var(--ambios-muted, #64748b); font-size: .95rem; text-align: center; margin-bottom: 16px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 18px; }
.plan-feats li { display: flex; align-items: flex-start; gap: 8px; color: var(--ambios-text, #1e293b); font-size: .93rem; margin: 8px 0; }
.plan-feats li i { color: var(--ambios-blue-bright, #2f5fb8); font-weight: 700; margin-top: 2px; }
.plan-precios { border-top: 1px dashed var(--jc-linea, #e5ddcb); padding-top: 16px; margin-top: auto; }
.plan-precio-main { text-align: center; margin-bottom: 12px; }
.plan-precio-main .pp-num { font-family: 'Poppins', system-ui, sans-serif; font-size: 2rem; font-weight: 700; color: var(--ambios-navy, #1b2e52); }
.plan-precio-main .pp-lbl { color: var(--ambios-muted, #64748b); font-size: .9rem; }
.plan-precio-list { list-style: none; padding: 0; margin: 0 0 8px; }
.plan-precio-list li { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ambios-muted, #64748b); padding: 4px 0; }
.plan-precio-list li b { color: var(--ambios-navy, #1b2e52); }
.plan-nota { font-size: .82rem; color: var(--ambios-muted, #64748b); text-align: center; margin: 6px 0 0; }
.plan-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	margin-top: 18px; background: var(--ambios-navy, #1b2e52); color: #fff;
	text-decoration: none; transition: background .15s;
}
.plan-cta:hover { background: var(--ambios-navy-deep, #111d35); color: #fff; }
.plan-card.destacado .plan-ico { background: var(--jc-gold, #d4af37); color: var(--ambios-navy-deep, #111d35); }

/* ── Página Nosotros: comisión / equipo ── */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
/* Forma, borde y sombra: los pone el sistema. La ficha de persona no lleva
   filete dorado arriba —lo corta la foto—, así que no está en la lista de
   los ::before. */
.team-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--jc-crema-honda, #f4efe3); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-info { padding: 18px 14px 20px; text-align: center; }
.team-info h4 { font-size: 1.05rem; color: var(--ambios-navy, #1b2e52); margin: 0 0 4px; }
.team-info span {
	color: var(--jc-gold-deep, #7a5f18); font-weight: 600; font-size: .74rem;
	letter-spacing: .12em; text-transform: uppercase;
}