/*
 * Evomarca V1.0 — estilos-dyo.css
 * Landing especial Solución DYO 360° (estructura distinta a categorías).
 * Orientación: mockup MOCKUP-WEB-EVOMARCA-2025-DYO.
 */

@import url("estilos-categoria.css");
@import url("estilos-faq.css");

#dyo-business,
#dyo-marketing,
#dyo-ia,
#preguntas-frecuentes,
#asesoramiento-final {
  scroll-margin-top: 90px;
}

/* —— Migas DYO —— */
.dyo-migas {
  background: var(--color-arena-100);
  text-align: center;
  padding: 10px 0;
  width: 100%;
}

.dyo-migas p {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-principal);
}

/* —— Hero / banner principal DYO —— */
.dyo-hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: var(--color-principal-900);
  line-height: 0;
  box-sizing: border-box;
}

.dyo-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* —— Intro: ancho completo del contenedor (márgenes de la web) —— */
.dyo-intro {
  text-align: left;
  padding-block: 36px 28px;
}

.dyo-intro h1 {
  color: var(--color-principal);
  margin: 0 0 16px;
  max-width: none;
  width: 100%;
}

.dyo-intro > .texto-cuerpo {
  margin: 0;
  max-width: none;
  width: 100%;
}

.dyo-intro__duo {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  text-align: left;
}

@media (min-width: 768px) {
  .dyo-intro__duo {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.dyo-intro__bloque {
  background: var(--color-fondo-suave);
  padding: 20px 22px;
  transition: transform 0.4s var(--easing), box-shadow 0.4s var(--easing);
}

.dyo-intro__bloque.es-visible:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(1, 94, 126, 0.08);
}

.dyo-intro__bloque h2 {
  color: var(--color-principal);
  font-size: 1.0625rem;
  margin: 0 0 10px;
}

.dyo-intro__bloque p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-gris-700);
}

/* —— Visual camaleón —— */
.dyo-visual {
  margin: 0;
  padding-block: 4px 10px;
  text-align: center;
}

.dyo-visual img {
  width: min(100%, 720px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  display: inline-block;
  transition: transform 0.6s var(--easing), filter 0.6s var(--easing);
}

.dyo-visual.es-visible img {
  animation: dyo-visual-entrada 0.9s var(--easing) both;
}

.dyo-visual.es-visible:hover img {
  transform: scale(1.02);
  filter: saturate(1.05);
}

@keyframes dyo-visual-entrada {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* —— Beneficios estratégicos —— */
.dyo-estrategicos {
  text-align: center;
  padding-block: 28px 36px;
}

.dyo-estrategicos h2 {
  color: var(--color-principal);
  margin-bottom: 6px;
}

.dyo-estrategicos__lead {
  margin: 0 auto 28px;
  max-width: none;
  width: 100%;
  color: var(--color-gris-700);
  font-size: 0.9375rem;
}

.dyo-estrategicos__grid {
  display: grid;
  gap: 28px;
  margin-bottom: 36px;
}

@media (min-width: 768px) {
  .dyo-estrategicos__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.dyo-estrategico {
  text-align: center;
}

.dyo-estrategico__icono {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-principal);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
}

.dyo-estrategico__icono.icono-valor {
  width: 64px;
  height: 64px;
}

.dyo-estrategico.es-visible .dyo-estrategico__icono {
  animation: dyo-icono-entrada 0.7s var(--easing) both;
}

.dyo-estrategico:nth-child(2).es-visible .dyo-estrategico__icono {
  animation-delay: 0.12s;
}

.dyo-estrategico:nth-child(3).es-visible .dyo-estrategico__icono {
  animation-delay: 0.24s;
}

@keyframes dyo-icono-entrada {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dyo-estrategico h3 {
  margin: 0 auto;
  max-width: 16ch;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-principal);
  line-height: 1.35;
}

/* Lema: una sola línea + escritura letra a letra */
.dyo-lema {
  margin: 0;
  min-height: 1.6em;
  font-size: clamp(0.7rem, 1.8vw, 1.25rem);
  font-weight: 700;
  color: var(--color-principal);
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
  text-align: center;
  display: block;
  border-right: 2px solid transparent;
}

.dyo-lema.es-escribiendo {
  border-right-color: var(--color-principal);
  animation: dyo-cursor 0.8s step-end infinite;
}

@keyframes dyo-cursor {
  50% {
    border-right-color: transparent;
  }
}

/* —— Para ti / Consigues —— */
.dyo-doble {
  background: var(--color-fondo-suave);
  padding-block: 36px;
  width: 100%;
}

.dyo-doble__grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .dyo-doble__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

.dyo-doble h2 {
  color: var(--color-principal);
  font-size: 1.25rem;
  margin: 0 0 16px;
}

.dyo-lista-num {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dyo-n;
}

.dyo-lista-num li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-gris-700);
  counter-increment: dyo-n;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s var(--easing),
    transform 0.45s var(--easing);
}

.dyo-doble.es-visible .dyo-lista-num li {
  opacity: 1;
  transform: translateX(0);
}

.dyo-doble.es-visible .dyo-lista-num li:nth-child(1) { transition-delay: 0.05s; }
.dyo-doble.es-visible .dyo-lista-num li:nth-child(2) { transition-delay: 0.1s; }
.dyo-doble.es-visible .dyo-lista-num li:nth-child(3) { transition-delay: 0.15s; }
.dyo-doble.es-visible .dyo-lista-num li:nth-child(4) { transition-delay: 0.2s; }
.dyo-doble.es-visible .dyo-lista-num li:nth-child(5) { transition-delay: 0.25s; }
.dyo-doble.es-visible .dyo-lista-num li:nth-child(6) { transition-delay: 0.3s; }

.dyo-lista-num li::before {
  content: counter(dyo-n);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-principal);
  color: var(--color-blanco);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* —— Dos soluciones —— */
.dyo-soluciones {
  padding-block: 40px 20px;
  text-align: center;
}

.dyo-soluciones > h2 {
  color: var(--color-principal);
  margin: 0 0 32px;
  max-width: none;
  width: 100%;
}

.dyo-solucion {
  display: grid;
  gap: 20px;
  text-align: left;
  margin-bottom: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .dyo-solucion {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .dyo-solucion--invertido .dyo-solucion__texto {
    order: 2;
  }

  .dyo-solucion--invertido .dyo-solucion__media {
    order: 1;
  }
}

.dyo-solucion__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-principal-900);
}

.dyo-solucion__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--easing);
}

.dyo-solucion:hover .dyo-solucion__media img {
  transform: scale(1.04);
}

.dyo-solucion h3 {
  color: var(--color-principal);
  font-size: 1.375rem;
  margin: 0 0 12px;
}

.dyo-solucion .texto-cuerpo {
  margin-bottom: 14px;
}

.dyo-solucion ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--color-gris-700);
  font-size: 0.875rem;
}

.dyo-solucion li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.dyo-solucion li::marker {
  color: var(--color-principal);
}

/* —— Beneficios reales: 2 columnas + checks —— */
.dyo-beneficios-titulo {
  background: var(--color-principal);
  color: var(--color-blanco);
  text-align: center;
  padding: 14px 20px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.dyo-beneficios-titulo h2 {
  margin: 0;
  color: var(--color-blanco);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

.dyo-beneficios {
  display: grid;
  gap: 0 28px;
  padding-block: 32px 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dyo-beneficios {
    grid-template-columns: 1fr 1fr;
  }
}

.dyo-beneficio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gris-100);
  align-items: start;
}

.dyo-beneficio__check {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.2em;
  position: relative;
}

.dyo-beneficio__check::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.15rem;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2.5px solid var(--color-principal);
  border-bottom: 2.5px solid var(--color-principal);
  transform: rotate(-45deg) scale(0.5);
  opacity: 0;
  transition:
    opacity 0.35s var(--easing),
    transform 0.35s var(--easing);
}

.dyo-beneficios.es-visible .dyo-beneficio.es-visible .dyo-beneficio__check::before,
.dyo-beneficio.es-visible .dyo-beneficio__check::before {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.dyo-beneficio h3 {
  margin: 0 0 4px;
  color: var(--color-principal);
  font-size: 1rem;
}

.dyo-beneficio p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-gris-700);
  line-height: 1.45;
}

/* Captación en página DYO */
.pagina-dyo .captacion-categoria {
  padding-block: 12px;
}

.pagina-dyo .captacion-categoria__texto {
  font-size: clamp(0.6875rem, 1.1vw, 0.875rem);
  white-space: nowrap;
  max-width: none;
}

.pagina-dyo #asesoramiento-final {
  margin-top: 8px;
  margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .dyo-hero::after,
  .dyo-visual img,
  .dyo-estrategico__icono,
  .dyo-lema.es-escribiendo,
  .dyo-lista-num li,
  .dyo-solucion__media img,
  .dyo-beneficio__check::before {
    animation: none !important;
    transition: none !important;
  }

  .dyo-lista-num li {
    opacity: 1;
    transform: none;
  }

  .dyo-beneficio__check::before {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }

  .dyo-solucion:hover .dyo-solucion__media img,
  .dyo-visual.es-visible:hover img,
  .dyo-intro__bloque.es-visible:hover {
    transform: none;
  }
}