@charset "UTF-8";

/* ==================================================
   DISEÑO WEB
   Estilos específicos de la página
================================================== */


/* ==================================================
   HERO
================================================== */

.dw-hero .comp-hero__fondo {background: linear-gradient(115deg,#260018 0%,#610045 30%,#c00087 65%,#720052 100%);}
.dw-hero .comp-eyebrow,
.dw-hero .comp-hero__texto > p:not(.comp-eyebrow) {
   color: #fff;
}

.dw-hero h1 {
   display: inline;
   color: #fff;
   background: linear-gradient( 90deg,#ffffff 0%,#ffffff 28%,#e9a0d2 65%, #d2269d 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.dw-hero .punto-bote {
   display: inline-block;
   width: 13px;
   height: 13px;
   margin-left: 7px;
   border-radius: 50%;
   background: #ffd400;
   -webkit-text-fill-color: #ffd400;
   vertical-align: baseline;
   animation: dw-punto-bote 1.8s ease-in-out infinite;
}

@keyframes dw-punto-bote {
   0%, 100% { transform: translateY(0); }
   45% { transform: translateY(-10px); }
   65% { transform: translateY(0); }
   78% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
   .dw-hero .punto-bote { animation: none; }
}


/* ==================================================
   UNA WEB PENSADA PARA TU PROYECTO
================================================== */
.dw-enfoque .comp-lista li {background: #fff0f8;}
.dw-enfoque .comp-lista li::before { background: #c00087;}


/* ==================================================
   FRASE DESTACADA
================================================== */
.dw-frase { padding: 0px 0 90px;}
.dw-frase .comp-frase__comillas,.dw-frase p { color: #c00087;}


/* ==================================================
   SOLUCIONES WEB
================================================== */

.dw-soluciones { background: #f7f8fb;padding:80px 0 110px;}


/* ==================================================
   QUÉ CUIDAMOS
================================================== */

.dw-calidad { background: #fff; padding:80px 0 110px!important;}


/* ==================================================
   ACOMPAÑAMIENTO
================================================== */

.dw-acompanamiento { background: #fff8fc;}
.dw-acompanamiento .comp-kicker { color: #c00087;}
.dw-acompanamiento img {max-width: 450px;}

@media (max-width: 1200px) {
   .dw-hero .comp-hero__texto { max-width: 620px;}
   .dw-hero .comp-hero__texto > p:not(.comp-eyebrow) { max-width: 600px;}

}

.comp-info-grid__icono { width: 75%;}

/* Hero diseño web: texto a la izquierda, imagen a la derecha */

@media (min-width: 801px) {

   .dw-hero .comp-hero__inner { grid-template-columns: 1fr minmax(360px, 40%); }

   .dw-hero .comp-hero__texto {
      order: 1;
      width: auto;
      max-width: 650px;
      padding-left: clamp(45px, 5.5vw, 85px);
      padding-right: 30px;
      transform: translateY(-45px);
   }

   .dw-hero .comp-hero__imagen {
      order: 2;
      align-self: center;
      margin-left: 0;
      margin-right: 4%;
      transform: translateY(48px);
   }

   .dw-hero .comp-hero__imagen img {  width: min(460px, 92%); }
}