/* =========================================================
   FUENTES
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* =========================================================
   VARIABLES
========================================================= */
:root {
  --dark: #000;
  --light: #f4f4f4;
  --text: #222;
  --gris1: #f6f4f1;
  --verde1: #16a490;
}

/* =========================================================
   UTILIDADES
========================================================= */
.bg_verde1 { background-color: var(--verde1) !important; }
.bg_gris1  { background-color: var(--gris1) !important; }
.color_verde1 { color: var(--verde1) !important; }

._blanco {
  filter: brightness(0) invert(1);
}

/* =========================================================
   BASE
========================================================= */
body {
  font-family: 'Raleway', sans-serif;
  color: var(--text);
  text-align: center;
  margin: 0;
}

/* =========================================================
   HERO
========================================================= */
#hero {
  min-height: 100vh;
  background: url('../img/hero.avif') center/cover no-repeat;
  display: flex;
  align-items: flex-start;
  padding-top: 10vh;
}

#hero .container {
  color: white;
}

#hero div {
  font-size: clamp(2rem, 4vw, 3rem);
}

#hero_text_sm { display: none; }
/* #hero_text_lg { display: block; } */

@media (max-width: 768px) {
  #hero_text_sm { display: block; }
  #hero_text_lg { display: none; }
}
/* =========================================================
   TIRA
========================================================= */
.tira {
  background: url('../img/tira.avif') center/cover no-repeat;
  min-height: 200px;
}

.tira div {
  font-size: clamp(2.9rem, 4.9vw, 3.9rem);
  padding-top: 50px;
  color: #000;
}

#tira_lg { display: block; }
#tira_sm { display: none; }

@media (max-width: 768px) {

  #tira_lg { display: none; }
  #tira_sm { display: block; }

  .tira {
    min-height: 150px;
  }

  .tira div {
    font-size: clamp(2.0rem, 4.0vw, 3.0rem);
    padding-top: 35px;
    color: #000;
    line-height: 1.1em;
  }

  
}
/* =========================================================
   PRESENTACIÓN
========================================================= */
.presentacion {
  background: url('../img/maru_nena.avif') center/cover no-repeat;
  min-height: 90vh;
  text-align: left;
  color: white;
  padding-bottom:50px;
}

.presentacion div {
  padding: 20px 0 0 50px;
  font-size: 1.2rem;
}

@media (max-width: 768px) {

  .presentacion {
    background-image: url('../img/maru_nena_2.avif');

    /* que llene el bloque */
    background-size: cover;

    /* recorte lateral, no vertical */
    background-position: center center;

    /* darle más presencia */
    min-height: 90vh;
  }

  .presentacion div {
    padding: 10px 10px 0px;
    text-align: left;
  }
}



/* =========================================================
   MÉTODO
========================================================= */
.metodo {
  background: url('../img/fondo_metodo_verde.jpg') center/cover no-repeat;
  min-height: 486px;
  color: white;
}

.metodo .container {
  max-width: 900px;
  padding-top: 70px;
  padding-bottom: 50px;
}

.metodo .row {
  margin-top: 70px;
}

.metodo .item {
  min-height: 200px;
}

/* ******************************** */
.cuatro_momentos_sm {
  display: none;
}

@media (max-width: 600px) {

  .cuatro_momentos_sm { display: block;}
  .cuatro_momentos_lg { display: none;}
}
/* =========================================================
   TARJETAS
========================================================= */
.card1 {
  /* max-width: 298px; */
  max-width: 350px;
  background-color: var(--verde1);
  color: white;
  margin: auto auto 30px;
}

.card2 {
  max-width: 530px;
  border-radius: 10px;
  background-color: #eee;
  margin: auto auto 20px;
  padding: 25px 10px;
  text-align: left;
}

/* =========================================================
   ETAPAS
========================================================= */
.etapas {
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    url('../img/fondo_etapas.avif') center/cover no-repeat;
  padding-top: 40px;
  padding-bottom: 70px;
}

/* =========================================================
   NOSOTRAS
========================================================= */
.nosotras {
  background:
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    url('../img/fondo_nosotras.avif') center/cover no-repeat;
  padding-top: 100px;
  padding-bottom: 60px;
}

.nosotras img.rounded-circle {
  width: 70px;
  height: 70px;
}

/* =========================================================
   CONTACTO
========================================================= */
.contacto {
  background:
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
    url('../img/fondo_contacto.avif') center/cover no-repeat;
  color: white;
  padding: 1.5rem 0;
}

.contacto .redes {
  max-width: 250px;
}

/* =========================================================
   CAROUSEL IMÁGENES
========================================================= */
.img_carousel,
.img_carousel2 {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: filter .3s ease;
}

.img_carousel { max-height: 600px; }
.img_carousel2 { max-height: 300px; }

.img_carousel:hover,
.img_carousel2:hover {
  filter: grayscale(100%);
}

/* =========================================================
   SLICK CAROUSEL
========================================================= */
.variable-width {
  position: relative;
}

.slick-prev::before,
.slick-next::before {
  content: none !important;
}

/* flechas compartidas (slick + modal) */
.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  width: 60px !important;
  height: 60px !important;

  min-width: 60px;
  min-height: 60px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.466) !important;
  border: none !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 0;
  cursor: pointer;

  outline: none;
}

.variable-width .slick-prev {
  left: clamp(10px, 2vw, 30px);
}

.variable-width .slick-next {
  right: clamp(10px, 2vw, 30px);
}

/* chevrons */
.chevron {
  width: 16px;
  height: 16px;
  border-right: 3px solid #333;
  border-bottom: 3px solid #333;
  display: block;
}

.chevron-left {
  transform: rotate(135deg);
  margin-left: 6px;
}

.chevron-right {
  transform: rotate(-45deg);
  margin-right: 6px;
}

/* =========================================================
   MARQUEE
========================================================= */
.banner-marquee {
  width: 100%;
  overflow: hidden;
  background: var(--gris1);
}

.marquee-content {
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-track-left {
  animation: marquee-left 18s linear infinite;
}

.marquee-track-right {
  animation: marquee-right 18s linear infinite;
}

.marquee-track span {
  white-space: nowrap;
  font-size: 2.1rem;
  line-height: 2.1rem;
  color: #000;
}

.chevron_marquee {
  max-height: 28px;
  margin: 0 10px;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* =========================================================
   REDES
========================================================= */
.icono_redes {
  cursor: pointer;
  opacity: 0.85;
  transition: transform .25s ease, opacity .25s ease;
}

.icono_redes:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* =========================================================
   MODAL GALERÍA
========================================================= */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(14px);
  touch-action: pan-y;
}

.gallery-modal img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .35s ease;
}

.gallery-modal img.fade-out {
  opacity: 0;
}

.gallery-close {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;

  background: rgba(255,255,255,0.9);
  font-size: 22px;
  cursor: pointer;
}

.gallery-modal .gallery-prev {
  left: clamp(12px, 3vw, 30px);
}

.gallery-modal .gallery-next {
  right: clamp(12px, 3vw, 30px);
}

@media (max-width: 768px) {
  .gallery-modal .custom-arrow {
    display: none;
  }

  .gallery-modal img {
    max-width: 94vw;
    max-height: 85vh;
  }
}


/* *************************************** */
.dw{
  color:#666; 
  font-size:0.7rem;
}

.dw:hover{
  color:#ffffff; 
}
/* *************************************** */


a:link {color: white;}
a:link {color: inherit;}
a:visited {color: inherit;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

/* a:hover{color: var(--azul) !important;} */

.cp{cursor:pointer}
.ca{cursor:default}