/* Estilos propios de Total Design.
   Regla del proyecto: NO se tocan las hojas de la plantilla (custom.css,
   bootstrap.min.css, animate.css). Todo lo propio vive aquí y se carga al final.
   Al editar este archivo hay que subir css_version en GlobalesDeVista. */

/* --- Red de seguridad del efecto de aparición -----------------------------
   La plantilla pinta el texto con .wow + animate.css: nace en opacity 0 y lo
   revela wow.js al hacer scroll. Si el JS no corre —falla, lo bloquea una
   extensión, o el visitante pidió menos movimiento— el texto se queda
   invisible para siempre. Estas reglas lo devuelven a la vista sin quitarle
   el efecto a quien sí puede verlo. */
@media (prefers-reduced-motion: reduce) {
	.wow,
	.animated {
		opacity: 1 !important;
		animation: none !important;
		visibility: visible !important;
	}
}

/* --- Mayúsculas del tema -------------------------------------------------
   La plantilla pone text-transform: capitalize en el menú, el menú del
   teléfono, el listado lateral y las migas. En inglés eso es correcto; en
   español convierte «Aplicaciones web y móviles» en «Aplicaciones Web Y
   Móviles», poniendo en mayúscula preposiciones y conjunciones. Los textos
   ya vienen bien escritos desde los datos: no hay que transformarlos. */
.main-menu ul li a,
.slicknav_nav li a,
.page-category-list ul li a,
.page-header-box ol li.breadcrumb-item {
	text-transform: none;
}

/* --- Testimonios sin foto -------------------------------------------------
   .testimonial-item trae min-height: 510px porque la plantilla le pone una
   foto de medio cuerpo. Los nuestros van sin foto (ver el comentario de
   secciones/testimonios.html.twig), así que esa altura deja la tarjeta medio
   vacía. Se ajusta solo para las que no la llevan. */
.testimonial-item.testimonial-sin-foto {
	min-height: auto;
	display: flex;
	align-items: center;
	padding: 40px 30px;
}

.testimonial-item.testimonial-sin-foto .testimonial-item-content p {
	font-size: 18px;
	line-height: 1.6;
}

/* El icono de cita ocupa el lugar que la plantilla reserva a la foto. */
.testimonial-item.testimonial-sin-foto {
	display: block;
	text-align: left;
}

.testimonial-item.testimonial-sin-foto .testimonial-item-icono {
	margin-bottom: 20px;
}

.testimonial-item.testimonial-sin-foto .testimonial-item-icono img {
	width: 48px;
	height: auto;
}

/* --- El proceso tiene CUATRO pasos, no tres ------------------------------
   El tema reparte .process-step-item al 33,33 % y solo baja a 50 % dentro de
   @media (max-width: 1024px). Con nuestros cuatro pasos eso deja tres arriba
   y el cuarto solo abajo en cualquier escritorio. Se reparten al 25 %: son
   tres huecos de 30px entre cuatro columnas.
   La línea que une los pasos la cierra el tema en :nth-child(3n + 3); con
   cuatro por fila el que cierra es el cuarto. */
@media only screen and (min-width: 1025px) {
	.our-work-process .process-step-item {
		width: calc(25% - 22.5px);
	}

	.our-work-process .process-step-item:nth-child(3n + 3) .process-step-no::before {
		width: calc(100% + 30px);
	}

	.our-work-process .process-step-item:nth-child(4n + 4) .process-step-no::before {
		width: 100%;
	}
}

/* --- Los dos gráficos de la sección de alcance ----------------------------
   Sustituyen a las imágenes decorativas de la plantilla, que traían cifras
   de la demo escritas dentro. Aquí el número vive en el HTML: lo lee Google,
   se ve nítido a cualquier zoom y pesa 32 veces menos que los dos PNG. */
.impact-grafico {
	background: var(--white-color, #fff);
	border-radius: 20px;
	padding: 30px;
	margin-top: 30px;
}

.impact-grafico-circulo {
	display: flex;
	align-items: center;
	gap: 25px;
}

.impact-grafico-circulo .circle {
	flex: 0 0 auto;
}

.impact-grafico-texto h3,
.impact-grafico-barras h3 {
	margin-bottom: 8px;
}

.impact-grafico-texto p {
	margin: 0;
}

.impact-grafico-barras h3 {
	margin-bottom: 20px;
}

/* El tema deja las barras pensadas para porcentajes; aquí el rótulo de la
   derecha es la CANTIDAD de módulos, que es el dato que importa. */
.impact-grafico-barras .skillbar {
	margin-bottom: 14px;
}

.impact-grafico-barras .skillbar:last-child {
	margin-bottom: 0;
}

/* --- Reparto de la columna de alcance -------------------------------------
   Las tres tarjetas de cifras caen 2 + 1 y dejan un hueco a la derecha de la
   tercera; el medidor, en cambio, se estiraba a todo el ancho. Medido: hueco
   de una tarjeta libre y 1.556 px de alto de columna.
   El medidor pasa a ocupar ese hueco (media columna, junto a la tercera cifra)
   y las barras se quedan con el ancho completo debajo. */
@media only screen and (min-width: 1200px) {
	.our-impact .impact-grafico-circulo {
		width: calc(50% - 15px);
		margin-top: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.our-impact .impact-grafico-barras {
		width: 100%;
	}
}

/* Las siete áreas hacían 548 px de alto: se compactan para que la sección no
   crezca más que la tarjeta oscura de al lado. */
.impact-grafico-barras .skillbar {
	margin-bottom: 10px;
}

.impact-grafico-barras .skill-data {
	margin-bottom: 4px;
}

/* El bloque destacado ya no necesita estirarse: las barras pasaron a su misma
   columna, así que las dos quedan parejas sin repartir aire por dentro.
   Medido antes del cambio: 791 px de hueco entre el texto y la imagen. */
.our-impact .impact-highlighted-item {
	height: auto;
}

.our-impact .impact-grafico-barras {
	margin-top: 30px;
}

/* --- Iconos de Font Awesome dentro de las cajas del tema ------------------
   El tema dibuja .icon-box para un SVG de 60x60. Los 29 módulos no tienen un
   SVG propio (la plantilla trae seis), así que van con Font Awesome, y un <i>
   sin tamaño hereda los 16px del cuerpo: medido, 20x16 px dentro de una caja
   pensada para 60, y en gris de texto en vez del color de acento. */
.service-key-benefits-item .icon-box i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	font-size: 34px;
	color: var(--accent-color);
}

/* En la ficha de módulo el «qué incluye» son viñetas de comprobación: ahí el
   icono acompaña a una línea de texto, no encabeza una tarjeta. */
.service-key-benefits-item .icon-box i {
	width: 32px;
	height: 32px;
	font-size: 20px;
}

/* El resto de los capitalize del tema. Se corrigieron primero el menú, el
   menú del teléfono, el listado lateral y las migas; faltaban los botones y
   los enlaces de etiqueta, donde salía «Ver El Módulo» y «Solicite Una
   Cotización». Son los nueve selectores que el tema declara. */
.btn-default,
.readmore-btn,
.section-footer-text p a,
.tag-links,
.post-tags .tag-links a {
	text-transform: none;
}

/* --- Contacto del bloque de preguntas ------------------------------------
   El número entra justo y se partía en dos líneas («+506 6073-» / «1679»).
   Se baja un punto el tamaño y se le prohíbe el salto: un teléfono cortado
   a la mitad no se puede leer ni copiar. */
.faqs-contact-item-content h3 {
	font-size: 18px;
	white-space: nowrap;
}

.faqs-contact-item-content h3 a {
	white-space: nowrap;
}

/* --- La imagen de la tarjeta de servicio, bajo el fondo del hover ---------
   .service-item:hover:before crece a height:100% y pinta el violeta. El tema
   saca el texto a flote con position:relative y z-index:1 en
   .service-item-content, pero nuestra imagen cuelga de .service-item-image,
   que no existe en el tema: al pasar el cursor quedaba por DEBAJO del bloque
   violeta y la tarjeta se veía vacía. */
.service-item-image {
	position: relative;
	z-index: 1;
}

.service-item-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* --- Separación entre las secciones de una ficha de servicio --------------
   En service-single.html los bloques van ANIDADOS dentro de .service-entry,
   que aporta el aire con su margin-bottom de 70px. Aquí son hermanos —el
   contenido viene plano y se agrupa por subtítulo—, así que .service-entry-
   optimise se queda sin margen propio (el tema no le declara ninguno) y las
   secciones salen pegadas unas a otras. */
.service-single-content .service-entry-optimise {
	margin-top: 60px;
}

.service-single-content .service-entry-optimise h2 {
	margin-bottom: 20px;
}

/* La lista de verificación necesita aire antes del siguiente encabezado. */
.service-single-content .service-optimise-list {
	margin-bottom: 10px;
}

.service-single-content .service-optimise-list ul li {
	margin-bottom: 12px;
}

/* --- El cursor invisible del tema ----------------------------------------
   La plantilla trae un cursor propio en magiccursor.js y, para que el del
   sistema no se vea doble, pone «cursor: none» en los títulos de sección y en
   varias imágenes. Ese script NO se carga aquí (es un adorno que cuesta JS),
   así que lo único que quedaba era el efecto secundario: el puntero DESAPARECE
   al pasar sobre cualquier h1/h2 de sección. Se devuelve el cursor del sistema
   en los selectores donde el tema lo apaga. */
.section-title h1,
.section-title h2,
.team-item-image a,
.team-item-image figure,
.project-item-image figure a,
.post-featured-image a,
.video-gallery-image a,
.page-gallery-box .photo-gallery a,
.testimonial-slider .swiper-wrapper {
	cursor: auto;
}

.team-item-image a,
.team-item-image figure,
.project-item-image figure a,
.post-featured-image a,
.video-gallery-image a,
.page-gallery-box .photo-gallery a {
	cursor: pointer;
}

/* --- Nombres del equipo en h3 --------------------------------------------
   El tema dimensiona el nombre de la persona con «.team-item-content h2», pero
   en /nosotros el h2 es el título de la sección y la persona cuelga de él: va
   en h3. Se replica el tamaño y el cambio de color del hover, que el tema solo
   declara para h2. */
.team-item-content h3 {
	font-size: 20px;
	transition: all 0.3s ease-in-out;
}

.team-item:hover .team-item-content h3 {
	color: var(--white-color);
}

/* --- Las cifras de /nosotros en h3 ---------------------------------------
   Mismo caso: «.about-counter-item h2» es el que lleva los 60px, y la cifra
   no es un encabezado de sección. */
.about-counter-item h3 {
	font-size: 60px;
	line-height: 1em;
}

/* La lista de servicios del about es de enlaces; el tema no les da color, así
   que heredan el del texto y no se ven pulsables hasta el hover. */
.about-us-feature-list ul li a {
	color: inherit;
	transition: color 0.3s ease-in-out;
}

.about-us-feature-list ul li a:hover {
	color: var(--accent-color);
}

/* --- Misión, visión y alcance (/nosotros) ---------------------------------
   Las tarjetas son las de «.service-key-benefits-item», que dentro de una
   ficha de servicio van a dos por fila (width: calc(50% - 15px)). Aquí son
   tres y a lo ancho del contenedor: a dos por fila la tercera queda sola.
   El envoltorio .nosotros-pilares es propio porque la sección equivalente de
   la plantilla (.our-approach) trae cifras de la demo. */
.nosotros-pilares {
	padding: 100px 0 70px;
}

.nosotros-pilares .service-key-benefits-item {
	width: calc(33.333% - 20px);
}

@media only screen and (max-width: 991px) {
	.nosotros-pilares {
		padding: 50px 0 20px;
	}

	.nosotros-pilares .service-key-benefits-item {
		width: 100%;
	}
}

/* El enlace a la ficha del servicio al final de cada grupo de preguntas; el
   tema no tiene un bloque equivalente en faqs.html. */
.page-faqs .page-single-faqs-btn {
	margin-top: 30px;
}

/* El menú lateral del FAQ salta por ancla y la cabecera del tema es sticky:
   sin este margen el título del grupo queda debajo de ella. */
.page-faqs .page-single-faqs {
	scroll-margin-top: 120px;
}

/* --- Y en el teléfono, el cuarto paso otra vez ----------------------------
   Debajo de 768px el tema pone la línea que une los pasos EN VERTICAL
   (width: 1px, height: 100% + 30px) y la corrige para :nth-child(2n) y
   :last-child... pero no para :nth-child(3n + 3), al que el bloque de 1024px
   le dejó un «width: calc(100% + 30px)» de más especificidad. Con los tres
   pasos de la demo no se nota —el tercero es también el último—, pero con
   nuestros CUATRO el tercero no es ninguno de los dos y su línea se queda
   horizontal: 390 x 66 px de rectángulo claro al lado de «PASO 03». */
@media only screen and (max-width: 767px) {
	.our-work-process .process-step-item:nth-child(3n + 3) .process-step-no::before {
		width: 1px;
	}
}

/* --- Formulario de contacto ----------------------------------------------
   La plantilla no trae avisos de resultado (su formulario responde por AJAX a
   un form-process.php que aquí no se usa), así que el éxito y el error son
   propios. */
.contacto-aviso {
	border-radius: 10px;
	padding: 20px 25px;
	margin-bottom: 30px;
}

.contacto-aviso p {
	margin: 0;
}

.contacto-aviso h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.contacto-aviso-exito {
	background-color: rgba(121, 74, 255, 0.08);
	border-left: 3px solid var(--accent-color);
}

.contacto-aviso-error {
	background-color: rgba(220, 53, 69, 0.08);
	border-left: 3px solid var(--error-color);
}

.contacto-aviso a {
	color: var(--accent-color);
	font-weight: 500;
}

.contacto-legal {
	font-size: 13px;
	line-height: 1.5em;
	margin: 20px 0 0;
}

.contacto-legal a {
	color: inherit;
	text-decoration: underline;
}

/* La trampa para robots no se ve ni recibe foco, pero tampoco usa
   display:none: hay robots que se saltan justamente lo que está oculto así. */
.campo-trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Portada --------------------------------------------------------------
   La píldora del hero lleva 10px de padding a la izquierda porque ahí van las
   fotos superpuestas de la plantilla. Sin ellas queda descentrada. */
.hero-sub-heading.sin-fotos {
	padding-left: 18px;
}

/* El enlace a la página de preguntas; el tema no trae un botón en ese bloque. */
.our-faq-btn {
	margin-top: 30px;
}

/* --- El punto de llegada de la ficha de módulo ----------------------------
   Los enlaces a un módulo caen en #modulo, el encabezado que abre la
   descripción, en vez de la cabecera de la página: en el teléfono eso eran dos
   pantallas de desplazamiento antes de leer la primera línea. La cabecera del
   tema se vuelve fija al hacer scroll y mide 80px, así que el ancla necesita
   ese margen o el título queda debajo de ella. */
.service-single-content h2[id] {
	scroll-margin-top: 100px;
}

/* --- Página 404 ----------------------------------------------------------
   La de la plantilla ofrece un solo botón al inicio. Como la mayoría de quien
   cae aquí viene de una dirección vieja del sitio anterior, conviene darle las
   cuatro puertas en lugar de devolverlo al principio. */
.error-page-enlaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 30px;
	margin-bottom: 30px;
}

.error-page-enlaces a {
	color: var(--accent-color);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- El logo de Total Design ---------------------------------------------
   La plantilla reservaba 146 x 50 px para un logo cuadrado con una palabra
   corta. El nuestro es el monograma TD más «Total Design» al lado: 236 x 50,
   casi cinco veces más ancho que alto. Sin esto el pie lo aplastaba a 146. */
.navbar-brand img,
.footer-logo img {
	width: 236px;
	max-width: 236px;
	height: 50px;
}

/* En pantallas chicas el logo comparte fila con el botón del menú. */
@media only screen and (max-width: 575px) {
	.navbar-brand img {
		width: 190px;
		max-width: 190px;
		height: 40px;
	}
}

/* --- Páginas legales -----------------------------------------------------
   Texto largo y seguido: el h2 de 46px del tema es para una ficha de servicio
   con imágenes, no para un documento de once secciones. Se baja y se le da
   aire, y la columna se acota a un ancho de lectura cómodo. */
.pagina-legal .service-entry h2 {
	font-size: 26px;
	margin-bottom: 12px;
}

.pagina-legal .service-entry-optimise {
	margin-top: 40px;
}

.pagina-legal .service-entry p {
	margin-bottom: 16px;
}

.pagina-legal .legal-actualizado {
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 30px;
}

/* Los enlaces legales del pie, en una fila discreta bajo el copyright. */
.footer-legales {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 10px 0 0;
}

.footer-legales a {
	font-size: 14px;
	opacity: 0.75;
}

.footer-legales a:hover {
	opacity: 1;
}

/* En una ficha de servicio las viñetas van a dos columnas («width: calc(50% -
   10px)»), que sirve para frases cortas. En un documento legal son párrafos y
   leerlos en zigzag cuesta: acá van a una sola columna. */
.pagina-legal .service-optimise-list ul li {
	width: 100%;
}

.pagina-legal .service-optimise-list {
	margin-top: 16px;
	margin-bottom: 16px;
}

/* --- Botón flotante de WhatsApp ------------------------------------------
   En Costa Rica es por donde la gente escribe. El sitio viejo lo tenía y el
   nuevo lo había perdido. Abajo a la derecha, que es donde se busca. */
.boton-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0;
	height: 56px;
	padding: 0 16px;
	border-radius: 28px;
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: gap 0.3s ease-in-out, padding 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.boton-whatsapp:hover,
.boton-whatsapp:focus-visible {
	background-color: #1ebe5b;
	color: #fff;
	gap: 10px;
	padding-right: 22px;
}

.boton-whatsapp i {
	font-size: 28px;
	line-height: 1;
}

/* El rótulo nace plegado y se despliega al pasar el cursor: un botón redondo
   no dice qué hace, y uno con texto permanente tapa contenido en el teléfono. */
.boton-whatsapp-texto {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 500;
	opacity: 0;
	transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.boton-whatsapp:hover .boton-whatsapp-texto,
.boton-whatsapp:focus-visible .boton-whatsapp-texto {
	max-width: 160px;
	opacity: 1;
}

/* En el teléfono no hay «hover»: queda solo el círculo, más chico. */
@media only screen and (max-width: 767px) {
	.boton-whatsapp {
		right: 16px;
		bottom: 16px;
		height: 52px;
		padding: 0 12px;
	}

	.boton-whatsapp-texto {
		display: none;
	}
}

/* Quien pidió menos movimiento no necesita que el botón se despliegue. */
@media (prefers-reduced-motion: reduce) {
	.boton-whatsapp,
	.boton-whatsapp-texto {
		transition: none;
	}
}

/* El distintivo de reCAPTCHA ocupa justo esa esquina y chocaba con el botón.
   Google permite ocultarlo siempre que la atribución quede visible, y está:
   al pie del formulario, con los enlaces a su privacidad y a sus términos. */
.grecaptcha-badge {
	visibility: hidden;
}