/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */

/*
 * eenda.com — Breakpoints del front
 *
 * Siempre con min-width, igual que en la hoja del XPanel®: la base es móvil
 * (style.css) y aquí solo se añade lo que cambia al ensanchar.
 *
 * El grueso del comportamiento responsive lo resuelve Bootstrap 5.3.8 con sus
 * columnas y utilidades. Lo que queda aquí es lo que Bootstrap no puede
 * saber: el cuerpo de los titulares de cartel en cada anchura, el hero
 * partido en dos y las rejillas propias de cada componente.
 *
 * CUERPOS DE TITULAR
 * --------------------------------------------------------------------------
 * Cada titular de cartel tiene un techo calculado contra la columna que lo
 * contiene: la palabra más larga de cada uno («PROFESIONALIDAD», «DESARROLLO
 * WEB.», «POSICIONAMIENTO») tiene que caber entera en su línea en todas las
 * anchuras. Si se sube un techo, hay que comprobar que ninguna palabra se
 * salga de su columna.
 */


/* ==========================================================================
   sm · ≥576px
   ========================================================================== */

@media (min-width: 576px){

	/*
	 * --ee-gutter sigue al borde del texto del .container en cada anchura: el
	 * panel del hero, que va a sangre, alinea su texto con el del header y el
	 * de las franjas. 540/720/960/1140/1320 son los anchos de .container de
	 * Bootstrap 5.3.8, y 1rem su relleno (ver «Margen de los contenedores»).
	 */
	:root{
		--ee-gutter: calc((100vw - 540px) / 2 + 1rem);
	}

	/* Pruebas en dos columnas: el filete superior solo en la segunda fila. */
	.intro__proof-item:nth-child(2){
		background: none;
	}
}


/* ==========================================================================
   md · ≥768px
   ========================================================================== */

@media (min-width: 768px){

	:root{
		--ee-header-h: 5rem;
		--ee-gutter: calc((100vw - 720px) / 2 + 1rem);
	}

	.site-bar__link{
		display: inline-block;
	}

	/* Rejillas de columnas: el gutter amplio solo cuando hay columnas. */
	.galeria__grid,
	.canales__list{
		--bs-gutter-x: 2rem;
	}

	.hero__title{
		font-size: clamp(4rem, 10vw, 5.5rem);
	}

	.hero__body{
		padding-bottom: 9rem;
	}

	.hero__controls{
		bottom: 2.5rem;
	}

	.intro,
	.servicios,
	.resultados,
	.proyectos,
	.productos,
	.trayectoria,
	.faq,
	.catalogo,
	.servicio,
	.galeria,
	.proyecto-ficha,
	.manifiesto,
	.valores,
	.canales,
	.redes,
	.blog,
	.relacionadas,
	.legal{
		padding: 7rem 0;
	}

	.articulo{
		padding: 5rem 0 7rem;
	}

	.contacto{
		padding: 7rem 0 4.5rem;
	}

	.clientes{
		padding: 3.5rem 0;
	}

	.pagehead{
		min-height: 32rem;
		padding-top: calc(var(--ee-header-h) + 5rem);
		padding-bottom: 4.5rem;
	}

	.pagehead__title{
		font-size: clamp(4.5rem, 10vw, 6rem);
	}

	.pagehead__title--medio{
		font-size: clamp(3.5rem, 7vw, 4.5rem);
	}

	.pagehead__title--largo{
		font-size: clamp(2.25rem, 4.5vw, 2.75rem);
	}

	.intro__title{
		font-size: clamp(4rem, 9vw, 5.25rem);
	}

	.servicios__title,
	.resultados__title,
	.proyectos__title,
	.productos__title,
	.trayectoria__title,
	.faq__title{
		font-size: clamp(3.5rem, 8vw, 4.75rem);
	}

	/* Índice de servicios: número, nombre, descripción y flecha en fila. */
	.servicios__link{
		grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1fr) 3.25rem;
		gap: 1.5rem;
		padding: 2rem 0;
	}

	/* «POSICIONAMIENTO» es la palabra más larga del índice: marca el techo. */
	.servicios__name{
		font-size: clamp(2.25rem, 4.6vw, 3rem);
	}

	.servicios__text{
		grid-column: 3;
		grid-row: 1;
	}

	.servicios__arrow{
		grid-column: 4;
		width: 3.25rem;
		height: 3.25rem;
	}

	/* Cifras en tres columnas con filete vertical. */
	.resultados__item{
		padding-top: 2.25rem;
		padding-bottom: 0;
	}

	.resultados__item + .resultados__item{
		background: none;
		border-left: 1px solid var(--ee-hairline-dark);
		padding-left: 1.75rem;
	}

	.resultados__cifra{
		font-size: clamp(4rem, 9.5vw, 6.5rem);
	}

	.proyecto__name{
		font-size: clamp(3rem, 7vw, 4rem);
	}

	.producto{
		grid-template-columns: minmax(0, 1fr) 3.5rem;
	}

	.producto__name{
		font-size: clamp(4.5rem, 13vw, 6.5rem);
	}

	.producto__arrow{
		width: 3.5rem;
		height: 3.5rem;
	}

	.contacto__title{
		font-size: clamp(5rem, 12vw, 7.5rem);
	}

	.contacto__vias ul{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pagenav__item a{
		padding: 2.5rem 0;
	}

	.pagenav__item--prev a{
		padding-right: 2rem;
	}

	.pagenav__item--next{
		border-top: 0;
		border-left: 1px solid var(--ee-hairline);
	}

	.pagenav__item--next a{
		padding-left: 2rem;
	}

	.catalogo__incluye{
		columns: 2;
		column-gap: 2rem;
	}

	.canal{
		padding: 2.5rem 2.25rem;
	}

	.canales__apuntes{
		padding: 3.5rem 3rem;
	}

	/* En escritorio, nombre, apunte y flecha en una sola fila. */
	.red{
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.red__apunte{
		grid-column: 2;
		grid-row: 1;
	}

	.red .icono-flecha{
		grid-column: 3;
	}

	.canales__lista{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-nav__label{
		font-size: clamp(4rem, 9vw, 5.5rem);
	}
}


/* ==========================================================================
   lg · ≥992px — el hero se parte en dos
   ========================================================================== */

@media (min-width: 992px){

	:root{
		--ee-gutter: calc((100vw - 960px) / 2 + 1rem);
	}

	/* --- Hero ------------------------------------------------------------- */

	.hero__slide{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: min(100svh, 60rem);
		min-height: max(40rem, min(100svh, 60rem));
	}

	.hero__slide--marca{
		background: transparent;
	}

	/*
	 * La fotografía deja de ser fondo y pasa a ser media pantalla. Entra con
	 * una cortinilla (clip-path) desde el lado del panel.
	 */
	.hero__media{
		position: relative;
		inset: auto;
		opacity: 1;
		clip-path: inset(0 100% 0 0);
		transition: clip-path 1.1s var(--ee-wipe);
	}

	.hero__slide--marca .hero__media{
		opacity: 1;
		clip-path: inset(0 0 0 100%);
	}

	.hero__slide.is-active .hero__media,
	.hero__slide.is-leaving .hero__media{
		clip-path: inset(0 0 0 0);
	}

	/* Sin JavaScript no hay cortinilla: la primera diapositiva se ve entera. */
	html:not(.js-motion) .hero__media{
		clip-path: none;
	}

	.hero__media::after{
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(4, 14, 26, .55) 0%, rgba(4, 14, 26, 0) 30%, rgba(4, 14, 26, 0) 70%, rgba(4, 14, 26, .6) 100%);
		pointer-events: none;
	}

	.hero__media picture{
		position: absolute;
		inset: 0;
	}

	.hero__pie{
		position: absolute;
		bottom: 2.75rem;
		left: var(--ee-gutter);
		z-index: 1;
		display: block;
		/* El pie solo toca el borde de la pantalla por un lado: por el otro
		   está la costura con el panel, donde basta un respiro de 2rem. Restar
		   el margen lateral dos veces lo estrechaba tanto en pantallas anchas
		   (a 1920px se quedaba en 328px) que el rótulo se partía en dos. */
		max-width: calc(100% - var(--ee-gutter) - 2rem);
		font-family: var(--ee-font-mono);
		font-size: .6875rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .85);
	}

	/*
	 * En la diapositiva azul la foto está a la derecha, que es donde van los
	 * controles: el pie sube arriba para no pisarse con la paginación.
	 */
	.hero__slide--marca .hero__pie{
		top: calc(var(--ee-header-h) + 1.5rem);
		right: var(--ee-gutter);
		bottom: auto;
		left: auto;
		text-align: right;
	}

	.hero__body{
		padding: calc(var(--ee-header-h) + 3.5rem) var(--ee-gutter) 9rem clamp(3rem, 5vw, 5.5rem);
		background: var(--ee-abyss);
	}

	.hero__slide--marca .hero__body{
		order: -1;
		padding-right: clamp(3rem, 5vw, 5.5rem);
		padding-left: var(--ee-gutter);
		background: var(--ee-brand);
	}

	/*
	 * El titular se mide contra el ancho del PANEL, no de la pantalla: a
	 * partir de 1400px el .container deja de crecer, el margen lateral sí, y
	 * el panel se queda en ~556px aunque la pantalla siga ensanchando. Con vw
	 * el titular crecía igual y «HERRAMIENTAS» se salía a 1920px.
	 *
	 * 14cqi es el techo para que la línea más ancha («DESARROLLO WEB.», unas
	 * 6,7 veces el cuerpo) quepa entera. El valor en vw queda de respaldo
	 * para navegadores sin consultas de contenedor.
	 */
	.hero__body{
		container-type: inline-size;
	}

	.hero__title{
		font-size: clamp(3.25rem, 5.4vw, 5rem);
		font-size: clamp(3rem, 14cqi, 6.75rem);
	}

	.hero__controls{
		left: calc(50% + clamp(3rem, 5vw, 5.5rem));
		bottom: 2.5rem;
	}

	/*
	 * Marca de scroll en la costura entre las dos mitades: un filete vertical
	 * con un destello que baja en bucle y el rótulo en vertical.
	 */
	.hero__scroll{
		position: absolute;
		bottom: 0;
		left: 50%;
		z-index: 5;
		display: flex;
		align-items: flex-end;
		gap: .75rem;
		color: rgba(255, 255, 255, .75);
		text-decoration: none;
	}

	.hero__scroll:hover,
	.hero__scroll:focus-visible{
		color: #fff;
	}

	.hero__scroll-line{
		position: relative;
		display: block;
		width: 1px;
		height: 6rem;
		overflow: hidden;
		background: rgba(255, 255, 255, .22);
	}

	.hero__scroll-line::after{
		content: "";
		position: absolute;
		top: -40%;
		right: 0;
		left: 0;
		height: 40%;
		background: var(--ee-brand-light);
		animation: hero-scroll 2.2s var(--ee-wipe) infinite;
	}

	.hero__scroll-label{
		margin-bottom: 2.5rem;
		font-family: var(--ee-font-mono);
		font-size: .625rem;
		letter-spacing: .2em;
		text-transform: uppercase;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	@keyframes hero-scroll{
		to{ top: 100%; }
	}

	/* --- Franjas ---------------------------------------------------------- */

	.intro,
	.servicios,
	.resultados,
	.proyectos,
	.productos,
	.trayectoria,
	.faq,
	.catalogo,
	.servicio,
	.galeria,
	.proyecto-ficha,
	.manifiesto,
	.valores,
	.canales,
	.redes,
	.blog,
	.legal{
		padding: 9rem 0;
	}

	.relacionadas{
		padding: 7rem 0;
	}

	.contacto{
		padding: 9rem 0 5rem;
	}

	.clientes__label{
		margin: 0;
		padding-right: 2rem;
	}

	/* Techos contra columna: ver la nota de la cabecera de este archivo. */
	.intro__title{
		font-size: clamp(3.25rem, 4.6vw, 4.75rem);
	}

	.servicios__title,
	.resultados__title,
	.proyectos__title,
	.productos__title,
	.trayectoria__title{
		font-size: clamp(3.5rem, 5vw, 5.25rem);
	}

	.faq__title{
		font-size: clamp(3rem, 4.2vw, 4.25rem);
	}

	/* El apoyo arranca a la altura del titular, no del rótulo. */
	.intro__aside,
	.servicios__intro,
	.resultados__aside,
	.productos__aside{
		margin-top: 3.25rem;
	}

	.intro__text:first-child{
		font-size: 1.375rem;
	}

	.intro__proof{
		margin-top: 6rem;
	}

	/* Pruebas en cuatro columnas con filete vertical entre ellas. */
	.intro__proof-item + .intro__proof-item{
		background: none;
	}

	.intro__proof-item{
		padding-top: 2rem;
		padding-bottom: 0;
	}

	.intro__proof-item + .intro__proof-item{
		border-left: 1px solid var(--ee-hairline);
		padding-left: 1.75rem;
	}

	.servicios__list{
		margin-top: 5rem;
	}

	.servicios__link{
		grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 1fr) 3.5rem;
		gap: 2rem;
		padding: 2.25rem 0;
	}

	.servicios__name{
		font-size: clamp(3rem, 4.4vw, 4.25rem);
	}

	.servicios__arrow{
		width: 3.5rem;
		height: 3.5rem;
	}

	.resultados__cifras{
		margin-top: 5rem;
	}

	.resultados__cifra{
		font-size: clamp(5.5rem, 7.5vw, 8.5rem);
	}

	.resultados__cita{
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 2rem;
		margin-top: 6rem;
	}

	/* La firma a la izquierda, la cita a la derecha: se lee quién habla
	   antes de leer qué dice. */
	.resultados__cita figcaption{
		order: -1;
	}

	.proyectos__lista{
		gap: 8rem;
		margin-top: 5.5rem;
	}

	.proyecto__name{
		font-size: clamp(3.25rem, 4.4vw, 4.5rem);
	}

	.proyecto__index{
		padding: 1rem 1.25rem .75rem;
		font-size: 3rem;
	}

	.proyectos__pie{
		margin-top: 8rem;
	}

	.productos__lista{
		margin-top: 5rem;
	}

	.producto{
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 3.5rem;
		gap: 3rem;
		padding: 2.5rem 0;
	}

	.producto__name{
		font-size: clamp(5rem, 7.5vw, 8.5rem);
	}

	.producto__cuerpo{
		grid-column: 2;
		grid-row: 1;
	}

	.producto__arrow{
		grid-column: 3;
	}

	.trayectoria__list{
		margin-top: 4.5rem;
	}

	/* La cabecera acompaña a las preguntas mientras se recorren. */
	.faq__cabecera{
		position: sticky;
		top: calc(var(--ee-header-h) + 2rem);
		align-self: start;
	}

	.faq__list{
		margin-top: 0;
	}

	.contacto__title{
		font-size: clamp(6rem, 10.5vw, 11rem);
	}

	.contacto__fila{
		margin-top: 3.5rem;
		padding-top: 2.5rem;
	}

	.contacto__vias{
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 2rem;
		margin-top: 0;
	}

	.site-footer{
		padding: 5rem 0 2.5rem;
	}

	/* --- Páginas interiores ----------------------------------------------- */

	.pagehead{
		min-height: 38rem;
		padding-top: calc(var(--ee-header-h) + 7rem);
		padding-bottom: 5.5rem;
	}

	.pagehead__title{
		font-size: clamp(5.5rem, 8vw, 8.5rem);
	}

	.pagehead__title--medio{
		font-size: clamp(4rem, 5.4vw, 6rem);
	}

	.pagehead__title--largo{
		font-size: clamp(2.5rem, 3.4vw, 3.25rem);
	}

	.catalogo__item{
		padding: 4rem 0;
	}

	/* El encabezado se queda fijo mientras se recorre el detalle. */
	.catalogo__cabecera{
		position: sticky;
		top: calc(var(--ee-header-h) + 2rem);
		align-self: start;
	}

	.catalogo__name{
		font-size: clamp(3rem, 4.2vw, 4.25rem);
	}

	.catalogo__cuerpo{
		margin-top: 0;
	}

	/* La ficha y su botón acompañan la lectura del cuerpo. */
	.servicio__aside{
		position: sticky;
		top: calc(var(--ee-header-h) + 2rem);
		align-self: start;
	}

	.servicio .ficha{
		margin-top: 0;
	}

	.servicio__incluye,
	.servicio__faq{
		margin-top: 7rem;
		padding-top: 4rem;
	}

	.galeria__barra{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 4rem;
	}

	.galeria__barra .section-label{
		margin-bottom: 0;
	}

	.galeria__filtros{
		justify-content: flex-end;
		margin-top: 0;
	}

	.tarjeta__titulo{
		font-size: clamp(2.5rem, 3.4vw, 3.25rem);
	}

	.proyecto-ficha__media{
		margin-bottom: 5rem;
	}

	.manifiesto__pruebas{
		margin-top: 6rem;
		padding-top: 3rem;
	}

	.valores__titulo{
		font-size: clamp(2.5rem, 3.4vw, 3.25rem);
	}

	.canal{
		padding: 3rem;
	}

	.canales__apuntes{
		margin-top: 5rem;
		padding: 5rem 4.5rem;
	}

	.canales__apuntes-titulo{
		font-size: clamp(2.75rem, 3.6vw, 3.75rem);
	}

	.canales__apuntes-acciones{
		margin-bottom: 0;
	}

	.canales__punto{
		min-height: 13rem;
		padding: 2rem;
	}

	.canales__punto-num{
		font-size: 4rem;
	}

	/* La dirección a lo ancho: rótulo, texto y enlace en una fila. */
	.canales__direccion{
		grid-template-columns: 12rem minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
		padding: 2.5rem 3rem;
	}

	.canal__valor{
		font-size: clamp(2.75rem, 4.2vw, 4rem);
	}

	/*
	 * Artículo: el índice acompaña la lectura, fijo a la izquierda. En
	 * escritorio siempre está abierto (su cruz de plegado desaparece).
	 */
	.articulo{
		padding: 5rem 0 7rem;
	}

	.articulo__lateral{
		margin-bottom: 0;
	}

	.articulo__indice{
		position: sticky;
		top: calc(var(--ee-header-h) + 2rem);
	}

	.articulo__indice-titulo{
		cursor: default;
		pointer-events: none;
	}

	.articulo__indice-titulo::after{
		display: none;
	}

	.articulo__breve{
		padding: 2rem 2.25rem;
	}

	.entrada{
		padding: 2.75rem 0;
	}

	/*
	 * Listado del blog con imagen: el texto manda y la imagen acompaña en una
	 * columna estrecha de 15rem.
	 */
	.entrada--media{
		grid-template-columns: minmax(0, 1fr) 15rem;
		gap: 0 2.5rem;
		align-items: start;
	}

	.entrada--media .entrada__media{
		order: 0;
	}

	/* La destacada es la portada del blog: una sola columna, imagen arriba. */
	.blog__item--destacada .entrada--media{
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.blog__item--destacada .entrada--media .entrada__media{
		order: -1;
	}

	/* El índice acompaña la lectura del documento. */
	.legal__indice{
		position: sticky;
		top: calc(var(--ee-header-h) + 2rem);
		align-self: start;
		margin-bottom: 0;
	}

	/* --- Menú ------------------------------------------------------------- */

	.site-menu__body{
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: end;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.site-menu__aside{
		padding-top: 0;
		padding-left: 2.5rem;
		border-top: 0;
		border-left: 1px solid var(--ee-hairline-dark);
	}

	.site-nav__label{
		font-size: clamp(4.5rem, 7vw, 7rem);
	}

	.site-menu__watermark{
		width: 22rem;
	}
}


/* ==========================================================================
   xl · ≥1200px
   ========================================================================== */

@media (min-width: 1200px){

	:root{
		--ee-gutter: calc((100vw - 1140px) / 2 + 1rem);
	}
}


/* ==========================================================================
   xxl · ≥1400px
   ========================================================================== */

@media (min-width: 1400px){

	:root{
		--ee-gutter: calc((100vw - 1320px) / 2 + 1rem);
	}
}