/*
 * Cabecero y pie de Cocorota.
 *
 * El cabecero entra grande y encoge al bajar: la fila se estrecha, el logo
 * completo se desvanece y en su sitio queda el pájaro solo, y el menú baja de
 * tamaño. El encoger lo lleva la clase `coco-encogido` que pone cabecero.js;
 * si el JS no corre, el cabecero se queda grande y no se rompe nada.
 */

:root {
	--coco-tinta: #141414;
	--coco-suave: #68635b;
	--coco-papel: #fffdf7;
	--coco-crema: #f7f0e3;
	--coco-linea: rgba(20, 20, 20, 0.12);
	--coco-turquesa: #0da6ad;
	--coco-coral: #f05a43;
	--coco-oro: #f9b21d;

	--coco-cabecero-alto: 120px;
	--coco-cabecero-alto-min: 68px;
	--coco-logo-alto: 74px;
	--coco-logo-alto-min: 40px;
}

/* ───────────────────────── Cabecero ───────────────────────── */

/* ⚠️ Nada de `position: sticky` aquí: Blocksy ya pega el cabecero con su
   propio `.ct-sticky-container`, y poner otro encima lo rompía. */
.ct-header,
.ct-header .ct-sticky-container > [data-sticky] {
	background: var(--coco-papel);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.ct-header [data-row] > .ct-container,
.ct-header > div > .ct-container {
	min-height: var(--coco-cabecero-alto);
	transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.coco-encogido .ct-header {
	border-bottom-color: var(--coco-linea);
	box-shadow: 0 6px 26px rgba(20, 20, 20, 0.07);
}

body.coco-encogido .ct-header [data-row] > .ct-container,
body.coco-encogido .ct-header > div > .ct-container {
	min-height: var(--coco-cabecero-alto-min);
}

/* La marca: el logo horizontal y, detrás, el pájaro esperando su turno.
   Blocksy pinta también el título en texto junto al logo; sobra. */
.ct-header .site-branding {
	position: relative;
	display: flex;
	align-items: center;
}

.ct-header .site-branding .site-title-container,
.ct-header .site-branding .site-title,
.ct-header .site-branding .site-description {
	display: none;
}

.ct-header .site-branding .site-logo-container img,
.ct-header .site-branding img {
	display: block;
	height: var(--coco-logo-alto);
	width: auto;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ct-header .site-branding::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--coco-logo-alto-min);
	height: var(--coco-logo-alto-min);
	background-image: url("../images/coco-logo-pajaro.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	opacity: 0;
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
}

body.coco-encogido .ct-header .site-branding img {
	height: var(--coco-logo-alto-min);
	opacity: 0;
}

body.coco-encogido .ct-header .site-branding::before {
	opacity: 1;
}

/* Si no hay logo puesto todavía, el título en texto también encoge. */
.ct-header .site-title,
.ct-header .site-title a {
	font-size: 1.6rem;
	line-height: 1.2;
	transition: font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.coco-encogido .ct-header .site-title,
body.coco-encogido .ct-header .site-title a {
	font-size: 1.15rem;
}

/* El menú: pastillas de color, una por cada tono de la marca. */
.ct-header .menu-container > .menu,
.ct-header .menu-container > .menu > li {
	align-items: center;
}

/* La pastilla se ajusta al texto: si el enlace estira a la altura de la fila,
   sale un pegote de color del tamaño del cabecero. */
.ct-header .menu-container > .menu > li > .ct-menu-link {
	align-self: center;
	height: auto;
	min-height: 0;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	color: var(--coco-tinta);
	font-size: 0.98rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.25s ease, color 0.25s ease, padding 0.35s ease, font-size 0.35s ease;
}

body.coco-encogido .ct-header .menu-container > .menu > li > .ct-menu-link {
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
}

.ct-header .menu-container > .menu > li:nth-child(3n + 1) > .ct-menu-link:hover,
.ct-header .menu-container > .menu > li:nth-child(3n + 1).current-menu-item > .ct-menu-link {
	background: var(--coco-turquesa);
	color: var(--coco-papel);
}

.ct-header .menu-container > .menu > li:nth-child(3n + 2) > .ct-menu-link:hover,
.ct-header .menu-container > .menu > li:nth-child(3n + 2).current-menu-item > .ct-menu-link {
	background: var(--coco-coral);
	color: var(--coco-papel);
}

.ct-header .menu-container > .menu > li:nth-child(3n + 3) > .ct-menu-link:hover,
.ct-header .menu-container > .menu > li:nth-child(3n + 3).current-menu-item > .ct-menu-link {
	background: var(--coco-oro);
	color: var(--coco-tinta);
}

/* ───────────────────── Pie · zona grande ───────────────────── */

.cocopie {
	position: relative;
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-right: min(3vw, 20px);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-left: min(3vw, 20px);
	background-image:
		linear-gradient(rgba(20, 20, 20, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 20, 20, 0.025) 1px, transparent 1px),
		linear-gradient(180deg, #fbf3e6 0%, #f7f0e3 100%);
	background-size: 34px 34px, 34px 34px, auto;
	color: var(--coco-tinta);
	border-top: 1px solid var(--coco-linea);
}

.cocopie__dentro {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
	gap: clamp(1.6rem, 3vw, 2.8rem);
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.cocopie__logo {
	display: block;
	width: min(210px, 70%);
	height: auto;
	margin-bottom: 1.1rem;
}

.cocopie__lema {
	max-width: 22rem;
	margin: 0;
	color: var(--coco-suave);
	font-size: 0.98rem;
	line-height: 1.6;
}

.cocopie__titulo {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 0.82rem;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cocopie__columna--turquesa .cocopie__titulo { color: var(--coco-turquesa); }
.cocopie__columna--coral .cocopie__titulo { color: var(--coco-coral); }
.cocopie__columna--oro .cocopie__titulo { color: #c98a06; }
.cocopie__columna--escribenos .cocopie__titulo { color: var(--coco-tinta); }

.cocopie__lista {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.cocopie__lista li {
	margin-bottom: 0.6rem;
}

.cocopie__lista a {
	color: var(--coco-tinta);
	font-size: 0.97rem;
	line-height: 1.5;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.cocopie__columna--turquesa .cocopie__lista a:hover { color: var(--coco-turquesa); border-bottom-color: var(--coco-turquesa); }
.cocopie__columna--coral .cocopie__lista a:hover { color: var(--coco-coral); border-bottom-color: var(--coco-coral); }
.cocopie__columna--oro .cocopie__lista a:hover { color: #c98a06; border-bottom-color: var(--coco-oro); }
.cocopie__lista--contacto a:hover { color: var(--coco-turquesa); border-bottom-color: var(--coco-turquesa); }

.cocopie__boton {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.8rem 1.5rem;
	border-radius: 999px;
	background: var(--coco-coral);
	color: var(--coco-papel);
	font-size: 0.93rem;
	line-height: 1.2;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(240, 90, 67, 0.28);
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.cocopie__boton:hover {
	background: var(--coco-turquesa);
	color: var(--coco-papel);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(13, 166, 173, 0.3);
}

/* ───────────────────── Pie · barra fina ───────────────────── */

.cocobarra {
	padding-top: 1.1rem;
	padding-right: min(3vw, 20px);
	padding-bottom: 1.1rem;
	padding-left: min(3vw, 20px);
	background: var(--coco-turquesa);
	color: var(--coco-papel);
}

.cocobarra__dentro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 1.6rem;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.cocobarra__copy {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
}

.cocobarra__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.cocobarra__legal a {
	color: var(--coco-papel);
	font-size: 0.88rem;
	line-height: 1.5;
	text-decoration: none;
	opacity: 0.9;
	border-bottom: 1px solid rgba(255, 253, 247, 0.4);
	transition: opacity 0.25s ease, border-color 0.25s ease;
}

.cocobarra__legal a:hover {
	opacity: 1;
	border-bottom-color: var(--coco-papel);
}

/* Blocksy trae su propio pie; lo dejamos vacío por configuración, pero si
   alguna vez vuelve a pintar algo, que no deje un hueco suelto. */
.ct-footer:empty {
	display: none;
}

@media (max-width: 1000px) {
	.cocopie__dentro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cocopie__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.cocopie__dentro {
		grid-template-columns: minmax(0, 1fr);
	}

	.cocobarra__dentro {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-header,
	.ct-header [data-row] > .ct-container,
	.ct-header .site-branding img,
	.ct-header .site-branding::before,
	.ct-header .site-title,
	.ct-header .menu-container > .menu > li > .ct-menu-link {
		transition: none;
	}
}