/* ==========================================================================
   Integridad CPCEE — main.css
   Paleta magenta del isologotipo + triángulos superpuestos con transparencia.
   Mobile-first. Tipografía: Lato.
   ========================================================================== */

:root {
	/* Colors */
	--color-primary: #B50064;   /* magenta principal */
	--color-secondary: #95013F; /* borravino profundo */
	--color-accent: #C75994;    /* rosa medio */
	--color-soft: #DE9FB4;      /* rosa claro */
	--color-bg: #FEFEFE;
	--color-surface: #FBF3F7;   /* rosa casi blanco para superficies */
	--color-text: #2B0E1E;
	--color-text-muted: #6E4A5C;
	--color-border: #EBD4DF;
	--color-cta: #B50064;

	/* Typography */
	--font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem;
	--fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
	--fs-3xl: 2rem; --fs-4xl: 2.75rem; --fs-5xl: 3.5rem;

	/* Spacing */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
	--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

	/* Radius */
	--r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;

	/* Shadows */
	--sh-sm: 0 1px 2px rgba(43, 14, 30, .06);
	--sh-md: 0 6px 18px rgba(149, 1, 63, .10);
	--sh-lg: 0 18px 44px rgba(149, 1, 63, .16);

	/* Layout */
	--container: 1180px;
	--header-h: 76px;
}

/* Reset básico
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--sp-4); }
p { margin: 0 0 var(--sp-4); }
ul { margin: 0; padding: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--color-secondary); color: #fff;
	padding: var(--sp-3) var(--sp-5); z-index: 200;
}
.skip-link:focus { left: 0; }

/* Botones
   ========================================================================== */
.btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: var(--r-full);
	font-weight: 900;
	font-size: var(--fs-base);
	text-decoration: none;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-primary { background: var(--color-cta); color: #fff; }
.btn-primary:hover { background: var(--color-secondary); }
.btn-light { background: #fff; color: var(--color-secondary); }
.btn-block { width: 100%; }

/* Header
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(254, 254, 254, .96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
}
.header-inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: var(--header-h); gap: var(--sp-5);
}
.header-logo img { width: 128px; height: auto; }

.header-nav ul {
	list-style: none;
	display: flex; align-items: center; gap: var(--sp-5);
}
.header-nav a {
	text-decoration: none;
	color: var(--color-text);
	font-weight: 700;
	font-size: var(--fs-sm);
	transition: color .15s ease;
}
.header-nav a:hover { color: var(--color-primary); }
.header-nav .nav-cta {
	background: var(--color-cta); color: #fff;
	padding: 10px 22px; border-radius: var(--r-full);
}
.header-nav .nav-cta:hover { background: var(--color-secondary); color: #fff; }

.menu-toggle {
	display: inline-flex; flex-direction: column; gap: 5px;
	background: none; border: 0; padding: var(--sp-2); cursor: pointer;
}
.menu-toggle-bar {
	width: 26px; height: 3px; border-radius: 2px;
	background: var(--color-secondary);
	transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Nav mobile */
@media (max-width: 1023px) {
	.header-nav {
		position: fixed; inset: var(--header-h) 0 auto 0;
		background: #fff;
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--sh-lg);
		padding: var(--sp-5);
		transform: translateY(-130%);
		transition: transform .25s ease;
	}
	.header-nav.is-open { transform: translateY(0); }
	.header-nav ul { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
	.header-nav a { display: block; padding: var(--sp-3); font-size: var(--fs-base); }
	.header-nav .nav-cta { text-align: center; margin-top: var(--sp-2); }
}
@media (min-width: 1024px) {
	.menu-toggle { display: none; }
}

/* Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-secondary);
	color: #fff;
}
.hero-bg { position: absolute; inset: 0; }
.hero-tri { position: absolute; }
.hero-tri-1 {
	inset: 0;
	background: var(--color-primary);
	clip-path: polygon(0 0, 62% 0, 40% 100%, 0 100%);
}
.hero-tri-2 {
	inset: 0;
	background: rgba(199, 89, 148, .55);
	clip-path: polygon(100% 45%, 100% 100%, 46% 100%);
}
.hero-tri-3 {
	inset: 0;
	background: rgba(222, 159, 180, .38);
	clip-path: polygon(0 78%, 34% 100%, 0 100%);
}
.hero-tri-4 {
	inset: 0;
	background: rgba(254, 254, 254, .08);
	clip-path: polygon(78% 0, 100% 0, 100% 34%);
}

.hero-inner {
	position: relative;
	display: grid; gap: var(--sp-6);
	padding-block: var(--sp-8) var(--sp-7);
}
.hero-kicker {
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	margin-bottom: var(--sp-3);
}
.hero-title {
	font-size: clamp(2.1rem, 6vw, 3.6rem);
	font-weight: 900;
}
.hero-title em { display: block; font-style: italic; }
.hero-sub {
	font-size: var(--fs-lg);
	font-weight: 300;
	max-width: 32em;
	color: rgba(255, 255, 255, .92);
}
.hero-actions { margin-block: var(--sp-5); }
.hero-date {
	display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
	font-weight: 700; margin: 0;
}
.hero-date-badge {
	background: #fff; color: var(--color-secondary);
	font-weight: 900;
	padding: 6px 16px; border-radius: var(--r-full);
	text-transform: uppercase; letter-spacing: .06em;
	font-size: var(--fs-sm);
}
.hero-media img {
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

@media (min-width: 1024px) {
	.hero-inner {
		grid-template-columns: 1.05fr .95fr;
		align-items: center;
		padding-block: var(--sp-9);
	}
}

/* Secciones — base
   ========================================================================== */
.section { padding-block: var(--sp-8); }
.section-kicker {
	font-size: var(--fs-sm);
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--sp-3);
}
.section-title {
	font-size: clamp(1.6rem, 4.5vw, 2.5rem);
	font-weight: 900;
	max-width: 22em;
}

/* Quiénes somos
   ========================================================================== */
.quienes-inner { display: grid; gap: var(--sp-6); align-items: center; }
.quienes-media { position: relative; max-width: 420px; margin-inline: auto; }
.media-tri {
	position: absolute; inset: 8% -6% -4% -10%;
	background: linear-gradient(135deg, var(--color-soft), var(--color-accent));
	clip-path: polygon(0 18%, 100% 0, 82% 100%, 0 100%);
	border-radius: var(--r-lg);
	opacity: .45;
}
.media-tri-alt {
	clip-path: polygon(18% 0, 100% 10%, 100% 100%, 0 82%);
	background: linear-gradient(215deg, var(--color-primary), var(--color-accent));
	opacity: .30;
}
.quienes-media img,
.continuidad-media img { position: relative; }

.formula {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: var(--sp-3);
	margin-top: var(--sp-5);
}
.formula li {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-secondary);
	font-weight: 900;
	padding: 8px 20px;
	border-radius: var(--r-full);
}
.formula li:not(:last-child)::after { content: ' +'; color: var(--color-accent); }

@media (min-width: 1024px) {
	.quienes-inner { grid-template-columns: .9fr 1.1fr; gap: var(--sp-8); }
}

/* Gestión cumplida
   ========================================================================== */
.gestion { background: var(--color-surface); }
.gestion-grid {
	display: grid; gap: var(--sp-5);
	margin-top: var(--sp-6);
}
.gestion-card {
	background: #fff;
	border-radius: var(--r-md);
	padding: var(--sp-5);
	box-shadow: var(--sh-sm);
	border-top: 4px solid var(--color-primary);
	transition: transform .18s ease, box-shadow .18s ease;
}
.gestion-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gestion-badge {
	display: inline-block;
	background: var(--color-primary); color: #fff;
	font-size: var(--fs-xs); font-weight: 900;
	text-transform: uppercase; letter-spacing: .08em;
	padding: 4px 12px; border-radius: var(--r-full);
	margin-bottom: var(--sp-3);
}
.gestion-card h3 { font-size: var(--fs-xl); font-weight: 900; margin-bottom: var(--sp-2); }
.gestion-card p { margin: 0; color: var(--color-text-muted); }

@media (min-width: 640px) { .gestion-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.gestion-grid { grid-template-columns: repeat(3, 1fr); }
	.gestion-card:nth-child(4) { grid-column: span 1; }
}

/* Compromisos 2026
   ========================================================================== */
.compromisos {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, var(--color-secondary), var(--color-primary) 80%);
	color: #fff;
}
.compromisos-tri {
	position: absolute; inset: 0;
	background: rgba(254, 254, 254, .06);
	clip-path: polygon(100% 0, 100% 62%, 55% 0);
	pointer-events: none;
}
.compromisos .section-kicker { color: var(--color-soft); }
.compromisos-grid {
	display: grid; gap: var(--sp-5);
	margin-top: var(--sp-6);
	position: relative;
}
.compromiso-card {
	background: rgba(254, 254, 254, .10);
	border: 1px solid rgba(254, 254, 254, .18);
	backdrop-filter: blur(4px);
	border-radius: var(--r-md);
	padding: var(--sp-5);
	transition: background .18s ease, transform .18s ease;
}
.compromiso-card:hover { background: rgba(254, 254, 254, .16); transform: translateY(-4px); }
.compromiso-num {
	display: block;
	font-size: var(--fs-2xl);
	font-weight: 900;
	font-style: italic;
	color: var(--color-soft);
	margin-bottom: var(--sp-2);
}
.compromiso-card h3 { font-size: var(--fs-xl); font-weight: 900; margin-bottom: var(--sp-2); }
.compromiso-card p { margin: 0; color: rgba(255, 255, 255, .88); font-size: var(--fs-sm); line-height: 1.7; }

@media (min-width: 640px) { .compromisos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .compromisos-grid { grid-template-columns: repeat(3, 1fr); } }

/* Continuidad
   ========================================================================== */
.continuidad-inner { display: grid; gap: var(--sp-6); align-items: center; }
.continuidad-media { position: relative; max-width: 400px; margin-inline: auto; }
.continuidad-destacado {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-secondary);
	border-left: 4px solid var(--color-primary);
	padding-left: var(--sp-4);
}
@media (min-width: 1024px) {
	.continuidad-inner { grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); }
}

/* Lista Nº 1
   ========================================================================== */
.lista { background: var(--color-surface); }
.lista-sub { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 36em; }
.lista-acordeones { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.acordeon {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	box-shadow: var(--sh-sm);
	overflow: hidden;
}
.acordeon summary {
	list-style: none;
	cursor: pointer;
	font-weight: 900;
	font-size: var(--fs-lg);
	color: var(--color-secondary);
	padding: var(--sp-5);
	position: relative;
	padding-right: var(--sp-8);
	transition: background .15s ease;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
	content: '';
	position: absolute; right: var(--sp-5); top: 50%;
	width: 12px; height: 12px;
	border-right: 3px solid var(--color-primary);
	border-bottom: 3px solid var(--color-primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.acordeon[open] summary { background: var(--color-surface); }
.acordeon[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.acordeon-body { padding: var(--sp-5); }
.acordeon-nota { font-size: var(--fs-sm); color: var(--color-text-muted); font-style: italic; }
.lista-nombres { list-style: none; display: grid; gap: var(--sp-2); }
.lista-nombres li {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-surface);
	border-radius: var(--r-sm);
}
.lista-num {
	font-weight: 900;
	font-style: italic;
	color: var(--color-accent);
	flex-shrink: 0;
}
.lista-nombre { font-weight: 700; }
.lista-detalle {
	margin-left: auto;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}
@media (min-width: 768px) { .lista-nombres { grid-template-columns: repeat(2, 1fr); } }

/* Contacto
   ========================================================================== */
.contacto-inner { display: grid; gap: var(--sp-6); align-items: start; }
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
.cf-turnstile { margin-bottom: var(--sp-4); }
.contacto-form-wrap {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
	padding: var(--sp-6);
}
.form-field { margin-bottom: var(--sp-4); }
.form-field label {
	display: block;
	font-weight: 700;
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-1);
	color: var(--color-secondary);
}
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: var(--fs-base);
	background: var(--color-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(181, 0, 100, .12);
}
.form-msg {
	padding: var(--sp-4);
	border-radius: var(--r-sm);
	font-weight: 700;
	margin-bottom: var(--sp-4);
}
.form-msg-ok { background: #EAF7EF; color: #1E6B3C; border: 1px solid #BFE5CD; }
.form-msg-error { background: #FDECEF; color: #96203C; border: 1px solid #F3C2CE; }

@media (min-width: 1024px) {
	.contacto-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
	.contacto-img { display: block; }
}

/* Banda final
   ========================================================================== */
.banda-final {
	background: var(--color-primary);
	color: #fff;
	text-align: center;
	padding-block: var(--sp-7);
	position: relative;
	overflow: hidden;
}
.banda-final::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(149, 1, 63, .55);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.banda-final .container { position: relative; }
.banda-claim {
	font-size: clamp(1.8rem, 5vw, 2.8rem);
	font-weight: 900;
	font-style: italic;
	margin-bottom: var(--sp-2);
}
.banda-fecha { font-weight: 700; letter-spacing: .04em; margin: 0; }

/* Footer
   ========================================================================== */
.site-footer {
	background: #2B0E1E;
	color: rgba(255, 255, 255, .85);
	position: relative;
	overflow: hidden;
}
.footer-triangles {
	position: absolute; inset: 0;
	background: rgba(181, 0, 100, .12);
	clip-path: polygon(0 0, 42% 0, 12% 100%, 0 100%);
	pointer-events: none;
}
.footer-inner {
	position: relative;
	display: grid; gap: var(--sp-6);
	padding-block: var(--sp-7);
}
.footer-logo {
	width: 150px;
	background: #fff;
	border-radius: var(--r-sm);
	padding: var(--sp-2);
}
.footer-claim { font-style: italic; font-weight: 900; font-size: var(--fs-xl); color: #fff; margin-top: var(--sp-3); }
.footer-title {
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--color-soft);
	margin-bottom: var(--sp-3);
}
.footer-list { list-style: none; display: grid; gap: var(--sp-2); }
.footer-list a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: var(--sp-4);
	font-size: var(--fs-sm);
}
.footer-bottom p { margin: 0; }
.footer-copy { color: rgba(255, 255, 255, .55); margin-top: var(--sp-1); }

@media (min-width: 768px) {
	.footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
	.footer-bottom .container { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
	.footer-copy { margin-top: 0; }
}

/* Páginas simples / 404
   ========================================================================== */
.page-simple { padding-block: var(--sp-8); min-height: 50vh; }
.page-404 { text-align: center; }
.page-404 .section-title { margin-inline: auto; }

/* Animaciones reveal
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.btn, .gestion-card, .compromiso-card { transition: none; }
}