/* ==========================================================================
   ITPC México — Maqueta del rediseño 2026
   Paleta tomada del mockup aprobado: verde bosque + menta.
   Mobile-first. Sin dependencias. Los tokens pasan tal cual al tema WP.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
	/* Verdes */
	--verde-900: #0a2416;   /* footer */
	--verde-800: #0f2e1c;   /* secciones oscuras */
	--verde-700: #143a24;
	--verde-600: #1c4a2f;
	--menta:     #3dd68c;   /* acento */
	--menta-osc: #2bb974;

	/* Neutros */
	--tinta:     #14181f;
	--texto:     #4a5260;
	--apagado:   #7b8494;
	--linea:     #e4e6e3;
	--crema:     #f4f4f0;   /* secciones claras */
	--blanco:    #ffffff;

	/* Tipografía */
	--f-titulo:  "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-texto:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-script:  "Caveat", "Brush Script MT", cursive;

	--t-hero:    clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem);
	--t-seccion: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	--t-sub:     clamp(1.05rem, 1rem + .3vw, 1.25rem);

	/* Alto de la cabecera fija. La barra del catalogo, el scroll de las
	   anclas y cualquier elemento pegajoso se miden contra este token: en
	   WordPress basta reasignarlo (la barra de admin suma 32 px). */
	--alto-cab:  74px;

	--gap:       clamp(2.5rem, 1.5rem + 4vw, 5rem);
	--ancho:     1240px;
	--radio:     10px;
	--radio-lg:  14px;
	--sombra:    0 2px 4px rgba(10,36,22,.04), 0 12px 32px rgba(10,36,22,.08);
	--trans:     .18s cubic-bezier(.4,0,.2,1);
}

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

body {
	margin: 0;
	font-family: var(--f-texto);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--texto);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--tinta); line-height: 1.08; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; border-radius: 3px; }

.itpc-sr,
/* WordPress y sus plugins emiten esta clase en su propio marcado (buscador,
   comentarios, enlace de salto): comparte el mismo tratamiento. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.itpc-salta {
	position: absolute; left: -9999px; z-index: 999;
	background: var(--verde-900); color: #fff; padding: .8rem 1.25rem; border-radius: 0 0 var(--radio) 0;
}
.itpc-salta:focus { left: 0; top: 0; }

.itpc-icono { width: 1em; height: 1em; fill: currentColor; stroke: none; flex-shrink: 0; }

/* Ningun destino de ancla debe quedar debajo de la cabecera fija. */
:target, [id] { scroll-margin-top: calc(var(--alto-cab) + 1rem); }
html { scroll-behavior: smooth; }

/* --- 3. Estructura ------------------------------------------------------- */
.itpc-wrap { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.itpc-seccion { padding-block: var(--gap); }

.itpc-antetitulo {
	font-family: var(--f-titulo);
	font-size: .8125rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
	color: var(--apagado); margin-bottom: .35rem;
}
.itpc-titulo-seccion {
	font-size: var(--t-seccion); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
}
.itpc-subraya-sm::after {
	content: ''; display: block; width: 38px; height: 3px; border-radius: 2px;
	background: var(--menta-osc); margin: .5rem 0 .9rem;
}
.itpc-subraya::after {
	content: ''; display: block; width: 56px; height: 4px; border-radius: 2px;
	background: var(--menta); margin-top: 1.25rem;
}
.itpc-oscuro .itpc-antetitulo { color: rgba(255,255,255,.6); }
.itpc-oscuro .itpc-titulo-seccion, .itpc-oscuro h3 { color: #fff; }
.itpc-oscuro p { color: rgba(255,255,255,.72); }

/* --- 4. Aviso de maqueta ------------------------------------------------- */
.itpc-aviso {
	background: var(--tinta); color: rgba(255,255,255,.85);
	font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	text-align: center; padding: .45rem 1rem;
}
.itpc-aviso b { color: var(--menta); font-weight: 700; }

/* --- 5. Cabecera --------------------------------------------------------- */
.itpc-cab {
	background: var(--blanco); position: sticky; top: 0; z-index: 60;
	border-bottom: 1px solid var(--linea);
}
.itpc-cab__inner { display: flex; align-items: stretch; gap: 1rem; }
.itpc-cab__marca { display: flex; align-items: center; padding-block: .9rem; margin-right: auto; }
.itpc-cab__marca img { height: 44px; width: auto; }

.itpc-cab__nav { display: none; }
.itpc-cab__lista { display: flex; align-items: center; gap: 1.75rem; height: 100%; }
.itpc-cab__lista a {
	font-family: var(--f-titulo); font-size: .9375rem; font-weight: 500; color: var(--tinta);
	display: flex; align-items: center; height: 100%; position: relative; transition: color var(--trans);
}
.itpc-cab__lista a:hover { color: var(--menta-osc); }
.itpc-cab__lista .itpc-activo a { font-weight: 600; }
.itpc-cab__lista .itpc-activo a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 1.35rem;
	height: 3px; border-radius: 2px; background: var(--menta);
}

.itpc-buscador { display: none; position: relative; align-self: center; }
.itpc-buscador input {
	font: inherit; font-size: .875rem; width: 210px;
	padding: .6rem 2.5rem .6rem 1rem;
	border: 1px solid var(--linea); border-radius: 8px; background: var(--crema);
	transition: border-color var(--trans), background-color var(--trans);
}
.itpc-buscador input:focus { background: #fff; border-color: var(--menta); outline: none; }
.itpc-buscador button {
	position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
	background: none; border: 0; padding: .35rem; color: var(--apagado); display: grid; place-items: center;
}
.itpc-buscador .itpc-icono { width: 18px; height: 18px; }

.itpc-menu-btn {
	background: none; border: 1px solid var(--linea); border-radius: 8px;
	width: 44px; height: 44px; align-self: center; display: grid; place-items: center; color: var(--tinta);
}
.itpc-menu-btn .itpc-icono { width: 22px; height: 22px; }

@media (min-width: 1080px) {
	.itpc-menu-btn { display: none; }
	.itpc-cab__nav { display: block; }
	.itpc-buscador { display: block; }
}

/* Menú móvil */
.itpc-nav-movil {
	position: fixed; inset: 0; z-index: 70; background: var(--verde-900);
	padding: 1.5rem; overflow-y: auto;
	display: flex; flex-direction: column; gap: .25rem;
}
.itpc-nav-movil[hidden] { display: none; }
/* A partir del ancho en que aparece el menu de escritorio, el panel se
   oculta pase lo que pase: si se abre en un telefono y el aparato se gira a
   horizontal, antes quedaba tapando la pagina con el scroll bloqueado. */
@media (min-width: 1080px) { .itpc-nav-movil { display: none; } }
.itpc-nav-movil__cerrar { align-self: flex-end; background: none; border: 0; color: #fff; padding: .5rem; }
.itpc-nav-movil__cerrar .itpc-icono { width: 26px; height: 26px; }
.itpc-nav-movil a {
	color: #fff; font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 600;
	padding-block: .6rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.itpc-nav-movil a:hover { color: var(--menta); }

/* --- 6. Hero ------------------------------------------------------------- */
.itpc-hero { position: relative; background: var(--verde-800); overflow: hidden; isolation: isolate; }
.itpc-hero__fondo { position: absolute; inset: 0; z-index: -2; }
.itpc-hero__fondo img { width: 100%; height: 100%; object-fit: cover; }
.itpc-hero__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(100deg, rgba(10,36,22,.94) 0%, rgba(10,36,22,.72) 42%, rgba(10,36,22,.25) 72%, rgba(10,36,22,.35) 100%);
}
.itpc-hero__inner { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); position: relative; }
.itpc-hero__texto { max-width: 34rem; }

.itpc-hero__ante {
	display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem;
	font-family: var(--f-titulo); font-size: .8125rem; font-weight: 500;
	letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.itpc-hero h1 {
	font-size: var(--t-hero); font-weight: 700; color: #fff; letter-spacing: -.035em; margin-bottom: 1.5rem;
}
.itpc-hero h1 em { font-style: normal; color: var(--menta); display: block; }
.itpc-hero__lead { color: rgba(255,255,255,.8); font-size: var(--t-sub); max-width: 30rem; }
.itpc-hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.itpc-hero__firma {
	display: none; position: absolute; right: 0; bottom: 6.5rem; text-align: right;
	font-family: var(--f-script); font-size: 2.5rem; line-height: 1.05; color: #fff;
	text-shadow: 0 2px 12px rgba(10,36,22,.5); transform: rotate(-4deg);
}
.itpc-hero__firma::after {
	content: ''; display: block; height: 3px; width: 120px; margin: .35rem 0 0 auto;
	border-radius: 2px; background: var(--menta);
}

.itpc-hero__slider {
	display: flex; align-items: center; gap: 1rem; margin-top: 3rem;
	font-family: var(--f-titulo); font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
	color: rgba(255,255,255,.45);
}
.itpc-hero__slider .itpc-on { color: #fff; }
.itpc-hero__slider button {
	background: none; border: 0; color: rgba(255,255,255,.55); padding: .35rem; display: grid; place-items: center;
}
.itpc-hero__slider button:hover { color: #fff; }
.itpc-hero__slider .itpc-icono { width: 18px; height: 18px; }
.itpc-hero__nums { display: flex; gap: .85rem; }
.itpc-hero__nums button { padding: .2rem; }

@media (min-width: 1080px) {
	.itpc-hero__firma { display: block; }
	.itpc-hero__slider { position: absolute; right: 0; bottom: 0; margin: 0; }
	.itpc-hero__inner { padding-bottom: 5.5rem; }
}

/* --- 7. Valores ---------------------------------------------------------- */
.itpc-valores { background: var(--crema); }
.itpc-valores__inner {
	display: grid; gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.itpc-valor__icono { color: var(--verde-700); margin-bottom: 1rem; }
.itpc-valor__icono .itpc-icono { width: 34px; height: 34px; }
.itpc-valor h3 { font-size: .9375rem; font-weight: 700; margin-bottom: .4rem; }
.itpc-valor p { font-size: .8125rem; color: var(--apagado); line-height: 1.55; }

.itpc-valores__lema {
	display: grid; align-content: center; gap: .75rem;
	padding-left: 2.5rem; border-left: 1px solid var(--linea);
}
.itpc-valores__lema strong {
	font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 500;
	color: var(--tinta); line-height: 1.2;
}
.itpc-valores__lema span {
	font-family: var(--f-titulo); font-size: .75rem; font-weight: 500;
	letter-spacing: .18em; color: var(--apagado); text-transform: uppercase;
}

/* --- 8. Sección oscura con textura --------------------------------------- */
.itpc-oscuro { position: relative; background: var(--verde-800); isolation: isolate; }
.itpc-oscuro__textura {
	position: absolute; inset: 0; z-index: -1; opacity: .5;
	background-image: url("../img/fondos/textura-verde.webp");
	background-size: cover; background-position: center;
}

.itpc-bloque-cabeza {
	display: grid; gap: 1.75rem; align-items: end; margin-bottom: 2.75rem;
}
@media (min-width: 900px) { .itpc-bloque-cabeza { grid-template-columns: 1fr auto; gap: 3rem; } }
.itpc-bloque-cabeza__der { max-width: 30rem; }
.itpc-bloque-cabeza__der p { font-size: .9375rem; margin-bottom: 1.25rem; }

/* --- 9. Tarjetas de categoría -------------------------------------------- */
.itpc-cats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.itpc-cat {
	background: var(--blanco); border-radius: var(--radio); overflow: hidden;
	display: flex; flex-direction: column; transition: transform var(--trans), box-shadow var(--trans);
}
.itpc-cat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.itpc-cat__img { display: block; aspect-ratio: 5 / 4; background: var(--crema); }
.itpc-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.itpc-cat__pie { display: flex; align-items: center; gap: .6rem; padding: .85rem .9rem; }
.itpc-cat__marca {
	width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
	border: 1.5px solid var(--verde-700); color: var(--verde-700);
	display: grid; place-items: center;
}
.itpc-cat__marca .itpc-icono { width: 15px; height: 15px; }
.itpc-cat__nom {
	font-family: var(--f-titulo); font-size: .75rem; font-weight: 600; line-height: 1.25;
	color: var(--tinta); margin-right: auto;
}
.itpc-cat__flecha { color: var(--tinta); }
.itpc-cat__flecha .itpc-icono { width: 16px; height: 16px; }

/* --- 10. Eventos --------------------------------------------------------- */
.itpc-eventos { background: var(--crema); }
.itpc-eventos__inner { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .itpc-eventos__inner { grid-template-columns: minmax(300px, 360px) 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); } }
.itpc-eventos__intro p { font-size: .9375rem; color: var(--apagado); margin: 1.75rem 0; }
.itpc-eventos__lista { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.itpc-evento {
	background: var(--blanco); border-radius: var(--radio); overflow: hidden;
	display: flex; flex-direction: column; transition: transform var(--trans), box-shadow var(--trans);
}
.itpc-evento:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.itpc-evento__img { display: block; aspect-ratio: 4 / 3; background: var(--linea); }
.itpc-evento__img img { width: 100%; height: 100%; object-fit: cover; }
.itpc-evento__cuerpo { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.itpc-evento__fecha { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.itpc-evento__dia { font-family: var(--f-titulo); font-size: 1.375rem; font-weight: 800; color: var(--tinta); line-height: 1; letter-spacing: -.02em; }
.itpc-evento__mes { font-family: var(--f-titulo); font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--apagado); text-transform: uppercase; margin-top: .3rem; }
.itpc-evento__flecha { color: var(--tinta); flex-shrink: 0; }
.itpc-evento__flecha .itpc-icono { width: 16px; height: 16px; }
.itpc-evento__nom { font-family: var(--f-titulo); font-size: .9375rem; font-weight: 700; color: var(--tinta); line-height: 1.3; }
.itpc-evento__lugar { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--apagado); margin-top: auto; padding-top: .5rem; }
.itpc-evento__lugar .itpc-icono { width: 13px; height: 13px; flex-shrink: 0; }

/* --- 11. País de oportunidades ------------------------------------------- */
.itpc-pais { position: relative; isolation: isolate; background: var(--verde-700); }
.itpc-pais__fondo { position: absolute; inset: 0; z-index: -2; }
.itpc-pais__fondo img { width: 100%; height: 100%; object-fit: cover; }
.itpc-pais__velo {
	position: absolute; inset: 0; z-index: -1;
	background:
		/* verde de marca, con el degradado que pediste al 50% */
		linear-gradient(95deg, rgba(10,36,22,.49) 0%, rgba(10,36,22,.45) 42%, rgba(10,36,22,.33) 100%),
		/* capa negra pareja: da contraste al texto sin tapar el paisaje */
		linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,.38));
}
.itpc-pais__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .itpc-pais__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.itpc-pais__texto p { font-size: .9375rem; margin: 1.75rem 0 2rem; max-width: 34rem; }
.itpc-datos { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .itpc-datos { grid-template-columns: repeat(4, 1fr); } }
.itpc-dato__n { font-family: var(--f-titulo); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.03em; }
.itpc-dato__t { font-size: .8125rem; color: rgba(255,255,255,.65); margin-top: .5rem; line-height: 1.4; }

/* --- 12. Alianzas -------------------------------------------------------- */
/* Tarjeta por institución: logo, nombre, qué es y enlace. La rejilla de
   logos sueltos no decía a quién pertenecía cada marca. */
.itpc-alianzas__cabeza { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
@media (min-width: 900px) {
	.itpc-alianzas__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3rem; }
}
.itpc-alianzas__lead {
	max-width: 44ch; margin-top: 1.25rem;
	font-size: .9375rem; line-height: 1.6; color: var(--texto);
}
.itpc-alianzas__lema {
	font-family: var(--f-titulo); font-size: .8125rem; font-weight: 500;
	letter-spacing: .2em; text-transform: uppercase; color: var(--texto);
	line-height: 1.9; max-width: 16ch;
}
.itpc-alianzas__lema::after {
	content: ''; display: block; width: 46px; height: 3px; border-radius: 2px;
	background: var(--menta-osc); margin-top: .9rem;
}
@media (min-width: 900px) {
	.itpc-alianzas__lema { text-align: right; margin-left: auto; }
	.itpc-alianzas__lema::after { margin-left: auto; }
}

/* Una sola fila deslizable: con siete instituciones la rejilla de tres
   columnas dejaba una fila coja y estiraba la sección. */
.itpc-aliados {
	display: flex; gap: clamp(.85rem, .4rem + 1.4vw, 1.5rem);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 0;
	padding-bottom: .9rem; margin-bottom: -.25rem;
	scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.itpc-aliados:focus-visible { outline-offset: 6px; }
.itpc-aliados > li { flex: 0 0 clamp(158px, 46vw, 186px); scroll-snap-align: start; }
@media (min-width: 700px)  { .itpc-aliados > li { flex-basis: clamp(172px, 21vw, 195px); } }
@media (min-width: 1000px) { .itpc-aliados > li { flex-basis: 195px; } }

/* Flechas del carrusel, junto al lema de la cabecera. */
.itpc-alianzas__tope { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 900px) { .itpc-alianzas__tope { justify-items: end; } }
.itpc-carrusel__flechas { display: flex; gap: .5rem; }
.itpc-carrusel__flechas button {
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 1.5px solid var(--linea); border-radius: 50%; background: var(--blanco);
	color: var(--tinta); transition: background-color var(--trans), border-color var(--trans), color var(--trans), opacity var(--trans);
}
.itpc-carrusel__flechas button:hover:not(:disabled) { background: var(--menta); border-color: var(--menta); color: var(--verde-900); }
.itpc-carrusel__flechas button:disabled { opacity: .35; cursor: default; }
.itpc-carrusel__flechas .itpc-icono { width: 17px; height: 17px; }

.itpc-aliado {
	display: flex; flex-direction: column; height: 100%;
	padding: clamp(.7rem, .45rem + .8vw, 1.15rem);
	background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg);
	box-shadow: 0 1px 2px rgba(10,36,22,.04);
	transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.itpc-aliado:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: rgba(61,214,140,.55); }

.itpc-aliado__logo { display: grid; place-items: center; min-height: clamp(68px, 46px + 6vw, 100px); padding-bottom: .8rem; }
.itpc-aliado__logo img { width: auto; max-width: 88%; max-height: clamp(58px, 40px + 5vw, 88px); object-fit: contain; }

.itpc-aliado__nom { font-family: var(--f-titulo); font-size: clamp(.8125rem, .77rem + .25vw, .9375rem); font-weight: 700; color: var(--tinta); line-height: 1.25; }
.itpc-aliado__nom::after {
	content: ''; display: block; width: 26px; height: 3px; border-radius: 2px;
	background: var(--menta-osc); margin: .5rem 0 .55rem;
}
.itpc-aliado__desc { font-size: .75rem; line-height: 1.45; color: var(--texto); }

.itpc-aliado__pie {
	margin-top: auto; padding-top: .9rem;
	display: flex; align-items: center; justify-content: space-between; gap: .5rem;
	font-family: var(--f-titulo); font-size: .75rem; font-weight: 600; color: var(--tinta);
}
.itpc-aliado__f {
	width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
	border: 1.5px solid var(--linea); display: grid; place-items: center; color: var(--menta-osc);
	transition: background-color var(--trans), border-color var(--trans), color var(--trans);
}
.itpc-aliado__f .itpc-icono { width: 13px; height: 13px; }
.itpc-aliado:hover .itpc-aliado__f { background: var(--menta); border-color: var(--menta); color: var(--verde-900); }

/* La cita cierra la sección: es respiro, no una tarjeta más. */
.itpc-alianzas__cita {
	margin-top: clamp(2rem, 1rem + 2.5vw, 3rem); text-align: center;
	font-family: var(--f-titulo); font-size: clamp(.875rem, .78rem + .45vw, 1.0625rem);
	font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
	color: var(--texto); line-height: 1.9;
}
.itpc-alianzas__cita::after {
	content: ''; display: block; width: 56px; height: 3px; border-radius: 2px;
	background: var(--menta-osc); margin: 1.1rem auto 0;
}

/* --- 13. Botones --------------------------------------------------------- */
.itpc-btn {
	display: inline-flex; align-items: center; gap: .6rem;
	font-family: var(--f-titulo); font-size: .875rem; font-weight: 600;
	padding: .85rem 1.5rem; border-radius: 8px; border: 1.5px solid transparent;
	transition: background-color var(--trans), color var(--trans), border-color var(--trans);
}
.itpc-btn .itpc-icono { width: 15px; height: 15px; }
.itpc-btn--menta { background: var(--menta); color: var(--verde-900); }
.itpc-btn--menta:hover { background: var(--menta-osc); color: var(--verde-900); }
.itpc-btn--claro { border-color: rgba(255,255,255,.55); color: #fff; }
.itpc-btn--claro:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.itpc-btn--oscuro { border-color: var(--tinta); color: var(--tinta); }
.itpc-btn--oscuro:hover { background: var(--tinta); color: #fff; }

/* --- 14. Pie ------------------------------------------------------------- */
.itpc-pie { position: relative; background: var(--verde-900); color: rgba(255,255,255,.68); isolation: isolate; }
.itpc-pie__textura {
	position: absolute; inset: 0; z-index: -1; opacity: .28;
	background-image: url("../img/fondos/textura-verde.webp"); background-size: cover;
}
.itpc-pie__cols { display: grid; gap: 2.75rem; padding-block: var(--gap); }
@media (min-width: 760px)  { .itpc-pie__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .itpc-pie__cols { grid-template-columns: 1.6fr 1fr 1.3fr 1.2fr; gap: 3rem; } }

.itpc-pie img.itpc-logo { height: 52px; width: auto; margin-bottom: 1.5rem; }
.itpc-pie address { font-style: normal; font-size: .875rem; line-height: 1.75; }
.itpc-pie a:hover { color: var(--menta); }
.itpc-pie h3 {
	color: #fff; font-size: .9375rem; font-weight: 600; margin-bottom: 1.15rem;
}
.itpc-pie__enlaces { display: grid; gap: .6rem; font-size: .875rem; }
.itpc-pie__redes { display: flex; gap: .85rem; margin-top: 1.5rem; }
.itpc-pie__redes a {
	width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center;
	background: rgba(255,255,255,.08); color: #fff; transition: background-color var(--trans);
}
.itpc-pie__redes a:hover { background: var(--menta); color: var(--verde-900); }
.itpc-pie__redes .itpc-icono { width: 17px; height: 17px; }

.itpc-boletin p { font-size: .8125rem; margin-bottom: 1rem; line-height: 1.5; }
/* Correo y boton en un solo renglon; el boton no se encoge. */
.itpc-boletin form { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 320px; }
.itpc-boletin input {
	flex: 1 1 10rem; min-width: 0;
	font: inherit; font-size: .875rem; padding: .7rem .9rem;
	border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
	background: rgba(255,255,255,.06); color: #fff;
}
.itpc-boletin input::placeholder { color: rgba(255,255,255,.4); }
.itpc-boletin input:focus { outline: none; border-color: var(--menta); background: rgba(255,255,255,.1); }
.itpc-boletin button {
	flex: 0 0 auto;
	background: var(--menta); color: var(--verde-900); border: 0; border-radius: 6px;
	font-family: var(--f-titulo); font-weight: 600; font-size: .875rem; padding: .7rem 1rem;
	transition: background-color var(--trans);
}
.itpc-boletin button:hover { background: var(--menta-osc); }

.itpc-pie__lema { border-left: 1px solid rgba(255,255,255,.12); padding-left: 2rem; }
.itpc-pie__lema strong {
	display: block; font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 500;
	color: #fff; line-height: 1.35; margin-bottom: 1.25rem;
}
.itpc-pie__lema span {
	font-family: var(--f-titulo); font-size: .75rem; letter-spacing: .18em;
	text-transform: uppercase; color: rgba(255,255,255,.5);
}

.itpc-pie__legal {
	border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.25rem;
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
	font-size: .75rem; color: rgba(255,255,255,.45);
}
.itpc-pie__cs { display: flex; align-items: center; gap: .5rem; }
.itpc-pie__cs .itpc-icono { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- 15. Ajustes tras la revisión visual contra el mockup ---------------- */
.itpc-cat, .itpc-evento { height: 100%; }
.itpc-cat__pie { margin-top: auto; }
.itpc-evento__cuerpo { min-height: 0; }
/* El nombre de categoría siempre ocupa dos líneas: mantiene los pies alineados */
.itpc-cat__nom { display: block; min-height: 2.5em; }

/* `overflow-x: clip` no recorta el eje vertical: el submenu de Eventos puede
   salir por debajo de la cabecera. */
.itpc-cab { overflow-x: clip; }

/* En el mockup la banda de alianzas no es blanco puro: rompe el plano contra el pie */
.itpc-alianzas { background: #faf9f6; }

/* --- 18. Franja de valores: iconos más grandes y bloque centrado --------- */
.itpc-valor { text-align: center; }
.itpc-valor__icono { display: flex; justify-content: center; margin-bottom: 1.15rem; }
.itpc-valor__icono .itpc-icono { width: 34px; height: 34px; }
.itpc-valor p { max-width: 30ch; margin-inline: auto; }
/* Aire entre columnas de la franja de valores: 2.5rem -> 2rem (-20%) */
.itpc-valores__inner { column-gap: 2rem; }

/* --- 19. Slider del hero ------------------------------------------------- */
/* Las diapositivas se apilan en una misma celda de grid: la altura la fija
   la más alta y no hace falta position:absolute ni alturas mágicas. */
.itpc-hero__slides { display: grid; }
.itpc-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	opacity: 0; visibility: hidden;
	transition: opacity .45s ease, visibility .45s;
}
.itpc-hero__slide.itpc-is-on { opacity: 1; visibility: visible; }

.itpc-hero__slide--banner { display: block; background: var(--verde-800); }
.itpc-hero__slide--banner picture,
.itpc-hero__slide--banner img { display: block; width: 100%; height: 100%; }
.itpc-hero__slide--banner img { object-fit: cover; object-position: center; }

.itpc-hero__controles { position: relative; z-index: 2; }

@media (min-width: 1080px) {
	.itpc-hero__controles {
		position: absolute; left: 50%; transform: translateX(-50%);
		bottom: 1.75rem; pointer-events: none;
	}
	.itpc-hero__controles .itpc-hero__slider { position: static; pointer-events: auto; justify-content: flex-end; }
}
/* En móvil las flechas iban al final del renglón, con un hueco de 1rem tras
   el "03": el grupo se leía descentrado. Se colocan a los lados de los
   números y los destinos táctiles suben a 44 px. */
@media (max-width: 1079px) {
	.itpc-hero__slider { justify-content: center; gap: .25rem; padding-bottom: 1.1rem; margin-top: 0; }
	.itpc-hero__nums { order: 2; gap: .35rem; }
	.itpc-hero__nums button { min-width: 40px; height: 40px; padding: 0; }
	.itpc-hero__slider > button { order: 3; width: 44px; height: 44px; padding: 0; }
	.itpc-hero__slider > button[data-mover="-1"] { order: 1; }
}

/* En móvil el banner es vertical: se le deja aire para que se vea completo.
   699.98 y no 700: con `max-width: 700px` mas `min-width: 700px` ambas
   reglas se aplicaban a la vez en un viewport de exactamente 700 px. */
@media (max-width: 699.98px) {
	.itpc-hero__slide--banner img { object-fit: contain; }
	.itpc-hero__slides { min-height: 30rem; }
}

/* --- 20. Revisión visual: nada debe partirse en dos renglones -------------
   `auto-fit`/`auto-fill` deducían las columnas del ancho disponible, así que
   por debajo de ~1240 px la última pieza caía a un segundo renglón: el lema
   en la franja de valores y la sexta categoría en productos. A partir de
   1000 px el número de columnas se fija a mano y ya no depende del viewport. */
@media (min-width: 1000px) {
	/* Cuatro valores + el lema, siempre en un renglón */
	.itpc-valores__inner { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
/* Las seis categorías en un renglón a partir de 1160 px, que es el ancho
   medido a partir del cual el nombre más largo («Belleza y Cuidado Personal»)
   cabe entero. Por debajo manda el `auto-fill` de la sección 9, que reparte
   menos columnas y por tanto tarjetas más anchas. */
@media (min-width: 1160px) {
	.itpc-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Y los tres eventos: la columna derecha no siempre daba para tres pistas de
   230 px, así que el tercero caía solo a un segundo renglón. */
@media (min-width: 1000px) {
	.itpc-eventos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los seis iconos de categoría son los del dibujo original, de trazo: se
   pintan con stroke, a diferencia del resto del sprite (Phosphor, relleno). */
.itpc-cat__marca .itpc-icono {
	fill: none; stroke: currentColor; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
}

/* --- 21. Eventos: fuera el aire bajo el texto -----------------------------
   El hueco venía de que la columna de tarjetas se estiraba hasta igualar la
   altura del bloque de texto de la izquierda, y ese sobrante lo absorbía el
   cuerpo de la tarjeta. Con `align-items: start` las tarjetas miden lo que
   mide su contenido, así que la foto puede llevar una proporción fija (4:3,
   antes 2:1) y las tres salen idénticas. */
@media (min-width: 1000px) { .itpc-eventos__inner { align-items: start; } }
/* Dos renglones reservados para el nombre: alinea los pies de las tres */
.itpc-evento__nom { min-height: 2.6em; }

/* --- 22. Cifras de «Un país de oportunidades» ----------------------------
   `1fr` equivale a `minmax(auto, 1fr)`: la pista nunca baja del ancho mínimo
   del contenido, y entre 1000 y 1040 px las cuatro cifras sumaban más que la
   columna y provocaban scroll horizontal en toda la página. */
@media (min-width: 700px) {
	.itpc-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dos renglones reservados para el título del valor: «Oportunidades de
   crecimiento» no cabe en uno y, sin esto, su descripción arrancaba más
   abajo que las otras tres. */
.itpc-valor h3 { min-height: 2.16em; }

/* --- 23. Submenú de Eventos (escritorio) ---------------------------------
   Se abre con el puntero y también con el teclado, vía :focus-within: no
   hace falta JS. `.cab` lleva overflow-x: clip, que no recorta el eje
   vertical, así que el panel puede salir por debajo de la cabecera. */
.itpc-tiene-sub { position: relative; }
.itpc-cab__caret { width: 12px; height: 12px; margin-left: .35rem; transition: transform var(--trans); }
.itpc-tiene-sub:hover .itpc-cab__caret,
.itpc-tiene-sub:focus-within .itpc-cab__caret { transform: rotate(180deg); }

.itpc-submenu {
	position: absolute; top: 100%; left: 50%; z-index: 80;
	transform: translateX(-50%) translateY(-.4rem);
	min-width: 17.5rem; padding: .5rem;
	background: var(--blanco); border: 1px solid var(--linea);
	border-radius: var(--radio-lg); box-shadow: var(--sombra);
	opacity: 0; visibility: hidden;
	transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}
.itpc-tiene-sub:hover .itpc-submenu,
.itpc-tiene-sub:focus-within .itpc-submenu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.itpc-submenu a {
	height: auto; padding: .6rem .7rem; border-radius: 8px; gap: .7rem;
	font-size: .875rem; font-weight: 500; color: var(--tinta);
	transition: background-color var(--trans), color var(--trans);
}
.itpc-submenu a:hover { background: var(--crema); color: var(--menta-osc); }
.itpc-submenu .itpc-icono { width: 18px; height: 18px; color: var(--apagado); }
.itpc-submenu a:hover .itpc-icono { color: var(--menta-osc); }
.itpc-submenu__f { margin-left: auto; width: 13px; height: 13px; }
/* La franja activa del menú no debe dibujarse bajo el ítem con submenú */
.itpc-cab__lista .itpc-tiene-sub.itpc-activo > a::after { bottom: 1.35rem; }

/* --- 24. Menú hamburguesa con iconos -------------------------------------
   Seis entradas más las siete del submenú no caben con el cuerpo de 1.5rem
   original, así que baja a 1.125rem. El submenú va en un <details>: se abre
   y cierra sin JS y el lector de pantalla anuncia el estado. */
.itpc-nav-movil a, .itpc-nav-movil summary {
	display: flex; align-items: center; gap: .85rem;
	color: #fff; font-family: var(--f-titulo); font-size: 1.125rem; font-weight: 600;
	padding-block: .75rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.itpc-nav-movil .itpc-icono { width: 21px; height: 21px; color: var(--menta); }
.itpc-nav-movil a:hover, .itpc-nav-movil summary:hover { color: var(--menta); }
.itpc-nav-movil [aria-current] { color: var(--menta); }

.itpc-nav-movil summary { cursor: pointer; list-style: none; }
.itpc-nav-movil summary::-webkit-details-marker { display: none; }
.itpc-nav-movil__caret {
	margin-left: auto; width: 14px !important; height: 14px !important;
	color: rgba(255,255,255,.45) !important; transition: transform var(--trans);
}
.itpc-nav-movil__grupo[open] .itpc-nav-movil__caret { transform: rotate(180deg); }
.itpc-nav-movil__grupo[open] > summary { border-bottom-color: transparent; }
.itpc-nav-movil__grupo > a {
	padding-left: 2rem; font-size: .9375rem; font-weight: 500;
	color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.05);
}
.itpc-nav-movil__grupo > a .itpc-icono { width: 17px; height: 17px; color: rgba(255,255,255,.4); }
.itpc-nav-movil__grupo > a:hover .itpc-icono { color: var(--menta); }

/* El último enlace no lleva raya: el bloque de idiomas ya trae la suya y se
   veían dos líneas seguidas. */
.itpc-nav-movil > a:last-of-type { border-bottom: 0; }

/* --- 25. Idiomas dentro del menú hamburguesa ------------------------------
   En la cabecera móvil el selector cabe, pero quien abre el menú espera
   encontrarlo ahí dentro. */
.itpc-nav-movil__idioma {
	display: flex; align-items: center; gap: .5rem;
	margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12);
}
.itpc-nav-movil__idioma span {
	font-family: var(--f-titulo); font-size: .75rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45);
	margin-right: auto;
}
.itpc-nav-movil__idioma a {
	min-width: 46px; justify-content: center; padding: .5rem .25rem; border: 0;
	border-radius: 8px; background: rgba(255,255,255,.08);
	font-size: .875rem; color: rgba(255,255,255,.75);
}
.itpc-nav-movil__idioma a.itpc-on { background: var(--menta); color: var(--verde-900); }

/* Las pastillas del menú hamburguesa, en la misma proporción */
.itpc-nav-movil__idioma a { min-width: 38px; padding: .4rem .2rem; font-size: .8125rem; }
.itpc-nav-movil__idioma span { font-size: .6875rem; }

/* --- 28. Categorías de dos en dos en móvil -------------------------------
   Con `minmax(180px, 1fr)` sólo entraba una por fila en un teléfono. Se
   fijan dos columnas y el pie se aprieta: fuera la flecha (la tarjeta
   entera ya es el enlace) y el círculo del icono baja de 28 a 24 px. */
@media (max-width: 699px) {
	.itpc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.itpc-cat__pie { padding: .7rem .6rem; gap: .45rem; }
	.itpc-cat__flecha { display: none; }
	.itpc-cat__marca { width: 24px; height: 24px; }
	.itpc-cat__marca .itpc-icono { width: 13px; height: 13px; }
	.itpc-cat__nom { font-size: .6875rem; line-height: 1.3; }
}

/* --- 29. Idiomas en la franja superior ------------------------------------
   El selector deja de ser un bloque verde en la cabecera y pasa a texto en
   la franja de aviso: la cabecera recupera ~100 px de ancho para el logo y
   el menú. Dentro del hamburguesa se mantiene, porque esta franja se va con
   el scroll y la cabecera es la que queda fija. */
.itpc-aviso { padding: .5rem 0; text-align: left; }
.itpc-aviso__inner {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: .3rem 1.25rem;
}
.itpc-aviso__inner p { margin: 0; }

.itpc-aviso__idioma { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.itpc-aviso__idioma a { color: rgba(255,255,255,.55); transition: color var(--trans); }
.itpc-aviso__idioma a:hover { color: var(--menta); }
.itpc-aviso__idioma a.itpc-on { color: #fff; }
.itpc-aviso__idioma span { color: rgba(255,255,255,.25); }

/* La franja superior ya sólo lleva los idiomas. */
@media (max-width: 639px) { .itpc-aviso__inner { flex-wrap: nowrap; } }

/* La cabecera ya no necesita recortar el sangrado del bloque verde */
.itpc-cab__inner { align-items: center; }
.itpc-buscador { align-self: center; }

/* --- 30. Eventos de dos en dos en móvil ----------------------------------
   Las tarjetas de evento (las de noticia/blog de la home) salían de una en
   una: la pista pedía 230 px mínimo. Se fijan dos columnas y el cuerpo se
   aprieta para que quepan la fecha y el nombre. */
@media (max-width: 699px) {
	.itpc-eventos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.itpc-evento__cuerpo { padding: .8rem .75rem 1rem; gap: .35rem; }
	.itpc-evento__dia { font-size: 1.0625rem; }
	.itpc-evento__mes { font-size: .625rem; letter-spacing: .08em; }
	.itpc-evento__nom { font-size: .8125rem; min-height: 3.9em; }
	.itpc-evento__lugar { font-size: .6875rem; gap: .3rem; }
	.itpc-evento__flecha { display: none; }
}

/* Entre 700 y 999 px los tres eventos caían 2+1. Ahí sí caben los tres. */
@media (min-width: 700px) and (max-width: 999px) {
	.itpc-eventos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 31. La franja superior queda sólo con los idiomas ------------------- */
.itpc-aviso__inner { justify-content: flex-end; }
@media (max-width: 639px) { .itpc-aviso__inner { justify-content: center; } }

/* --- 32. Mapamundi de fondo en Alianzas ---------------------------------
   La ilustración viene sobre crema (#F4F2ED), casi el mismo tono que la
   banda, así que se funde sola: no hace falta velo ni opacidad. */
.itpc-alianzas { position: relative; isolation: isolate; overflow: hidden; }
.itpc-alianzas__mapa { position: absolute; inset: 0; z-index: -1; }
/* La banda pasa de 0.58 de proporción en un teléfono a 5.94 en escritorio,
   y el mapa es 2:1: con `cover` se recortaba hasta perderse. Se dibuja a lo
   ancho, en su proporción, centrado; en escritorio el recuadro recorta la
   franja central, que es lo que se quiere de una marca de agua. */
.itpc-alianzas__mapa img {
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 100%; height: auto;
}

/* --- 33. Buscador dentro del menú hamburguesa ---------------------------
   En la cabecera sólo aparece a partir de 1080 px; en un teléfono no había
   forma de buscar. */
.itpc-nav-movil__buscar { position: relative; margin: .25rem 0 1.25rem; }
.itpc-nav-movil__buscar input {
	font: inherit; font-size: 1rem; width: 100%;
	padding: .85rem 3rem .85rem 1rem;
	border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
	background: rgba(255,255,255,.07); color: #fff;
	transition: border-color var(--trans), background-color var(--trans);
}
.itpc-nav-movil__buscar input::placeholder { color: rgba(255,255,255,.45); }
.itpc-nav-movil__buscar input:focus {
	outline: none; border-color: var(--menta); background: rgba(255,255,255,.12);
}
.itpc-nav-movil__buscar button {
	position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
	background: none; border: 0; padding: .5rem; display: grid; place-items: center;
}
.itpc-nav-movil__buscar .itpc-icono { width: 20px; height: 20px; color: var(--menta); }