/**
Theme Name: Spotlight News
Theme URI: https://ascendoor.com/themes/spotlight-news/
Author: Ascendoor
Author URI: https://ascendoor.com/
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.5
Requires at least: 5.0
Template: newspulse-magazine
Text Domain: spotlight-news
Description: Spotlight News ( child theme of Newspulse Magazine ) theme is a versatile magazine template ideal for news sites, blogs, publishing platforms, and review websites. It offers numerous layouts and can be customized for different industries such as business, finance, healthcare, sports, fashion, and more. Featuring demo content that can be tailored to specific needs, the theme’s homepage showcases a clean, simple magazine-style design. It includes a post banner slider, the latest posts, and a custom widget layout. With its modern and minimalist aesthetic, the theme is user-friendly and easy to set up, especially with the provided pre-built demo. Additionally, the Spotlight News theme is responsive, ensuring optimal viewing across different screen resolutions and browsers. It is compatible with multiple browsers and has been optimized for speed, performance, and search engine optimization (SEO). Demo link: Demo link: https://demos.ascendoor.com/spotlight-news/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-background, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, news, blog

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

Spotlight News 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/
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');


:root {
	--primary-color: #606060;
	--body-bg:white;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

.source-serif-4-k-Elight {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.source-serif-4-k-Elight-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: italic;
}
.source-serif-4-k-light {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}.source-serif-4-k-light-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
}
.source-serif-4-k-regular {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.source-serif-4-k-regular-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}
.source-serif-4-k-medium {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.source-serif-4-k-medium-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}
.source-serif-4-k-SBold {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.source-serif-4-k-SBold-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
}
.source-serif-4-k-Bold {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.source-serif-4-k-Bold-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}.source-serif-4-k-EBold {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.source-serif-4-k-EBold-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: italic;
}.source-serif-4-k-black {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.source-serif-4-k-black-i {
  font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: italic;
}

main{
    margin:10px;
    margin-top:90px;
}

img{
        border-radius: 10px;
}

nav[role="navigation"],
.breadcrumb{
    margin:10px;
    margin-top:50px;
}

/*--------------------------------------------------------------
# Flash News Section
--------------------------------------------------------------*/
.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap {
	padding-inline: 15px;
	position: relative;
}

.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap .flash-img {
	width: 35px;
	min-width: 35px;
	height: 35px;
	min-height: 35px;
	overflow: hidden;
	border-radius: 50%;
	display: inline-block;
	line-height: 1;
	margin-inline-end: 10px;
	position: relative;
}

.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap .flash-img img {
	height: 35px;
	width: 35px;
	object-fit: cover;
	margin: 0;
}

.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap a {
	font-size: calc(var(--font-size-sm) + 2px);
	padding: 0;
}
.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap:has(.flash-img) a::before {
	display: none;
}
.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap:not(:has(.flash-img)) a {
	padding-inline-start: 15px;
}
.flash-news-ticker .flash-news-ticker-wrapper .flash-news-part .mag-post-title-wrap:not(:has(.flash-img)) a::before {
	inset-inline-start: -8px;
}


/*--------------------------------------------------------------
# Banner Section
--------------------------------------------------------------*/
.banner-section.style-3 .banner-editor-picks-section {
	margin-bottom: 20px;
}

.banner-section.style-3 .banner-editor-picks-section .slick-list {
	margin: 0 -5px;
}

.banner-section.style-3 .banner-editor-picks-section .slick-slide {
	padding-inline: 5px;
}

.banner-section.style-3 .banner-editor-picks-section .mag-post-single.list-design {
	gap: 15px;
}

.banner-section.style-3 .banner-editor-picks-section .mag-post-single.list-design .mag-post-img {
	inline-size: 108px;
	aspect-ratio: 1;
	max-height: 108px;
	flex-shrink: 0;
}

.mag-post-single{
    box-shadow:none;
}

.banner-section.style-3 .banner-editor-picks-section .mag-post-single.list-design .mag-post-img a img {
	aspect-ratio: 1;
}

.banner-section.style-3 .banner-editor-picks-section .mag-post-single.list-design .mag-post-img .number {
	content: counter(editor-pick-counter);
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 25px;
	height: 25px;
	z-index: 1;
	color: #fff;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-sm);
	background-color: var(--primary-color);
}

.banner-section.style-3 .banner-editor-picks-section .mag-post-single.list-design .mag-post-detail .mag-post-title {
	font-size: var(--font-size-sm);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin-bottom: 5px;
}

.banner-section.style-3 .banner-section-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.banner-section.style-3 .banner-section-wrapper .banner-posts {
	width: 100%;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 992px) {
	.banner-section.style-3 .banner-section-wrapper .banner-posts {
		width: calc(75% - 10px);
	}
}

@media (max-width: 767px) {
	.banner-section.style-3 .banner-section-wrapper .banner-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.banner-section.style-3 .banner-section-wrapper .banner-posts {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.banner-section.style-3 .banner-section-wrapper .banner-posts .mag-post-single:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
	width: 100%;
}

@media (max-width: 767px) {
	.banner-section.style-3 .banner-section-wrapper .banner-posts .mag-post-single:nth-child(1) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.banner-section.style-3 .banner-section-wrapper .banner-adver {
	width: 100%;
	text-align: center;
	font-size: 0;
	display: grid;
	gap: 20px;
}

@media (min-width: 992px) {
	.banner-section.style-3 .banner-section-wrapper .banner-adver {
		width: calc(25% - 10px);
		position: sticky;
		top: 40px;
		align-self: flex-start;
	}
}

.banner-section.style-3 .banner-section-wrapper .banner-adver a {
	display: block;
	font-size: 0;
}

.banner-section.style-3 .banner-section-wrapper .banner-adver a img {
	width: 100%;
}

.banner-section.style-3.no-adver-image .banner-section-wrapper .banner-posts {
	width: 100%;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.banner-section.style-3.no-adver-image .banner-section-wrapper .banner-posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.banner-section.style-3.no-adver-image .banner-section-wrapper .banner-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.banner-section.style-3.no-adver-image .banner-section-wrapper .banner-posts {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

/*--------------------------------------------------------------
# Fixed Header CSS
--------------------------------------------------------------*/
header.site-header .bottom-header-part-outer.header-fixed {
	min-height: 56.5px;
}

header.site-header .bottom-header-part-outer.header-fixed .bottom-header-part.fix-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	box-shadow: var(--shadow);
}

.admin-bar header.site-header .bottom-header-part-outer.header-fixed .bottom-header-part.fix-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.site-header .bottom-header-part-outer.header-fixed .bottom-header-part.fix-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar header.site-header .bottom-header-part-outer.header-fixed .bottom-header-part.fix-header.fix-header {
		top: 0;
	}
}

/*--------------------------------------------------------------
# Small List widget style 2
--------------------------------------------------------------*/
.magazine-small-list-section.style-2 .magazine-list-section-wrapper {
	gap: 15px;
}

.magazine-small-list-section.style-2 .magazine-list-section-wrapper .mag-post-single {
	border: 1px solid rgba(155, 155, 155, 0.3);
}

.magazine-small-list-section.style-2 .magazine-list-section-wrapper .mag-post-single .mag-post-img {
	display: none;
}

.magazine-small-list-section.style-2 .magazine-list-section-wrapper .mag-post-single .mag-post-detail {
	padding: 20px;
	border-radius: 5px;
	width: 100%;
	display: flex;
	align-items: center;
}

@elseif $breakpoint=="vlarge" {
	@container (min-width: 1201px) {
		.magazine-small-list-section.style-2 .magazine-list-section-wrapper .mag-post-single .mag-post-detail .mag-post-title {
			font-size: var(--font-size-base);
		}
	}
}

@container (min-width: 992px) {
	.magazine-small-list-section.style-2 .magazine-list-section-wrapper .mag-post-single .mag-post-detail .mag-post-title {
		font-size: var(--font-size-base);
	}
}

/*--------------------------------------------------------------
# Archive List
--------------------------------------------------------------*/
.magazine-archive-layout.list-layout {
	display: grid;
	grid-gap: 30px;
}

.magazine-archive-layout.list-layout article {
	margin-bottom: 0;
}

.magazine-archive-layout.list-layout .mag-post-single {
	display: flex;
	gap: 20px;
}

.magazine-archive-layout.list-layout .mag-post-single .mag-post-img {
	width: 30%;
}

.magazine-archive-layout.list-layout .mag-post-single .mag-post-detail {
	padding: 20px;
	align-self: center;
}

.magazine-archive-layout.list-layout .mag-post-single .mag-post-img + .mag-post-detail {
	padding: 20px;
	padding-inline-start: 0;
	width: calc(70% - 20px);
}

@media (max-width: 480px) {
	.magazine-archive-layout.list-layout .mag-post-single {
		flex-direction: column;
		gap: 0;
	}
	.magazine-archive-layout.list-layout .mag-post-single .mag-post-img {
		width: 100%;
	}
	.magazine-archive-layout.list-layout .mag-post-single .mag-post-img + .mag-post-detail,
	.magazine-archive-layout.list-layout .mag-post-single .mag-post-detail {
		width: 100%;
		padding: 20px;
	}
}

/*  Añadido YO */

/* Estilos generales */
:root{
    --transition-duration: all 0.3s;
    --container-bright: #F8F8F8;
    --family-p: 'Source Sans 3', sans-serif;
    --wrap-width: 500px;
    --principal-color: #A55BEF;
    --second-color-title: #757575;
}


body {
    font-family: 'Source Serif 4', serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background:white;
}

h1, h2, h3, h4 {
    color: #333;
    font-weight: 700;
}

p {
    color: #555;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

/* Estilo del encabezado */
header {
    width: 700px;
    background-color: #A55BEF;
    padding: 10px 0;
    margin: 30px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    margin: auto;
}

header div .wrap-logo{
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    gap: 5px;
    margin-right: 20px;
}

header .logo {
    max-width: 50px;
}

header .logo-text{
    font-family: 'Source Serif 4', serif;
    font-weight: 900;
    font-size: 16px;
    color: white;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
    font-family: var(--family-p);
    font-size: 12px;
    font-weight: 600;
}

nav ul li {
    margin-right: 12px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    transition: var(--transition-duration);
}

nav ul li a:hover {
    text-decoration: underline;
}

article[data="article"] {
    margin:auto;
    max-width:700px;
}

.search-login {
    display: flex;
    align-items: center;
}

.search-login button, .search-login .login {
    margin-left: 10px;
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--family-p);
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition-duration);
}

.search-login .login {
    background-color: #fff;
    color: #A55BEF;
}

.search-login .login:hover {
    background-color: #611ea5;
    color: white;
}

.search-login button:hover {
    background-color: #555;
}

.mobile-menu{
    display: none;
}

/* Estilos para el ícono del menú móvil */
.mobile-menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-bar {
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 4px 0;
}
 .menu-bar .segunda{
    width: 15px;
 }

/* Sección principal */
.hero {
    text-align: center;
    padding: 120px 20px;
    height: 100vh;
    background-color: #fff;
}

.hero .wrap-logo{
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    gap: 15px;
    justify-content: center;
    margin-right: 20px;
}

.hero .logo-hero{
    width: 55px;
}

.hero .logo-text-hero{
    color:#333;
    font-size: 32px;
    font-weight: bold;
}

.hero h1 {
    font-size: 45px;
    margin-bottom: 0;
}

.hero h1 span {
    color: #A55BEF;
}

.hero h2{
    font-size: 32px;
    margin-top: 0;
    color: #757575;
}

.hero .wrap-hero{
    width: var(--wrap-width);
    margin: auto;
    text-align: left;
}

.subMorado{
    font-size: 1.2rem;
    font-family: var(--family-p);
    color: #A55BEF;
}

.hero form {
    margin-top: 20px;
    display: grid;
    gap: 10px;
}

.hero input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 300px;
    font-family: var(--family-p);
}

.hero label{
    font-family: var(--family-p);
    font-size: 16px;
    line-height: 24px;
}

.hero .newsletter{
    display: grid;
    gap: 10px;
    grid-auto-flow: column;
}

.hero button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    min-width: 120px;
}

.hero button:hover {
    background-color: #555;
}

/* Sección de "Qué es inContextus" */
.about {
    padding: 60px 20px;
    background-color: #fff;
}

.about h2,
.steps h2 {
    text-align: center;
    margin-bottom: 0px;
    font-size: 36px;
}

.about h3,
.steps h3{
    font-size: 28px;
    color: var(--second-color-title);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 40px;
}

.about .doubleUnderline{
    position: absolute;
    padding-top: 47px;
}

.doubleUnderline .primera{
}

.doubleUnderline .segunda{

}

.about ul {
    list-style-type: none;
}

.wrap-about{
    padding: 40px;
    margin: auto;
    width: var(--wrap-width);
    border-radius: 10px;
    background-color:  var(--container-bright);
}

.about ul li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.about ul li img {
    max-width: 30px;
    margin-right: 10px;
}

.about ul li p {
    font-family: var(--family-p);
    font-size: 1rem;
    color: #555;
}

/* Sección "Cómo funciona" */
.steps {
    padding: 60px 20px;
    background-color: #fff;
    display: grid;
}

.steps .wrap-step{
    display: grid;
    grid-auto-flow: column;
}

.steps h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}

.steps .subMorado{
    text-align: center;
}


.step {
    display: flex;
    align-items: start;
    margin-bottom: 200px;
}

.step-image {
    max-width: 250px;
    margin-right: 20px;
}

.step-number {
    font-size: 8rem;
    font-weight: 100;
    color: #E7E0EC;
    margin-top: -50px;
    margin-right: 25px;
}

.step-content {
    display: flex;
    flex-direction: column;
}

.step-content h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--principal-color);
    text-align: left;
}

.step-content p {
    font-size: 1rem;
    color: #555;
    margin-top: 0px;
}

/* Sección CTA */
.cta {
    padding: 60px 20px;
    color: white;
    text-align: center;
}

.wrap-cta{
    background-color:  var(--container-bright);
    border-radius: 10px;
    width: var(--wrap-width);
    padding: 20px;
    margin: auto;
}

.wrap-logo-cta{
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.logo-cta{
    width: 30px;
}

.logo-text{
    font-weight: bold;
    font-size: 18px;
    color: #333;
}

.cta h2 {
    margin-bottom: 20px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 16px;
}

.cta input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
}

.cta button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 10px;
}

.cta button:hover {
    background-color: #7e7e7e;
    color: white;
}

/* Footer */
footer {
    border-top: 2px solid var(--container-bright);
}

footer .wrap-logo-cta{
    align-items: start;
}

footer .footer-links {
    display: flex;
    justify-content: space-between;
    padding:40px;
}

footer ul {
    list-style-type: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 10px;
}

footer ul li a {
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}

.footer-logo {
    max-width: 150px;
}

.designed{
    color: white;
    background-color: #A55BEF;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}



/* Responsive Styles */
@media (max-width: 768px) {
    nav ul {
        display: none;
    }

    .search-login {
        display: none;
    }

    .mobile-menu-icon {
        display: flex;
    }

    .mobile-menu {
        display: none;
        background-color: #a559f3;
        padding: 10px;
    }

    .mobile-menu ul {
        list-style: none;
        padding: 0;
    }

    .mobile-menu ul li {
        margin-bottom: 10px;
    }

    .mobile-menu ul li a,
    .mobile-menu ul li button {
        color: white;
        text-decoration: none;
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
    }

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

    .step-image {
        margin-bottom: 20px;
    }

    .step-number {
        margin-bottom: 20px;
    }

    .step-content {
        text-align: center;
    }

    .cta {
        padding: 40px 20px;
    }

    .footer-links {
        flex-direction: column;
        text-align: center;
    }
}