/* ============================================
   planes-custom.css
   Estilos personalizados para tarjetas de planes
   (Fibra Plus, Fibra Ultra, etc.)
   ============================================ */

/* Contenedor externo: borde degradado con esquinas redondeadas */
.plan-borde-degradado {
	background: linear-gradient(to bottom, #0daf9b, #16859d, #0daf9b);
	border-radius: 16px;
	padding: 5px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	position: relative;
}

/* Tarjeta interna: fondo blanco que deja ver el degradado como borde */
.plan-borde-degradado .pricing-plan {
	border-radius: 13px;
	overflow: hidden;
	background: #fff;
}

/* Contenedor externo: borde degradado con esquinas redondeadas para planes wireless */
.plan-borde-degradado-wireless {
	background: linear-gradient(to bottom, #1aaf0d, #16859d, #0daf9b);
}

/* Tarjeta interna: fondo blanco que deja ver el degradado como borde */
.plan-borde-degradado-wireless .pricing-plan {
	border-radius: 13px;
	overflow: hidden;
	background: #fff;
}

/* Badge del nombre del plan de Fibra Óptica (esquina superior derecha) */
.plan-badge {
	position: absolute;
	top: -14px;
	right: 15px;
	background: linear-gradient(135deg, #1a9a8a, #2a6ea8);
	color: #fff;
	padding: 8px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	z-index: 2;
}

/* Badge del nombre del plan Wireless (esquina superior derecha) */
.plan-badge-wireless {
	position: absolute;
	top: -14px;
	right: 15px;
	background: linear-gradient(135deg, #1aaf0d, #2a6ea8);
	color: #fff;
	padding: 8px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	z-index: 2;
}

/* Header superior con espacio extra para el badge */
.plan-header.plan-header-top {
	padding-top: 50px;
}

/* Contenedor flex de dos columnas (Suscripción | Precio) */
.plan-columns {
	display: flex;
	align-items: stretch;
	border-top: 1px solid #152e7d;
	margin: 0 20px;
}

/* Columna izquierda (Suscripción) */
.plan-header.plan-col-left {
	flex: 2;
	padding: 15px 20px;
	background: #fff;
	justify-content: center;
}

/* Línea vertical divisora (clase conservada por compatibilidad) */
/* .plan-col-divider - ahora se usa border-left en .plan-col-right */

/* Columna derecha (Precio) con línea divisora integrada */
.plan-header.plan-col-right {
	flex: 3;
	padding: 15px 5px;
	background: #fff;
	justify-content: center;
	border-left: 1px solid #152e7d;
}

/* Price-wrap sin margen y sin salto de línea */
.price-wrap.plan-price-inline {
	margin: 0;
	white-space: nowrap;
}

/* Botón de acción centrado */
.plan-cta {
	text-align: center;
	padding-bottom: 20px;
}

/* Estilos base para enlace con apariencia de botón */
.plan-cta a.btn-plan-verde,
.plan-cta a.btn-plan-naranja {
	display: inline-block;
	border-radius: 5em;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 24px;
	padding: 12px 25px;
	min-width: 120px;
	text-decoration: none;
	cursor: pointer;
}

/* Botón para tarjetas Wireless */
.plan-cta a.btn-plan-verde {
	background-color: #1baf9d;
	border: 3px solid #1baf9d;
}

.plan-cta a.btn-plan-verde:hover {
	background-color: transparent;
	color: #1baf9d;
}

/* Botón naranja para tarjetas FO */
.plan-cta a.btn-plan-naranja {
	background-color: #e3700b;
	border: 3px solid #e3700b;
}

.plan-cta a.btn-plan-naranja:hover {
	background-color: transparent;
	color: #e3700b;
}

/* ============================================
   Media Queries - Responsividad
   ============================================ */

/* Tablets y pantallas medianas (max 1199px) */
/* Punto 2: main3.css reduce el padding de .plan-header a 25px 15px 15px,
   necesitamos mantener nuestros valores en las columnas */
@media (max-width: 1199px) {
	.plan-header.plan-col-left {
		padding: 15px 10px;
	}

	.plan-header.plan-col-right {
		padding: 15px 5px;
	}

	.plan-columns {
		margin: 0 15px;
	}
}

/* Punto 3: En tablets y landscape móvil (max 991px),
   apilar columnas verticalmente para evitar recorte del precio */
@media (max-width: 991px) {

	.plan-header.plan-col-left,
	.plan-header.plan-col-right {
		display: flex;
	}

	.plan-columns {
		flex-direction: column;
		margin: 0 15px;
	}

	.plan-header.plan-col-left {
		flex: none;
		padding: 15px 15px 10px;
		border-bottom: 1px solid #152e7d;
	}

	.plan-header.plan-col-right {
		flex: none;
		padding: 10px 15px 15px;
		border-left: none;
	}
}

/* Scroll suave para toda la página */
html {
	scroll-behavior: smooth;
}

/* Estilo del enlace a la calculadora */
.desplazamiento {
	text-decoration: underline;
	cursor: pointer;
}

/* ============================================
   ENLACES SIMETRICOS - Tarjetas glassmorphism
   ============================================ */

/* Subtitulo superior */
.enlace-subtitulo {
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 10px !important;
}

/* Titulo principal grande con tamano responsivo */
.enlace-titulo {
	color: #fff;
	font-size: 52px;
	line-height: 1.1;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: 700;
}

/* Descripcion bajo el titulo */
.enlace-descripcion {
	color: #fff;
	font-weight: 300;
	margin-bottom: 35px;
	font-size: 18px;
}

/* Tarjeta translucida con efecto blur */
.enlace-card {
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 20px;
	color: #fff;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	height: calc(100% - 20px);
	transition: background 0.25s ease, transform 0.25s ease;
}

.enlace-card:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-2px);
}

/* Icono dentro de la tarjeta */
.enlace-card-icon {
	font-size: 28px;
	color: #fff;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 10px;
}

/* Titulo de la tarjeta */
.enlace-card-title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Descripcion de la tarjeta */
.enlace-card-desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	margin: 0;
}

/* Boton CTA grande translucido (Solicitar Cotizacion) */
.enlace-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.95);
	color: #1a3a5c;
	font-weight: 600;
	font-size: 16px;
	padding: 16px 36px;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
	transition: background 0.25s ease, transform 0.25s ease;
}

.enlace-cta-btn:hover {
	background: #fff;
	color: #1a3a5c;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Responsividad - tablet */
@media (max-width: 991px) {
	.enlace-titulo {
		font-size: 42px;
	}

	.enlace-descripcion {
		font-size: 17px;
	}

	.enlace-card {
		padding: 18px;
	}

	.enlace-card-icon {
		font-size: 24px;
		width: 40px;
		height: 40px;
	}
}

/* Responsividad - movil */
@media (max-width: 767px) {
	.enlace-subtitulo {
		font-size: 12px;
	}

	.enlace-titulo {
		font-size: 32px;
	}

	.enlace-descripcion {
		font-size: 15px;
		margin-bottom: 25px;
	}

	.enlace-card {
		padding: 16px;
		gap: 12px;
	}

	.enlace-card-title {
		font-size: 15px;
	}

	.enlace-card-desc {
		font-size: 13px;
	}

	.enlace-cta-btn {
		font-size: 14px;
		padding: 14px 28px;
	}
}

/* Responsividad - movil pequeno */
@media (max-width: 479px) {
	.enlace-titulo {
		font-size: 26px;
	}

	.enlace-descripcion {
		font-size: 14px;
	}

	.enlace-card {
		padding: 14px;
	}

	.enlace-card-icon {
		font-size: 22px;
		width: 36px;
		height: 36px;
	}

	.enlace-cta-btn {
		font-size: 13px;
		padding: 14px 22px;
	}
}

/* ============================================
   MISION, VISION Y VALORES - Distribucion nueva
   ============================================ */

/* Container ampliado solo para el layout 2 columnas (default Bootstrap = 1140px) */
.mvv-container {
	max-width: 1200px;
}

/* Hero "Quienes somos" */
.mvv-hero {
	text-align: center;
	padding: 50px 20px 30px;
}

.mvv-hero h2 {
	font-size: 36px;
	font-weight: 700;
	color: #152e7d;
	margin-bottom: 16px;
}

.mvv-hero p {
	max-width: 720px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
	color: #555;
}

/* Hero alineado a la izquierda (modo 2 columnas) */
.mvv-hero.mvv-hero-left {
	text-align: left;
	padding: 20px 0 25px;
}

.mvv-hero.mvv-hero-left p {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* Tarjeta generica (Mision/Vision/Valor) */
.mvv-card {
	background: #fff;
	border: 1px solid #e0e6ed;
	border-radius: 14px;
	padding: 28px 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mvv-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	border-color: #00BFA5;
}

/* Variante destacada (Mision/Vision con borde teal y fondo degradado) */
.mvv-card.mvv-card-destacada {
	border: 2px solid #00BFA5;
	background: linear-gradient(180deg, #ffffff 0%, #daf2ef 100%);
}

/* Variante oscura (Excelencia con fondo azul oscuro) */
.mvv-card.mvv-card-oscura {
	background: #152e7d;
	border-color: #152e7d;
}

.mvv-card.mvv-card-oscura .mvv-card-titulo {
	color: #fff;
}

.mvv-card.mvv-card-oscura .mvv-card-subtitulo {
	color: rgba(255, 255, 255, 0.85);
}

.mvv-card.mvv-card-oscura .mvv-card-desc {
	color: rgba(255, 255, 255, 0.75);
}

/* Cuadrado con el icono (PNG vectorizado dentro) */
.mvv-card-icono {
	width: 80px;
	height: 80px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f4ff;
	border-radius: 16px;
	color: #152e7d;
	font-size: 36px;
}

/* Imagen del icono adentro del placeholder (cards normales: Mision/Vision al 100%) */
.mvv-card-icono img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* Cards compactas (5 valores: Innovacion, Honestidad, Compromiso, Excelencia, Calidez): icono al 80% */
.mvv-card.mvv-card-compact .mvv-card-icono img {
	max-width: 80%;
	max-height: 80%;
}

.mvv-card.mvv-card-oscura .mvv-card-icono {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* En la card oscura, el icono se invierte a blanco */
.mvv-card.mvv-card-oscura .mvv-card-icono img {
	filter: brightness(0) invert(1);
}

/* Tipografia interna de las tarjetas */
.mvv-card-titulo {
	font-size: 20px;
	font-weight: 700;
	color: #152e7d;
	margin: 0 0 6px 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mvv-card-subtitulo {
	font-size: 13px;
	color: #0D6E61;
	font-weight: 600;
	margin: 0 0 12px 0;
}

.mvv-card-desc {
	font-size: 14px;
	color: #555;
	line-height: 1.55;
	margin: 0;
}

/* Titulo seccion "Nuestros Valores" */
.mvv-section-title {
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	color: #152e7d;
	margin: 50px 0 30px;
	letter-spacing: 1px;
}

/* Variante del titulo cuando vive dentro de una columna (sin margin top) */
.mvv-section-title.mvv-section-title-col {
	margin: 20px 0 25px;
	font-size: 28px;
}

/* Tarjeta compacta (para grid de 3 cards en columna estrecha) */
.mvv-card.mvv-card-compact {
	padding: 22px 16px;
}

.mvv-card.mvv-card-compact .mvv-card-icono {
	width: 60px;
	height: 60px;
	font-size: 28px;
	border-radius: 12px;
	margin-bottom: 12px;
}

.mvv-card.mvv-card-compact .mvv-card-titulo {
	font-size: 16px;
	margin-bottom: 4px;
}

.mvv-card.mvv-card-compact .mvv-card-subtitulo {
	font-size: 12px;
	margin-bottom: 0;
	line-height: 1.35;
}

/* Banner cita final */
.mvv-cita {
	background: linear-gradient(135deg, #152e7d 0%, #0d4a6b 100%);
	color: #fff;
	padding: 60px 30px;
	text-align: center;
	margin-top: 50px;
}

.mvv-cita blockquote {
	max-width: 900px;
	margin: 0 auto;
	font-size: 26px;
	line-height: 1.4;
	font-style: italic;
	font-weight: 300;
}

.mvv-cita blockquote::before {
	content: "\201C";
	font-size: 60px;
	line-height: 0;
	vertical-align: -20px;
	color: #00BFA5;
	margin-right: 6px;
}

.mvv-cita blockquote::after {
	content: "\201D";
	font-size: 60px;
	line-height: 0;
	vertical-align: -30px;
	color: #00BFA5;
	margin-left: 6px;
}

/* Responsive */
@media (max-width: 991px) {
	.mvv-hero h2 {
		font-size: 30px;
	}

	.mvv-section-title {
		font-size: 26px;
	}

	.mvv-cita blockquote {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	.mvv-hero {
		padding: 30px 15px 20px;
	}

	.mvv-hero h2 {
		font-size: 26px;
	}

	.mvv-hero p {
		font-size: 15px;
	}

	.mvv-card {
		padding: 22px 18px;
		margin-bottom: 16px;
	}

	.mvv-card-titulo {
		font-size: 17px;
	}

	.mvv-card-icono {
		width: 64px;
		height: 64px;
		font-size: 28px;
	}

	.mvv-section-title {
		font-size: 22px;
		margin: 30px 0 20px;
	}

	.mvv-cita {
		padding: 40px 20px;
	}

	.mvv-cita blockquote {
		font-size: 18px;
	}
}

/* ============================================
   PREGUNTAS FRECUENTES - Rediseño visual
   ============================================ */

/* Hero inmersivo con degradado JAFICA */
.pf-hero {
	background: linear-gradient(135deg, #152e7d 0%, #0d4a6b 100%);
	padding: 80px 20px 100px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.pf-hero-title {
	color: #fff;
	font-size: 38px;
	font-weight: 700;
	margin: 0 0 12px 0;
	letter-spacing: 0.5px;
}

.pf-hero-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	margin: 0 0 35px 0;
}

/* Buscador glassmorphism */
.pf-search-wrap {
	max-width: 620px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50px;
	padding: 6px 8px 6px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);
}

.pf-search-wrap .fa-search {
	color: #fff;
	font-size: 18px;
}

.pf-search-input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	font-size: 16px;
	padding: 12px 0;
}

.pf-search-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* Acordeon limpio con mucho aire */
.pf-accordion {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-accordion-item {
	background: #fff;
	border: 1px solid #e6ecf2;
	border-radius: 12px;
	margin-bottom: 14px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pf-accordion-item:hover {
	border-color: #c9d6e3;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.pf-accordion-item.is-hidden {
	display: none;
}

.pf-accordion-header {
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	user-select: none;
}

.pf-accordion-question {
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	color: #152e7d;
	margin: 0;
	line-height: 1.4;
}

/* Signo + que rota a x al abrir */
.pf-accordion-toggle {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00BFA5;
	font-size: 26px;
	font-weight: 300;
	transition: transform 0.3s ease;
	line-height: 1;
}

.pf-accordion-item.is-open .pf-accordion-toggle {
	transform: rotate(45deg);
}

/* Despliegue fluido con grid trick */
.pf-accordion-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.pf-accordion-item.is-open .pf-accordion-body {
	grid-template-rows: 1fr;
}

.pf-accordion-body>div {
	overflow: hidden;
	min-height: 0;
}

.pf-accordion-content {
	padding: 0 26px 24px 26px;
	color: #555;
	font-size: 15px;
	line-height: 1.65;
}

.pf-accordion-content p {
	margin: 8px 0;
}

.pf-accordion-content ul {
	padding-left: 20px;
	margin: 8px 0;
}

.pf-accordion-content li {
	margin: 4px 0;
}

.pf-accordion-content img {
	vertical-align: middle;
	margin: 0 4px;
}

/* Mensaje cuando no hay resultados */
.pf-no-results {
	display: none;
	text-align: center;
	padding: 40px 20px;
	color: #888;
	font-size: 15px;
}

.pf-no-results.is-visible {
	display: block;
}

/* Responsive */
@media (max-width: 991px) {
	.pf-hero {
		padding: 60px 15px 80px;
	}

	.pf-hero-title {
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.pf-hero-title {
		font-size: 24px;
	}

	.pf-hero-subtitle {
		font-size: 15px;
	}

	.pf-search-wrap {
		padding: 5px 6px 5px 18px;
	}

	.pf-search-input {
		font-size: 14px;
	}

	.pf-accordion-header {
		padding: 18px 20px;
	}

	.pf-accordion-question {
		font-size: 15px;
	}

	.pf-accordion-content {
		padding: 0 20px 20px 20px;
		font-size: 14px;
	}
}

/* ============================================
   CARRUSEL DE PLANES (CSS-ONLY CAROUSEL)
   ============================================ */

.custom-carousel {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 20px;
}

.carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	gap: 24px;
	padding: 15px 5px 25px;
	scrollbar-width: none;
	/* Firefox */
}

.carousel-track::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Opera */
}

.carousel-slide {
	flex: 0 0 100%;
	/* 1 tarjeta por vista en móviles */
	scroll-snap-align: start;
	box-sizing: border-box;
}

/* Puntos de navegación (Dots) */
.carousel-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

/* Estilos de los puntos individuales */
.carousel-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(21, 46, 125, 0.2);
	/* Azul principal atenuado */
	border: 1.5px solid transparent;
	transition: all 0.3s ease;
	cursor: pointer;
	display: inline-block;
}

/* Punto activo */
.carousel-dot.active,
.carousel-dot:hover {
	background-color: #00BFA5;
	/* Verde azulado/teal corporativo */
	transform: scale(1.25);
	box-shadow: 0 0 8px rgba(0, 191, 165, 0.4);
}

/* Reglas responsivas de las diapositivas */

/* Moviles en horizontal (~560-767px de ancho): 2 tarjetas.
   Con una sola tarjeta a ancho completo el contenido, disenado para unos
   350px, queda flotando en mucho espacio vacio. */
@media (min-width: 560px) and (max-width: 767px) {
	.carousel-slide {
		flex: 0 0 calc(50% - 12px);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.carousel-slide {
		flex: 0 0 calc(50% - 12px);
		/* 2 tarjetas en tablets */
	}
}

@media (min-width: 992px) {
	.carousel-slide {
		flex: 0 0 calc(33.333% - 16px);
		/* 3 tarjetas en escritorio */
	}
}