/* =========================================================
   Tema PETEO — Forza Oaxaca Design System (compiled tokens)
   Style guide: institutional, sharp edges, Oaxaca Red accents
   ========================================================= */

/* -------- Tokens (CSS custom properties) -------- */
:root {
	--peteo-color-oaxaca-red: #D6281C;
	--peteo-color-oaxaca-red-dark: #B10203;
	--peteo-color-deep-obsidian: #1C1E21;
	--peteo-color-cloud-white: #FFFFFF;
	--peteo-color-civil-gray: #F0F2F5;
	--peteo-color-accent-gold: #C5A059;
	--peteo-color-surface: #FFF8F6;
	--peteo-color-secondary: #5D5E62;
	--peteo-color-on-surface: #281715;
	--peteo-color-outline: rgba(28,30,33,0.12);
	--peteo-color-outline-strong: rgba(28,30,33,0.24);

	--peteo-radius-sm: 2px;
	--peteo-radius: 4px;

	--peteo-spacing-1: 8px;
	--peteo-spacing-2: 16px;
	--peteo-spacing-3: 24px;
	--peteo-spacing-4: 32px;
	--peteo-spacing-5: 48px;
	--peteo-spacing-6: 64px;
	--peteo-spacing-7: 96px;

	--peteo-container: 1280px;
	--peteo-container-narrow: 768px;
	--peteo-margin-desktop: 64px;
	--peteo-margin-mobile: 16px;

	--peteo-shadow-card: 0 1px 0 0 var(--peteo-color-outline);
	--peteo-shadow-lift: 0 24px 60px -20px rgba(0,0,0,0.35);

	--peteo-font-headline: "Montserrat", system-ui, sans-serif;
	--peteo-font-body: "Libre Franklin", Georgia, serif;
}

/* -------- Self-hosted fonts -------- */
/* Coloca los .woff2 en /assets/fonts/ con los nombres declarados en theme.json. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-800.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-franklin-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/libre-franklin-500.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-franklin-700.woff2") format("woff2"); }

/* -------- Reset / base -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0;
	background: var(--peteo-color-cloud-white);
	color: var(--peteo-color-on-surface);
	font-family: var(--peteo-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--peteo-color-oaxaca-red); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--peteo-font-headline);
	color: var(--peteo-color-deep-obsidian);
	margin: 0 0 var(--peteo-spacing-3);
	line-height: 1.2;
}

.peteo-skiplink {
	position: absolute; left: -9999px; top: 0;
	background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white);
	padding: 12px 24px; font-weight: 700; z-index: 100;
}
.peteo-skiplink:focus { left: 16px; top: 16px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

/* -------- Layout helpers -------- */
.peteo-main { flex: 1 0 auto; }

.peteo-container {
	max-width: var(--peteo-container);
	margin-left: auto; margin-right: auto;
	padding-left: var(--peteo-margin-mobile); padding-right: var(--peteo-margin-mobile);
}
@media (min-width: 768px) {
	.peteo-container { padding-left: var(--peteo-margin-desktop); padding-right: var(--peteo-margin-desktop); }
}
.peteo-container--narrow { max-width: var(--peteo-container-narrow); }
.peteo-text-center { text-align: center; }
.peteo-mt-lg { margin-top: var(--peteo-spacing-5); }
.peteo-uppercase { text-transform: uppercase; }

/* -------- Section -------- */
.peteo-section { padding-top: var(--peteo-spacing-7); padding-bottom: var(--peteo-spacing-7); position: relative; }
.peteo-section--page { padding-top: var(--peteo-spacing-6); padding-bottom: var(--peteo-spacing-6); }
.peteo-section__header { margin-bottom: var(--peteo-spacing-6); }
.peteo-section__title { font-size: clamp(28px, 4vw, 40px); font-weight: 700; text-transform: uppercase; margin: 0; }
.peteo-section__rule {
	width: 96px; height: 4px; background: var(--peteo-color-oaxaca-red);
	margin: var(--peteo-spacing-2) auto 0;
}
.peteo-eyebrow {
	font-family: var(--peteo-font-headline);
	font-weight: 700; font-size: 14px; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--peteo-color-oaxaca-red);
	display: block; margin-bottom: var(--peteo-spacing-2);
}
.peteo-meta { font-size: 14px; color: var(--peteo-color-secondary); }

/* -------- Header / Nav -------- */
.peteo-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--peteo-color-cloud-white);
	border-bottom: 1px solid var(--peteo-color-civil-gray);
	transition: box-shadow .3s;
}
.peteo-header--scrolled { box-shadow: 0 2px 12px -4px rgba(0,0,0,0.18); }
.peteo-header--scrolled .peteo-header__inner { height: 64px; transition: height .3s; }
.peteo-header__inner {
	max-width: var(--peteo-container);
	margin: 0 auto;
	padding: 0 var(--peteo-margin-mobile);
	height: 80px;
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--peteo-spacing-3);
}
@media (min-width: 768px) {
	.peteo-header__inner { padding: 0 var(--peteo-margin-desktop); }
}
.peteo-header__branding .custom-logo { max-height: 88px; width: auto; }
.peteo-header__logo { display: inline-flex; padding: 5px; line-height: 0; }
.peteo-header__logo img { height: 88px; max-height: 88px; max-width: 220px; width: auto; object-fit: contain; }
.peteo-header__wordmark {
	font-family: var(--peteo-font-headline); font-weight: 800;
	font-size: 28px; color: var(--peteo-color-oaxaca-red);
	text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none;
}

.peteo-nav { display: flex; align-items: center; }
.peteo-nav__menu {
	list-style: none; padding: 0; margin: 0;
	display: none; gap: var(--peteo-spacing-4); align-items: center;
}
@media (min-width: 900px) { .peteo-nav__menu { display: flex; } }
.peteo-nav__menu a, .peteo-nav__link {
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--peteo-color-deep-obsidian); text-decoration: none;
	padding: 4px 0; border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.peteo-nav__menu a:hover,
.peteo-nav__menu a:focus-visible,
.peteo-nav__link[aria-current="true"] {
	color: var(--peteo-color-oaxaca-red);
	border-bottom-color: var(--peteo-color-oaxaca-red);
	text-decoration: none;
}

.peteo-nav__toggle {
	display: inline-flex; flex-direction: column; justify-content: center;
	gap: 5px; width: 44px; height: 44px; padding: 10px;
	background: transparent; border: 1px solid var(--peteo-color-outline);
	border-radius: var(--peteo-radius); cursor: pointer;
}
.peteo-nav__toggle-bar { display: block; width: 22px; height: 2px; background: var(--peteo-color-deep-obsidian); }
@media (min-width: 900px) { .peteo-nav__toggle { display: none; } }

.peteo-header__cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white);
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 14px 28px; border-radius: var(--peteo-radius);
	text-decoration: none; transition: filter .2s, transform .2s;
}
.peteo-header__cta:hover { filter: brightness(1.1); text-decoration: none; }
@media (max-width: 599px) { .peteo-header__cta { padding: 10px 16px; font-size: 12px; } }

/* Mobile menu (open state) */
body.peteo-nav-open .peteo-nav__menu {
	display: flex; flex-direction: column;
	position: absolute; left: 0; right: 0; top: 80px;
	background: var(--peteo-color-cloud-white);
	padding: var(--peteo-spacing-4) var(--peteo-margin-mobile);
	border-bottom: 1px solid var(--peteo-color-civil-gray);
	gap: var(--peteo-spacing-2);
}

/* -------- Buttons -------- */
.peteo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 16px 32px; border-radius: var(--peteo-radius);
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: filter .2s, transform .2s, background .2s, color .2s;
}
.peteo-btn--lg { padding: 20px 40px; }
.peteo-btn--block { width: 100%; }
.peteo-btn--primary { background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white); }
.peteo-btn--primary:hover { filter: brightness(1.1); text-decoration: none; }
.peteo-btn--outline {
	background: transparent; color: var(--peteo-color-cloud-white);
	border-color: var(--peteo-color-cloud-white);
}
.peteo-btn--outline:hover { background: var(--peteo-color-cloud-white); color: var(--peteo-color-deep-obsidian); text-decoration: none; }
.peteo-btn--outline-dark {
	background: transparent; color: var(--peteo-color-deep-obsidian);
	border-color: var(--peteo-color-deep-obsidian);
}
.peteo-btn--outline-dark:hover {
	background: var(--peteo-color-deep-obsidian); color: var(--peteo-color-cloud-white); text-decoration: none;
}
.peteo-btn--hero {
	color: var(--peteo-color-cloud-white);
	background: linear-gradient(135deg, var(--peteo-color-oaxaca-red) 0%, var(--peteo-color-accent-gold) 160%);
	box-shadow: var(--peteo-shadow-lift);
}
.peteo-btn--hero:hover { filter: brightness(1.08); transform: translateY(-2px); text-decoration: none; }
.peteo-btn--on-red {
	background: var(--peteo-color-cloud-white); color: var(--peteo-color-oaxaca-red);
}
.peteo-btn--on-red:hover { background: var(--peteo-color-deep-obsidian); color: var(--peteo-color-cloud-white); text-decoration: none; }

/* -------- HERO -------- */
.peteo-hero {
	position: relative; min-height: 100vh; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	color: var(--peteo-color-cloud-white);
	background-color: var(--peteo-color-deep-obsidian);
	background-image: var(--peteo-hero-image, none);
	background-size: cover; background-position: center;
	text-align: center;
}
.peteo-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(28,30,33,0.45) 0%, rgba(28,30,33,0.82) 100%);
	z-index: 1; pointer-events: none;
}
.peteo-hero__inner {
	position: relative; z-index: 2; width: 100%;
	max-width: 880px; margin: 0 auto;
	padding: var(--peteo-spacing-6) var(--peteo-margin-mobile);
	display: flex; flex-direction: column; align-items: center;
}
.peteo-hero__logo {
	width: clamp(150px, 22vw, 240px); height: auto;
	margin-bottom: var(--peteo-spacing-4);
	filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}
.peteo-hero__title {
	font-family: var(--peteo-font-headline); font-weight: 800;
	font-size: clamp(36px, 6vw, 56px); line-height: 1.05;
	letter-spacing: -0.02em; text-transform: uppercase;
	color: var(--peteo-color-cloud-white);
	text-shadow: 0 2px 4px rgba(0,0,0,0.5);
	margin: 0 0 var(--peteo-spacing-3);
}
.peteo-hero__highlight { color: var(--peteo-color-cloud-white); }
.peteo-hero__subtitle {
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.6; max-width: 640px; opacity: 0.9;
	margin: 0 auto var(--peteo-spacing-4);
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.peteo-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--peteo-spacing-2); justify-content: center; }
.peteo-hero__scroll {
	position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
	z-index: 2; color: var(--peteo-color-cloud-white); opacity: 0.9;
	animation: peteo-bounce 1.8s infinite;
}
.peteo-hero__scroll:hover { text-decoration: none; opacity: 1; }
@keyframes peteo-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
	.peteo-hero__scroll { animation: none; }
	html { scroll-behavior: auto; }
}

/* -------- NUESTRA LUCHA -------- */
.peteo-lucha { background: var(--peteo-color-cloud-white); overflow: hidden; }
.peteo-lucha__pattern {
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at 2px 2px, var(--peteo-color-oaxaca-red) 1px, transparent 0);
	background-size: 24px 24px;
	opacity: 0.05; pointer-events: none;
}
.peteo-lucha__inner {
	display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-6); align-items: center;
}
@media (min-width: 900px) { .peteo-lucha__inner { grid-template-columns: 1fr 1fr; } }
.peteo-lucha__title {
	font-size: clamp(28px, 4vw, 40px); font-weight: 700;
	color: var(--peteo-color-deep-obsidian); margin-bottom: var(--peteo-spacing-4);
}
.peteo-lucha__title p { margin: 0; }
.peteo-lucha__paragraph {
	font-size: 18px; line-height: 1.6;
	color: var(--peteo-color-secondary); margin: 0 0 var(--peteo-spacing-3);
}
.peteo-lucha__media { position: relative; }
.peteo-lucha__corner {
	position: absolute; top: -16px; left: -16px;
	width: 96px; height: 96px;
	border-top: 4px solid var(--peteo-color-oaxaca-red);
	border-left: 4px solid var(--peteo-color-oaxaca-red);
	z-index: 1;
}
.peteo-lucha__image, .peteo-lucha__placeholder {
	width: 100%; aspect-ratio: 4/5; object-fit: cover;
	background: var(--peteo-color-civil-gray);
	filter: grayscale(1); transition: filter .7s;
	border-radius: var(--peteo-radius-sm);
	box-shadow: var(--peteo-shadow-lift);
}
.peteo-lucha__image:hover { filter: grayscale(0); }

/* -------- EJES -------- */
.peteo-ejes { background: var(--peteo-color-civil-gray); }
.peteo-cards { display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-3); }
@media (min-width: 700px)  { .peteo-cards--3col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .peteo-cards--3col { grid-template-columns: repeat(3, 1fr); } }
.peteo-card {
	background: var(--peteo-color-cloud-white);
	border: 1px solid var(--peteo-color-civil-gray);
	display: flex; flex-direction: column;
	transition: border-color .2s, transform .2s;
}
.peteo-card:hover { border-color: var(--peteo-color-oaxaca-red); }
.peteo-card__media { display: block; height: 240px; overflow: hidden; }
.peteo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.peteo-card:hover .peteo-card__media img { transform: scale(1.05); }
.peteo-card__body { padding: var(--peteo-spacing-4); flex: 1; display: flex; flex-direction: column; }
.peteo-card__title { font-size: 24px; font-weight: 600; margin: 0 0 var(--peteo-spacing-2); }
.peteo-card__title a { color: var(--peteo-color-deep-obsidian); text-decoration: none; }
.peteo-card__title a:hover { color: var(--peteo-color-oaxaca-red); }
.peteo-card__excerpt { color: var(--peteo-color-secondary); margin-bottom: var(--peteo-spacing-3); flex: 1; }
.peteo-card__excerpt p { margin: 0; }
.peteo-card__link {
	display: inline-block; margin-top: var(--peteo-spacing-2);
	font-family: var(--peteo-font-headline); font-weight: 600; font-size: 13px;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--peteo-color-oaxaca-red); text-decoration: none;
}
.peteo-card__link:hover { text-decoration: underline; }

.peteo-eje__icon { display: block; color: var(--peteo-color-oaxaca-red); margin-bottom: var(--peteo-spacing-2); }
.peteo-eje__placeholder { background: linear-gradient(135deg, var(--peteo-color-deep-obsidian), var(--peteo-color-oaxaca-red)); width: 100%; height: 100%; }

.peteo-link-arrow {
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 14px; letter-spacing: 0.05em;
	color: var(--peteo-color-oaxaca-red); text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 8px;
	text-decoration: none; transition: gap .2s;
}
.peteo-link-arrow:hover { gap: 16px; text-decoration: none; }

/* -------- SÚMATE -------- */
.peteo-sumate { background: var(--peteo-color-cloud-white); color: var(--peteo-color-on-surface); }
.peteo-sumate__header { max-width: 720px; margin: 0 auto var(--peteo-spacing-6); }
.peteo-sumate__highlight { color: var(--peteo-color-oaxaca-red); }
.peteo-sumate__body { font-size: 18px; line-height: 1.6; color: var(--peteo-color-secondary); margin: var(--peteo-spacing-3) 0 0; }
.peteo-sumate__card {
	max-width: 720px; margin: 0 auto;
	background: var(--peteo-color-civil-gray);
	color: var(--peteo-color-deep-obsidian);
	padding: var(--peteo-spacing-5);
	border: 1px solid var(--peteo-color-outline);
	border-radius: var(--peteo-radius-sm);
}

/* -------- Form (underline fields) -------- */
.peteo-form { display: flex; flex-direction: column; gap: var(--peteo-spacing-4); }
.peteo-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-4); }
@media (min-width: 700px) { .peteo-form__grid { grid-template-columns: 1fr 1fr; } }
.peteo-form__row { display: flex; flex-direction: column; gap: var(--peteo-spacing-1); }
.peteo-form__label {
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--peteo-color-secondary);
}
.peteo-form__input {
	width: 100%; padding: 10px 2px; border: none;
	border-bottom: 2px solid var(--peteo-color-secondary);
	background: transparent;
	font-family: var(--peteo-font-body); font-size: 16px;
	color: var(--peteo-color-deep-obsidian);
	transition: border-color .2s;
}
textarea.peteo-form__input { resize: vertical; }
.peteo-form__input:focus {
	outline: none; border-bottom-color: var(--peteo-color-oaxaca-red);
}
.peteo-form__consent {
	display: flex; align-items: flex-start; gap: var(--peteo-spacing-1);
	font-size: 13px; color: var(--peteo-color-secondary); font-style: italic;
}
.peteo-form__consent input { margin-top: 3px; accent-color: var(--peteo-color-oaxaca-red); }
.peteo-form__feedback {
	margin: 0; min-height: 1.4em; font-size: 14px; text-align: center;
}
.peteo-form__feedback.is-error { color: var(--peteo-color-oaxaca-red-dark); }
.peteo-form__feedback.is-success { color: #1b5e20; font-weight: 600; }
.peteo-form.is-loading .peteo-btn { opacity: 0.6; pointer-events: none; }

/* -------- Article / page content -------- */
.peteo-page-header { margin-bottom: var(--peteo-spacing-4); }
.peteo-page-title { font-size: clamp(28px, 4vw, 48px); font-weight: 700; }
.peteo-article__media { margin-bottom: var(--peteo-spacing-4); }
.peteo-article__media img { width: 100%; height: auto; }
.peteo-prose { font-size: 18px; line-height: 1.7; }
.peteo-prose p { margin: 0 0 var(--peteo-spacing-3); }
.peteo-prose h2, .peteo-prose h3, .peteo-prose h4 { margin-top: var(--peteo-spacing-5); }
.peteo-prose a { color: var(--peteo-color-oaxaca-red); }
.peteo-prose blockquote {
	border-left: 4px solid var(--peteo-color-oaxaca-red);
	padding-left: var(--peteo-spacing-3);
	color: var(--peteo-color-secondary);
	font-style: italic;
}

/* -------- Footer -------- */
.peteo-footer {
	background: var(--peteo-color-deep-obsidian);
	color: var(--peteo-color-cloud-white);
	border-top: 4px solid var(--peteo-color-oaxaca-red);
	margin-top: auto;
}
.peteo-footer__inner {
	max-width: var(--peteo-container); margin: 0 auto;
	padding: var(--peteo-spacing-6) var(--peteo-margin-mobile);
	display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-5);
	align-items: start;
}
@media (min-width: 768px) {
	.peteo-footer__inner { grid-template-columns: 2fr 1fr 1fr; padding-left: var(--peteo-margin-desktop); padding-right: var(--peteo-margin-desktop); }
}
.peteo-footer__wordmark {
	font-family: var(--peteo-font-headline); font-weight: 800;
	font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em;
	color: var(--peteo-color-cloud-white); display: block; margin-bottom: var(--peteo-spacing-2);
}
.peteo-footer__tagline { font-size: 14px; opacity: 0.7; max-width: 320px; margin: 0 0 var(--peteo-spacing-3); }
.peteo-footer__col-title {
	font-family: var(--peteo-font-headline); font-weight: 700;
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
	margin: 0 0 var(--peteo-spacing-3); color: var(--peteo-color-cloud-white);
}
.peteo-footer__menu, .peteo-footer__nav ul {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: var(--peteo-spacing-2);
}
.peteo-footer__menu a, .peteo-footer__nav a {
	color: var(--peteo-color-cloud-white); opacity: 0.7;
	font-size: 14px; text-decoration: none;
	transition: color .2s, opacity .2s;
}
.peteo-footer__menu a:hover, .peteo-footer__nav a:hover { color: var(--peteo-color-accent-gold); opacity: 1; }
.peteo-footer__contact-line, .peteo-footer__contact-phone { font-size: 14px; opacity: 0.7; margin: 0 0 var(--peteo-spacing-1); }
.peteo-footer__contact a { color: inherit; text-decoration: none; }
.peteo-footer__contact a:hover { color: var(--peteo-color-accent-gold); }
.peteo-footer__contact-phone { opacity: 1; }
.peteo-footer__contact-phone a { color: var(--peteo-color-accent-gold); font-weight: 700; }
.peteo-footer__social { display: flex; gap: var(--peteo-spacing-2); }
.peteo-footer__social-link {
	width: 40px; height: 40px;
	border: 1px solid rgba(255,255,255,0.2);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--peteo-color-cloud-white);
	transition: background .2s, color .2s;
}
.peteo-footer__social-link:hover { background: var(--peteo-color-oaxaca-red); border-color: transparent; }
.peteo-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	max-width: var(--peteo-container); margin: 0 auto;
	padding: var(--peteo-spacing-3) var(--peteo-margin-mobile);
}
@media (min-width: 768px) { .peteo-footer__bottom { padding-left: var(--peteo-margin-desktop); padding-right: var(--peteo-margin-desktop); } }
.peteo-footer__copy { font-size: 12px; opacity: 0.6; margin: 0; text-align: center; }

/* -------- Divider zapoteco -------- */
.peteo-divider {
	height: 12px; width: 100%; opacity: 0.15;
	background-image:
		repeating-linear-gradient(45deg, transparent, transparent 10px, var(--peteo-color-oaxaca-red) 10px, var(--peteo-color-oaxaca-red) 12px),
		repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--peteo-color-oaxaca-red) 10px, var(--peteo-color-oaxaca-red) 12px);
}

/* -------- NOSOTROS / TIMELINE -------- */
.peteo-nosotros { background: var(--peteo-color-cloud-white); }
.peteo-nosotros__inner { display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-6); align-items: center; }
@media (min-width: 900px) { .peteo-nosotros__inner { grid-template-columns: 1fr 1fr; } }
.peteo-nosotros__intro { font-size: 18px; color: var(--peteo-color-secondary); margin: 0 0 var(--peteo-spacing-5); }
.peteo-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--peteo-spacing-5); }
.peteo-timeline__item { position: relative; display: flex; gap: var(--peteo-spacing-3); }
.peteo-timeline__item::before {
	content: ""; position: absolute; left: 15px; top: 40px;
	bottom: calc(-1 * var(--peteo-spacing-5)); width: 2px;
	background: var(--peteo-color-civil-gray);
}
.peteo-timeline__item:last-child::before { display: none; }
.peteo-timeline__icon {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white);
	display: inline-flex; align-items: center; justify-content: center;
	position: relative; z-index: 1;
}
.peteo-timeline__year { font-family: var(--peteo-font-headline); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: var(--peteo-color-oaxaca-red); display: block; margin-bottom: 4px; }
.peteo-timeline__title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.peteo-timeline__text { color: var(--peteo-color-secondary); margin: 0; }
.peteo-nosotros__media { position: relative; }
.peteo-nosotros__halo { position: absolute; top: -16px; right: -16px; width: 128px; height: 128px; background: var(--peteo-color-accent-gold); opacity: 0.12; border-radius: 50%; filter: blur(40px); }
.peteo-nosotros__image {
	width: 100%; aspect-ratio: 4/5; object-fit: cover; position: relative;
	border: 8px solid var(--peteo-color-cloud-white);
	border-radius: var(--peteo-radius-sm);
	box-shadow: 0 12px 32px -18px rgba(0,0,0,0.30);
}

/* -------- PRESIDENTA (quote full-bleed) -------- */
.peteo-presidenta {
	position: relative; background-color: var(--peteo-color-deep-obsidian);
	color: var(--peteo-color-cloud-white);
	background-image: var(--peteo-presidenta-image, none);
	background-size: cover; background-position: top center;
}
.peteo-presidenta__overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to right, var(--peteo-color-deep-obsidian) 0%, rgba(28,30,33,0.8) 55%, rgba(28,30,33,0.35) 100%);
}
.peteo-presidenta__inner { position: relative; z-index: 1; max-width: 720px; }
@media (min-width: 900px) { .peteo-presidenta__inner { max-width: 60%; } }
.peteo-presidenta__mark { color: var(--peteo-color-accent-gold); display: block; margin-bottom: var(--peteo-spacing-2); }
.peteo-presidenta__quote { font-family: var(--peteo-font-headline); font-weight: 700; font-style: italic; font-size: clamp(24px, 3.5vw, 40px); line-height: 1.25; color: var(--peteo-color-cloud-white); margin: 0 0 var(--peteo-spacing-4); }
.peteo-presidenta__body { font-size: 18px; opacity: 0.85; margin: 0 0 var(--peteo-spacing-4); }
.peteo-presidenta__attrib { border-left: 4px solid var(--peteo-color-oaxaca-red); padding-left: var(--peteo-spacing-3); }
.peteo-presidenta__name { font-family: var(--peteo-font-headline); font-weight: 700; font-size: 22px; margin: 0; color: var(--peteo-color-cloud-white); }
.peteo-presidenta__role { color: var(--peteo-color-accent-gold); letter-spacing: 0.08em; font-size: 14px; margin: 4px 0 0; }

/* -------- MARCO NORMATIVO -------- */
.peteo-marco { background: var(--peteo-color-civil-gray); }
.peteo-marco__header { margin-bottom: var(--peteo-spacing-6); }
.peteo-marco__docs { display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-3); margin-bottom: var(--peteo-spacing-6); }
@media (min-width: 600px)  { .peteo-marco__docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .peteo-marco__docs { grid-template-columns: repeat(4, 1fr); } }
.peteo-doc-card { background: var(--peteo-color-cloud-white); border: 1px solid var(--peteo-color-outline); padding: var(--peteo-spacing-4); display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.peteo-doc-card:hover { border-color: var(--peteo-color-oaxaca-red); transform: translateY(-4px); }
.peteo-doc-card__icon { color: var(--peteo-color-oaxaca-red); margin-bottom: var(--peteo-spacing-3); }
.peteo-doc-card__title { font-size: 20px; font-weight: 600; margin: 0 0 var(--peteo-spacing-2); transition: color .2s; }
.peteo-doc-card:hover .peteo-doc-card__title { color: var(--peteo-color-oaxaca-red); }
.peteo-doc-card__excerpt { color: var(--peteo-color-secondary); font-size: 14px; margin: 0 0 var(--peteo-spacing-3); flex: 1; }
.peteo-doc-card__action { margin-top: auto; font-family: var(--peteo-font-headline); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; color: var(--peteo-color-deep-obsidian); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.peteo-doc-card__action:hover { color: var(--peteo-color-oaxaca-red); text-decoration: none; }
.peteo-marco__ejes-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--peteo-spacing-2); margin-bottom: var(--peteo-spacing-4); }
.peteo-marco__ejes-title { font-family: var(--peteo-font-headline); font-weight: 700; font-size: clamp(22px, 3vw, 28px); text-transform: uppercase; margin: 0; }
.peteo-eje__actions { display: flex; gap: var(--peteo-spacing-3); align-items: center; margin-top: auto; }
.peteo-link-arrow--muted { color: var(--peteo-color-secondary); }
.peteo-link-arrow--muted:hover { color: var(--peteo-color-oaxaca-red); }
.peteo-eje--hidden { display: none; }
.peteo-ejes-toggle-wrap { text-align: center; margin-top: var(--peteo-spacing-5); }
.peteo-ejes-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; background: var(--peteo-deep-obsidian); color: var(--peteo-cloud-white); border: 2px solid var(--peteo-deep-obsidian); padding: 10px 24px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: var(--peteo-radius); transition: background 0.2s, border-color 0.2s; }
.peteo-ejes-toggle:hover, .peteo-ejes-toggle:focus-visible { background: var(--peteo-oaxaca-red); border-color: var(--peteo-oaxaca-red); outline: none; }

/* -------- PRENSA (bento grid) -------- */
.peteo-prensa { background: var(--peteo-color-surface); }
.peteo-prensa__title { margin-bottom: var(--peteo-spacing-6); }
.peteo-prensa__bento { display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-3); }
@media (min-width: 768px) {
	.peteo-prensa__bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; min-height: 600px; }
}
.peteo-bento {
	position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 220px; color: var(--peteo-color-cloud-white);
	background-color: var(--peteo-color-deep-obsidian); text-decoration: none;
}
.peteo-bento:hover { text-decoration: none; }
.peteo-bento--main, .peteo-bento--secondary { background-image: var(--peteo-bento-image, none); background-size: cover; background-position: center; }
.peteo-bento--main img, .peteo-bento--secondary img { display: none; }
@media (min-width: 768px) {
	.peteo-bento--main { grid-column: span 2; grid-row: span 2; }
	.peteo-bento--secondary { grid-column: span 2; }
}
.peteo-bento--main::after, .peteo-bento--secondary::after { content: ""; position: absolute; inset: 0; transition: transform .7s; }
.peteo-bento--main:hover, .peteo-bento--secondary:hover { background-size: 110%; }
.peteo-bento--small { background: var(--peteo-color-cloud-white); color: var(--peteo-color-deep-obsidian); border: 1px solid var(--peteo-color-outline); justify-content: flex-start; padding: var(--peteo-spacing-3); transition: background .2s, color .2s; }
.peteo-bento--small:hover { background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white); }
.peteo-bento--dark { padding: var(--peteo-spacing-3); }
.peteo-bento__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 50%, transparent); }
.peteo-bento--secondary .peteo-bento__scrim { background: linear-gradient(to left, rgba(0,0,0,0.85), transparent); }
.peteo-bento__content { position: relative; z-index: 1; padding: var(--peteo-spacing-4); }
.peteo-bento__content--end { text-align: right; max-width: 60%; margin-left: auto; }
.peteo-bento__badge { display: inline-block; background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white); font-family: var(--peteo-font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; padding: 4px 10px; margin-bottom: var(--peteo-spacing-2); }
.peteo-bento__title { font-family: var(--peteo-font-headline); font-weight: 600; font-size: clamp(18px, 2vw, 24px); margin: 0 0 var(--peteo-spacing-2); color: var(--peteo-color-cloud-white); }
.peteo-bento__excerpt { font-size: 14px; opacity: 0.85; margin: 0 0 var(--peteo-spacing-2); }
.peteo-bento__date { font-family: var(--peteo-font-headline); font-weight: 700; font-size: 10px; color: var(--peteo-color-oaxaca-red); margin-bottom: var(--peteo-spacing-1); display: block; }
.peteo-bento--small:hover .peteo-bento__date { color: var(--peteo-color-cloud-white); }
.peteo-bento__small-title { font-family: var(--peteo-font-headline); font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; position: relative; z-index: 1; }
.peteo-bento--dark .peteo-bento__small-title { color: var(--peteo-color-cloud-white); }
.peteo-bento__watermark { position: absolute; top: 0; right: 0; opacity: 0.1; color: var(--peteo-color-cloud-white); line-height: 0; }
.peteo-bento__video { color: var(--peteo-color-accent-gold); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--peteo-spacing-2); position: relative; z-index: 1; }
.peteo-bento .peteo-link-arrow { color: var(--peteo-color-cloud-white); }

/* -------- LIDEREA (teaser home) -------- */
.peteo-liderea-home { position: relative; background: var(--peteo-color-oaxaca-red); color: var(--peteo-color-cloud-white); overflow: hidden; }
.peteo-liderea-home__watermark { position: absolute; right: -60px; top: 0; opacity: 0.1; color: var(--peteo-color-cloud-white); pointer-events: none; line-height: 0; }
.peteo-liderea-home__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--peteo-spacing-6); align-items: center; }
@media (min-width: 900px) { .peteo-liderea-home__inner { grid-template-columns: 1fr 1fr; gap: var(--peteo-spacing-7); } }
.peteo-liderea-home .peteo-section__title { color: var(--peteo-color-cloud-white); }
.peteo-liderea-home__body { font-size: 18px; opacity: 0.9; margin: 0 0 var(--peteo-spacing-5); }
.peteo-liderea-home__events { display: flex; flex-direction: column; gap: var(--peteo-spacing-2); margin-bottom: var(--peteo-spacing-5); }
.peteo-event-card { background: rgba(255,255,255,0.1); border-left: 4px solid var(--peteo-color-cloud-white); padding: var(--peteo-spacing-3); }
.peteo-event-card__title { font-family: var(--peteo-font-headline); font-weight: 700; font-size: 18px; margin: 0 0 var(--peteo-spacing-1); color: var(--peteo-color-cloud-white); }
.peteo-event-card__meta { display: flex; flex-wrap: wrap; gap: var(--peteo-spacing-2); font-size: 14px; opacity: 0.9; }
.peteo-event-card__chip { display: inline-flex; align-items: center; gap: 4px; }
.peteo-liderea-home__collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--peteo-spacing-2); }
.peteo-collage__item { margin: 0; overflow: hidden; aspect-ratio: 3/4; }
.peteo-collage__item--1, .peteo-collage__item--4 { aspect-ratio: 1/1; }
.peteo-collage__item--1, .peteo-collage__item--2 { transform: translateY(16px); }
.peteo-collage__item img { width: 100%; height: 100%; object-fit: cover; }
.peteo-liderea-home__featured-image { border-radius: var(--peteo-radius); overflow: hidden; max-height: 520px; }
.peteo-liderea-home__featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------- 404 -------- */
.peteo-404 { min-height: 60vh; display: flex; align-items: center; }

/* -------- Block editor overrides for front-end (safety) -------- */
.wp-block-button__link { border-radius: var(--peteo-radius); }

/* NOTE: Liderea Oaxaca styles live in a scoped stylesheet
   (assets/css/liderea.css) enqueued only on the page-liderea.php template.
   This keeps the Transformación Juvenil design system isolated to that page
   per CLAUDE.md section 13 exception. */