/* @override 
	http://eyeconical.local/wp-content/themes/eyeconical-bs/style.css?*
	https://eyeconical.com/wp-content/themes/eyeconical-bs/style.css?* */

/*!
Theme Name: EyeConical BS
Theme URI: https://them.es/starter
Author: Dan Buenfil
Author URI: https://mentayerbabuena.com
Description: Tema WP para EyeConical
Version: 3.6.2
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: eyeconical-bs
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */

:root, [data-bs-theme="light"] {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"brother-1816",sans-serif!important;
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
    --bs-body-font-family: system-ui,-apple-system,"brother-1816",sans-serif!important;
    --bs-body-font-size: 1rem!important;
    --bs-body-font-weight: 200!important;
    --bs-body-line-height: 1.71!important;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(33,37,41,.75);
    --bs-secondary-color-rgb: 33,37,41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233,236,239;
    --bs-tertiary-color: rgba(33,37,41,.5);
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: none;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0,0,0,.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0,0,0,.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13,110,253,.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
}

/* From http://codex.wordpress.org/CSS */

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 96%; /* Image does not overflow the content area */
	padding: 5px 3px 10px;
	text-align: center;
}
.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}
.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}

.gallery-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: none;
	display: inline-block;
	max-width: 100%;
}

.gallery-item a img {
	display: block;
	-webkit-transition: -webkit-filter 0.2s ease-in;
	transition: -webkit-filter 0.2s ease-in;
	transition: filter 0.2s ease-in;
	transition:
		filter 0.2s ease-in,
		-webkit-filter 0.2s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}

.gallery-caption {
	display: block;
	text-align: left;
	padding: 0 10px 0 0;
	margin-bottom: 0;
}

.gallery-columns-1 .gallery-item {
	max-width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}

.bypostauthor {
	font-weight: bold;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}


html {
	overscroll-behavior-y: none;
	scroll-behavior: smooth;
	scroll-padding-top: 80px; /* Compensa la altura del nav fijo al hacer click en enlaces internos */
	font: 14px "brother-1816", sans-serif !important;
	letter-spacing: 0.02rem!important;
	font-weight: 200!important;
	line-height: 24px!important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "brother-1816", sans-serif!important;
	font-weight: 200!important;
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	padding-top: 0.625rem;
	padding-bottom: 1.25rem;
	margin-bottom: 0!important;
}

h2 {
	margin-bottom: 20px;
	font-size: 2rem;
}


/* Custom Header / Sticky Nav Styles */
body {
	padding-top: 0 !important; /* overriden in case theme added fixed padding */
	background-color: #000000 !important;
	font-family: "brother-1816", sans-serif!important;
	font-weight: 200!important;
}

header {
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 1030;
	width: 100%;
}

#header {
	transition: all 0.2s ease-in-out!important;
	width: 100%;
	background-color: rgba(18, 11, 0, 0.8) !important;
	backdrop-filter: blur(5px);
	padding: 0;
	height: 60px;
	color: #D6D2C4!important;
	background-image: none;
}

#header .navbar-brand img {
	transition: all 0.3s ease-in-out;
}

#header .navbar-brand::before {
	content: url(../eyeconical-bs/img/EyeConical_Logo_Piramide.svg);
	display: block;
	width: 28px;
	height: 28px;
	float: left;
	margin-right: 0.5rem;
}

#header .navbar-brand {
	transition: all 0.3s ease-in-out;
	font-weight: 200;
	font-style: normal;
	color: #D6D2C4!important;
}

#header .navbar-brand span {
	font-weight: 700;
}


#header.nav-scrolled {
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	background-color: rgba(18, 11, 0, 0.95) !important;
}

#main {
	padding-top: 0 !important;
}

#header.navbar, #header.navbar a {
	color: white !important;
}

/* Preparamos los enlaces del menú para que abarquen el 100% de la altura y toquen el techo real */
.nav-link {
	padding-left: 1rem !important;
	padding-right: 1rem!important;
}

#header .navbar-nav > li > a {
	color: #D6D2C4!important;
	position: relative;
	display: flex;
	align-items: center;
	height: 60px; /* Igual a la altura inicial de tu #header */
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 200;
	font-style: normal;
	letter-spacing: 0.15rem;
	font-size: 0.8rem;
	transition: all 0.3s ease-in-out;
}

#header .navbar-nav > li > a::before {
	content: '';
	position: absolute;
	top: 0; /* Al abarcar el 100%, el top:0 es legítimamente el pixel 0 de la página */
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #D6D2C4!important;
	transform: scaleX(0); /* scaleX(0) evita redondeos por width o artefactos de renderizado */
	transform-origin: center; /* Crece desde el centro */
	transition: transform 0.3s ease-out; /* Animación de crecimiento por hardware */
}

/* Animación: se revela (scale 1) cuando está activo */
#header .navbar-nav .current-menu-item > a::before,
#header .navbar-nav .active > a::before,
#header .navbar-nav a.active::before {
	transform: scaleX(1);
}

/* Configuracion del Slider (Homepage) */
/* El contenedor interno generado por Gutenberg será la base de nuestro motor en CSS Grid */
#slider {
	position: relative;
}

#slider .wp-block-group__inner-container {
	display: grid; /* Usamos grid para apilar sin perder el height dinámico */
}

#slider .wp-block-group__inner-container > .wp-block-cover {
	grid-area: 1 / 1; /* Todos los covers ocupan el mismo cuadrado del grid */
	opacity: 0;
	z-index: 1;
	pointer-events: none; /* No clickable si no está activo */
	transition: opacity 1s ease-in-out; /* Animación Fade In/Out */
	margin: 0; /* Por defecto Gutenberg agrega margen que rompe el grid */
	overflow: hidden !important; /* CRÍTICO para cortar el exceso del zoom */
}

/* Efecto Ken Burns (Zoom 200%) blindado contra sobreescrituras */
#slider .wp-block-cover img.wp-block-cover__image-background,
#slider .wp-block-cover .wp-block-cover__background,
#slider .wp-block-cover-image {
	transform: scale(1) !important;
	transition: transform 7s linear !important;
	will-change: transform;
}

#slider .wp-block-cover.active img.wp-block-cover__image-background,
#slider .wp-block-cover.active .wp-block-cover__background,
#slider .wp-block-cover.active .wp-block-cover-image {
	transform: scale(1.1) !important;
}

/* La primera imagen es visible antes de que actúe JS por prevención (FOUC), pero JS lo apaga. */
#slider:not(.has-slider-init) .wp-block-group__inner-container > .wp-block-cover:first-child {
	opacity: 1;
}

#slider .wp-block-group__inner-container > .wp-block-cover.active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto; /* Clickable */
}

#slider h1 {
	font-size: 4.563rem;
	font-family: "superior-title"!important;
	text-transform: none;
	color: white;
	width: 50%;
	padding-left: 6.75rem;
	font-weight: 400!important;
	text-shadow: 0 0.25rem 10px rgba(0, 0, 0, 0.6);
}

#slider .wp-block-button {
	padding-left: 6.75rem;
}

#slider .wp-block-button a {
	padding: 10px 25px;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.25rem;
	line-height: 1.875rem;
	border-radius: 2px;
	margin-top: 3rem;
	background-color: #84754E;
	border-style: none;
	box-shadow: none!important;
	background-image: none;
	
}

#slider .wp-block-button a:hover {
	border-radius: 2px;
	background-color: white;
	border-style: none;
	box-shadow: none!important;
	background-image: none;
	color: #84754E;
	
}

@media (max-width: 1128px) {
	#slider h1  {
		width: 80%;
	}
}

@media (max-width: 541px) {
	#slider h1  {
		font-size: 3.563rem;
		padding-left: 1.75rem;
	}
	#slider .wp-block-button {
		padding-left: 1.75rem;
	}
}


/* --- Barra de tiempo (Progress Bar) del Slider --- */
#header::after {
	content: '';
	position: absolute;
	bottom: 0; /* Parte inferior de la barra de navegación */
	left: 0;
	width: 100%;
	height: 2px; /* Grosor de la línea */
	background-color: rgba(214, 210, 196, 0.25);
	z-index: 10;
	transform: scaleX(0); /* Estado inicial oculto en la izquierda */
	transform-origin: left; /* Para que crezca de izquierda a derecha */
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

#header.hide-progress::after {
	opacity: 0;
}

#header.anim-progress::after {
	/* Animación lineal que toma exactamente 7 segundos en llegar al 100% */
	animation: slideProgressBar 7s linear forwards;
}

@keyframes slideProgressBar {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

/* --- Slider Thumbnails (Navegación) --- */
#slider .slider-thumbnails-container {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	padding-bottom: 2rem;
	width: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none; /* El contenedor no bloquea clics... */
}

#slider .slider-thumbnails-wrapper {
	display: flex;
	gap: 15px;
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(10px);
	padding: 10px;
	border-radius: 8px;
	pointer-events: auto; /* ...pero el envoltorio de botones sí */
}

#slider .slider-thumb-btn {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	color: white;
	transition: all 0.3s ease;
	text-align: left;
	min-width: 150px;
}

#slider .slider-thumb-btn:hover {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.5);
}

#slider .slider-thumb-btn.active {
	background: rgba(255,255,255,0.2);
	border-color: white;
	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

#slider .thumb-img-wrapper {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	border: 1px solid rgba(255,255,255,0.1);
}

#slider .thumb-content {
	display: flex;
	flex-direction: column;
}

#slider .thumb-num {
	font-size: 0.7rem;
	opacity: 0.7;
	letter-spacing: 1px;
}

#slider .thumb-title {
	font-size: 0.85rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	color: white;
}

/* Ocultar las miniaturas de navegación del slider en móviles para evitar overflow horizontal */
@media (max-width: 767px) {
	#slider .slider-thumbnails-container {
		display: none !important;
	}
}

/* ==========================================================================
   Animaciones del Slider Principal (H1 y Botones)
   ========================================================================== */

/* Estado inicial: ocultos y desplazados hacia abajo */
#slider .wp-block-cover h1,
#slider .wp-block-cover .wp-block-button__link {
    opacity: 0;
    transform: translateY(40px);
}

/* Estado activo: se ejecuta la animación con 1.5s de retraso */
#slider .wp-block-cover.active h1,
#slider .wp-block-cover.active .wp-block-button__link {
    animation: slideUpFadeInSlider 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: 1.25s;
}

/* Opcional: Escalonar ligeramente el botón para que entre después del H1 */
#slider .wp-block-cover.active .wp-block-button__link {
    animation-delay: 1.3s;
}

@keyframes slideUpFadeInSlider {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* @group Home Nosotros */

#nosotros .wp-block-quote {
	border-left-style: none;
	text-transform: uppercase;
	padding-left: 0;
	line-height: 1.5;
	letter-spacing: 0.15rem;
	word-spacing: 0.15rem;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

/*#nosotros .intro {
	padding-right: 6.5rem!important;
	padding-left: 6.5rem!important;
}*/

@media (max-width: 824px) {
	#nosotros .intro {
	padding-right: 3rem!important;
	padding-left: 3rem!important;
	}
}

/* @end */

/* @group Home Servicios */

#servicios {
	min-height: 512px;
}

#servicios h2 {
	padding-top: 0;
}

.vtabs ul {
	border-style: none!important;
}

.vtabs li {
	padding: 1rem 0 1rem 1rem;
	text-transform: uppercase;
	border-bottom: 1px solid #eaeaea;
	margin-top: 0 !important;
}

@media (max-width: 768px) {
	.vtabs li {
		width: 100%!important;
	}
	
	#eventos-tab, #perritos-tab, #foto-de-iris-tab, #productos-tab  {
		width: 100%;
		padding-right: 1rem!important;
		padding-right: 1rem!important;
		display: block;
		text-align: left;
	}
	
	#accordion-left-tabs.tab-content {
		padding-top: 2rem!important;
	}

}

/* --- MOTOR DE TRANSICIONES PERSONALIZADO PARA V-TABS (SIN BOOTSTRAP) --- */
.vtabs .tab-pane,
#testimoniales .tab-pane {
	display: none;
	opacity: 0;
	transition: none !important; /* Desactivar cualquier regla base de BS */
}

/* El bloque sólo existe si está activo */
.vtabs .tab-pane.active,
#testimoniales .tab-pane.active {
	display: block; 
	opacity: 1;
	transform: translateY(0);
}

/* Iconos para Tabs */
#foto-de-iris-tab::before {
	content: url('../eyeconical-bs/img/eye.svg');
}

#perritos-tab::before {
	content: url('../eyeconical-bs/img/perritos.svg');
}

#eventos-tab::before {
	content: url('../eyeconical-bs/img/eventos.svg');
}

#productos-tab::before {
	content: url('../eyeconical-bs/img/gem.svg');
}

#foto-de-iris-tab.active::before, #perritos-tab.active::before, #eventos-tab.active::before, #productos-tab.active::before, #foto-de-iris-tab:hover:before, #perritos-tab:hover:before, #eventos-tab:hover:before, #productos:hover:before {
	opacity: 1;
}

#foto-de-iris-tab::before, #perritos-tab::before, #eventos-tab::before, #productos-tab::before {
	width: 24px;
	margin-right: 10px;
	opacity: 0.5;
	display: block;
	float: left;
	transition: opacity ease-in-out .15s;
}

/* Keyframes de entrada y salida */
@keyframes vTabsIn {
	0% { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes vTabsOut {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(40px); }
}

.vtabs .nav-link.tab-clickable {
	border: none!important;
	color: #b0b0b0;
	padding-right: 0!important;
}

.vtabs .nav-link.tab-clickable.active, .vtabs .nav-link.tab-clickable:hover  {
	color: #161616 !important;
}

.vtabs .nav-link.tab-clickable.active::after {
	content: "\F135";
	font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
	display: block;
	float: right;
	animation: arrowSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes arrowSlideIn {
	0% { opacity: 0; transform: translateX(-15px); }
	100% { opacity: 1; transform: translateX(0); }
}
/* @end */

/* @group Galleria */

#galeria {
	background-color: white;
	padding-right: 0;
	padding-left: 0;
}

.cbp-filter-item {
	font-family: "brother-1816", sans-serif!important;
	font-size: 1rem !important;
	text-transform: uppercase;
	font-weight: 200!important;
}

.cbp-filter-item-active::after {
	content: " ";
	height: 2px;
	background-color: #171100;
	width: 100%;
	display: block;
	margin-top: 0.5rem;
	transform-origin: center;
	animation: expandCenter 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.ec_grayscale {
	filter: grayscale(100%);
	transition: filter 0.4s ease-in-out;
}

/* Al hacer hover en la tarjeta, el filtro desaparece regresando el color */
.cbp-item:hover .ec_grayscale {
	filter: grayscale(0%);
}

/* Evitar que CubePortfolio oscurezca la imagen por defecto con su capa negra */
.cbp-caption-activeWrap {
	background-color: transparent !important;
}

/* --- OVERRIDES DEL PLUGIN CUBEPORTFOLIO --- */
/* Hacer el zoom de las fotos mucho más sutil y lento al pasar el cursor */
.cbp-caption-zoom .cbp-caption:hover .cbp-caption-defaultWrap {
    transform: scale(1.08) !important;
}
.cbp-caption-zoom .cbp-caption-defaultWrap {
    transition: transform 0.4s ease-out !important;
}

/* @end */

@keyframes expandCenter {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

/* @group Testimoniales */

#testimoniales {
	padding-top: 6.25rem;
	padding-bottom: 3.75rem;
}

#testimoniales li {
	width: 50px!important;
	height: 50px!important;
	border-radius: 25px;
	margin-right: 1.25rem;
	margin-bottom: .625rem;
	
}

#testimoniales li:last-child {
	margin-right: 0rem!important;
}

#testimoniales button {
	width: 100%;
	height: 100%;
	padding: 0!important;
	border-radius: 25px;
}

#testimoniales ul {
	margin-top: 3.75rem;
	margin-bottom: 1.5rem!important;
}

#testimoniales span {
	margin-top: 1.25rem;
	font-size: 0.8rem;
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
	margin-bottom: 3.75rem;
}

#testimoniales img {
	border-radius: 50%;
	filter: grayscale(100%);
}

#testimoniales .nav-item:hover img, #testimoniales .nav-item .nav-link.active img {
	filter: grayscale(0);
}


/* @end */

/* @group Precios y Efectos */

	#preciosyefectos h2 {
		margin-top: 3.75rem!important;
		margin-bottom: 3.75rem!important;
	}
	
	#preciosyefectos h3 {
		font: 3rem "superior-title" !important;
		text-transform: none;
		color: white;
		font-weight: 400!important;
		text-shadow: 0 0.25rem 10px rgba(0, 0, 0, 0.6);
		margin-bottom: 1.75rem !important;
		margin-top: 3.75rem!important;
	}

	#preciosyefectos {
		background-color: #84754E!important;
		color: #D6D2C4;
		padding-bottom: 9.75rem!important;
	}
	
	#preciosyefectos .container {
		padding-left: 3.75rem;
		padding-right: 3.75rem;
	}
	
	#preciosyefectos img {
		margin-bottom: 0.75rem;
		margin-top: 0.75rem;
	}
	
	#preciosyefectos div div div:has(img) {
		position: relative;
	}
	
	#preciosyefectos img {
		filter: grayscale(100%);
		mix-blend-mode: multiply;
		transition: filter 1s ease-in-out;
	}
	
	#preciosyefectos img:hover {
		filter: grayscale(0%);
		mix-blend-mode: normal;
	}
	
	.effecto-nombre {
		z-index: 99;
		position: absolute;
		top: 0.75rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-right: 1rem;
		padding-left: 1rem;
		background-color: rgba(132, 117, 78, 0.5);
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		width: 8rem;
		text-align: center;
		margin-left: 50%;
		left: -4rem;
	}

#preciosyefectos .wp-block-button a {
	padding: 10px 25px;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.25rem;
	line-height: 1.875rem!;
	border-radius: 2px;
	margin-top: 3rem;
	background-color: #84754E;
	border: 1px solid #D6D2C4;
	box-shadow: none!important;
	background-image: none;
	}

#preciosyefectos .wp-block-button a:hover {
	border-radius: 2px;
	background-color: white;
	border: 1px solid #D6D2C4;
	box-shadow: none!important;
	background-image: none;
	color: #84754E;
}
	
	@media (max-width: 767.98px) {
		#preciosyefectos .container {
		padding-left: 0rem;
		padding-right: 0rem;
		}
	}

/* @end */

/* @group Blog */

#blog-ec {
	color: #373A36;
	padding-left: 5.35rem;
	padding-right: 5.35rem;
	margin-top: 4.75rem;
	margin-right: 0;
	background-color: white;
	padding-top: 2.75rem;
}

#blog-ec article h1, #blog-ec article h2, #blog-ec article h3, #blog-ec article h4 {
	color: #286140;
}

#blog-ec a {
	color: #286140;
}

#blog-ec a:hover {
	color: #84754E;
	text-decoration: underline;
}


#blog-ec .btn-outline-secondary {
	padding: 10px 25px;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.25rem;
	line-height: 1.875rem;
	border-radius: 2px;
	background-color: #286140;
	border: 1px solid #286140;
	box-shadow: none!important;
	background-image: none;
	color: white;
}

#blog-ec .btn-outline-secondary:hover {
	background-color: white;
	border: 1px solid #286140;
	box-shadow: none!important;
	background-image: none;
	color: #286140;
	text-decoration: none;
}

#blog-ec .post-thumbnail {
	margin-bottom: 1.75rem;
}

#blog-ec .post-thumbnail img.attachment-large.size-large.wp-post-image {
	border-radius: 12px !important;
}

header.entry-header {
	position: relative !important;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
}


@media (max-width: 767px) {
	#blog-ec {
		padding-left: 2.75rem;
		padding-right: 2.75rem;
	}
}

/* @end */

/* @group Sidebar */

#sidebar .sidebar-nav {
	position: sticky!important;
	top: 5.45rem;
	padding-bottom: 0.02rem;
}

/* @end */

/* @group Table of Contents (TOC) */

.toc-container {
	margin-bottom: 1.35rem;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #D6D2C4;
	border-radius: 12px;
	box-shadow: inset 0 0 25px #D6D2C4;
}

.toc-title {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #373A36;
	margin-bottom: 1.25rem!important;
	border-bottom: 2px solid #84754E;
	padding-bottom: 1rem;
	padding-top: 0;
}

.toc-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	position: relative;
	border-left: 1px solid rgba(214, 210, 196, 0.15);
}

.toc-item {
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

.toc-item:last-child {
	margin-bottom: 0;
}

.toc-link {
	display: block;
	color: #373A36 !important;
	opacity: 0.65;
	text-decoration: none !important;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	position: relative;
	padding-left: 1rem;
	margin-left: -1px; /* Overlap with parent border-left */
	border-left: 2px solid transparent;
}

/* Indentación por nivel */
.toc-item-h2 .toc-link {
	font-weight: 500;
}

.toc-item-h3 .toc-link {
	padding-left: 1.75rem;
	font-size: 0.85rem;
}

.toc-item-h4 .toc-link {
	padding-left: 2.5rem;
	font-size: 0.8rem;
}

/* Efectos de Hover y Active */
.toc-link:hover {
	opacity: 1;
	color: #373A36 !important;
	border-left-color: #286140;
	text-shadow: 0 0 4px rgba(207, 171, 35, 0.82);

}

.toc-link.active {
	opacity: 1 !important;
	color: #286140!important;
	font-weight: 600;
	border-left-color: #286140;
}

/* @end */

/* @group Post Share Buttons */

.post-share-links {
	margin-left: auto;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #286140;
	background: white;
	color: #286140 !important;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none !important;
	padding: 0;
}

.share-btn:hover {
	background: #286140;
	color: white !important;
	border-color: #286140;
	transform: translateY(-2px);
}

@media (max-width: 575px) {
	.entry-meta {
		flex-direction: column;
		align-items: flex-start !important;
	}
	.post-share-links {
		margin-left: 0;
		margin-top: 0.5rem;
		width: 100%;
	}
}

/* @end */

/* @group Contacto */

#contacto {
	font-size: 1rem!important;
	background: url(../eyeconical-bs/img/c-background.png) center center no-repeat #373A36 !important;
	background-size: cover !important;
	color: #D6D2C4;
}

#contacto h2 {
	margin-top: 1.75rem!important;
	margin-bottom: 3.75rem!important;
}

#contacto h3 {
	font-size: 4.563rem;
	font-family: "superior-title"!important;
	text-transform: none;
	color: white;
	font-weight: 400!important;
	text-shadow: 0 0.25rem 10px rgba(0, 0, 0, 0.6);
	margin-bottom: 1.75rem !important;
	}


@media (max-width: 541px) {
	#contacto h3 {
		font-size: 3.563rem;
	}
}

.forminator-field-phone::before, .forminator-field-email:before, .forminator-field-name:before {
	font-family: bootstrap-icons!important;
	position: absolute;
	padding-top: 0.7rem;
	margin-left: 0.85rem;
}

.forminator-field-name::before {
	content: "\F4D4";
}

.forminator-field-email::before {
	content: "\F32C";
}

.forminator-field-phone::before {
	content: "\F618";
}

.forminator-field-phone input, .forminator-field-email input, .forminator-field-name input {
	padding-left: 2.60rem!important;
}

#contacto input::placeholder, .forminator-error-message  {
	font-size: 1rem!important;
}

.forminator-textarea, .forminator-input {
	color: #D6D2C4!important;
	background: rgba(255, 255, 255, 0.05) !important;
	border-style: none!important;
	border-radius: 6px!important;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) !important;
	resize: none!important;
}

.forminator-radio-label {
	font-size: 1rem!important;
}

.forminator-radio input:checked + .forminator-radio-bullet, .forminator-radio .forminator-radio-bullet:hover {
    border-color: #84754E!important;
    background-color: #EDEDED;
}

.forminator-radio .forminator-radio-bullet::before {
    background-color: #84754E!important;
}

.forminator-field-textarea .forminator-description {
	float: right;
}

.forminator-field-textarea .forminator-label {
	float: left;
}

.ui-datepicker {
	margin-left:4.5%!important;
	box-shadow: 0 0 13px rgba(0, 0, 0, 0.65);
	border-radius: 0  0 6px 6px!important;
	border-style: none!important;
}

.ui-datepicker.forminator-calendar--default::before {
	border-radius: 0  0 6px 6px!important;
	border-style: none!important;
}

.ui-datepicker-header {
	background: #D6D2C4!important;
	border-radius: 6px!important;
}

a.ui-datepicker-prev,  a.ui-datepicker-next{
	background-color: #286140!important;
}

.ui-datepicker table {
	background: #D6D2C4!important;
	border-radius: 0  0 6px 6px;
}

.ui-datepicker table thead span {
	color: #286140!important;
}

.ui-datepicker table a:focus, .ui-datepicker table a:hover {
	outline: 2px solid #286140!important;
	outline-offset: 1px;
	color: #286140!important;
	font-weight: bold!important;
}

.ui-datepicker table a {
	background: #D6D2C4!important;
	border-color: #D6D2C4!important;
	color: #84754E!important;
}

.ui-datepicker table a.ui-state-active {
	background: #edebe4 !important;
	border-color: #D6D2C4!important;
	color: #84754E!important;
	font-weight: bold!important;
}

.forminator-error-message {

}

.forminator-button.forminator-button-submit {
	padding: 10px 25px!important;
	text-transform: uppercase;
	font-size: 0.9rem!important;
	letter-spacing: 0.25rem;
	line-height: 1.875rem!important;
	border-radius: 2px;
	margin-top: 3rem!important;
	background-color: #D6D2C4;
	border: 1px solid #D6D2C4!important;
	box-shadow: none!important;
	background-image: none;
	color: #373A36;
}

.forminator-button.forminator-button-submit:hover {
	background-color: #373A36;
	box-shadow: none!important;
	background-image: none;
	color: #D6D2C4;
}

/* @end */

/* @group Recientes */
#recientes img {
	margin-bottom: 1rem;
}

#recientes a {
	font-size: 1.5rem;
	color: #286140!important;
	line-height: 1.2rem;
}


/* @end */

/* @group Footer */

#footer {
	color: white!important;
	background-color: #000000 !important;
}

#datos-ec {
/*	margin-bottom: 2.5rem;*/
	margin-top: 7.5rem;
}

#datos-ec a {
	color: #D6D2C4;
}

#datos-ec figure {
	background-color: #D6D2C4!important;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 25px;
}

#datos-ec img{
	height: 24px!important;
	margin-top: 13px;
}

#redes-ec {
	margin-top: 2.5rem;
	margin-bottom: 7.5rem;
}

.wp-social-link-facebook, .wp-social-link-instagram, .wp-social-link-tiktok  {
	background-color: transparent;
}

#redes-ec svg path {
	fill: #D6D2C4!important;
}

#redes-ec a {
	position: relative;
	z-index: 1;
	border-radius: 50%; /* Conservar la forma redonda */
	overflow: hidden; /* Cortar el exceso para que crezca exactamente como círculo */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* El círculo inicial (escondido y transparente tras el icono) */
#redes-ec a::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	background-color: #D6D2C4;
	border-radius: 50%;
	transform: scale(0.5); /* Inicia del tamaño del icono */
	opacity: 0; /* Totalmente transparente en reposo para no camuflar el SVG */
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
	z-index: -1; /* Mantener por detrás del icono */
}

/* Al hacer hover, el círculo crece y se vuelve sólido */
#redes-ec a:hover::before {
	transform: scale(1);
	opacity: 1;
}

/* Transición suave para el color del icono */
#redes-ec a svg path {
	transition: fill 0.3s ease;
}

#redes-ec a:hover svg path {
	fill: #171100 !important;
}

/* --- MOBILE MENU FIXES --- */
@media (max-width: 767.98px) {
    /* Permitir que el header crezca naturalmente para envolver todo el menú y que su blur nativo funcione */
    #header {
        height: auto !important;
    }

    /* Eliminar la sombra del header principal cuando el menú está desplegado o animándose */
    #header:has(.navbar-collapse.show),
    #header:has(.navbar-collapse.collapsing) {
        box-shadow: none !important;
    }

    /* Contenedor del menú en móviles (flujo normal sin fondo propio) */
    #header .navbar-collapse {
		padding-right: .77rem!important;
	}

    /* Padding superior aplicado al primer elemento para separarlo del logo */
    #header .navbar-collapse .navbar-nav {
        padding-top: 1.5rem;
    }

    /* V-TABS: Maximizar el ancho del contenido eliminando paddings redundantes de contenedores anidados */
    .vtabs .col-md-9 .container,
    .vtabs .accordion-body .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .vtabs .accordion-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
	
	#accordion-left-tabs {
		padding: 0!important;
	}

    /* Icono hamburguesa color Beige Eyeconical (#D6D2C4) usando un SVG custom en base64 */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23D6D2C4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Quitar borde del botón hamburguesa para un aspecto más limpio */
    .navbar-toggler {
        border-color: #D6D2C4 !important;
        box-shadow: none !important;
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
	}
    
    /* Separación y alineación a la derecha de los enlaces del menú en móvil */
    #header .navbar-nav > li {
        margin-bottom: 10px;
    }
	#header .navbar-nav > li > a {
		height: 30px;
		justify-content: flex-end; /* Alineación derecha en Flexbox */
	}

    /* Eliminar la línea animada sobre los enlaces en versión móvil */
    #header .navbar-nav > li > a::before {
        display: none !important;
    }
	
	/* Alinear a la derecha las redes sociales en el menú móvil y añadir margen superior */
	#nav-redes {
		justify-content: flex-end !important;
		margin-top: 20px !important;
		padding-right: 1rem !important; /* Para alinear visualmente con el margen derecho de los enlaces */
        padding-bottom: 1.5rem !important; /* Margen inferior para que no quede pegado al borde del fondo translúcido */
	}
}
/* @end */