.tile .paragraph .field--name-field-d-main-title{
  font-size:1.8rem;
}
.col-sm-2{
  height:240px;
}
/* Restablecimiento y dimensiones base */
.slick-next.slick-arrow {
  position: absolute;
  top: 50%;
  right: 15px; /* Separación del borde derecho */
  transform: translateY(-50%);
  
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Fondo elegante con blur/cristal */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Ocultar el texto "Next" manteniendo accesibilidad */
  font-size: 0;
  color: transparent;
  
  cursor: pointer;
  outline: none;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Centrado flex para el icono */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dibujar la flecha mediante borde de pseudo-elemento */
.slick-next.slick-arrow::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  
  /* Crea una flecha apuntando a la derecha */
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
  
  /* Ajuste óptico de centrado */
  margin-left: -3px; 
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Efectos al pasar el cursor (Hover) */
.slick-next.slick-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slick-next.slick-arrow:hover::after {
  border-top-color: #111111;
  border-right-color: #111111;
  transform: rotate(45deg) translateX(2px); /* Pequeño micro-movimiento a la derecha */
}

/* Estado al presionar (Active) */
.slick-next.slick-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* 1. Estilos compartidos para ambos botones (Prev y Next) */
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Fondo estilo cristal (Glassmorphism) */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Ocultar el texto manteniendo accesibilidad */
  font-size: 0;
  color: transparent;
  
  cursor: pointer;
  outline: none;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pseudo-elemento base para ambas flechas */
.slick-prev.slick-arrow::after,
.slick-next.slick-arrow::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Hover y Active compartidos */
.slick-prev.slick-arrow:hover,
.slick-next.slick-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slick-prev.slick-arrow:hover::after,
.slick-next.slick-arrow:hover::after {
  border-top-color: #111111;
  border-right-color: #111111;
}

.slick-prev.slick-arrow:active,
.slick-next.slick-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* State Disabled (Slick slider deshabilita botones al llegar al final si infinite: false) */
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}


/* 2. Especificidades para PREVIOUS */
.slick-prev.slick-arrow {
  left: 15px; /* Posición en el borde izquierdo */
}

.slick-prev.slick-arrow::after {
  /* Apunta hacia la izquierda */
  transform: rotate(-135deg);
  margin-right: -3px; /* Ajuste óptico de centrado */
}

.slick-prev.slick-arrow:hover::after {
  /* Micro-movimiento a la izquierda en hover */
  transform: rotate(-135deg) translateX(2px);
}


/* 3. Especificidades para NEXT */
.slick-next.slick-arrow {
  right: 15px; /* Posición en el borde derecho */
}

.slick-next.slick-arrow::after {
  /* Apunta hacia la derecha */
  transform: rotate(45deg);
  margin-left: -3px;
}

.slick-next.slick-arrow:hover::after {
  /* Micro-movimiento a la derecha en hover */
  transform: rotate(45deg) translateX(2px);
}

.media--view-mode-carousel-item {
    display: block !important;
    text-align: center;
    margin: 0 auto;
}

.path-frontpage .container{
	margin:0;
	padding:0;
}
.wrapper-d_p_side_by_side .item-2 {
    background-color: #0d558c;
    color: #FFFFFF;
    z-index: 0;
}
.wrapper-d_p_side_by_side .item-1 {
    background-color: #DFDFDF;
    z-index: 0;
}
#paragraph-d_p_carousel-20 > .paragraph.d-p-carousel {
	padding: 20px 0;
}
#paragraph-d_p_group_of_text_blocks-29 .d-p-group-of-text-blocks-header-wrapper > .field{
        padding: 0px 20px;
}
#paragraph-d_p_single_text_block-417 .clearfix.paragraph.d-p-text-block.paragraph--type--d-p-single-text-block.paragraph--view-mode--default {
	margin-left: -4em;
	width: 88%;
	position: absolute;
	bottom: -0.89em;
}
main.page-content{
    margin-top:0;
    margin-bottom:0;
}
main #block-claro-content{
padding:0 !important;
}
.content-header{
    margin-bottom:0;
}
#block-bottomfootermenu{
width:30%;
margin:0;
}















/* ===================================================
   Responsive Fix para Paragraph Side-by-Side (Drupal)
   =================================================== */

/* 1. Comportamiento en Móviles (Mobile-First): Forzar apilamiento */
.field--name-field-d-p-sbs-items.items-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem;
  width: 100%;
}

/* Cancelar el ancho del col-sm-6 en pantallas pequeñas */
.field--name-field-d-p-sbs-items > .list-item-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 15px;
  padding-right: 15px;
  height:stretch;
}

/* Ajuste fluido para la imagen dentro del contenedor de Drupal */
.field--name-field-d-p-sbs-items .media--type-d-image picture img,
.field--name-field-d-p-sbs-items .d-media-background-wrapper img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

/* Estilizado responsivo para bloques de texto/cita */
.field--name-field-d-p-sbs-items .field--name-field-d-long-text blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #0056b3;
  background-color: #f8f9fa;
}


/* 2. Pantallas Medianas y Grandes (Tablets/Escritorio: >= 768px) */
@media (min-width: 768px) {
  .field--name-field-d-p-sbs-items.items-wrapper {
    flex-direction: row !important;
    align-items: center; /* Alinea verticalmente texto e imagen */
    gap: 0;
  }

  /* Restaurar el comportamiento de 2 columnas al 50% */
  .field--name-field-d-p-sbs-items > .list-item-wrapper {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* Control de altura para la imagen en escritorio */
  .field--name-field-d-p-sbs-items .d-media-background-wrapper img {
    max-height: 480px;
  }
}