/* ============================================================
   Centro Náutico Murcia · Web pública — diseño "Oscura / Club Náutico"
   Traducción del handoff aprobado. CSS plano, sin frameworks.
   Todo va bajo .cnm-web para no tocar el resto del sitio.
   ============================================================ */

.cnm-web {
	--fondo:      #06182B;
	--superficie: #0B2440;
	--interior:   #08203A;
	--pie:        #040F1C;
	--oro:        #D8A93C;
	--oro-claro:  #F0DDAE;
	--oro-hover:  #E7BC55;
	--texto:      #EAF0F5;
	--texto-2:    #AFC0CE;
	--texto-3:    #9FB2C2;
	--texto-4:    #8FA3B5;
	--verde:      #5FBB86;
	--linea:      rgba(255, 255, 255, .08);
	--linea-oro:  rgba(240, 221, 174, .12);
	--ancho:      1340px;
}

/* ---- Base ---- */

body.cnm-web-page {
	margin: 0;
	background: #06182B;
	color: #EAF0F5;
	font-family: 'Archivo', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.cnm-web-page * { box-sizing: border-box; }

/* Los enlaces heredan el color de donde estén. Va con `:where()` a proposito:
   asi esta regla no pesa nada y cualquier estilo posterior —el color oscuro de
   los botones, por ejemplo— gana sin tener que pelear. Sin esto, los botones
   dorados salian con el texto casi blanco y el boton blanco, ilegible. */
:where(body.cnm-web-page) :where(a) { text-decoration: none; color: inherit; }

body.cnm-web-page :focus-visible {
	outline: 2px solid #D8A93C;
	outline-offset: 3px;
}

html:has(body.cnm-web-page) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html:has(body.cnm-web-page) { scroll-behavior: auto; }
}

.cnm-web section[id] { scroll-margin-top: 84px; }

.cnm-web__wrap {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 24px;
}

.cnm-web__serif {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
}

.cnm-web__serif em { font-style: italic; color: var(--oro-claro); }

.cnm-web__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--oro);
}

.cnm-web__kicker--linea {
	color: var(--oro-claro);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.cnm-web__kicker--linea::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--oro);
}

.cnm-web__sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Grano de imprenta: textura sobre toda la página. */
.cnm-web__grano {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .045;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}

/* ---- Botones ---- */

.cnm-web__btn {
	display: inline-block;
	background: var(--oro);
	color: var(--fondo);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s, transform .2s, color .2s;
}

.cnm-web__btn:hover,
.cnm-web__btn:focus-visible {
	background: var(--oro-hover);
	color: var(--fondo);
	transform: translateY(-2px);
}

.cnm-web__btn--linea {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
}

.cnm-web__btn--linea:hover,
.cnm-web__btn--linea:focus-visible {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.cnm-web__btn--blanco { background: #fff; color: var(--fondo); }
.cnm-web__btn--blanco:hover { background: #fff; color: var(--fondo); }

.cnm-web__btn--mini { padding: 11px 22px; font-size: 13px; }

.cnm-web__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Cabecera ---- */

.cnm-web__header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(6, 24, 43, .9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(240, 221, 174, .1);
}

.cnm-web__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 72px;
	padding: 8px 24px;
}

.cnm-web__marca img { height: 42px; width: auto; display: block; }

.cnm-web__menu { display: flex; align-items: center; gap: 24px; }

.cnm-web__menu > a:not(.cnm-web__btn) {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cnm-web__menu > a:not(.cnm-web__btn):hover { color: var(--oro-claro); }

/* «Acceso alumnos»: para quien ya ha pagado y solo quiere entrar. Se distingue
   del resto del menú sin competir con «Matricúlate», que es el botón lleno. */
.cnm-web__menu > a.cnm-web__acceso {
	padding: 9px 16px;
	border: 1px solid rgba(240, 221, 174, .38);
	border-radius: 999px;
	color: var(--oro-claro);
}

.cnm-web__menu > a.cnm-web__acceso:hover {
	border-color: var(--oro-claro);
	background: rgba(240, 221, 174, .1);
}

/* Botón hamburguesa: solo en móvil (el prototipo dejaba el menú partido). */
.cnm-web__menu-btn {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--linea-oro);
	border-radius: 8px;
	cursor: pointer;
}

.cnm-web__menu-btn span:not(.cnm-web__sr) {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 1.5px;
	background: var(--oro-claro);
	transition: transform .25s, opacity .2s;
}

.cnm-web__menu-btn span:nth-child(1) { top: 15px; }
.cnm-web__menu-btn span:nth-child(2) { top: 21px; }
.cnm-web__menu-btn span:nth-child(3) { top: 27px; }

.cnm-web__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cnm-web__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cnm-web__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Hero ---- */

.cnm-web__hero {
	position: relative;
	min-height: 94vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* La foto de portada.

   La foto real del Jaloke navegando que tiene el centro es de 850 px de ancho:
   en una pantalla normal hay que estirarla el triple y sale borrosa y, al ser
   vertical, recortada a la mitad del mastil. Por eso aqui va una foto libre
   (CC BY-SA 3.0, Myrabella) de un **Jeanneau Sun Odyssey 35 navegando** en el
   Mediterraneo: mismo modelo de barco que el Jaloke (un 40) y misma escena,
   pero de 4224 px. El credito del autor esta en el pie, como exige la licencia.
   La foto real del Jaloke sigue en «La flota» y en su propia pagina.

   Si algun dia Esteban pasa el original de su foto (la camara del movil da
   3000-4000 px de sobra), se cambia aqui y ya esta. */

.cnm-web__hero-bg {
	position: absolute;
	/* -4% en vez de 0: al escalar con el efecto de entrada no debe asomar
	   ningun borde por los lados. */
	inset: -4%;
	background-image: var(--cnm-hero);
	background-position: center 58%;
	background-size: cover;
	background-repeat: no-repeat;
	animation: cnm-kenburns 6s ease-out both;
	will-change: transform;
}

/* Efecto Ken Burns: la foto entra un pelin ampliada y se asienta. Va en la capa
   de la FOTO, no en la seccion ni en el degradado, para que el texto y el velo
   oscuro se queden quietos. */
@keyframes cnm-kenburns {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Quien tenga desactivadas las animaciones en su sistema, no ve ninguna. */
@media (prefers-reduced-motion: reduce) {
	.cnm-web__hero-bg { animation: none; }
}

/* El velo oscuro. Va en su propia capa y NO se anima: si se moviera con la foto,
   el titular «respiraria» de brillo durante los 6 segundos de entrada.

   Son dos degradados. El vertical de siempre, y uno horizontal nuevo: el velero
   navega por la izquierda, justo donde cae el titular, y letra blanca sobre vela
   blanca no se leia bien. */
.cnm-web__hero-ov {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(6, 24, 43, .58), rgba(6, 24, 43, .18) 46%, rgba(6, 24, 43, 0) 64%),
		linear-gradient(180deg, rgba(6, 24, 43, .55), rgba(6, 24, 43, .12) 38%, rgba(6, 24, 43, .55) 72%, #06182B);
}

.cnm-web__hero-in {
	position: relative;
	width: 100%;
	padding-bottom: max(9vh, 130px);
}

.cnm-web__hero h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 400;
	font-size: clamp(52px, 9vw, 140px);
	line-height: .9;
	letter-spacing: -.02em;
	margin: 22px 0 0;
	color: #fff;
}

.cnm-web__hero h1 em { font-style: italic; font-weight: 500; color: var(--oro-claro); }

.cnm-web__hero-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 26px;
	margin-top: 32px;
}

.cnm-web__hero-row p {
	font-size: 18px;
	line-height: 1.55;
	color: #D4DEE7;
	max-width: 430px;
	margin: 0;
}

.cnm-web__hero-row strong { color: #fff; }

/* ---- Franja de confianza ---- */

.cnm-web__franja {
	background: linear-gradient(180deg, #06182B, #0A2440 50%, #06182B);
	border-top: 1px solid rgba(240, 221, 174, .08);
	border-bottom: 1px solid rgba(240, 221, 174, .08);
}

.cnm-web__franja .cnm-web__wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.cnm-web__franja-c {
	padding: 24px 26px 24px 0;
	border-right: 1px solid var(--linea-oro);
}

.cnm-web__franja-c:last-child { border-right: none; }

.cnm-web__franja-k {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--oro);
	margin-bottom: 7px;
}

.cnm-web__franja-v { font-size: 14px; color: #D4DEE7; line-height: 1.4; }

/* ---- La escuela ---- */

.cnm-web__mani { padding-top: 110px; padding-bottom: 90px; }

.cnm-web__mani-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 56px;
	align-items: start;
}

.cnm-web__mani h2 {
	font-size: clamp(32px, 4.6vw, 60px);
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 0;
	color: #F4F8FB;
}

.cnm-web__mani-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 42px;
}

.cnm-web__mani-cols p { font-size: 16px; line-height: 1.75; color: var(--texto-2); margin: 0; }
.cnm-web__mani-cols strong { color: var(--texto); }

.cnm-web__cifras {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-top: 50px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 32px;
}

.cnm-web__cifras b {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 46px;
	font-weight: 500;
	color: var(--oro-claro);
	line-height: 1;
	display: block;
}

.cnm-web__cifras span {
	font-size: 12.5px;
	color: var(--texto-4);
	font-weight: 500;
	margin-top: 5px;
	display: block;
}

/* ---- Títulos náuticos ---- */

.cnm-web__titulos { padding-bottom: 110px; }

.cnm-web__titulos-head { margin-bottom: 44px; }

.cnm-web__titulos h2 {
	font-size: clamp(32px, 4.6vw, 58px);
	line-height: 1;
	margin: 14px 0 0;
	color: #F4F8FB;
}

.cnm-web__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cnm-web__card {
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .3s, border-color .3s;
}

.cnm-web__card:hover,
.cnm-web__card:focus-visible {
	transform: translateY(-8px);
	border-color: rgba(216, 169, 60, .5);
}

.cnm-web__card-im {
	position: relative;
	height: 210px;
	background: #08203A center/cover no-repeat;
}

.cnm-web__card-im::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 24, 43, .1), rgba(6, 24, 43, .78));
}

.cnm-web__card-num {
	position: absolute;
	top: 14px; left: 16px;
	z-index: 1;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 36px;
	font-style: italic;
	color: rgba(255, 255, 255, .85);
	line-height: 1;
}

.cnm-web__card-pop {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 1;
	background: var(--oro);
	color: var(--fondo);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

.cnm-web__card-abbr {
	position: absolute;
	left: 16px; bottom: 12px;
	z-index: 1;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oro-claro);
}

.cnm-web__card-bd {
	padding: 22px 20px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cnm-web__card-bd h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.12;
	margin: 0 0 9px;
	color: #F4F8FB;
}

.cnm-web__card-bd p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--texto-3);
	margin: 0 0 16px;
	flex: 1;
}

.cnm-web__card-spec {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--texto-4);
}

.cnm-web__card-barra { color: rgba(240, 221, 174, .4); }

.cnm-web__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 14px;
}

.cnm-web__card-precio {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 24px;
	color: var(--oro-claro);
	white-space: nowrap;
}

.cnm-web__card-precio small {
	font-size: 10.5px;
	color: #7E92A4;
	font-family: 'Archivo', sans-serif;
}

.cnm-web__card-go { font-size: 12px; font-weight: 700; color: var(--oro); white-space: nowrap; }

/* Banda de prácticas: ocupa el ancho completo bajo las seis tarjetas. */
.cnm-web__practicas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 28px 26px;
	background: rgba(11, 36, 64, .55);
	border: 1px dashed rgba(240, 221, 174, .28);
	border-radius: 6px;
	transition: border-color .3s, background .3s;
}

.cnm-web__practicas:hover { border-color: rgba(216, 169, 60, .6); background: rgba(11, 36, 64, .85); }

.cnm-web__practicas-t { font-size: 24px; color: var(--oro-claro); font-weight: 500; margin-bottom: 6px; }

.cnm-web__practicas p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texto-3);
	margin: 0;
	max-width: 620px;
}

.cnm-web__practicas-cta { display: flex; align-items: center; gap: 22px; }

/* El camino claro a la tienda (encargo de Esteban, 2-08-2026): un visitante
   que quiera ver TODOS los cursos con sus precios no tenia un sitio evidente. */
.cnm-web__tienda-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 32px 26px;
	background: linear-gradient(120deg, rgba(216, 169, 60, .14), rgba(11, 36, 64, .85) 55%);
	border: 1px solid rgba(216, 169, 60, .45);
	border-radius: 6px;
	transition: border-color .3s, transform .3s;
}

.cnm-web__tienda-cta:hover { border-color: var(--oro); transform: translateY(-2px); }

.cnm-web__tienda-cta-t { font-size: 26px; color: var(--oro-claro); font-weight: 500; margin-bottom: 6px; }

.cnm-web__tienda-cta p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texto-2);
	margin: 0;
	max-width: 620px;
}

/* ---- La flota ---- */

.cnm-web__flota {
	position: relative;
	min-height: 86vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.cnm-web__flota-bg {
	position: absolute;
	inset: 0;
	background-position: center 65%;
	background-size: cover;
	background-repeat: no-repeat;
}

.cnm-web__flota-o1 {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 24, 43, .92), rgba(6, 24, 43, .55) 55%, rgba(6, 24, 43, .25));
}

.cnm-web__flota-o2 {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #06182B 0%, rgba(6, 24, 43, 0) 16%, rgba(6, 24, 43, 0) 84%, #06182B 100%);
}

.cnm-web__flota-in { position: relative; width: 100%; padding-top: 84px; padding-bottom: 84px; }

.cnm-web__flota h2 {
	font-size: clamp(36px, 5.4vw, 74px);
	line-height: .98;
	margin: 16px 0 22px;
	color: #fff;
}

.cnm-web__flota p {
	font-size: 17px;
	line-height: 1.7;
	color: #D4DEE7;
	max-width: 540px;
	margin: 0 0 32px;
}

/* ---- Excursiones ----

   Va entre «La flota» (fondo de foto a sangre) y «El campus» (fondo liso), así
   que usa un tono intermedio para que se noten tres secciones y no dos.

   La foto va DENTRO de una tarjeta, no a pantalla completa: el original mide
   1188 px y estirarlo a sangre lo dejaría borroso. A media página se ve
   nítido. Misma lección que la portada. */

.cnm-web__excur {
	background: linear-gradient(180deg, var(--fondo), var(--interior) 45%, var(--fondo));
	padding: 104px 0;
	border-top: 1px solid var(--linea-oro);
}

.cnm-web__excur-in {
	display: grid;
	grid-template-columns: 1fr 1.02fr;
	gap: 64px;
	align-items: center;
}

.cnm-web__excur h2 {
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.03;
	margin: 14px 0 20px;
	color: #F4F8FB;
}

.cnm-web__excur-datos {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 480px;
}

.cnm-web__excur-datos li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding-left: 16px;
	border-left: 2px solid rgba(216, 169, 60, .5);
}

.cnm-web__excur-datos b {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 19px;
	color: var(--oro-claro);
}

.cnm-web__excur-datos span { font-size: 14.5px; color: var(--texto-2); }

.cnm-web__excur-nota {
	font-size: 13px;
	line-height: 1.65;
	color: var(--texto-4);
	max-width: 480px;
	margin: 0 0 30px;
}

.cnm-web__excur-foto {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--linea-oro);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}

.cnm-web__excur-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 470px;
	object-fit: cover;
}

/* ---- Campus + asistente ---- */

.cnm-web__campus { padding-top: 110px; padding-bottom: 110px; }

.cnm-web__campus .cnm-web__wrap {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 70px;
	align-items: center;
}

.cnm-web__campus h2 {
	font-size: clamp(30px, 4.6vw, 58px);
	line-height: 1.02;
	margin: 14px 0 20px;
	color: #F4F8FB;
}

.cnm-web__lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--texto-2);
	margin: 0 0 26px;
	max-width: 480px;
}

.cnm-web__feat { display: flex; flex-direction: column; gap: 13px; margin-bottom: 34px; }
.cnm-web__feat div { display: flex; gap: 11px; font-size: 14.5px; color: #DCE5EC; }
.cnm-web__feat b { color: var(--oro); }

/* ---- El chat ---- */

.cnm-web__chat {
	background: var(--superficie);
	border: 1px solid rgba(216, 169, 60, .2);
	border-radius: 10px;
	padding: 14px;
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .8);
	cursor: pointer;
	transition: border-color .3s;
}

.cnm-web__chat:hover { border-color: rgba(216, 169, 60, .45); }

.cnm-web__chat-in { background: var(--interior); border-radius: 6px; overflow: hidden; }

.cnm-web__chat-h {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--linea);
}

.cnm-web__chat-av {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--oro);
	color: var(--fondo);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex: none;
}

.cnm-web__chat-h b { font-size: 13.5px; color: #fff; display: block; }
.cnm-web__chat-h small { font-size: 11px; color: var(--verde); }

/* Alto fijo: al ir entrando los mensajes la página no debe dar saltos. */
.cnm-web__chat-msgs {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 9px;
	padding: 18px 16px;
	min-height: 320px;
	max-height: 320px;
	overflow: hidden;
}

.cnm-web__bub {
	max-width: 88%;
	font-size: 13px;
	line-height: 1.55;
	padding: 10px 13px;
	font-weight: 500;
	animation: cnm-web-entra .34s cubic-bezier(.22, .61, .36, 1) both;
}

.cnm-web__bub--u {
	align-self: flex-end;
	background: var(--oro);
	color: var(--fondo);
	border-radius: 12px 12px 3px 12px;
}

.cnm-web__bub--b {
	align-self: flex-start;
	background: rgba(255, 255, 255, .07);
	color: #DCE5EC;
	border-radius: 12px 12px 12px 3px;
}

.cnm-web__bub--saliendo { animation: cnm-web-sale .4s ease both; }

@keyframes cnm-web-entra {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes cnm-web-sale {
	to { opacity: 0; transform: translateY(-8px); }
}

/* Los tres puntitos de "está escribiendo" */
.cnm-web__dots {
	align-self: flex-start;
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, .07);
	border-radius: 12px 12px 12px 3px;
	padding: 13px 15px;
	animation: cnm-web-entra .3s ease both;
}

.cnm-web__dots i {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--texto-3);
	animation: cnm-web-punto 1.3s ease-in-out infinite;
}

.cnm-web__dots i:nth-child(2) { animation-delay: .18s; }
.cnm-web__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes cnm-web-punto {
	0%, 60%, 100% { opacity: .32; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}

.cnm-web__chat-inbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 16px 16px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 99px;
	padding: 10px 16px;
	font-size: 12.5px;
	color: #6F8295;
	min-height: 40px;
}

.cnm-web__chat-inbox span:last-child { margin-left: auto; color: var(--oro); font-weight: 800; }

/* Mientras el alumno "escribe", el texto se ve claro y con cursor. */
.cnm-web__chat-inbox.is-escribiendo { color: #CBD8E3; border-color: rgba(216, 169, 60, .4); }

.cnm-web__chat-inbox.is-escribiendo #cnm-web-chat-cursor::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-left: 2px;
	background: var(--oro);
	vertical-align: -2px;
	animation: cnm-web-cursor .9s steps(1) infinite;
}

@keyframes cnm-web-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- Promesa ---- */

/* ---- Opiniones de alumnos ----
   Personas reales que dieron su permiso. NO son resenas verificadas de Google y
   el titulo de la seccion no debe insinuarlo. */

.cnm-web__opina { padding-bottom: 100px; }

.cnm-web__opina-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin-top: 44px;
}

.cnm-web__opina-card {
	margin: 0;
	padding: 34px 34px 30px;
	background: var(--interior);
	border: 1px solid var(--linea);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cnm-web__opina-estrellas { color: var(--oro); font-size: 14px; letter-spacing: 4px; }

.cnm-web__opina-card blockquote {
	margin: 0;
	font-size: 17px;
	line-height: 1.62;
	color: var(--texto);
}

.cnm-web__opina-card blockquote::before { content: '\201C'; }
.cnm-web__opina-card blockquote::after  { content: '\201D'; }

.cnm-web__opina-card figcaption {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--linea);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cnm-web__opina-nombre { font-weight: 700; color: var(--oro-claro); letter-spacing: .01em; }
.cnm-web__opina-pie { font-size: 13px; color: var(--texto-4); }

.cnm-web__promesa {
	background: var(--superficie);
	border-top: 1px solid rgba(255, 255, 255, .07);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cnm-web__promesa .cnm-web__wrap {
	max-width: 1000px;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 100px;
}

.cnm-web__promesa-estrellas { color: var(--oro); font-size: 16px; letter-spacing: 5px; }

.cnm-web__promesa blockquote {
	font-size: clamp(24px, 3.6vw, 42px);
	line-height: 1.28;
	color: #F4F8FB;
	margin: 26px 0 30px;
}

.cnm-web__promesa-pie { font-size: 13.5px; color: var(--texto-3); font-weight: 600; }

/* ---- Pie ---- */

.cnm-web__footer { background: var(--pie); border-top: 1px solid rgba(255, 255, 255, .07); }

.cnm-web__footer > .cnm-web__wrap {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 44px;
	padding-top: 64px;
	padding-bottom: 34px;
}

.cnm-web__footer-logo { height: 44px; width: auto; margin-bottom: 18px; display: block; }

.cnm-web__footer p {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--texto-4);
	max-width: 300px;
	margin: 0;
}

.cnm-web__footer-k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oro);
	margin-bottom: 16px;
}

.cnm-web__footer-lista { display: flex; flex-direction: column; gap: 10px; }
.cnm-web__footer-lista a { color: var(--texto-3); font-size: 14px; }
.cnm-web__footer-lista a:hover { color: var(--oro-claro); }
.cnm-web__footer-lista--sec { margin-top: 16px; gap: 8px; }
.cnm-web__footer-lista--sec a { font-size: 13px; }

/* Redes sociales y WhatsApp. Pastillas con el icono dentro, no iconos sueltos:
   con el nombre al lado se sabe adónde llevan antes de pulsar. */

.cnm-web__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.cnm-web__redes a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--texto-3);
	transition: color .18s, border-color .18s, background-color .18s;
}

.cnm-web__redes a:hover {
	color: var(--oro-claro);
	border-color: rgba(240, 221, 174, .4);
	background: rgba(240, 221, 174, .07);
}

.cnm-web__redes svg { flex: none; }

.cnm-web__footer-dir { font-size: 14px; color: var(--texto-3); line-height: 1.7; }

.cnm-web__footer-coord {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #5E7286;
	margin-top: 8px;
}

.cnm-web__footer-tel { display: block; font-size: 24px; color: #fff; margin-top: 10px; }

.cnm-web__footer-base { border-top: 1px solid rgba(255, 255, 255, .08); }

.cnm-web__footer-base .cnm-web__wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 12px;
	color: #5E7286;
	flex-wrap: wrap;
}

/* Credito obligatorio de la foto de portada (CC BY-SA): visible pero discreto. */
.cnm-web__footer-credito { color: #64788A; font-size: 12px; }
.cnm-web__footer-credito a { color: #7E92A4; text-decoration: underline; }
.cnm-web__footer-credito a:hover { color: var(--oro-claro); }

.cnm-web__footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.cnm-web__footer-legal a { color: #7E92A4; }
.cnm-web__footer-legal a:hover { color: var(--oro-claro); }

/* ---- Aparición al desplazar ---- */

.cnm-web__reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

.cnm-web__reveal.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.cnm-web__reveal { opacity: 1; transform: none; transition: none; }
	.cnm-web__bub, .cnm-web__dots { animation: none; }
	.cnm-web__dots i { animation: none; opacity: .6; }
}

/* ---- Móvil y tableta ---- */

@media (max-width: 900px) {
	.cnm-web__franja .cnm-web__wrap { grid-template-columns: 1fr 1fr; }

	.cnm-web__franja-c {
		border-right: none;
		border-bottom: 1px solid var(--linea-oro);
		padding: 16px 16px 16px 0;
	}

	.cnm-web__mani-grid,
	.cnm-web__campus .cnm-web__wrap { grid-template-columns: 1fr; gap: 32px; }

	.cnm-web__mani-cols { grid-template-columns: 1fr; gap: 22px; }
	.cnm-web__grid { grid-template-columns: 1fr; }
	.cnm-web__opina-grid { grid-template-columns: 1fr; gap: 18px; }
	.cnm-web__opina { padding-bottom: 70px; }
	.cnm-web__opina-card { padding: 26px 24px 24px; }
	.cnm-web__footer > .cnm-web__wrap { grid-template-columns: 1fr; gap: 34px; }
	.cnm-web__footer p { max-width: none; }

	.cnm-web__menu-btn { display: block; }

	.cnm-web__menu {
		display: none;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px 24px 22px;
		background: rgba(6, 24, 43, .98);
		border-bottom: 1px solid var(--linea-oro);
	}

	.cnm-web__menu.is-abierto { display: flex; }

	.cnm-web__menu > a:not(.cnm-web__btn) {
		padding: 14px 0;
		font-size: 14px;
		border-bottom: 1px solid rgba(255, 255, 255, .06);
	}

	.cnm-web__menu > .cnm-web__btn { margin-top: 16px; text-align: center; }

	.cnm-web__header { position: sticky; }
	.cnm-web__nav { position: relative; flex-wrap: nowrap; }

	.cnm-web__mani { padding-top: 70px; padding-bottom: 60px; }
	.cnm-web__titulos { padding-bottom: 70px; }
	.cnm-web__campus { padding-top: 70px; padding-bottom: 70px; }

	.cnm-web__cifras { gap: 28px 38px; margin-top: 36px; }
	.cnm-web__cifras b { font-size: 38px; }

	.cnm-web__practicas { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cnm-web__practicas-cta { gap: 16px; }

	.cnm-web__promesa .cnm-web__wrap { padding-top: 64px; padding-bottom: 64px; }

	/* En el móvil basta la foto pequeña: 180 KB en vez de 650. */
	/* En movil no vale la foto apaisada: para tapar una pantalla vertical hay que
	   ampliarla casi el triple y, encima, el velero se sale del encuadre por los
	   lados. Aqui va un recorte VERTICAL de la misma foto (1200x2000), con el
	   barco dentro y casi sin ampliar. Se sube un poco (42 %) para que no quede
	   detras del titular. */
	.cnm-web__hero-bg {
		background-image: var(--cnm-hero-movil);
		background-position: center 42%;
	}

	/* Excursiones: una columna, y la foto primero — entra por los ojos antes
	   que el texto. */
	.cnm-web__excur { padding: 70px 0; }
	.cnm-web__excur-in { grid-template-columns: 1fr; gap: 34px; }
	.cnm-web__excur-foto { order: -1; }
	.cnm-web__excur-foto img { max-height: 260px; }
}

@media (max-width: 560px) {
	.cnm-web__franja .cnm-web__wrap { grid-template-columns: 1fr; }
	.cnm-web__hero-row { gap: 22px; }
	.cnm-web__acciones { width: 100%; }
	.cnm-web__acciones > * { flex: 1 1 auto; text-align: center; }
	.cnm-web__chat-msgs { min-height: 300px; max-height: 300px; }
	.cnm-web__footer-base .cnm-web__wrap { justify-content: flex-start; }
}

/* ------------------------------------------------------------------
   El asistente que ya vive en la página
   ------------------------------------------------------------------
   Es el mismo widget del aula, no uno nuevo (el prototipo añadía además
   otro botón flotante de WhatsApp: dos lanzadores confunden). Aquí solo
   se le pone la ropa de esta página: dorado sobre azul noche en vez del
   cian del aula.                                                        */

body.cnm-web-page .cnm-bot-toggle {
	background: linear-gradient(145deg, #E7BC55, #C9992E);
	color: #06182B;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

/* En el móvil el botón del asistente cae justo encima de los botones del
   hero: se les deja sitio para que ninguno tape al otro. */
@media (max-width: 560px) {
	.cnm-web__hero-in { padding-bottom: max(9vh, 150px); }
	.cnm-web__hero .cnm-web__acciones { padding-right: 76px; }

	/* «Escuela de navegación · desde 2009» partía en dos líneas y la segunda
	   se quedaba descolgada bajo la rayita. Cabe entera si se aprieta. */
	.cnm-web__hero .cnm-web__kicker { font-size: 10.5px; letter-spacing: .13em; }
}

/* La Licencia se imparte presencial: donde va el precio va la aclaración. */
.cnm-web__card-nota {
	font-family: 'Archivo', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--texto-4);
}

/* ============================================================
   Páginas sueltas de la web pública
   ------------------------------------------------------------
   Excursión, la escuela, convocatorias y los cuatro textos legales. Antes se
   servían con la plantilla del tema —fondo blanco, cabecera del aula, texto
   descolgado a la izquierda— y parecían de otra web.

   El texto va en una columna de ~72 caracteres: es lo que se lee sin cansarse.
   El ancho de la portada (1340 px) aquí sería un renglón interminable.
   ============================================================ */

.cnm-web__pag {
	padding: 130px 0 90px;
	background: linear-gradient(180deg, var(--interior), var(--fondo) 380px);
}

.cnm-web__pag .cnm-web__wrap { max-width: 1060px; }

.cnm-web__pag-cab {
	padding-bottom: 30px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--linea-oro);
}

.cnm-web__pag-cab h1 {
	font-size: clamp(32px, 5.2vw, 60px);
	line-height: 1.04;
	letter-spacing: -.015em;
	margin: 14px 0 0;
	color: #F4F8FB;
}

/* ---- El contenido que escribe WordPress ----
   Desde el 2-08-2026 va sobre una HOJA CLARA tipo documento: Esteban veia
   estas paginas «muy oscuras, estrechas y sin estilo». La cabecera y el pie
   siguen siendo los oscuros de la marca; lo que se lee largo, sobre marfil. */

.cnm-web__pag-cuerpo {
	font-size: 17px;
	line-height: 1.75;
	color: #33475A;
	background: #FBFAF6;
	border: 1px solid rgba(240, 221, 174, .35);
	border-radius: 12px;
	padding: clamp(26px, 5vw, 60px);
	box-shadow: 0 24px 60px rgba(2, 10, 18, .35);
}

.cnm-web__pag-cuerpo > * { max-width: 76ch; }

.cnm-web__pag-cuerpo p { margin: 0 0 22px; }

/* La entradilla: el primer parrafo respira mas, como en una revista. */
.cnm-web__pag-cuerpo > p:first-child {
	font-size: 20px;
	line-height: 1.6;
	color: #1F3346;
}

.cnm-web__pag-cuerpo h2,
.cnm-web__pag-cuerpo h3,
.cnm-web__pag-cuerpo h4 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	line-height: 1.18;
	color: #0B2440;
	margin: 44px 0 14px;
}

.cnm-web__pag-cuerpo h2 { font-size: 30px; }
.cnm-web__pag-cuerpo h3 { font-size: 23px; }
.cnm-web__pag-cuerpo h4 { font-size: 19px; font-family: 'Archivo', sans-serif; font-weight: 700; }

.cnm-web__pag-cuerpo strong,
.cnm-web__pag-cuerpo b { color: #0B2440; font-weight: 700; }

/* Los enlaces del texto tienen que verse: en los legales hay obligaciones
   detrás de algunos (el formulario de desistimiento, por ejemplo). */
.cnm-web__pag-cuerpo a {
	color: #0B2440;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(216, 169, 60, .6);
}

.cnm-web__pag-cuerpo a:hover { text-decoration-color: var(--oro); color: #06182B; }

.cnm-web__pag-cuerpo ul,
.cnm-web__pag-cuerpo ol { margin: 0 0 22px; padding-left: 22px; }
.cnm-web__pag-cuerpo li { margin-bottom: 9px; }
.cnm-web__pag-cuerpo li::marker { color: var(--oro); }

.cnm-web__pag-cuerpo blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 2px solid var(--oro);
	color: #24425E;
	font-style: italic;
}

.cnm-web__pag-cuerpo img,
.cnm-web__pag-cuerpo figure img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--linea-oro);
}

.cnm-web__pag-cuerpo figure { margin: 30px 0; max-width: 100%; }
.cnm-web__pag-cuerpo figcaption { font-size: 13px; color: #6B7C8C; margin-top: 8px; }

.cnm-web__pag-cuerpo hr {
	border: 0;
	border-top: 1px solid rgba(11, 36, 64, .14);
	margin: 40px 0;
}

/* Las tablas de los legales no caben en un móvil: que rueden ellas, no la página. */
.cnm-web__pag-cuerpo table {
	width: 100%;
	border-collapse: collapse;
	margin: 26px 0;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.cnm-web__pag-cuerpo th,
.cnm-web__pag-cuerpo td {
	padding: 11px 14px;
	border: 1px solid #DCD8CC;
	text-align: left;
}

.cnm-web__pag-cuerpo th { color: #0B2440; background: #F1EEE4; }

.cnm-web__pag-volver { margin-top: 56px; }

/* El boton «Conoce la escuela» bajo las cifras de la portada. */
.cnm-web__mani-mas { margin-top: 30px; }

@media (max-width: 900px) {
	.cnm-web__pag { padding: 100px 0 64px; }
	.cnm-web__pag-cuerpo { font-size: 16px; }
	.cnm-web__pag-cuerpo h2 { font-size: 25px; }
}

/* ============================================================
   PÁGINAS «RICAS» (cnm-webr) — 2-08-2026
   Las páginas de escaparate (la escuela, el velero, convocatorias,
   excursión, club, perfeccionamiento, contacto) dejan la hoja clara
   tipo documento y pasan a un diseño por secciones, con la misma
   paleta y los mismos botones que la portada. El contenido vive en
   WordPress (bloque HTML con clases cnm-webr__*); el diseño, aquí.
   Los legales SIGUEN en la hoja clara: leer largo se lee mejor allí.
   ============================================================ */

.cnm-web__rico { background: var(--fondo); }

/* ---- Hero con foto ---- */

.cnm-webr__hero {
	position: relative;
	min-height: 64vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.cnm-webr__hero--corto { min-height: 46vh; }

.cnm-webr__hero-bg {
	position: absolute;
	inset: -4%;
	background: var(--webr-foto) center 55% / cover no-repeat;
}

.cnm-webr__hero-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 24, 43, .55), rgba(6, 24, 43, .18) 45%, rgba(6, 24, 43, .78) 84%, var(--fondo) 100%);
}

.cnm-webr__hero-in {
	position: relative;
	width: 100%;
	padding-top: 140px;
	padding-bottom: max(8vh, 90px);
}

.cnm-webr__hero-in h1 {
	font-size: clamp(42px, 6.6vw, 92px);
	line-height: .94;
	letter-spacing: -.02em;
	margin: 18px 0 0;
	color: #fff;
	text-shadow: 0 3px 30px rgba(6, 24, 43, .5);
}

.cnm-webr__hero-in > p {
	font-size: 18px;
	line-height: 1.55;
	color: var(--texto);
	max-width: 560px;
	margin: 22px 0 0;
	text-shadow: 0 2px 14px rgba(6, 24, 43, .6);
}

/* ---- Secciones ---- */

.cnm-webr__sec { padding: 88px 0; }
.cnm-webr__sec--junta { padding-top: 0; }

/* Banda de contraste a todo el ancho (valores, pasos, homologación...). */
.cnm-webr__banda {
	background: linear-gradient(180deg, var(--fondo), #123156 50%, var(--fondo));
	border-top: 1px solid var(--linea-oro);
	border-bottom: 1px solid var(--linea-oro);
}

.cnm-webr__cab { max-width: 680px; margin-bottom: 44px; }

/* Columna más recogida para listados (convocatorias): a 1340 px las filas
   quedarían como renglones interminables. */
.cnm-webr__estrecho { max-width: 1140px; }

.cnm-webr__cab h2,
.cnm-webr__grid2 h2 {
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.05;
	margin: 14px 0 0;
	color: #F4F8FB;
}

/* Epígrafe en columna + contenido, como la sección (01) de la portada. */
.cnm-webr__grid2 {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 56px;
	align-items: start;
}

.cnm-webr__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 34px;
}

.cnm-webr__cols p { font-size: 16px; line-height: 1.75; color: var(--texto-2); margin: 0; }

/* ---- Fila de celdas (ficha técnica, hitos, cifras) ---- */

.cnm-webr__filas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(240, 221, 174, .14);
	border: 1px solid rgba(240, 221, 174, .14);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 42px;
}

.cnm-webr__filas > div { background: var(--superficie); padding: 28px 26px; }

.cnm-webr__filas b {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-style: italic;
	font-size: clamp(28px, 3.2vw, 38px);
	color: var(--oro-claro);
	line-height: 1;
	display: block;
}

.cnm-webr__filas .t { font-size: 14px; font-weight: 700; color: #fff; margin: 12px 0 6px; }
.cnm-webr__filas .d { font-size: 13px; color: var(--texto-3); line-height: 1.55; }

.cnm-webr__filas--centro > div { text-align: center; }
.cnm-webr__filas--centro .d { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ---- Tarjetas ---- */

.cnm-webr__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}

.cnm-webr__card {
	display: flex;
	flex-direction: column;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 8px;
	padding: 32px 30px;
	transition: transform .3s, border-color .3s;
}

.cnm-webr__card:hover { transform: translateY(-6px); border-color: rgba(216, 169, 60, .5); }

.cnm-webr__tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--oro);
	margin-bottom: 14px;
}

.cnm-webr__num {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 38px;
	color: var(--oro);
	line-height: 1;
	margin-bottom: 16px;
}

.cnm-webr__card h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 23px;
	margin: 0 0 10px;
	color: #F4F8FB;
}

.cnm-webr__card p { font-size: 14.5px; line-height: 1.65; color: var(--texto-3); margin: 0 0 18px; flex: 1; }

.cnm-webr__go { font-size: 13px; font-weight: 700; color: var(--oro); }

/* ---- Panel destacado (quién dirige la escuela, comparativas...) ---- */

.cnm-webr__panel {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 0;
	background: var(--superficie);
	border: 1px solid rgba(240, 221, 174, .2);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8);
	margin-top: 42px;
}

.cnm-webr__panel-bd { padding: 48px 46px; }

.cnm-webr__panel-bd h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: clamp(26px, 3vw, 38px);
	margin: 0 0 6px;
	color: #F4F8FB;
}

.cnm-webr__rol {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oro);
	margin-bottom: 18px;
}

.cnm-webr__panel-bd p { font-size: 15.5px; line-height: 1.7; color: var(--texto-2); margin: 0 0 14px; }

.cnm-webr__panel-lado {
	background: var(--interior);
	border-left: 1px solid var(--linea-oro);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.cnm-webr__panel-lado .k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-4); }
.cnm-webr__panel-lado .v { font-size: 15px; color: var(--texto); font-weight: 600; margin-top: 4px; }

/* ---- Foto a lo ancho ---- */

.cnm-webr__foto {
	height: clamp(260px, 44vw, 460px);
	border-radius: 8px;
	border: 1px solid var(--linea-oro);
	background: var(--webr-foto) center / cover no-repeat;
}

/* ---- Nota / aviso ---- */

.cnm-webr__nota {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: rgba(216, 169, 60, .1);
	border: 1px solid rgba(216, 169, 60, .35);
	border-radius: 8px;
	padding: 16px 20px;
	font-size: 13.5px;
	color: var(--oro-claro);
	line-height: 1.55;
	margin-top: 32px;
}

/* ---- Convocatorias ---- */

.cnm-webr__conv {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: 24px;
	align-items: center;
	background: var(--superficie);
	border: 1px solid var(--linea);
	border-radius: 8px;
	padding: 26px 28px;
	margin-bottom: 18px;
	transition: border-color .3s;
}

.cnm-webr__conv:hover { border-color: rgba(216, 169, 60, .5); }

.cnm-webr__conv--pasada { opacity: .55; }

.cnm-webr__conv-fecha { text-align: center; border-right: 1px solid rgba(240, 221, 174, .15); padding-right: 24px; }

.cnm-webr__conv-fecha b {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 38px;
	color: var(--oro-claro);
	line-height: 1;
	display: block;
}

.cnm-webr__conv-fecha span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--texto-3);
	margin-top: 5px;
	display: block;
}

.cnm-webr__conv h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: 23px;
	margin: 0 0 8px;
	color: #F4F8FB;
}

.cnm-webr__conv-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-3); font-weight: 500; }
.cnm-webr__conv-meta b { color: var(--oro); font-weight: 700; }

.cnm-webr__conv-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }

.cnm-webr__pill { font-size: 11.5px; font-weight: 700; }
.cnm-webr__pill--abierta { color: var(--verde); }
.cnm-webr__pill--pasada { color: var(--texto-4); }

/* ---- CTA final con el Profesor IA ---- */

.cnm-webr__cta {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	align-items: center;
}

.cnm-webr__cta-txt h2 {
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.02;
	margin: 16px 0 18px;
	color: #F4F8FB;
}

.cnm-webr__cta-txt > p { font-size: 16.5px; color: var(--texto-2); max-width: 520px; margin: 0 0 30px; line-height: 1.65; }

/* La caja del asistente: mismo lenguaje que el chat de la portada, en pequeño.
   Es un botón de verdad: al pulsar se abre el asistente (data-cnm-abrir-bot). */
.cnm-webr__ia {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	background: var(--superficie);
	border: 1px solid rgba(216, 169, 60, .3);
	border-radius: 8px;
	padding: 32px 30px;
	box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .8);
	transition: transform .3s, border-color .3s;
}

.cnm-webr__ia:hover { transform: translateY(-4px); border-color: rgba(216, 169, 60, .6); }

.cnm-webr__ia-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.cnm-webr__ia-av {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--oro);
	color: var(--fondo);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 15px;
	flex: none;
}

.cnm-webr__ia-h b { font-size: 15px; color: #fff; display: block; }
.cnm-webr__ia-h small { font-size: 11.5px; color: var(--verde); font-weight: 600; }

.cnm-webr__ia-bub {
	background: rgba(255, 255, 255, .07);
	border-radius: 12px 12px 12px 3px;
	padding: 13px 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #DCE5EC;
	margin-bottom: 18px;
}

.cnm-webr__ia-bub b { color: var(--oro-claro); }

.cnm-webr__ia .cnm-web__btn { display: block; width: 100%; text-align: center; }

/* ---- Lista de comprobación y datos de contacto ---- */

.cnm-webr__feat { display: flex; flex-direction: column; gap: 13px; margin: 26px 0 34px; }
.cnm-webr__feat div { display: flex; gap: 11px; font-size: 14.5px; color: #DCE5EC; }
.cnm-webr__feat b { color: var(--oro); flex: none; }

.cnm-webr__dato { font-size: 15px; color: var(--texto-2); line-height: 1.6; }
.cnm-webr__dato b { display: block; color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.cnm-webr__dato a { color: var(--oro-claro); }
.cnm-webr__dato a:hover { color: var(--oro); }

.cnm-webr__tel {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(30px, 4vw, 44px);
	color: var(--oro-claro);
	display: inline-block;
	margin: 6px 0 2px;
}

/* ---- Móvil ---- */

@media (max-width: 900px) {
	.cnm-webr__hero { min-height: 54vh; }
	.cnm-webr__hero-in { padding-top: 110px; }
	.cnm-webr__sec { padding: 60px 0; }
	.cnm-webr__grid2 { grid-template-columns: 1fr; gap: 26px; }
	.cnm-webr__cols { grid-template-columns: 1fr; gap: 22px; }
	.cnm-webr__filas { grid-template-columns: 1fr 1fr; }
	.cnm-webr__panel { grid-template-columns: 1fr; }
	.cnm-webr__panel-bd, .cnm-webr__panel-lado { padding: 32px 26px; }
	.cnm-webr__panel-lado { border-left: 0; border-top: 1px solid var(--linea-oro); }
	.cnm-webr__conv { grid-template-columns: 1fr; gap: 16px; }
	.cnm-webr__conv-fecha { border-right: 0; border-bottom: 1px solid rgba(240, 221, 174, .15); padding: 0 0 14px; text-align: left; }
	.cnm-webr__conv-cta { align-items: flex-start; }
	.cnm-webr__cta { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- La banda legal de medios de pago, en oscuro ----
   El bloque `cnm-pie-legal` (Getnet, Visa/Mastercard y enlaces legales) se
   pinta en TODO el sitio porque en una web que vende no es opcional. En la
   web pública salía como una franja blanca pegada tras el pie oscuro, como
   de otra web. Aquí se vuelve a vestir con la paleta de la marca; el
   contenido no cambia. */

body.cnm-web-page .cnm-pie-legal {
	margin-top: 0;
	background: var(--pie);
	border-top: 1px solid rgba(255, 255, 255, .07);
}

body.cnm-web-page .cnm-pie-legal .cnm-medios-pago__texto { color: var(--texto-3); }
body.cnm-web-page .cnm-pie-legal .cnm-medios-pago__texto strong { color: var(--texto); }

body.cnm-web-page .cnm-pie-legal__enlaces a { color: var(--texto-4); }

body.cnm-web-page .cnm-pie-legal__enlaces a:hover,
body.cnm-web-page .cnm-pie-legal__enlaces a:focus {
	color: var(--oro-claro);
	border-bottom-color: var(--oro);
}

/* En las páginas web el pie propio (web-pie) ya lista los 4 legales: la fila
   de enlaces de esta franja los repetía justo debajo (lo vio Eloy, 2-08-2026).
   Fuera el duplicado; la mención de Getnet/Visa y el crédito se quedan. */
body.cnm-web-page .cnm-pie-legal__enlaces { display: none; }

body.cnm-web-page .cnm-pie-legal__credito { color: var(--texto-4); }
body.cnm-web-page .cnm-pie-legal__credito a { color: var(--texto-3); }
body.cnm-web-page .cnm-pie-legal__credito a:hover,
body.cnm-web-page .cnm-pie-legal__credito a:focus { color: var(--oro-claro); }

/* ============================================================
   Banda de la próxima convocatoria, bajo la de la tienda (2-08-2026)
   ============================================================ */

.cnm-web__conv-cta {
	display: block;
	margin-top: 14px;
	padding: 18px 26px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: var(--superficie);
	transition: border-color .25s ease, background .25s ease;
}

.cnm-web__conv-cta p {
	margin: 0;
	color: var(--texto-3);
	font-size: 15px;
	line-height: 1.65;
}

.cnm-web__conv-cta strong { color: var(--texto); }

.cnm-web__conv-cta-ir {
	white-space: nowrap;
	color: var(--oro);
	font-weight: 700;
}

.cnm-web__conv-cta:hover,
.cnm-web__conv-cta:focus-visible {
	border-color: var(--oro);
	background: var(--superficie-2, var(--superficie));
}