/*!
Theme Name: Sostenibilidad2026
Theme URI: http://underscores.me/
Author: HIMALAYA SEM SAS
Author URI: https://himalayadigital.co/
Description: Tema desarrollado para Informe de sostenibilidad Comfandi 2026
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: comfandi_sotenibilidad
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Sostenibilidad2026 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* =========================
CARNEO FONT FAMILY
========================= */

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Light.woff2') format('woff2'),
	     url('fonts/Carnero-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Book.woff2') format('woff2'),
	     url('fonts/Carnero-Book.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Regular.woff2') format('woff2'),
	     url('fonts/Carnero-Regular.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Semibold.woff2') format('woff2'),
	     url('fonts/Carnero-Semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Bold.woff2') format('woff2'),
	     url('fonts/Carnero-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Carnero';
	src: url('fonts/Carnero-Black.woff2') format('woff2'),
	     url('fonts/Carnero-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
body {
	font-family: 'Carnero', sans-serif !important;
}
/* =========================
RESET LANDING BASE
========================= */

html,
body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}


/* =========================
HEADER BASE
========================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: transparent;
}

.landing-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	    padding: 20px 50px;
	max-width: 1600px;
	margin: 0 auto;
}

/* =========================
LOGO
========================= */

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	    height: auto;
    width: 150px;
	display: block;
}

/* =========================
HAMBURGER BUTTON
========================= */

.landing-menu-toggle {
	position: relative;
	width: 40px;
	height: 28px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
}

.landing-menu-toggle span {
	display: block;
	width: 100%;
	height: 5px;
	background: #003ba3;
	border-radius: 3px;
	transition: transform .3s ease, opacity .3s ease;
}

/* animación cuando abre */

body.menu-open .landing-menu-toggle span:nth-child(1) {
	transform: translateY(12px) rotate(45deg);
}

body.menu-open .landing-menu-toggle span:nth-child(2) {
	opacity: 0;
}

body.menu-open .landing-menu-toggle span:nth-child(3) {
	transform: translateY(-12px) rotate(-45deg);
}

/* =========================
OFFCANVAS MENU
========================= */

.site-offcanvas-menu {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	justify-content: flex-end;
}

.site-offcanvas-menu[hidden] {
	display: none;
}

/* overlay oscuro */

.site-offcanvas-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(2px);
}

/* panel lateral */

.site-offcanvas-menu__panel {
	position: relative;
	width: 250px;
	max-width: 100%;
	height: 100vh;
	background: #003ba3;
	display: flex;
	flex-direction: column;
	padding: 40px;
	transform: translateX(100%);
	transition: transform .4s ease;
}

/* panel visible */

body.menu-open .site-offcanvas-menu__panel {
	transform: translateX(0);
}

/* botón cerrar */

.site-offcanvas-menu__close {
	align-self: flex-end;
	font-size: 50px;
	background: none;
	border: none;
	cursor: pointer;
	    color: white;
}
.site-offcanvas-menu__header {
    display: flex;
    justify-content: flex-end;
}

.tt_menu {
    font-size: 25px;
    font-weight: 700;
    color: #04c2dc;
}
/* =========================
MENU ITEMS
========================= */
.offcanvas-menu-list li.txt_bold a {
    font-weight: 600;
}
.offcanvas-menu-list {
	list-style: none;
	padding: 0;
	margin: 60px 0 0 0;
	display: flex;
	flex-direction: column;
	    gap: 25px;
    margin-bottom: 25px;
}
a.tt_coment{
	font-size: 20px;
	    font-weight: 700;
    color: #95d500;
	text-decoration: none;
}
svg.menu-download-icon {
    margin-right: 5px;
    color: #95d500;
}
.offcanvas-menu-list li a {
	text-decoration: none;
	font-size: 20px;
	    font-weight: 400;
    color: #fff;
	display: inline-block;
	transition: opacity .25s ease;
}

.offcanvas-menu-list li a:hover {
	opacity: .6;
}




/* =========================
RESPONSIVE HEADER
========================= */

@media (max-width: 1024px) {

	.landing-header__inner {
		padding: 0 24px;
		height: 80px;
	}

	.custom-logo {
		max-height: 42px;
	}

}

@media (max-width: 640px) {

	.landing-header__inner {
		height: 70px;
		padding: 0 18px;
	}

	.custom-logo {
		max-height: 36px;
	}

}





/* =========================
LANDING HERO FULLSCREEN
========================= */

.landing-hero {
	position: relative;
		min-height: 100vh;
	height: auto;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 70px; /* espacio header */
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* fix viewport móvil real */

@supports (height: 100dvh) {

	.landing-hero {
			min-height: 100vh;
	height: auto;
	}

}

/* contenedor interno */

.landing-hero__content {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.landing-hero__video {
	max-width: 620px;
}

@media (min-height: 900px) {

	.landing-hero__video {
		max-width: 720px;
	}

}
/* =========================
LANDING TITLE
========================= */

.landing-hero__title {
	max-width: 760px;
	margin: 0 auto;
}

.landing-hero__title h1,
.landing-hero__title h2,
.landing-hero__title h3,
.landing-hero__title p {
	margin: 0;
}



/* =========================
VIDEO EMBED
========================= */

.landing-hero__video {
	width: 100%;
	max-width: 600px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,.12);
}

.landing-video-embed {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
}

.landing-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}




/* =========================
LANDING ACTION BUTTONS
========================= */

.landing-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	justify-content: center;
	margin-top: 10px;
}

.landing-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	    width: 220px;
    padding: 11px 0px;
    border-radius: 10px;
	border: none;
	text-decoration: none;
	font-size: 15px;
	cursor: pointer;
	background: #003ba3;
	color: white;
	transition: transform .2s ease;
	font-family: 'Carnero', sans-serif !important;
	box-shadow: 0 0px 15px rgb(0 0 0 / 51%);
}

.landing-action-button:hover {
	transform: translateY(-2px);
}
button.landing-action-button.js-open-director-modal {
    background-color: #04c2dc;
    color: #003ba3;
    font-weight: 800;
}


/* =========================
NO SCROLL HERO LOCK
========================= */

body:not(.director-modal-open):not(.menu-open) {
	overflow-x: hidden;
}




@media (max-width: 1024px) {

	.landing-hero__content {
		gap: 28px;
	}

	.landing-hero__video {
		max-width: 640px;
	}

}



@media (max-width: 640px) {

	.landing-hero {
		padding-top: 70px;
	}

	.landing-hero__content {
		gap: 22px;
	}

	.landing-action-button {
		width: 100%;
		max-width: 320px;
	}

}


/* =========================
LANDING HERO TITLE STYLE
========================= */

.landing-hero__title h1 {
	font-size: clamp(30px, 5vw, 35px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.5px;
}

.landing-hero__title .azul {
	color: #003ba3;
	font-weight: 500;
}

.landing-hero__title .verde {
	color: #95d500;
	font-weight: 700;
}

.landing-hero__title {
	color: #1aa6b7;
}



/* =========================
DIRECTOR MODAL ANIMATION FIX
========================= */

.director-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;

	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
}

/* estado visible */

.director-modal.is-visible {
	opacity: 1;
	visibility: visible;
}

/* overlay */

.director-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(4px);

	opacity: 0;
	transition: opacity .35s ease;
}

.director-modal.is-visible .director-modal__overlay {
	opacity: 1;
}

/* =========================
DIRECTOR MODAL BACKGROUND
========================= */

.director-modal__dialog {

	position: relative;

	max-width: 960px;
	width: 100%;

	border-radius: 24px;

	background-image: url('img/fondo-popup.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	color: white;

	padding: 40px;

	box-shadow: 0 40px 80px rgba(0,0,0,.25);

	display: flex;
	align-items: center;

	overflow: hidden;
}

/* estado visible dialog */

.director-modal.is-visible .director-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}




.director-modal__content {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
}

/* imagen izquierda */

.director-modal__media {
	flex: 0 0 50%;
}

.director-modal__image {
	width: 100%;
	border-radius: 18px;
	display: block;
}

/* texto derecha */

.director-modal__text {
	flex: 1;
}

.director-modal__text h2 {
	margin-top: 0;
	font-size: 28px;
	font-weight: 700;
}

.director-modal__body {
	font-size: 16px;
	line-height: 1.6;
	opacity: .95;
}

.director-modal__close {
	position: absolute;
	top: 20px;
	right: 24px;
	font-size: 60px;
	background: transparent;
	border: none;
	color: white;
	cursor: pointer;
}

@media (max-width: 900px) {

	.director-modal__content {
		flex-direction: column;
		text-align: center;
	}

	.director-modal__media {
		flex: unset;
		max-width: 220px;
	}

}


@media (max-width: 520px) {

	.director-modal__dialog {
		padding: 28px 22px;
		border-radius: 18px;
	}

	.director-modal__text h2 {
		font-size: 22px;
	}

}

body.director-modal-open {
	overflow: hidden;
} 






/* =========================
COMMENTS SECTION WRAPPER
========================= */

.landing-comments {
	background: #f4f6f8;
	padding: 120px 24px 100px;
	position: relative;
}

/* .landing-comments__inner {
	max-width: 880px;
	margin: 0 auto;
} */
/* =========================
COMMENTS FIXED HEIGHT LAYOUT
========================= */

.landing-comments {

	height: 100vh;
	display: flex;
	align-items: flex-start;

	padding: 120px 24px 80px;
	background: #f4f6f8;

	overflow: hidden;
}

.landing-comments__inner {

	width: 100%;
	max-width: 880px;
	margin: 0 auto;

	display: flex;
	flex-direction: column;

	height: 100%;
}
/* =========================
SCROLLABLE COMMENT LIST
========================= */

.landing-comments__list-wrapper {

	flex: 1;

	overflow-y: auto;

	padding-right: 6px;

	scroll-behavior: smooth;

}


.landing-comments__list-wrapper::-webkit-scrollbar {

	width: 6px;

}

.landing-comments__list-wrapper::-webkit-scrollbar-thumb {

	background: rgba(31,60,136,.25);
	border-radius: 10px;

}
/* =========================
COMMENTS SECTION WRAPPER
========================= */

.landing-comments {
	background: #f4f6f8;
	padding: 30px 24px 80px;
	position: relative;
}

.landing-comments__inner {
	max-width: 880px;
	margin: 0 auto;
}




/* =========================
COMMENT FORM CARD
========================= */

.landing-comments__form {
	background: #e2e2e2;
	border-radius: 18px;
	padding: 20px;
	margin-bottom: 32px;
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
	    width: 100%;
		text-align: left;
}

.comment-reply-title {
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 0px;
	color: #003ba3;
	    line-height: 1;
}

/* textarea */
.comment-form-comment label {
    display: none;
}
.comment-form textarea {
	width: 100%;
	border-radius: 12px;
	border: 1px solid #dce3ea;
	padding: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 120px;
}

/* inputs */

.comment-form input[type="text"],
.comment-form input[type="email"] {
	width: 100%;
	border-radius: 10px;
	border: 1px solid #dce3ea;
	padding: 12px;
}

/* submit */

.comment-form input[type="submit"] {
	background: #003ba3;
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 15px;
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	margin-top: 0px;
	font-family: 'Carnero', sans-serif !important;
}




/* =========================
COMMENT LIST
========================= */

.landing-comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}




/* =========================
COMMENT CARD
========================= */

.landing-comment-card {
	background: white;
	border-radius: 18px;
	padding: 20px 24px;
	box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

.landing-comment-card__header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.landing-comment-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.landing-comment-card__author img {
	border-radius: 50%;
}

.landing-comment-card__author strong {
	display: block;
	font-size: 14px;
	color: #003ba3;
}

.landing-comment-card__author time {
	font-size: 12px;
	color: #8c9bab;
}


/* =========================
COMMENT CONTENT
========================= */

.landing-comment-card__content {
	font-size: 15px;
	line-height: 1.6;
	color: #4b5a6a;
	margin-bottom: 12px;
}




/* =========================
COMMENT LIKE BUTTON
========================= */

.comment-like-button {
	background: #eef3f8;
	border: none;
	border-radius: 18px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 13px;
	color: #003ba3;
	font-weight: 600;
	transition: background .2s ease;
}

.comment-like-button:hover {
	background: #dde7f1;
}

p.form-submit {
    margin-bottom: 0px !important;
}


/* =========================
LOAD MORE BUTTON
========================= */

.landing-comments__actions {
	text-align: center;
	margin-top: 30px;
}

.load-more-comments-button {
	background: white;
	border-radius: 26px;
	padding: 12px 28px;
	border: none;
	cursor: pointer;
	font-weight: 600;
	color: #003ba3;
	box-shadow: 0 6px 20px rgba(0,0,0,.06);
	transition: transform .2s ease;
}

.load-more-comments-button:hover {
	transform: translateY(-2px);
}



/* =========================
BACK TO TOP BUTTON
========================= */

.landing-back-top-wrap {
	text-align: center;
	margin-top: 50px;
}

.landing-back-top {
	display: inline-block;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: #003ba3;
	position: relative;
}

.landing-back-top::after {
	content: "↑";
	margin-left: 6px;
}



@media (max-width: 900px) {

	.landing-comments {
		padding: 90px 18px;
	}

}


@media (max-width: 520px) {

	.landing-comments__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.landing-comments__form {
		padding: 22px;
	}

}



/* =========================
COMMENT FORM WIDTH FIX
========================= */

.comment-form {
	width: 100%;
}

.comment-form p {
	margin: 0 0 14px 0;
	width: 100%;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: block;
}

/* evitar overflow en Safari */

.comment-form textarea {
	overflow: auto;
}

html {
	scroll-behavior: smooth;
}




/* =========================
HERO COMMENT BOX
========================= */

.landing-hero__commentbox {
	width: 100%;
	max-width: 760px;
	margin-top: 10px;
}

.landing-hero__commentbox textarea {
	min-height: 90px;
	max-height: 120px;
}






/* =========================
HERO COMMENT STATS BAR
========================= */

.landing-comments__stats--hero {

	display: flex;
	align-items: center;
	gap: 18px;

	margin-top: 10px;
	margin-bottom: 6px;

	font-size: 15px;
	color: #7b8794;
}

.landing-comments__stats--hero span {

	display: inline-flex;
	align-items: center;
	gap: 4px;

	font-weight: 500;
}

/* share button icon */

.landing-share-button--hero {
	font-family: 'Carnero', sans-serif !important;
	background-color: #003ba3;
	border: none;
	border-radius: 5px;
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;


	    padding: 5px 12px;
    color: #95d500;
    font-weight: 500;
	transition: transform .2s ease, color .2s ease;
}

.landing-share-button--hero:hover {

	transform: translateX(3px);
	color: #fff;

}
.landing-share-button--hero div {
    line-height: 1;
    margin-top: -1px;
	    margin-left: 5px;
}


.landing-comments__stats.landing-comments__stats--hero {
    margin-bottom: 15px;
}


p.comment-form-comment {
    margin-bottom: 0px;
}








/* =========================
COMMENT FORM GRID LAYOUT
========================= */

.comment-form-row {

	display: flex;
	gap: 16px;
	margin-bottom: 5px;

}

.comment-form-col {

	flex: 1;

}

/* inputs */

.comment-form-col input {

	width: 100%;
	border-radius: 12px;
	border: 1px solid #e1e5ea;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;

	transition: border .2s ease;

}

.comment-form-col input:focus {

	outline: none;
	border-color: #1f3c88;

}

/* checkbox */

.comment-form-row-full {

	margin-bottom: 8px;
	font-size: 13px;
	color: #7b8794;

}


p.comment-form-author, p.comment-form-email {
    margin-bottom: 0;
}






/* =========================
COMMENT PENDING MODAL
========================= */

.comment-pending-modal {

	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	z-index: 99999;

}

.comment-pending-modal__overlay {

	position: absolute;
	inset: 0;

	background: rgba(0,0,0,.35);
	backdrop-filter: blur(4px);

}

.comment-pending-modal__dialog {

	position: relative;

	background: white;

	padding: 32px 36px;

	border-radius: 20px;

	max-width: 420px;

	text-align: center;

	box-shadow: 0 30px 80px rgba(0,0,0,.18);

	animation: modalFadeUp .35s ease;

}

.comment-pending-modal__dialog h3 {

	margin-top: 0;
	color: #1f3c88;

}

.comment-pending-modal__dialog button {

	margin-top: 18px;

	background: #1f3c88;
	color: white;

	border: none;

	padding: 10px 22px;

	border-radius: 22px;

	cursor: pointer;

}

/* animation */

@keyframes modalFadeUp {

	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}




/* =========================
HERO BACKGROUND IMAGE
========================= */

.landing-hero {

	position: relative;

	background-image: url('img/fondo.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

}