/* ===================================================================
   PAGES CSS — Estilos para plantillas de contenido (About, Contact, Legal, Blog, Article, 404)
   Cargado automáticamente por functions.php
=================================================================== */

/* ===================================================================
   ABOUT PAGE (.cf-about)
=================================================================== */
.cf-about .cf-hero {
	text-align:center;
	padding:70px var(--pad) 56px;
}

.cf-about .cf-hero h1 {
	font-size:clamp(40px,8vw,62px);
	margin:22px 0 0;
	line-height:.98;
}

.cf-about .cf-hero .neon {
	color:var(--accent);
	text-shadow:0 0 28px var(--accent);
}

.cf-about .cf-hero-lead {
	font-size:17px;
	margin:22px auto 0;
	max-width:440px;
}

.cf-about .cf-grid-2 {
	gap:48px;
	align-items:center;
}

/* Solo la tarjeta VISUAL del split de historia (1 hijo centrado). Antes esto
   apuntaba a TODAS las .cf-about .cf-card y rompía las de principios/proceso/
   compromiso (icono+título+texto) volviéndolas flex-row + aspect 4/3. */
.cf-about .cf-about-visual {
	aspect-ratio:4/3;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

/* Principios (grid-3): tarjeta tipo "media object" — icono a la IZQUIERDA y el
   título+texto a SU ALTURA (a la derecha), no encima. CSS grid: el icono ocupa
   las dos filas de la columna 1; título y texto van en la columna 2. */
.cf-about .cf-grid-3 .cf-card {
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:14px;
	align-items:start;
	text-align:left;
	transition:transform .2s ease, border-color .2s ease;
}
.cf-about .cf-grid-3 .cf-vp-ico { grid-column:1; grid-row:1 / span 2; margin-bottom:0; }
.cf-about .cf-grid-3 .cf-card h3 { grid-column:2; grid-row:1; }
.cf-about .cf-grid-3 .cf-card p  { grid-column:2; grid-row:2; margin-top:4px; }

/* Proceso (grid-4): número arriba + título inline, alineado a la izquierda. */
.cf-about .cf-grid-4 .cf-card {
	text-align:left;
	transition:transform .2s ease, border-color .2s ease;
}

/* Grids del Sobre nosotros en móvil: 2 col en tablet, 1 col en teléfono
   (cartas a todo el ancho → "01 Idea" y las descripciones con sitio de sobra). */
@media (max-width:1024px){
	.cf-about .cf-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
	.cf-about .cf-grid-3,
	.cf-about .cf-grid-4{grid-template-columns:1fr}
}

.cf-about .cf-grid-3 .cf-card:hover {
	transform:translateY(-4px);
	border-color:#43f5b088;
}

/* ===================================================================
   CONTACT PAGE (.cf-contact)
=================================================================== */
.cf-contact .cf-hero {
	position:relative;
	overflow:hidden;
	border-bottom:1px solid var(--line-1);
}

.cf-contact .cf-hero > div:first-child {
	position:relative;
	text-align:center;
	padding:60px 28px 44px;
}

.cf-contact h1 {
	font-size:48px;
	margin:20px 0 0;
	line-height:1.02;
	letter-spacing:-.01em;
}

.cf-contact .cf-hero-lead {
	font-size:17px;
	margin:16px auto 0;
	max-width:520px;
}

.cf-contact-form {
	display:grid;
	gap:14px;
}

.cf-contact-form > div:first-child {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
	margin-bottom:14px;
}

.cf-contact .cf-section {
	display:grid;
	grid-template-columns:1fr 360px;
	gap:34px;
	align-items:start;
}

.cf-contact .cf-label {
	display:block;
	font-family:var(--f-head);
	font-size:12px;
	letter-spacing:.06em;
	color:var(--muted);
	text-transform:uppercase;
	margin-bottom:7px;
}

.cf-contact .cf-input,
.cf-contact input,
.cf-contact select,
.cf-contact textarea {
	width:100%;
	background:var(--bg);
	border:1px solid var(--line-3);
	border-radius:var(--r-11);
	padding:13px 16px;
	color:var(--text);
	font-size:14px;
	font-family:var(--f-body);
	transition:border-color .15s, box-shadow .15s;
}

.cf-contact .cf-input:focus,
.cf-contact input:focus,
.cf-contact select:focus,
.cf-contact textarea:focus {
	outline:none;
	border-color:var(--neon-3);
	box-shadow:0 0 0 3px var(--neon-1);
}

.cf-contact .cf-input::placeholder,
.cf-contact input::placeholder,
.cf-contact textarea::placeholder {
	color:var(--faint);
}

.cf-faq {
	background:var(--surface);
	border:1px solid var(--line-2);
	border-radius:var(--r-14);
	padding:18px 22px;
	margin-bottom:12px;
	cursor:pointer;
}

.cf-faq summary {
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-family:var(--f-head);
	font-weight:600;
	font-size:15.5px;
	color:var(--text);
	list-style:none;
	cursor:pointer;
}

.cf-faq summary::-webkit-details-marker {
	display:none;
}

.cf-faq summary span {
	color:var(--accent);
	font-size:18px;
	flex:none;
	transition:transform .3s ease;
}

.cf-faq[open] summary span {
	transform:rotate(45deg);
}

.cf-faq p {
	font-size:14px;
	line-height:1.65;
	color:var(--text-2);
	margin:14px 0 0;
}

/* ===================================================================
   LEGAL PAGE (.cf-legal)
=================================================================== */
.cf-legal .cf-section {
	display:grid;
	grid-template-columns:268px 1fr;
	gap:34px;
	align-items:start;
	padding-top:24px;
}

.cf-legal aside {
	position:sticky;
	top:96px;
}

.cf-prose {
	background:var(--surface);
	border:1px solid var(--line-2);
	border-radius:18px;
	padding:40px;
	max-width:820px;
}

.cf-prose h2 {
	font-family:var(--f-head);
	font-weight:700;
	font-size:22px;
	color:var(--text);
	margin:0 0 14px;
	letter-spacing:-.01em;
	scroll-margin-top:90px;
}

.cf-prose p {
	font-size:15px;
	line-height:1.78;
	color:var(--text-2);
	margin-bottom:14px;
}

.cf-prose li {
	font-size:15px;
	line-height:1.7;
	color:var(--text-2);
	margin-bottom:8px;
}

.cf-prose ul {
	padding-left:22px;
	margin-bottom:14px;
}

.cf-prose strong {
	color:var(--text);
	font-weight:600;
}

.cf-prose a {
	color:var(--accent);
	text-decoration:none;
	transition:color .15s;
}

.cf-prose a:hover {
	color:#6bffcc;
}

#cf-toc {
	display:flex;
	flex-direction:column;
	gap:0;
}

#cf-toc a {
	display:flex;
	gap:9px;
	text-decoration:none;
	color:var(--text-2);
	font-size:13px;
	line-height:1.4;
	padding:6px 0;
	border-left:2px solid transparent;
	padding-left:10px;
	transition:color .15s, border-color .15s;
}

#cf-toc a span {
	color:var(--faint);
	font-family:var(--f-head);
	font-weight:600;
	flex:none;
}

#cf-toc a:hover {
	color:var(--accent);
	border-left-color:var(--accent);
}

/* ===================================================================
   BLOG INDEX PAGE (.cf-blog)
=================================================================== */
.cf-blog .cf-section:first-of-type h1 {
	margin-bottom:12px;
	margin-top:10px;
}

.cf-blog .cf-section:nth-of-type(2) {
	padding-top:24px;
	padding-bottom:8px;
}

.cf-blog .cf-section:nth-of-type(2) .cf-chip {
	font-size:13px;
	padding:8px 15px;
	border-radius:9px;
	cursor:pointer;
}

.cf-blog .cf-chip:first-child {
	background:var(--accent);
	color:var(--accent-ink);
	border-color:var(--accent);
}

.cf-blog .cf-card[href] {
	text-decoration:none;
	display:grid;
	grid-template-columns:1.1fr 1fr;
	gap:0;
	overflow:hidden;
	transition:border-color .2s;
}

.cf-blog .cf-card[href]:hover {
	border-color:var(--neon-3);
}

.cf-blog .cf-grid-3 .cf-card[href] {
	display:flex;
	flex-direction:column;
	grid-template-columns:initial;
}

.cf-blog .cf-grid-3 .cf-card[href] > div:first-child {
	height:190px;
	flex:none;
}

.cf-blog .cf-grid-3 .cf-card[href]:hover {
	transform:translateY(-6px);
	box-shadow:var(--glow-card);
}

.cf-blog .cf-grid-3 .cf-card[href]:hover span {
	transform:scale(1.06);
}

/* ===================================================================
   ARTICLE PAGE (.cf-article)
=================================================================== */
.cf-article article:first-of-type {
	max-width:760px;
	margin:0 auto;
	padding:40px 28px 0;
}

.cf-article .cf-prose {
	max-width:680px;
	margin:0 auto;
	padding:38px 28px 0;
	background:none;
	border:none;
}

.cf-prose p {
	font-size:16.5px;
	line-height:1.8;
	color:var(--text-2);
}

.cf-prose strong {
	color:var(--text);
	font-weight:600;
}

.cf-article .cf-grid-3 .cf-card[href] {
	display:flex;
	flex-direction:column;
	transition:transform .25s, box-shadow .25s, border-color .25s;
}

.cf-article .cf-grid-3 .cf-card[href]:hover {
	transform:translateY(-6px);
	border-color:var(--neon-3);
	box-shadow:var(--glow-card);
}

/* ===================================================================
   404 PAGE (.cf-404)
=================================================================== */
.cf-404 {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

.cf-404 section {
	position:relative;
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:60px 28px;
	overflow:hidden;
	text-align:center;
	min-height:70vh;
}

.cf-404 h1 {
	font-family:var(--f-head);
	font-weight:700;
	font-size:32px;
	line-height:1.1;
	margin:26px 0 0;
}

.cf-404 p {
	font-size:16px;
	line-height:1.6;
	color:var(--text-2);
	margin:14px auto 0;
	max-width:440px;
}

.cf-404 .cf-btn {
	margin-top:30px;
	white-space:nowrap;
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width:1024px) {
	.cf-legal .cf-section {
		grid-template-columns:1fr;
	}

	.cf-legal aside {
		position:static;
	}

	.cf-contact .cf-section {
		grid-template-columns:1fr;
	}

	.cf-contact aside {
		order:-1;
	}

	.cf-about .cf-grid-2 {
		gap:30px;
	}
}

@media (max-width:560px) {
	.cf-about h1 {
		font-size:clamp(32px,7vw,40px);
	}

	.cf-contact h1 {
		font-size:36px;
	}

	.cf-contact .cf-section {
		display:block;
	}

	.cf-contact-form > div:first-child {
		grid-template-columns:1fr;
	}

	.cf-legal .cf-prose {
		padding:20px;
	}

	.cf-blog .cf-card[href] {
		grid-template-columns:1fr;
	}

	.cf-blog .cf-card[href] > div:first-child {
		min-height:200px;
	}

	.cf-article article:first-of-type {
		padding-top:32px;
	}

	.cf-404 div {
		max-width:100%;
	}

	.cf-404 h1 {
		font-size:24px;
	}

	.cf-404 .cf-btn {
		display:block;
		width:100%;
	}
}