/* ================================================
   VARIABLES CSS - Tokens de diseño
   ================================================ */
:root {
  /* Colores base */
  --color-primary: #234F67;
  --color-secondary: #2596BE;
  --color-accent: #20749A;

  /* Colores de texto */
  --color-text-primary: #131313;
  --color-text-secondary: #222222;
  --color-text-muted: #676767;
  --color-text-light: #7F7F7F;
  --color-text-medium: #505050;
  --color-text-gray: #8E8E8E;

  /* Colores de fondo */
  --color-background-light: #F6F6F6;
  --color-background-accent: #EEF6FF;

  /* Colores utilitarios */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-link: #015CC8;
  --color-link-hover: #1E7A9E;
  --color-pagination-default:#D6F0F7;

  /* Espaciado */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;

  /* Border radius */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Tipografía */
  --font-size-sm: 16px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;

  --line-height-sm: 24px;
  --line-height-md: 28px;
  --line-height-lg: 32px;
  --line-height-xl: 40px;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Sombras */
  --shadow-light: 0 1px 10px 0 rgba(0,0,0,.1);
}

/* ================================================
   RESET Y CONFIGURACIÓN BASE
   ================================================ */
.content-middle .ls-titles,
.content-middle .ls-social-list,
.content-middle .ls-social-list li,
.content-middle .ls-blog-title,
.content-middle .ls-subtitle,
.content-middle .ls-newsletter h2{
  padding:0!important;
}

.content-middle .ls-social-list li+li{margin-top:0!important;}
.content-middle .ls-subtitle{padding-top:0!important;}
.content-middle .ls-newsletter .ls-subtitle{margin-bottom:var(--spacing-xs)!important;}
.content-middle .ls-newsletter h2{margin-bottom:var(--spacing-xs)!important;}

/* ================================================
   TIPOGRAFÍA Y TÍTULOS
   ================================================ */
.content-middle .ls-titles{
  font-size:var(--font-size-md);
  line-height:var(--line-height-md);
  font-weight:var(--font-weight-semibold);
  color:var(--color-primary);
  margin-bottom:var(--spacing-xs);
}

.ls-subtitle{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  color:var(--color-text-muted);
  margin-bottom:var(--spacing-md);
}

.ls-name{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  color:var(--color-text-primary);
  font-weight:var(--font-weight-regular);
}

.ls-numbers{
  display:flex;
  gap:20px;
  color:var(--color-text-gray);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
}

/* ================================================
   BOTONES Y ELEMENTOS INTERACTIVOS
   ================================================ */
.ls-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:84px;
  max-height:32px;
  padding:10px;
  border-radius:var(--radius-lg);
  border:1px solid var(--color-accent);
  background-color:var(--color-white);
  color:var(--color-black);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  text-decoration:none;
  transition:.2s;
}

.ls-blog-readmore{
  display:inline-block;
  margin-top:var(--spacing-sm);
  padding:10px;
  border-radius:var(--radius-md);
  background-color:var(--color-secondary);
  color:var(--color-white);
  font-size:var(--font-size-sm);
  text-decoration:none;
  transition:background-color .2s;
}

/* ================================================
   LAYOUT Y CONTENEDORES
   ================================================ */
.ls-grid{
  width:100%;
  margin-top:var(--spacing-lg);
  padding:var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-light);
}

.ls-first-block,
.ls-secondary-block{
  display:flex;
  gap:var(--spacing-lg);
}

.ls-tertiary-block{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-lg);
}

/* Elementos flexibles */
.ls-recomend{flex:0 0 734px;overflow:hidden;}
.ls-services,
.ls-tertiary-block{flex:1;}
.ls-social{flex:0 0 475px;}

/* ================================================
   COMPONENTE SOCIAL
   ================================================ */
.content-middle .ls-social-list{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-lg);
}

.ls-social-list li a{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  padding:var(--spacing-xs);
  border-radius:var(--radius-lg);
  background-color:var(--color-background-light);
  text-decoration:none;
  list-style:none;
}

.ls-social-list li a:hover{text-decoration:none;}

.ls-logo{position:relative;}

/* Iconos de redes */
.ls-social-list li:nth-of-type(1) .ls-logo::before{background-image:url('/img/instagram-logo.svg');}
.ls-social-list li:nth-of-type(2) .ls-logo::before{background-image:url('/img/tiktok.svg');}
.ls-social-list li:nth-of-type(3) .ls-logo::before{background-image:url('/img/facebook.svg');}
.ls-social-list li:nth-of-type(4) .ls-logo::before{background-image:url('/img/linkedin.svg');}

.ls-social-list li:nth-of-type(-n+4) .ls-logo::before{
  content:'';
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:30px;
  height:30px;
  background-size:30px;
  background-repeat:no-repeat;
  background-position:center;
}

.ls-social-list li::before{display:none;}

.ls-link{
  width:100%;
  margin-right:var(--spacing-sm);
  text-align:right;
}

.ls-info{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-xs);
  width:100%;
}

/* ================================================
   COMPONENTE BLOG
   ================================================ */
.ls-blog-swiper-container{overflow:hidden;}
.ls-blog{margin-right:calc(-1*var(--spacing-md));}
.ls-rrss .swiper-slide{width:100%!important;}

.swiper-recomendaciones .swiper-slide{
  position:relative;
  width:316px!important;
  padding:var(--spacing-sm);
  border:4px solid var(--color-white);
  border-radius:var(--radius-lg);
  display:block;
}

.ls-followers{
    font-size: 14px;
    line-height: 22px;
}

.swiper-recomendaciones .swiper-slide.post-new{
  border-color:var(--color-secondary);
}

.swiper-recomendaciones .swiper-slide.post-new::after{
  content:"NEW";
  position:absolute;
  left:50%;
  bottom:-15px;
  transform:translateX(-50%);
  width:80px;
  height:25px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:90px;
  background:var(--color-secondary);
  color:var(--color-white);
  font-size:14px;
  font-weight:bold;
}

.ls-blog-list img{
  max-width:263px;
  width:100%;
  height:251px;
  object-fit:cover;
  border-radius:var(--radius-xl);
}

.ls-blog-card{
  display:flex;
  align-items:flex-start;
  gap:var(--spacing-md);
  color:var(--color-text-medium);
  text-decoration:none;
  transition:transform .2s;
}

.ls-blog-card:hover{text-decoration:none;}

.ls-blog-nav{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--spacing-md);
}

.ls-rrss .swiper-navigation{display:flex;align-items:center;justify-content:center;}

.ls-rrss .swiper-button-prev,
.ls-rrss .swiper-button-next{
  position:relative;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  transform: none;
}

.ls-rrss .swiper-button-prev::after,
.ls-rrss .swiper-button-next::after{
  font-size:14px;
  font-weight:600;
  color:var(--color-black);
}

.ls-rrss .swiper-button-prev:hover::after,
.ls-rrss .swiper-button-next:hover::after{color:var(--color-accent);}

.ls-blog-nav-item .ls-subtitle{margin-bottom:0!important;}

.content-middle .ls-blog-title{
  font-size:var(--font-size-md);
  line-height:var(--line-height-md);
  font-weight:var(--font-weight-bold);
  color:var(--color-text-secondary);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.ls-blog-content p{
  padding-top:var(--spacing-sm)!important;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
}

.ls-blog-content{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
}

/* ================================================
   COMPONENTE NEWSLETTER
   ================================================ */
.ls-newsletter{
  padding:var(--spacing-sm) var(--spacing-md);
  border-radius:var(--radius-xl);
  background:var(--color-background-accent);
}

.ls-newsletter h2{
  margin-bottom:var(--spacing-xs);
  font-size:var(--font-size-md);
  line-height:var(--line-height-md);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-secondary);
}

.ls-newsletter .ls-newsletter-form{
  display:flex;
  align-items:flex-start;
  width:100%;
  gap:var(--spacing-lg);
}

.ls-newsletter .ls-subtitle{font-size:14px;line-height:22px;}

.ls-newsletter .ls-newsletter-form .ls-newsletter-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
}

.ls-newsletter .ls-newsletter-form .ls-newsletter-content>fieldset{width:100%;}

.ls-newsletter .ls-newsletter-form .alert{color:red;text-align: left;}

.ls-newsletter .ls-newsletter-form .ls-newsletter-content fieldset>input{
  width:100%;
  height:40px;
  padding:var(--spacing-sm);
  border:1px solid var(--color-text-muted);
  border-radius:var(--radius-md);
  background:var(--color-white);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  color:var(--color-text-light);
  transition:border-color .2s,box-shadow .2s;
}

.ls-newsletter .ls-newsletter-form .ls-newsletter-content .form-checkbox a{
  color:var(--color-link);
  text-decoration:underline;
}

.ls-newsletter .ls-newsletter-form>input:focus{
  outline:none;
  border-color:var(--color-secondary);
  box-shadow:0 0 0 3px rgba(37,150,190,.1);
}

.ls-newsletter .ls-newsletter-form button{
  display:flex;
  justify-content:center;
  align-items:center;
  height:40px;
  padding:10px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--color-secondary);
  color:var(--color-white);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .2s;
}

.ls-newsletter .ls-newsletter-form button:hover{
  background-color:var(--color-link-hover);
}

/* ================================================
   COMPONENTE SERVICIOS
   ================================================ */
.ls-services{overflow:hidden;}

.ls-servicio-title{
  margin-bottom:21px;
  font-size:18px;
  line-height:26px;
  font-weight: 500;
  color:var(--color-primary);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  max-width: 330px;
  width: 100%;
}

.ls-servicios-list img{
  width:100%;
  height:172px;
  margin-bottom:19px;
  border-radius:var(--radius-md);
  object-fit:cover;
  max-width:100%;
}

.ls-servicio-card{
  color:var(--color-text-medium);
  text-decoration:none;
}

.ls-servicio-card:hover{text-decoration:none;}

.ls-servicio-content{
  font-size: 16px;
  line-height: 24px;
  color:var(--color-text-muted);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* ================================================
   NAVEGACIÓN DEL SWIPER SERVICIOS
   ================================================ */
.ls-servicios-nav{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.swiper-navigation-servicios{display:flex;}

.swiper-button-prev-servicios,
.swiper-button-next-servicios{
  position:relative;
  width:44px;
  height:44px;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

.swiper-button-prev-servicios::after,
.swiper-button-next-servicios::after{
  font-size:14px;
  font-weight:600;
  color:var(--color-black);
}

.swiper-button-prev-servicios:hover::after,
.swiper-button-next-servicios:hover::after{color:var(--color-accent);}

.swiper-custom-slider{width:auto!important;}

/* ================================================
   NAVEGACIÓN DEL SWIPER RECOMENDACIONES
   ================================================ */
.swiper-recomendaciones .ls-recomendacion-content img{
  width:100%;
  height:172px;
  object-fit:cover;
  border-radius:var(--radius-md);
  max-width:100%;
  min-width:100%;
}

.swiper-recomendaciones .ls-recomendacion-content .ls-recomendacion-title{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-sm);
  font-weight:500;
  color:var(--color-black);
  text-align:center;
}

.swiper-recomendaciones .swiper-pagination{
  position:relative;
  margin-top:var(--spacing-sm);
  bottom:auto!important;
  left:auto;
  top:auto;
}

.swiper-recomendaciones .swiper-pagination .swiper-pagination-bullet{
  background:var(--color-pagination-default);
}

.swiper-pagination-bullet{
  width:8px!important;
  height:8px!important;
}

.swiper-recomendaciones .swiper-pagination .swiper-pagination-bullet-active{
  background:var(--color-secondary);
}

.ls-recomendacion-card:hover{text-decoration:none;}
.ls-recomend .ls-titles{margin-bottom:var(--spacing-sm);}

/* === checkbox newsletter – superficie 44×44 ================================= */
.form-checkbox{
  display:flex;
  align-items:flex-start;
  flex-direction: column;
  gap:8px;
}

.form-checkbox label{
  cursor:pointer;
  display:inline-block;
  padding:10px 0;
  min-height:44px;
  line-height:var(--line-height-sm);
}

.form-checkbox-input{
  margin-top:2px;
  accent-color:var(--color-secondary);
}


/* ================================================
   RESPONSIVE DESIGN
   ================================================ */
@media (max-width:1189px){
  .ls-first-block{flex-direction:column;gap:0;}
  .ls-first-block .ls-recomend{flex:auto;}
  .ls-secondary-block{flex-direction:column;gap:0;}
}

@media (max-width:768px){
  .ls-posts{display:none;}
  .ls-grid{padding:var(--spacing-sm);}
  .ls-blog-nav{margin-bottom:var(--spacing-sm);}
  .swiper-recomendaciones .ls-recomendacion-content img{width:100%;}
  .swiper-recomendaciones .swiper-slide{width:187px!important;}
  .content-middle .ls-titles{
    font-size:var(--font-size-md);
    line-height:var(--line-height-md);
    font-weight:var(--font-weight-semibold);
  }
  .ls-blog-list img{width:100%;}
  .ls-blog-card{flex-direction:column;}
  .ls-subtitle,
  .ls-servicio-title{font-size:18px;line-height:28px;}
  .ls-servicio-content{font-size:16px;line-height:24px;}
  .ls-newsletter .ls-newsletter-form .ls-newsletter-content .form-checkbox{text-align:left;}
  .ls-blog-readmore{
    display:block;
    width:132px;
    margin:var(--spacing-sm) auto 0;
    text-align:center;
  }
  .ls-newsletter{
    text-align:center;
    padding:var(--spacing-lg) var(--spacing-sm);
  }
  .ls-newsletter .ls-newsletter-form{gap:10px;}
}