/* ==========================================================================
   CREATICS · filosofia.css — lo propio de /proposito-y-filosofia/ (prefijo .cs-fil-).
   Requiere actividades.css además de los cinco comunes. Solo lo que no existe ya:
   el héroe de texto con foto e índice, los dos bloques del manifiesto, los pilares
   en corto, el detalle de CREA+ (fase, Diario de Proyectos, habilidades) y los valores.
   Se reutiliza tal cual: .cs-method y .cs-mapa (portada), .cs-apn-res (reseñas),
   .cs-cierre + .cs-form (cierre) y .cs-apn-barra (barra del móvil).
   ========================================================================== */

/* Todas las secciones con ancla dejan sitio a la barra fija al saltar */
.cs-fil section[id]{scroll-margin-top:72px}

/* ---------- 1 · Héroe: texto sobre fondo plano, con la foto al lado ---------- */
.cs-fil-hero{padding-block:120px 72px}
.cs-fil-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.cs-fil-hero__in{gap:18px;align-items:flex-start}
.cs-fil-hero__t{margin:0;font-size:var(--display-md);max-width:14ch;color:var(--cs-white)}
.cs-fil-hero .cs-lead{margin:0;max-width:52ch}
.cs-fil-hero__acciones{padding-top:6px}
.cs-fil-hero__foto{margin:0}
.cs-fil-hero__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);border:var(--border-bold) solid var(--cs-white);box-shadow:5px 5px 0 0 var(--cs-turquoise);transform:rotate(1.2deg)}

/* Índice de la página: enlaces a las anclas, sin repetir el texto de cada sección */
.cs-fil-indice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:10px}
.cs-fil-indice__t{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:color-mix(in srgb,var(--cs-white) 62%,transparent)}
.cs-fil-indice ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-fil-indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--cs-white) 10%,transparent);border:1px solid color-mix(in srgb,var(--cs-white) 26%,transparent);font-size:var(--text-sm);font-weight:700;color:var(--cs-white);text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast)}
.cs-fil-indice a:hover{background:color-mix(in srgb,var(--cs-white) 18%,transparent);border-color:var(--cs-white);color:var(--cs-white)}

/* ---------- 2 · El porqué: problema y respuesta, a la izquierda y en párrafos cortos ---------- */
.cs-fil-porque .cs-section__head{max-width:760px}
.cs-fil-porque__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.cs-fil-porque__col{display:flex;flex-direction:column;gap:36px}
.cs-fil-bloque{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px 32px 32px;border-radius:var(--radius-lg)}
.cs-fil-bloque .cs-h3{margin:0;max-width:22ch}
.cs-fil-bloque p{margin:0;max-width:62ch;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-fil-bloque--problema{background:var(--neutral-50);border:var(--border) solid var(--color-border)}
.cs-fil-bloque--respuesta{background:var(--color-surface);border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}
.cs-fil-bloque--respuesta p{color:var(--cs-ink)}
.cs-fil-cita{margin:0;padding-left:22px;border-left:6px solid var(--cs-pink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-3xl);line-height:1.12;letter-spacing:var(--tracking-tight);color:var(--cs-ink);max-width:20ch}

/* ---------- 3 · Pilares en corto (los de la portada, sin sus fotos) ---------- */
.cs-fil-pilares__lista{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-fil-pilar{--_c:var(--cs-turquoise);display:flex;flex-direction:column;gap:8px;padding:24px 24px 26px;background:var(--color-surface);border:var(--border) solid var(--color-border);border-top:5px solid var(--_c);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.cs-fil-pilar--pink{--_c:var(--cs-pink)}
.cs-fil-pilar--yellow{--_c:var(--cs-yellow)}
.cs-fil-pilar__num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-fil-pilar .cs-h4{margin:0}
.cs-fil-pilar p{margin:0;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-fil-mas{margin:0}
.cs-fil-mas .cs-link{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 4 · Método CREA+: la fase de /crea/ sobre cada paso de la portada ---------- */
.cs-fil-metodo .cs-section__head{max-width:760px}
.cs-fil-fase{align-self:flex-start;margin-top:4px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-fil-metodo .cs-method__step .cs-h4{margin:0}
.cs-fil-metodo .cs-method__step .cs-card__text{margin:0}
.cs-fil-diario-nota{margin:2px 0 0;padding:12px 14px;border-left:4px solid var(--cs-yellow);background:var(--neutral-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--cs-ink)}
.cs-fil-diario-nota b{display:block;font-family:var(--font-heading);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-ink-soft)}

/* El Diario de Proyectos: sin foto (no hay ninguna del Diario). Texto a la izquierda, ejemplo a la derecha */
.cs-fil-diario{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.cs-fil-diario .cs-h3,.cs-fil-diario .cs-h4{margin:0}
.cs-fil-diario p{margin:0;max-width:60ch;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-fil-ejemplo{padding:20px 22px;background:var(--blue-50);border:var(--border) solid var(--blue-100);border-radius:var(--radius-md)}
.cs-fil-diario .cs-fil-ejemplo p{font-size:var(--text-base);color:var(--cs-ink)}

.cs-fil-habilidades{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:center;padding-top:36px;border-top:var(--border) solid var(--color-border)}
.cs-fil-habilidades .cs-h4{margin:0}
.cs-fil-habilidades p{margin:0;max-width:52ch;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-fil-habilidades__lista{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cs-fil-habilidades__lista .cs-tag{font-size:var(--text-sm);padding:.6em 1em;white-space:normal;border-color:var(--cs-ink);color:var(--cs-ink);background:var(--color-surface)}

/* Enlaces a las fichas de actividad, al final del método */
.cs-fil-fichas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding-top:28px;border-top:var(--border) solid var(--color-border)}
.cs-fil-fichas__t{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-fil-fichas ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-fil-fichas a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);background:var(--color-surface);border:var(--border) solid var(--cs-ink);font-size:var(--text-sm);font-weight:700;color:var(--cs-ink);text-decoration:none;transition:background var(--dur-fast)}
.cs-fil-fichas a:hover{background:var(--blue-50);color:var(--cs-ink)}

/* ---------- 5 · ADN: misión, cuatro valores y visión, sobre tinta ---------- */
.cs-fil-adn .cs-h2{color:var(--cs-white)}
.cs-fil-adn__head{max-width:820px}
.cs-fil-declara{margin:0;max-width:70ch;font-size:var(--text-lg);line-height:var(--leading-normal);color:color-mix(in srgb,var(--cs-white) 90%,transparent)}
.cs-fil-declara__et{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--cs-turquoise)}
.cs-fil-declara--vision{padding:26px 28px;max-width:none;border:var(--border) solid color-mix(in srgb,var(--cs-white) 20%,transparent);border-left:6px solid var(--cs-yellow);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:color-mix(in srgb,var(--cs-white) 5%,transparent)}
.cs-fil-declara--vision .cs-fil-declara__et{color:var(--cs-yellow)}
.cs-fil-adn__sub{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:color-mix(in srgb,var(--cs-white) 70%,transparent)}
.cs-fil-valores{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cs-fil-valor{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--cs-white) 6%,transparent);border:var(--border) solid color-mix(in srgb,var(--cs-white) 16%,transparent)}
.cs-fil-valor__num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wider);color:var(--cs-turquoise)}
.cs-fil-valor:nth-child(2) .cs-fil-valor__num{color:var(--cs-yellow)}
.cs-fil-valor:nth-child(3) .cs-fil-valor__num{color:var(--pink-300)}
.cs-fil-valor:nth-child(4) .cs-fil-valor__num{color:var(--cs-mint)}
.cs-fil-valor .cs-h4{margin:0;color:var(--cs-white);font-size:var(--text-lg)}
.cs-fil-valor p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:color-mix(in srgb,var(--cs-white) 82%,transparent)}

/* ---------- 6 · Reseñas: los dos enlaces a Google, con 44 px de alto también aquí ---------- */
.cs-fil .cs-apn-res__nota{min-height:44px}
.cs-fil .cs-aliados__link .cs-link{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 7 · Siguiente paso: tres enlaces bajo el botón ---------- */
.cs-fil-cierre .cs-cierre__title{font-size:var(--display-sm)}
.cs-fil-enlaces ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.cs-fil-enlaces a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-weight:700;font-size:var(--text-base);color:var(--cs-white);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cs-fil-enlaces a:hover{color:var(--cs-turquoise)}
/* La etiqueta del consentimiento es el objetivo táctil de la casilla: 44 px también cuando cabe en una línea */
@media (min-width:721px){.cs-fil .cs-check{min-height:44px;align-items:center}}

/* ---------- Tableta ---------- */
@media (max-width:1000px){
	.cs-fil-valores{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Entre 721 y 1000 px el auto-fit común deja el paso 03 solo en la segunda fila: aquí, una columna con la foto al lado */
@media (min-width:721px) and (max-width:1000px){
	.cs-fil-metodo .cs-method{grid-template-columns:minmax(0,1fr);gap:28px}
	.cs-fil-metodo .cs-method__step{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:24px;row-gap:10px;align-content:start}
	.cs-fil-metodo .cs-method__step > *{grid-column:2}
	.cs-fil-metodo .cs-method__step > img{grid-column:1;grid-row:1 / span 4;height:100%;min-height:200px}
	.cs-fil-fase{margin-top:0}
}
@media (max-width:900px){
	.cs-fil-hero{padding-block:104px 56px}
	.cs-fil-hero__grid{grid-template-columns:minmax(0,1fr);gap:36px}
	.cs-fil-hero__foto img{transform:none}
	.cs-fil-porque__grid{grid-template-columns:minmax(0,1fr)}
	.cs-fil-pilares__lista{grid-template-columns:minmax(0,1fr)}
	.cs-fil-diario{grid-template-columns:minmax(0,1fr);gap:24px}
	.cs-fil-habilidades{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Móvil ---------- */
@media (max-width:720px){
	/* Los h2 de esta página son frases largas: algo más pequeños que el clamp general de actividades.css */
	.cs-fil .cs-h2{font-size:clamp(1.625rem,7.4vw,2rem)}
	.cs-fil-hero{padding-block:88px 40px}
	.cs-fil-hero__t{font-size:clamp(2.25rem,10.5vw,2.9rem);max-width:none}
	.cs-fil-hero .cs-lead{font-size:var(--text-base)}
	.cs-fil-hero__acciones{width:100%;flex-direction:column;align-items:stretch;gap:10px}
	.cs-fil-hero__acciones .cs-btn{width:100%}
	.cs-fil-indice a{padding:0 14px}
	.cs-fil-bloque{padding:22px 20px 24px}
	.cs-fil-cita{font-size:var(--text-2xl);padding-left:16px}
	.cs-fil-diario__txt p{font-size:var(--text-base)}
	.cs-fil-declara{font-size:var(--text-md)}
	.cs-fil-declara--vision{padding:20px}
	.cs-fil-cierre .cs-row .cs-btn--lg{width:100%}
	.cs-fil-enlaces ul{flex-direction:column;gap:0}
}
@media (max-width:560px){
	.cs-fil-valores{grid-template-columns:minmax(0,1fr)}
}

/* Qué hacemos distinto y quién está detrás · 19/09/2026 */
.cs-fil-distinto__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-fil-distinto__item{padding:20px 22px;border:1px solid var(--color-border);border-top:4px solid var(--cs-turquoise);border-radius:16px;background:var(--color-surface)}
.cs-fil-distinto__item .cs-h4{margin:0 0 6px}
.cs-fil-distinto__item p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal)}
.cs-fil-equipo{padding-block:56px}
.cs-fil-equipo__in{display:flex;flex-direction:column;gap:10px;max-width:760px}
.cs-fil-equipo__in .cs-h3{margin:0}
.cs-fil-equipo__in .cs-lead{margin:0}
@media (max-width:1000px){.cs-fil-distinto__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cs-fil-distinto__lista{grid-template-columns:1fr}.cs-fil-equipo{padding-block:40px}}