/* ==========================================================================
   Becas Carlos Salas — página Convocatoria
   Cabecera, pie, botones, píldoras y fundidos vienen de main.css.
   ========================================================================== */

.cv-h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.cv-intro { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; text-wrap: pretty; }
.cv-intro--claro { color: rgba(255, 255, 255, .85); }
.cv-nota { font-size: 17px; line-height: 1.55; color: rgba(37, 22, 5, .75); text-wrap: pretty; }
.cv-seccion { padding-block: var(--seccion-y); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.cv-cabecera { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.cv-cabecera__titulo { display: flex; flex-direction: column; gap: 24px; }

/* Portada ----------------------------------------------------------------- */
.cv-portada { position: relative; overflow: hidden; background: var(--noche); color: #fff; --foco: var(--amarillo); }
.cv-portada::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 50% at 70% 110%, rgba(0, 75, 146, .7) 0%, rgba(0, 75, 146, 0) 70%);
}
.cv-portada__marca {
	position: absolute; right: -2vw; top: -6vw;
	font-size: clamp(280px, 42vw, 620px); line-height: .8; font-weight: 700; letter-spacing: -.06em;
	color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .08); pointer-events: none; user-select: none;
}
.cv-portada__inner {
	position: relative; max-width: var(--max); margin: 0 auto;
	padding: calc(128px + clamp(16px, 3vw, 48px)) var(--gutter) clamp(64px, 8vw, 120px);
}
.cv-portada__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: start; }
.cv-portada__texto { display: flex; flex-direction: column; gap: 28px; }
.cv-portada__texto .pildora { align-self: flex-start; }
.cv-pildora-cerrada { padding: 0 16px; }
.cv-portada__titulo { font-size: clamp(44px, 5.6vw, 86px); line-height: .95; font-weight: 700; letter-spacing: -.045em; }
.cv-portada__texto .cv-intro { max-width: 640px; }
.cv-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cv-btn { height: 56px; padding: 0 24px 0 30px; font-size: 17px; gap: 12px; }
.cv-btn--contorno { padding: 0 26px; font-size: 16px; gap: 10px; }
.cv-datos { display: flex; flex-direction: column; gap: 16px; }
.cv-dato { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; }
.cv-dato__n { font-size: clamp(28px, 2.6vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--amarillo); }
.cv-dato__t { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .75); }

/* Requisitos -------------------------------------------------------------- */
.cv-req { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cv-req__item { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: #fff; border: 1px solid rgba(0, 75, 146, .18); border-radius: 20px; }
.cv-req__n { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--azul); }
.cv-req__item strong { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.cv-req__detalle { font-size: 15px; line-height: 1.5; color: rgba(37, 22, 5, .72); }

/* Documentación ----------------------------------------------------------- */
.cv-docs { background: #fff; border-top: 1px solid rgba(0, 75, 146, .15); border-bottom: 1px solid rgba(0, 75, 146, .15); }
.cv-docs__inner { padding-block: var(--seccion-y); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.cv-docs__lateral { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 120px; }
.cv-docs__texto { font-size: 17px; line-height: 1.55; color: rgba(37, 22, 5, .75); max-width: 420px; text-wrap: pretty; }
.cv-descargas { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cv-descarga { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 16px; font-weight: 700; color: var(--azul); text-decoration: none; }
.cv-descarga svg { flex: none; }
.cv-descarga:hover { color: var(--azul-hover); }
.cv-lista { display: flex; flex-direction: column; }
.cv-lista li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0, 75, 146, .15); font-size: 17px; line-height: 1.45; }
.cv-lista__n { flex: none; width: 28px; font-size: 15px; font-weight: 700; color: var(--azul); }

/* Proceso ----------------------------------------------------------------- */
.cv-proceso { position: relative; overflow: hidden; background: var(--noche); color: #fff; --foco: var(--amarillo); }
.cv-proceso__inner { position: relative; padding-block: var(--seccion-y); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.cv-fases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cv-fase { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 24px; background: rgba(255, 255, 255, .04); }
.cv-fase__etiqueta { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.cv-fase__titulo { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.cv-fase__puntos { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--amarillo); }
.cv-fase__puntos span { font-size: 17px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.cv-fase__detalle { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .75); }

/* Calendario -------------------------------------------------------------- */
.cv-hitos { display: flex; flex-direction: column; }
.cv-hito { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(16px, 3vw, 48px); padding: 26px 0; border-top: 2px solid rgba(0, 75, 146, .2); }
.cv-hito__fecha { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--azul); }
.cv-hito__texto { display: flex; flex-direction: column; gap: 6px; }
.cv-hito__texto strong { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.cv-hito__texto span { font-size: 16px; line-height: 1.5; color: rgba(37, 22, 5, .72); }

/* Formulario -------------------------------------------------------------- */
.cv-form { position: relative; overflow: hidden; background: var(--noche); color: #fff; --foco: var(--amarillo); scroll-margin-top: 80px; }
.cv-form__inner { position: relative; padding-block: var(--seccion-y); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.cv-form__cabecera { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.cv-form__titulo { font-size: clamp(34px, 3.6vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.cv-form__caja {
	background: var(--fondo); color: var(--texto); border-radius: 28px; padding: clamp(28px, 4vw, 56px);
	/* 860 px útiles para el formulario, más el relleno (la maqueta suma el relleno al ancho). */
	display: flex; flex-direction: column; gap: 24px; max-width: calc(860px + 2 * clamp(28px, 4vw, 56px)); --foco: var(--azul);
}
.cv-form__caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 75, 146, .18); }
.cv-form__caja-cab strong { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.cv-form__chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; background: rgba(0, 75, 146, .08); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--azul); }
.cv-form__pie { font-size: 14px; line-height: 1.5; color: rgba(37, 22, 5, .6); }
.cv-esquema { display: flex; flex-direction: column; gap: 18px; }
.cv-esquema__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.cv-esquema__campo { display: flex; flex-direction: column; gap: 8px; }
.cv-esquema__label { height: 11px; border-radius: 999px; background: rgba(0, 75, 146, .28); }
.cv-esquema__input { height: 52px; border: 1px solid rgba(0, 75, 146, .22); border-radius: 6px; background: #fff; }
.cv-esquema__adjunto { display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px dashed rgba(0, 75, 146, .35); border-radius: 6px; background: #fff; font-size: 15px; color: rgba(37, 22, 5, .6); }
.cv-esquema__linea { width: 100%; max-width: 520px; height: 11px; border-radius: 999px; background: rgba(0, 75, 146, .18); }
.cv-esquema__boton { width: 60px; height: 52px; border-radius: 999px; background: rgba(0, 75, 146, .18); }
.cv-form__iframe { display: block; width: 100%; min-width: 100%; height: 540px; border: 0; }
.cv-form__cerrada { display: flex; flex-direction: column; gap: 14px; max-width: calc(760px + 2 * clamp(28px, 4vw, 48px)); padding: clamp(28px, 4vw, 48px); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); border-radius: 28px; }
.cv-form__cerrada strong { font-size: 23px; line-height: 1.2; }
.cv-form__cerrada span { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .75); }

/* Anclas: que el título no quede debajo de la cápsula. */
#requisitos, #documentacion, #proceso, #calendario { scroll-margin-top: 80px; }

/* Móvil ------------------------------------------------------------------- */
@media (max-width: 760px) {
	.cv-portada__inner { padding-top: calc(96px + clamp(16px, 3vw, 48px)); }
	.cv-portada__grid, .cv-cabecera, .cv-docs__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.cv-portada__titulo { font-size: 46px; }
	.cv-docs__lateral { position: static; }
	.cv-req { grid-template-columns: minmax(0, 1fr); }
	/* Calendario: fecha encima del texto, en una sola columna. */
	.cv-hito { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
	/* Con el formulario real, la caja apenas deja margen para que JotForm use el ancho. */
	.cv-form__caja--jotform { padding: 10px; border-radius: 24px; }
}