/* Tipografía Gotham y variables :root: ver public/tokens.css */

body {
  font-family: var(--font-gotham);
}

/* Estilos del header: ver global.css */

/* Inicio */
/* Cards */
/* ============================================
     CARD: contenedor del vidrio
     ============================================ */
.card {
  position: relative;
  width: 330px;
  aspect-ratio: 330 / 115;
  background: transparent;
  isolation: isolate;
}

.card {
  margin-left: -70px;
}

.card__glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Toque de vidrio: blanco muy suave */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  /* El efecto borroso real */
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  /* Borde interior luminoso estilo glassmorphism */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 115' preserveAspectRatio='none'><path d='M97.8181 8.35106C102.377 3.04952 109.022 0 116.015 0H299.528C312.171 0 322.646 9.80777 323.476 22.4232L330 121.5H0L40.5 75L97.8181 8.35106Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 115' preserveAspectRatio='none'><path d='M97.8181 8.35106C102.377 3.04952 109.022 0 116.015 0H299.528C312.171 0 322.646 9.80777 323.476 22.4232L330 121.5H0L40.5 75L97.8181 8.35106Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  box-shadow:
    inset -6px -2px 10px 0px rgb(253 253 253 / 14%),
    inset -9px -1px 15px rgb(255 255 255 / 29%);
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.card.active .card__glass {
  background: #ffffff;
}

.card.active {
  z-index: 3;
}

.card.card-2 {
  z-index: 2;
}

.card__glass-outline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 115' preserveAspectRatio='none'><path d='M97.8181 8.35106C102.377 3.04952 109.022 0 116.015 0H299.528C312.171 0 322.646 9.80777 323.476 22.4232L330 121.5H0L40.5 75L97.8181 8.35106Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 115' preserveAspectRatio='none'><path d='M97.8181 8.35106C102.377 3.04952 109.022 0 116.015 0H299.528C312.171 0 322.646 9.80777 323.476 22.4232L330 121.5H0L40.5 75L97.8181 8.35106Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ============================================
     CONTENIDO
     ============================================ */
.card__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 46px 0 120px;
}

.card.card-3 .card__content,
.card.card-2 .card__content {
  padding-left: 95px;
  padding-top: 10px;
}

.card__icon_item {
  display: flex;
  gap: 5px;
  align-items: center;
}

.card__icon_item svg {
  fill: #fff;
}

.card.active .card__subtitle_2,
.card.active .card__icon_item {
  color: var(--color-navy);
}

.card.active .card__icon_item svg {
  fill: var(--color-navy);
}

.mk-phone {
  position: absolute;
  z-index: 4;
  left: -6px;
  top: 40%;
  width: 115px;
  height: auto;
  transform: translateY(-50%) rotate(-3deg);
  transform-origin: center;
  pointer-events: none;
}

/* Bloque de texto en la zona blanca */
.card__body_descripcion {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.3px;
  line-height: 1.05;
  text-transform: uppercase;
}

.card__subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--color-white);
  margin-top: 6px;
  line-height: 1.15;
}

.card.active .card__subtitle,
.card.active .card__title {
  color: var(--color-navy);
}

/* Flecha */
.card__arrow {
  position: absolute;
  top: 16px;
  right: 22px;
  width: 30px;
  height: 30px;
  color: var(--color-white);
  z-index: 4;
  transition: transform 0.25s ease;
  cursor: pointer;
}

.card.active .card__arrow {
  color: var(--color-navy);
}

.card:hover .card__arrow {
  transform: translate(3px, -3px);
}

.card__icon_social {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  font-size: 15px;
  margin-top: 8px;
}

.sec-1-body {
  display: flex;
  flex-direction: column;
}

/* Zona del titular + logo: ocupa el espacio superior disponible */
.sec-1-text-principal {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: clamp(70px, 12vh, 130px);
}

.sec-1-btn-descripcion {
  position: relative;
  flex: 0 0 auto;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: clamp(45px, 20vh, 45px);
}

.sec-1-content-abosulte {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero-headline {
  position: relative;
  width: 100%;
  /* max-width: 900px; */
  isolation: isolate;
}

/* Logo TV: absoluto y al frente del titular */
.mk-hero-mark {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: clamp(360px, 46%, 580px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.95;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

h1.hero-title {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  font-family: var(--font-gotham);
  font-size: clamp(44px, 5.6vw, 102px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  mix-blend-mode: difference;
}

.hero-title__line {
  display: block;
  white-space: nowrap;
}

/*  1 izquierda, 2 derecha, 3 un poco a la izquierda */
span.hero-title__line.hero-title__line--1 {
  text-align: left;
}

span.hero-title__line.hero-title__line--2 {
  text-align: right;
}

span.hero-title__line.hero-title__line--3 {
  text-align: left;
  padding-left: clamp(30px, 6vw, 75px);
  margin-top: 30px;
}

p.hero-copy {
  margin: 0;
  font-family: var(--font-gotham);
  font-weight: 400;
  line-height: 1.25;
  font-size: clamp(18px, 1.7vw, 26px);
  color: var(--color-white);
}

.hero-actions {
  margin-top: 44px;
  display: flex;
  gap: 20px;
}

.btn-transparent {
  background-color: transparent;
  color: var(--color-white);
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.825rem 1.5rem;
  border-radius: var(--btn-border-radius);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  backdrop-filter: blur(12px);
  gap: 20px;
  -webkit-backdrop-filter: blur(12px);
}

.btn-transparent:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Seccion 2 - Pregunta */
#por-q-ecuavisa {
  position: relative;
  min-height: calc(75vh - 200px);
  padding: 74px 24px 88px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #061b4d 0%, #064181 53%, #087fca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.pq-ec-title {
  font-weight: 800;
  font-size: 1em;
}

.pq-ec-details {
  font-size: 55px;
  padding-bottom: 55px;
}

.pq-ec-sub-title {
  font-size: 0.6em;
  font-weight: 700;
  color: var(--color-cyan);
}

.pq-ec-descripcion {
  font-size: 0.4em;
  line-height: 1.2;
  margin-top: 20px;
  max-width: 950px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bg-azul-ec {
  height: 100%;
}

/* Boton de flecha hacia abajo (Seccion 2 - Pregunta) */
.pq-ec-button {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  bottom: -15%;
}

.btn-flecha-down {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-flecha-down:hover {
  transform: translateY(4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.btn-flecha-down svg {
  width: 24px;
  height: 24px;
}

/* Seccion 3 - conectar marcas */
.cm-ecuavisa-details .pq-ec-title {
  color: var(--color-navy);
  line-height: 1.2;
  text-align: center;
}

.cm-ecuavisa-details .pq-ec-sub-title {
  color: var(--color-blue);
  text-align: center;
  line-height: 1.2;
  margin-top: 45px;
}

.bg-azul-gradient-ec {
  padding: 74px 24px 88px;
  overflow: hidden;
  background: #d1e2f2;
  background: linear-gradient(
    0deg,
    rgba(209, 226, 242, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 24px;
}

#conectar-marcas-ecuavisa .bg-azul-gradient-ec {
    padding-bottom: 20px;
}

.cm-ecuavisa-data {
  position: relative;
  margin-top: 45px;
}

.tv-stage {
  position: relative;
  width: min(100%, 830px);
  margin: 0 auto;
}

.tv-stage > img {
  display: block;
  width: 100%;
}

/* Bloques de datos: efecto vidrio + sombreado */
.tv-stat {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--color-white);
  background: linear-gradient(
    135deg,
    rgb(65 36 75 / 80%) 0%,
    rgba(5, 10, 46, 0.5) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(5, 10, 46, 0.25);
}

/* Cifra grande + unidad */
.tv-stat__figure {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-size: 38px;
}

.tv-stat .tv-count {
  font-size: 1em;
  font-weight: 800;
}

.tv-stat__figure small {
  font-size: 0.5em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Texto descriptivo a la derecha */
.tv-stat p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

/* Posiciones sobre el televisor */
.tv-stat--share {
  top: 42%;
  left: -10%;
  transform: translateY(-50%);
}

.tv-stat--years {
  top: 12%;
  right: -6%;
  background: linear-gradient(
    135deg,
    rgba(58, 91, 204, 0.25) 0%,
    rgba(5, 10, 46, 0.5) 100%
  );
}

.tv-stat--audience {
  bottom: 10%;
  right: -2%;
  background: linear-gradient(
    135deg,
    rgba(58, 91, 204, 0.25) 0%,
    rgba(5, 10, 46, 0.5) 100%
  );
}

#conectar-marcas-ecuavisa {
  background-color: #f7f7f7;
}

@media (max-width: 767px) {
  .tv-stat {
    position: static;
    transform: none;
    margin-top: 16px;
    width: 100%;
  }
}

/* Seccion 4 conocenos a quien quieres llegar */
#quien-llegar-ec {
  position: relative;
  min-height: calc(70vh - 300px);
  padding: 40px 24px 40px;
  overflow: hidden;
  text-align: center;
  background-color: #fff;
}

#quien-llegar-ec .pq-ec-title {
  color: var(--color-navy);
  line-height: 1.2;
  text-align: center;
}

#quien-llegar-ec .pq-ec-sub-title {
  color: rgba(8, 143, 231, 1);
  text-align: center;
  line-height: 1.2;
  margin-top: 0;
}

#quien-llegar-ec .pq-ec-descripcion {
  color: rgba(70, 77, 90, 1);
  font-weight: 600;
  font-size: 0.3em;
  max-width: 850px;
  margin-top: 0;
  line-height: 1.2;
}

#quien-llegar-ec .pq-ec-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

#quien-llegar-ec .pq-ec-descripcion span {
  color: rgba(8, 143, 231, 1);
}

/* Seccion 5 - Audiencias */
.bg-azul-audi-gradient-ec {
  position: relative;
  padding: 74px 24px 20px;
  overflow: hidden;
  text-align: center;
  background-image: url(assets/bg-audiencia.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0px;
}

.bg-azul-audi-gradient-ec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(209, 226, 242, 0.15) 100%
  );
}

/* El contenido queda por encima de la capa */
.bg-azul-audi-gradient-ec > * {
  position: relative;
  z-index: 1;
}

#audiencias-ecuavisa {
  background-color: #f7f7f7;
}

#audiencias-ecuavisa .pq-ec-title {
  color: var(--color-white);
  line-height: 1.2;
  text-align: center;
}

#audiencias-ecuavisa .pq-ec-sub-title {
  color: var(--color-white);
  text-align: center;
  line-height: 1.2;
  margin-top: 0;
  font-weight: 400;
  font-size: 0.5em;
}

#audiencias-ecuavisa .pq-ec-descripcion {
  color: var(--color-white);
  font-weight: 400;
  font-size: 0.4em;
  max-width: 850px;
  margin-top: 0;
  line-height: 1.2;
  margin-top: 35px;
}

#audiencias-ecuavisa .pq-ec-sub-title span {
  font-weight: 600;
}

/* Contenedor general de los bloques de datos */
.audi-ecuavisa-data {
  margin-top: 40px;
}

/* Layout escalonado tipo mosaico: Card 1 arriba-izq, Card 2 arriba-der, Card 3 abajo-centro */
.audi-ec-content-data {
  position: relative;
  max-width: 990px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  row-gap: 0;
  min-height: 475px;
}

/* Card 1 */

.audi-ec-content-data > .audi-ec-item-data:nth-child(1) {
  grid-column: 1 / span 6;
  grid-row: 1;
  max-width: 400px;
}

/* Card 2 */
.audi-ec-content-data > .audi-ec-item-data:nth-child(2) {
  grid-column: 7 / span 6;
  grid-row: 1;
  justify-self: end;
  max-width: 400px;
  margin-top: -18px;
}

/* Card 3 */
.audi-ec-content-data > .audi-ec-item-data:nth-child(3) {
  grid-column: 4 / span 7;
  grid-row: 2;
  justify-self: center;
  max-width: 480px;
  margin-top: -30px;
  bottom: 0;
  right: 8%;
}

/* Tarjeta flotante: vidrio + sombra */
.audi-ec-item-data {
  position: absolute;
  padding: 22px 18px;
  color: var(--color-white);
  background: rgba(5, 10, 46, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 38px rgba(5, 10, 46, 0.25);
  height: auto;
}

.audi-ec-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.audi-ec-body-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.audi-ec-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-white);
  text-align: left;
}

.audi-ec-title span {
  color: var(--color-cyan);
}

.audi-ec-icon {
  flex: 0 0 auto;
  opacity: 0.9;
}

.audi-ec-icon svg {
  width: 40px;
  height: 40px;
}

/* ============================================
   Card 1 - Grafico donut "Alcance por plataforma"
   ============================================ */
.audi-ec-data-grafico {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.grafico-donut {
  position: relative;
  width: 185px;
  height: 185px;
  flex: 0 0 auto;
  margin-left: -5px;
}

.grafico-donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-hole {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 5;
}

.donut-seg {
  fill: transparent;
  stroke-width: 7;
  stroke-linecap: butt;
  transition: stroke-dasharray 0.4s ease;
}

.donut-seg--tv {
  stroke: rgba(79, 69, 249, 1);
}

.donut-seg--apps {
  stroke: rgba(103, 173, 255, 1);
}

.donut-seg--redes {
  stroke: rgba(78, 200, 198, 1);
}

.donut-seg--stream {
  stroke: rgba(253, 134, 50, 1);
}

.donut-seg--radio {
  stroke: rgba(252, 79, 162, 1);
}

/* Etiqueta central del donut */
.grafico-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.grafico-donut-total {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-cyan);
}

.grafico-donut-center small {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

/* Leyenda del donut */
.grafico-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grafico-legend-item {
  display: grid;
  grid-template-columns: 50px auto auto;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

/* Nombre de plataforma como pastilla de color */
.grafico-legend-dot {
  display: none;
}

.grafico-legend-name {
  font-weight: 400;
  font-size: 8px;
  color: var(--color-white);
  text-align: center;
  padding: 2px 0;
  border-radius: 999px;
  width: 45px;
  border: 1px solid #fff;
  line-height: 1.2;
}

.grafico-legend-item:nth-child(1) .grafico-legend-name {
  background: rgba(79, 69, 249, 1);
}

.grafico-legend-item:nth-child(2) .grafico-legend-name {
  background: rgba(103, 173, 255, 1);
}

.grafico-legend-item:nth-child(3) .grafico-legend-name {
  background: rgba(78, 200, 198, 1);
}

.grafico-legend-item:nth-child(4) .grafico-legend-name {
  background: rgba(253, 134, 50, 1);
}

.grafico-legend-item:nth-child(5) .grafico-legend-name {
  background: rgba(252, 79, 162, 1);
}

.grafico-legend-pct {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
  min-width: 30px;
}

.grafico-legend-val {
  font-weight: 700;
  color: var(--color-white);
  min-width: 40px;
  text-align: right;
}

/* ============================================
   Card 2 - Comunidad en redes sociales
   ============================================ */
/* La data de comunidad se dispone en dos columnas: cifra + redes */
.audi-ec-data {
  flex: 1 1 auto;
}

.audi-ec-item-data:nth-child(2) .audi-ec-data {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.audi-ec-data-comu {
  flex: 0 0 auto;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  text-align: left;
}

.audi-ec-data-comu span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  margin-top: 2px;
}

.audi-ec-data-comu small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
  max-width: 130px;
}

.audi-ec-data-redes {
  flex: 1 1 auto;
  margin-top: 2px;
}

.audi-ec-data-redes-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.audi-ec-data-redes-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audi-ec-data-redes-item-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.audi-ec-data-redes-item-value {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
}

.audi-ec-content-data > .audi-ec-item-data:nth-child(2) .audi-ec-title span {
  color: var(--color-white);
  font-weight: 600;
}

/* ============================================
   Card 3 - Demografia en TV Lineal
   ============================================ */
.audi-ec-data-card-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Mini-tarjetas claras con texto oscuro */
.audi-ec-data-card-item {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 10px 6px;
  box-shadow: 0 6px 14px rgba(5, 10, 46, 0.18);
  width: 72px;
}

.audi-ec-data-card-item-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.audi-ec-data-card-item-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.audi-ec-data-card-item-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: rgba(70, 77, 90, 1);
}

.audi-ec-data-card-item-descripcion {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-gray);
}

.audi-ec-icon path {
  fill: #fff;
}

.audi-ec-content-data > .audi-ec-item-data:nth-child(3) .audi-ec-title {
  max-width: 120px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  /* Se apilan en una sola columna y se anulan los desfases del mosaico */
  .audi-ec-content-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 460px;
  }

  .audi-ec-content-data > .audi-ec-item-data:nth-child(1),
  .audi-ec-content-data > .audi-ec-item-data:nth-child(2),
  .audi-ec-content-data > .audi-ec-item-data:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-top: 0;
    max-width: 100%;
    width: 100%;
  }

  .bg-azul-audi-gradient-ec::before {
    background: transparent;
  }

  .bg-azul-audi-gradient-ec{
    background-position: left bottom;
  }
}

@media (max-width: 520px) {
  .audi-ec-item-data:nth-child(2) .audi-ec-data {
    flex-direction: column;
  }

  .audi-ec-data-redes-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Seccion 6 - Tenemos un plan */
#tenemos-plan-ecuavisa .bg-azul-ec {
  position: relative;
  padding: 74px 24px 88px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #061b4d 0%, #064181 53%, #087fca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

#tenemos-plan-ecuavisa .pq-ec-details {
  max-width: 650px;
  line-height: 1.2;
  color: var(--color-white);
  padding-bottom: 0px;
}

#tenemos-plan-ecuavisa .pq-ec-sub-title {
  color: var(--color-white);
  margin-top: 20px;
}

#tenemos-plan-ecuavisa .bg-azul-ec {
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 32px;
  min-height: 600px;
  display: flex;
  justify-content: flex-start;
  padding: 90px 24px 128px;
}

.container-marcas-body {
  width: 100%;
  background-color: white;
  border: 4px solid var(--color-indigo);
  border-radius: 32px;
  border-bottom: 10px solid var(--color-indigo);
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 75px;
}

.container-marcas {
  margin-top: -270px;
  z-index: 2;
  position: relative;
}

.container-marcas-details {
  color: var(--color-indigo);
  font-size: 45px;
  display: flex;
  align-items: start;
  gap: 10px;
  justify-content: center;
  margin-top: 45px;
}

.marcas-ec-title {
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.2;
  width: 75%;
}

.marcas-ec-title span {
  color: #16309a;
}

.marcas-ec-subtitle {
  line-height: 1.2;
  color: var(--color-gray);
  font-size: 0.8em;
  max-width: 450px;
}

/* Cards de soluciones para marcas: 5 en escritorio, responsive por breakpoints */
.marcas-ec-cards-content {
  margin-top: 40px;
}

.marcas-ec-items {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

/* Tarjeta individual */
.marcas-ec-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(205, 212, 243, 0.5);
  color: var(--color-indigo);
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
  min-height: 220px;
}

/* Capa de fondo azul que aparece al hover con fade de abajo hacia arriba */
.marcas-ec-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: translateY(20px);
  background: linear-gradient(180deg, #061b4d 0%, #064181 53%, #087fca 100%);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.marcas-ec-item:hover {
  color: var(--color-white);
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(6, 27, 77, 0.35);
}

.marcas-ec-item:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* Contenido por encima de la capa de fondo */
.marcas-ec-item-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  min-height: 220px;
}

.marcas-ec-item-icon {
  color: inherit;
  transition: color 0.35s ease;
}

.marcas-ec-item-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

/* El icono cambia a cian al hacer hover */
.marcas-ec-item:hover .marcas-ec-item-icon {
  color: var(--color-cyan);
}

.marcas-ec-item-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  margin-top: auto;
}

/* Descripción: oculta en reposo, aparece con fade ascendente al hover */
.marcas-ec-item-descripcion {
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  color: inherit;
  opacity: 0;
  max-height: 0;
  transform: translateY(12px);
  overflow: hidden;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    max-height 0.35s ease;
}

.marcas-ec-item:hover .marcas-ec-item-descripcion {
  opacity: 1;
  max-height: 120px;
  transform: translateY(0);
}

#tenemos-plan-ecuavisa {
  background-color: #f7f7f7;
  padding-bottom: 35px;
}

/* Responsive */
@media (max-width: 1024px) {
  .marcas-ec-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marcas-ec-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marcas-ec-item-body {
    min-height: 180px;
    padding: 22px 18px;
  }
}

@media (max-width: 400px) {
  .marcas-ec-items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Seccion 7 - Contar historia */
#contar-h-ec {
  background: white;
}

#tenemos-plan-ecuavisa {
  background-color: #f7f7f7;
  padding-bottom: 35px;
}

.bg-white-ec {
  padding-top: 45px;
  padding-bottom: 45px;
  min-height: calc(70vh - 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#contar-h-ec .pq-ec-details {
  padding-bottom: 0px;
}

#contar-h-ec .pq-ec-title {
  color: var(--color-gray);
  display: grid;
  line-height: 1.2;
  text-align: center;
  font-size: 0.9em;
}

#contar-h-ec .pq-ec-title span {
  color: var(--color-blue);
}

#contar-h-ec .pq-ec-descripcion {
  color: var(--color-indigo);
  text-align: center;
  font-weight: 700;
  font-size: 0.5em;
}

/* Seccion 8 Galeria */
.hero-container {
  margin-left: auto;
  margin-right: auto;
}

.img-2-slide.visible {
  width: clamp(125px, 40vw, 225px);
}

.title {
  font-size: clamp(28px, 3.6vw, 50px);
}

.bottom-nav {
  bottom: clamp(20px, 4vw, 28px);
}

.carousel-track {
  max-height: 500px;
  height: clamp(545px, 72vh, 740px);
}

.hero-container{
    box-shadow: none;
}

.img-2-slide.visible {
    width: clamp(125px, 40vw, 285px);
}

.img-2-slide {
    transform: translate(-5%, -50%);
}

#galeria-h-ec {
    /* background-color: red; */
    background-color: #f7f7f7;
}

/* Ajuste de colores de la galería para igualar el diseño de la imagen.
   Sobrescribe los colores del plugin (style.css externo) reutilizando el :root */
#galeria-h-ec .stats-list li {
    color: var(--color-white);
}

#galeria-h-ec .stats-list li span {
    color: var(--color-cyan);
}

#galeria-h-ec .btn-primary {
    background-color: var(--color-indigo);
}

#galeria-h-ec .btn-primary:hover {
    background-color: var(--color-indigo);
    filter: brightness(1.1);
}

.icon-btn {
    width: clamp(32px, 3.4vw, 60px);
    height: clamp(32px, 3.4vw, 60px);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overline {
    text-decoration-line: none !important;
}

.info-panel > *:not(.overline-line) {
    margin-left: 12px;
}

.info-panel h4#slide-overline {
    font-weight: 400;
}

.info-panel h1#slide-title {
    font-weight: 600;
}
/* Seccion 9 - preguntas frecuentes */
#preguntas-f-ec {
    /* background-color: red; */
    background-color: #f7f7f7;
}

.bg-green-ec {
    position: relative;
    padding: 74px 24px;
    overflow: hidden;
    border-radius: 32px;
    background-color: rgb(236 238 246);
}

/* Layout: título a la izquierda, acordeón a la derecha */
.preguntas-f-ec-content {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.pf-ec-title {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	line-height: 1.05;
	color: #3A5BCC;
}

.pf-ec-content-fq {
	width: 100%;
}

.pf-ec-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Ítem del acordeón */
.pf-ec-item-content {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 8px;
	padding: 0 0px;
}

/* Ítems ocultos hasta pulsar "Más preguntas" */
.pf-ec-item-content.pf-ec-oculto {
	display: none;
}

/* Cabecera clicable */
.pf-ec-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 16px;
	cursor: pointer;
}

.pf-ec-item-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: rgba(70, 77, 90, 1);
}

.pf-ec-item-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.pf-ec-item-icon svg {
	width: 24px;
	height: 24px;
	display: block;
	transition: transform 0.3s ease;
}

/* Al abrir, el chevron gira 180° para indicar el estado activo */
.pf-ec-item-content.active .pf-ec-icon-abrir {
	transform: rotate(180deg);
}

/* Cuerpo desplegable: oculto por defecto, animado con max-height */
.pf-ec-item-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
	opacity: 0;
}

.pf-ec-item-content.active .pf-ec-item-body {
	max-height: 320px;
	opacity: 1;
	background-color: rgb(236 238 246);
    padding: 18px;
}

.pf-ec-item-detils {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(107, 107, 107, 1);
}

/* Botón "Más preguntas" */
.pf-ec-btn-mas-fq {
	margin-top: 14px;
	padding-left: 4px;
}

.btn-link-fq {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 6px 0;
	color: #3A5BCC;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: opacity 0.2s ease;
    margin-top: 20px;
}

.btn-link-fq:hover {
	opacity: 0.75;
}

.btn-link-fq svg path {
	fill: #3A5BCC;
}

/* Oculta el botón cuando ya no quedan preguntas por mostrar */
.pf-ec-btn-mas-fq.pf-ec-oculto {
	display: none;
}

/* Responsive: una sola columna en tablet/móvil */
@media (max-width: 900px) {
	.preguntas-f-ec-content {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Seccion 10 - Formulario */
#formulario-h-ec {
    background: linear-gradient(180deg, #061b4d 0%, #064181 53%, #087fca 100%);
}

#formulario-h-ec .pq-ec-details {
    text-align: center;
    max-width: 800px;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}

#formulario-h-ec .sec-4-content {
    padding-top: 115px;
}

#formulario-h-ec .pq-ec-details {
    text-align: center;
    max-width: 600px;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}

#formulario-h-ec .sec-4-content {
    padding-top: 115px;
}

#formulario-h-ec .pq-ec-title {
    font-weight: 600;
    font-size: 0.7em;
}

#formulario-h-ec .pq-ec-descripcion {
    font-size: 0.35em;
}

.formulario-ec-title-form {
    font-size: 40px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 90px;
}

/* Formulario de contacto: campos con línea inferior y efecto de ola */
.formulario-ec-form-form {
	width: 100%;
	max-width: 620px;
	margin: 40px auto 0;
}

.formulario-ec-form-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 18px;
}

.form-ec-field {
	position: relative;
	padding-top: 22px;
}

.form-ec-input {
	display: block;
	width: 100%;
	padding: 8px 0 10px;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--color-white);
	font-family: var(--font-gotham);
	font-size: 16px;
}

.form-ec-textarea {
	resize: none;
}

/* Floating label: parte como placeholder sobre el campo */
.form-ec-label {
	position: absolute;
	left: 0;
	top: 30px;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.25s ease, color 0.25s ease;
}

/* Al enfocar o cuando el campo tiene texto, el label sube y se reduce de forma suave */
.form-ec-input:focus ~ .form-ec-label,
.form-ec-input:not(:placeholder-shown) ~ .form-ec-label {
	transform: translateY(-30px) scale(0.82);
	color: var(--color-white);
}

/* El placeholder real (espacio) queda oculto; el label hace de placeholder */
.form-ec-input::placeholder {
	color: transparent;
}

/* En el textarea el label parte a la altura de la primera línea */
.form-ec-field--textarea .form-ec-label {
	top: 30px;
}

/* Evita el fondo amarillo/blanco del autocompletado del navegador */
.form-ec-input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-white);
	transition: background-color 9999s ease-in-out 0s;
}

/* Línea inferior: un SVG muy ancho (recta + ola + recta) que se desplaza dentro de una ventana */
.form-ec-line {
	position: relative;
	display: block;
	height: 24px;
	margin-top: -18px;
	overflow: hidden;
	pointer-events: none;
}

.form-ec-line svg {
	position: absolute;
	top: 0;
	/* Reposo: la ola (x 1920-2080 del SVG) queda oculta a la derecha del campo */
	left: calc(100% - 1910px);
	transition: left 1.2s cubic-bezier(0.45, 0, 0.25, 1);
}

.form-ec-line path {
	fill: none;
	stroke: rgba(16, 212, 255, 1);
	stroke-width: 2;
	transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

/* Hover: la ola recorre el borde de derecha a izquierda; al salir vuelve de izquierda a derecha */
.form-ec-field:hover .form-ec-line svg {
	left: -2090px;
}

.form-ec-field:focus-within .form-ec-line path {
	stroke-width: 2.5;
}

/* Estado de error */
.form-ec-field.is-invalid .form-ec-line path {
	stroke: var(--color-pink-soft);
}

.form-ec-error {
	min-height: 16px;
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-pink-soft);
	text-align: left;
}

/* Botón HABLEMOS del formulario (no afecta al botón del header) */
.form-ec-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 24px;
}

.formulario-ec-form-form .form-ec-submit {
	min-width: 165px;
	justify-content: space-between;
	gap: 40px;
	padding: 14px 18px 14px 20px;
	border-radius: var(--btn-border-radius);
	border-color: var(--color-pink-soft);
	background-color: var(--color-pink-soft);
	font-size: 15px;
	letter-spacing: 0.04em;
}

.formulario-ec-form-form .form-ec-submit:hover {
	background-color: var(--color-pink-soft);
	filter: brightness(1.08);
}

.formulario-ec-form-form .form-ec-submit:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

.formulario-ec-form-form .form-ec-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Estilos del footer: ver global.css */

/* ============================================================
   RESPONSIVE GLOBAL (añadido)
   ------------------------------------------------------------
   Bloque único con los ajustes móvil/tablet de las secciones
   que NO tenían reglas responsive propias, organizados por
   sección para que sean fáciles de localizar y editar.

   - Solo aplican por debajo de cada breakpoint; el diseño de
     escritorio definido más arriba en este archivo no cambia.
   - Breakpoints del proyecto: 768px (tablet) y 480px (móvil).
   - Muchos títulos/subtítulos usan tamaños en "em" relativos al
     font-size del contenedor .pq-ec-details, así que basta con
     reducir ese tamaño base para escalar todo el bloque de forma
     proporcional.
   ============================================================ */

/* ============================================================
   TABLET - hasta 768px
   ============================================================ */
@media (max-width: 768px) {
	/* ---- Secciones de texto (2, 4, 5, 7): base tipográfica ----
	   .pq-ec-details es el contenedor cuyo font-size (55px en
	   escritorio) marca la escala de títulos y descripciones. */
	.pq-ec-details {
		font-size: 40px;
		padding-bottom: 36px;
	}

	/* Sección 2 - Pregunta: el botón-flecha flotante baja menos
	   para no solaparse con la sección siguiente en pantallas chicas. */
	.pq-ec-button {
		bottom: -10%;
	}

	.cm-ecuavisa-details .pq-ec-sub-title {
		margin-top: 24px;
	}

	/* ---- Sección 3 - Conectar marcas (televisor + datos) ----
	   Complementa el @media 767px existente: centra los bloques de
	   datos ya apilados y limita su ancho para que se lean bien. */
	.tv-stat {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}

	.tv-stat__figure {
		font-size: 32px;
	}

	/* ---- Sección 6 - Tenemos un plan (tarjeta "Soluciones") ----
	   En escritorio la tarjeta blanca se superpone al bloque azul con
	   un margen negativo grande; se reduce para móvil y se ajusta el
	   relleno lateral e inferior. */
	#tenemos-plan-ecuavisa .bg-azul-ec {
		min-height: 420px;
		padding: 64px 20px 150px;
	}

	.container-marcas {
		margin-top: -170px;
	}

	.container-marcas-body {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 48px;
	}

	/* La cabecera de la tarjeta pasa a una sola columna y centrada. */
	.container-marcas-details {
		font-size: 32px;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.marcas-ec-title {
		width: 100%;
	}

	/* ---- Sección 10 - Formulario: título a una escala más contenida ---- */
	.formulario-ec-title-form {
		font-size: 30px;
		margin-top: 56px;
	}
}

/* ============================================================
   MÓVIL - hasta 480px
   ============================================================ */
@media (max-width: 480px) {
	/* ---- Secciones de texto (2, 4, 5, 7) ---- */
	.pq-ec-details {
		font-size: 30px;
		padding-bottom: 28px;
	}

	/* Sección 2 - Pregunta: menos padding vertical para compactar. */
	#por-q-ecuavisa {
		padding: 48px 20px 60px;
	}

	.pq-ec-button {
		bottom: -8%;
	}

	/* ---- Sección 3 - Conectar marcas ---- */
	.tv-stat {
		max-width: 100%;
		padding: 12px 16px;
	}

	.tv-stat__figure {
		font-size: 28px;
	}

	/* ---- Sección 6 - Tenemos un plan ---- */
	#tenemos-plan-ecuavisa .bg-azul-ec {
		min-height: 360px;
		padding: 56px 16px 140px;
	}

	.container-marcas {
		margin-top: -150px;
	}

	.container-marcas-body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.container-marcas-details {
		font-size: 26px;
		margin-top: 28px;
	}

	/* ---- Sección 10 - Formulario ---- */
	.formulario-ec-title-form {
		font-size: 24px;
		margin-top: 40px;
	}
}

/* ============================================================
   RESPONSIVE HERO - Sección 1 (cabecera)
   ------------------------------------------------------------
   Ajustes SOLO para móvil/tablet. El escritorio no se toca.
   Se usa el ancla #inicio (la <section> del hero) para que estas
   reglas ganen a las de escritorio sin ambigüedad de cascada.
   Objetivo (ver referencia móvil): logo centrado arriba, título
   a la izquierda en varias líneas, párrafo, botones a ancho
   completo apilados y una flecha hacia abajo al final.
   ============================================================ */

/* ---------- Tablet: hasta 768px ---------- */
@media (max-width: 768px) {
  /* El hero deja de forzar el alto completo del viewport para que
     el contenido fluya en vertical sin encimarse. */
  #inicio .mk-hero {
    height: auto;
    min-height: calc(100vh - 42px);
    /* Fondo específico para móvil/tablet, basado en la imagen de
       referencia: cian-petróleo arriba-derecha, azul-violeta en la
       zona superior, un halo claro azul-grisáceo a la derecha-centro,
       magenta/fucsia en la franja media-baja y una base muy oscura
       azulada al fondo. */
    background:
      radial-gradient(60% 32% at 88% 10%, #2b7a9b 0%, transparent 60%),
      radial-gradient(55% 30% at 82% 42%, #9db4c8 0%, transparent 55%),
      radial-gradient(85% 42% at 20% 62%, #a3185c 0%, transparent 62%),
      radial-gradient(75% 40% at 50% 20%, #5b4b85 0%, transparent 60%),
      linear-gradient(170deg, #3a4e82 0%, #5b4b85 30%, #7d2b63 55%, #2a0f33 82%, #0e0a24 100%);
  }

  #inicio .sec-1-body {
    padding-bottom: 24px;
  }

  /* El contenedor del titular deja de centrar verticalmente y
     fluye de arriba hacia abajo. */
  #inicio .sec-1-text-principal {
    display: block;
    padding-top: clamp(90px, 16vh, 150px);
  }

  #inicio .sec-1-btn-descripcion {
    max-width: 100%;
    margin-top: clamp(20px, 4vh, 36px);
    padding-bottom: 24px;
  }

  #inicio .sec-1-content-abosulte {
    position: relative;
  }

  /* El logo pasa de capa de fondo absoluta a elemento en flujo,
     centrado y por encima del título. */
  #inicio .hero-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 45px;
  }

  #inicio .mk-hero-mark {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: clamp(220px, 60vw, 320px);
    margin: 0 auto clamp(24px, 5vh, 40px);
  }

  /* El título vuelve a su flujo normal: alineado a la izquierda,
     sin desfases ni mezcla de color propia del escritorio. */
  #inicio h1.hero-title {
    position: relative;
    z-index: 2;
    mix-blend-mode: normal;
    text-align: left;
    font-weight: 800;
    letter-spacing: normal;
    font-size: 40px;
    margin-top: 45px;
  }

  #inicio .hero-title__line--1,
  #inicio .hero-title__line--2,
  #inicio .hero-title__line--3 {
    text-align: left;
    padding-left: 0;
    margin-top: 0;
    white-space: normal;
  }

  #inicio .card {
    width: min(100%, 360px);
    margin-left: 0;
  }

  #inicio .mk-phone {
    top: 50%;
  }
}

/* ---------- Móvil: hasta 480px ---------- */
@media (max-width: 480px) {
  #inicio .mk-hero {
    border-radius: 0px;
  }

  #inicio .sec-1-text-principal {
    padding-top: clamp(80px, 14vh, 120px);
  }

  /* Logo centrado con el tamaño de la referencia móvil. */
  #inicio .mk-hero-mark {
    width: 100%;
    margin-bottom: clamp(20px, 4vh, 32px);
  }

  /* Botones apilados a ancho completo. */
  #inicio .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  #inicio .hero-actions .btn-hablemos,
  #inicio .hero-actions .btn-transparent {
    width: 100%;
    justify-content: center;
  }

  /* Flecha hacia abajo al final del hero (como en la referencia).
     Reutiliza el botón .hero-play: oculta su icono de play y dibuja
     un chevron apuntando hacia abajo, centrado. */
  #inicio .hero-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 22px;
    padding: 4px;
    background: transparent;
    border: 0;
    color: var(--color-white);
    cursor: pointer;
  }

  #inicio .hero-play svg {
    display: none;
  }

  #inicio .hero-play::before {
    content: "";
    width: 18px;
    height: 18px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
  }
}

/* ============================================================
   RESPONSIVE Sección 2 - Pregunta (#por-q-ecuavisa)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Se scopea con #por-q-ecuavisa para NO afectar a las demás
   secciones que comparten .pq-ec-details / .pq-ec-* .
   Tamaños fijos pedidos y alineación a la izquierda (ver imagen).
   ============================================================ */
@media (max-width: 768px) {
  /* Padding superior e inferior del bloque: 45px. */
  #por-q-ecuavisa {
    padding: 45px 24px;
    text-align: left;
  }

  /* El contenedor deja de imponer su font-size base en "em": cada
     texto define su propio tamaño en px, según lo solicitado. */
  #por-q-ecuavisa .pq-ec-details {
    font-size: initial;
    padding-bottom: 0;
    text-align: left;
  }

  /* Titular */
  #por-q-ecuavisa .pq-ec-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
  }

  /* Subtítulo */
  #por-q-ecuavisa .pq-ec-sub-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    margin-top: 20px;
  }

  /* Descripción */
  #por-q-ecuavisa .pq-ec-descripcion {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* La flecha deja de ser absoluta (en escritorio va en bottom: -15%)
     para no solaparse con el texto al reducirse el alto del bloque.
     Pasa al flujo, centrada y debajo del contenido. */
  #por-q-ecuavisa .pq-ec-button {
    position: static;
    transform: none;
    margin-top: 28px;
  }
}

/* ============================================================
   RESPONSIVE Sección 3 - Conectar marcas (#conectar-marcas-ecuavisa)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Los bloques de datos dejan de ser absolutos sobre el televisor:
   pasan al flujo (relative) y se apilan debajo de la imagen.
   ============================================================ */
@media (max-width: 768px) {
	#conectar-marcas-ecuavisa .bg-azul-gradient-ec {
		padding: 45px 8px;
	}

	/* Cada texto define su tamaño en px; se anula la escala en "em". */
	#conectar-marcas-ecuavisa .pq-ec-details {
		font-size: initial;
		padding-bottom: 0;
		text-align: left;
	}

	/* Titular */
	#conectar-marcas-ecuavisa .pq-ec-title {
		font-size: 32px;
		font-weight: 900;
		letter-spacing: 0;
		line-height: 1.15;
		text-align: left;
	}

	/* Descripción */
	#conectar-marcas-ecuavisa .pq-ec-sub-title {
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0;
		text-align: left;
		margin-top: 24px;
	}

	#conectar-marcas-ecuavisa .cm-ecuavisa-data {
		margin-top: 32px;
	}

	/* Televisor arriba y tarjetas apiladas debajo, en el orden del diseño. */
	#conectar-marcas-ecuavisa .tv-stage {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
		max-width: 560px;
	}

	#conectar-marcas-ecuavisa .tv-stage > img {
		order: 0;
		max-width: 420px;
		margin: 0 auto 16px;
	}

	#conectar-marcas-ecuavisa .tv-stat {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		justify-content: flex-start;
		gap: 16px;
		padding: 14px 18px;
		text-align: left;
		background: rgba(74, 86, 140, 0.92);
	}

	#conectar-marcas-ecuavisa .tv-stat--years {
		order: 1;
	}

	#conectar-marcas-ecuavisa .tv-stat--share {
		order: 2;
		background: rgba(122, 84, 132, 0.92);
	}

	#conectar-marcas-ecuavisa .tv-stat--audience {
		order: 3;
	}

	/* Columna fija para la cifra, así los textos quedan alineados. */
	#conectar-marcas-ecuavisa .tv-stat__figure {
		flex: 0 0 96px;
		font-size: 32px;
	}

	#conectar-marcas-ecuavisa .tv-stat p {
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
	}
}

@media (max-width: 480px) {
	/* El bloque ocupa todo el ancho, sin esquinas redondeadas. */
	#conectar-marcas-ecuavisa {
		padding: 0;
	}

	#conectar-marcas-ecuavisa .bg-azul-gradient-ec {
		padding: 45px 0;
		border-radius: 0;
	}

	#conectar-marcas-ecuavisa .tv-stat__figure {
		flex-basis: 80px;
		font-size: 28px;
	}
}

/* ============================================================
   RESPONSIVE Sección 4 - Conocemos a quién quieres llegar (#quien-llegar-ec)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Textos alineados a la izquierda y tamaños fijos en px.
   ============================================================ */
@media (max-width: 768px) {
	/* El relleno lateral lo da el contenedor interno (px-4 / sm:px-6). */
	#quien-llegar-ec {
		min-height: auto;
		padding: 0;
		text-align: left;
	}

	#quien-llegar-ec .bg-white-ec {
		min-height: auto;
		padding-top: 45px;
		padding-bottom: 45px;
	}

	/* Se anula la escala en "em" del contenedor y se alinea a la izquierda. */
	#quien-llegar-ec .pq-ec-details {
		font-size: initial;
		align-items: flex-start;
		gap: 0;
		text-align: left;
	}

	/* Titular */
	#quien-llegar-ec .pq-ec-title {
		font-size: 28px;
		font-weight: 900;
		letter-spacing: 0;
		line-height: 1.2;
		text-align: left;
	}

	/* Subtítulo (Bold Italic) */
	#quien-llegar-ec .pq-ec-sub-title {
		font-size: 18px;
		font-weight: 700;
		font-style: italic;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		margin-top: 20px;
	}

	/* Descripción (Book) */
	#quien-llegar-ec .pq-ec-descripcion {
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0;
		text-align: left;
		max-width: 100%;
		margin: 20px 0 0;
	}

	/* Palabras resaltadas en azul y negrita, como en el diseño. */
	#quien-llegar-ec .pq-ec-descripcion span {
		font-weight: 700;
	}
}

/* ============================================================
   RESPONSIVE Sección 5 - Audiencias (#audiencias-ecuavisa)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Las tarjetas dejan de ser absolutas (mosaico de escritorio) y se
   apilan en el orden del diseño: Demografía, Comunidad, Alcance.
   Se usa 900px porque es donde el mosaico ya se rompía.
   ============================================================ */
@media (max-width: 900px) {
	#audiencias-ecuavisa .bg-azul-audi-gradient-ec {
		padding: 45px 0;
		text-align: left;
	}

	/* Cada texto define su tamaño en px; se anula la escala en "em". */
	#audiencias-ecuavisa .pq-ec-details {
		font-size: initial;
		padding-bottom: 0;
		text-align: left;
	}

	/* Titular */
	#audiencias-ecuavisa .pq-ec-title {
		font-size: 28px;
		font-weight: 700;
		line-height: 34px;
		letter-spacing: 0;
		text-align: left;
	}

	/* Subtítulo: negrita con "conectadas" en rosa, como en el diseño */
	#audiencias-ecuavisa .pq-ec-sub-title {
		font-size: 20px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		margin-top: 20px;
	}

	#audiencias-ecuavisa .pq-ec-sub-title span {
		color: var(--color-pink);
		font-weight: 700;
	}

	/* Descripción */
	#audiencias-ecuavisa .pq-ec-descripcion {
		font-size: 20px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		max-width: 100%;
		margin: 20px 0 0;
	}

	#audiencias-ecuavisa .audi-ecuavisa-data {
		margin-top: 32px;
	}

	/* Columna única de tarjetas */
	#audiencias-ecuavisa .audi-ec-content-data {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		min-height: 0;
		max-width: 560px;
		margin: 0 auto;
	}

	/* Tarjetas en flujo (relative), redondeadas y con fondo translúcido */
	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 20px 16px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 16px;
		box-shadow: none;
	}

	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(3) {
		order: 1;
	}

	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(2) {
		order: 2;
	}

	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(1) {
		order: 3;
	}

	#audiencias-ecuavisa .audi-ec-body {
		gap: 16px;
	}

	/* Títulos de tarjeta */
	#audiencias-ecuavisa .audi-ec-title,
	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(3) .audi-ec-title {
		max-width: none;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.25;
	}

	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(2) .audi-ec-title span {
		font-weight: 700;
	}

	/* Iconos decorativos de cabecera ocultos, como en el diseño */
	#audiencias-ecuavisa .audi-ec-icon {
		display: none;
	}

	/* ---- Demografía en TV Lineal: mini-tarjetas blancas en 2 columnas ---- */
	#audiencias-ecuavisa .audi-ec-data-card-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	#audiencias-ecuavisa .audi-ec-data-card-item {
		width: auto;
		padding: 16px 8px;
		border-radius: 12px;
	}

	#audiencias-ecuavisa .audi-ec-data-card-item-body {
		gap: 8px;
	}

	#audiencias-ecuavisa .audi-ec-data-card-item-title {
		font-size: 22px;
	}

	#audiencias-ecuavisa .audi-ec-data-card-item-descripcion {
		font-size: 12px;
		font-weight: 400;
	}

	/* ---- Comunidad en redes: cifra grande + lista de redes ---- */
	#audiencias-ecuavisa .audi-ec-item-data:nth-child(2) .audi-ec-data {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	#audiencias-ecuavisa .audi-ec-data-comu {
		font-size: 36px;
		font-weight: 700;
		color: var(--color-cyan);
	}

	#audiencias-ecuavisa .audi-ec-data-comu span {
		display: inline;
		font-size: inherit;
		color: inherit;
	}

	#audiencias-ecuavisa .audi-ec-data-comu small {
		max-width: none;
		margin-top: 12px;
		font-size: 13px;
		line-height: 1.35;
		color: rgba(255, 255, 255, 0.9);
	}

	#audiencias-ecuavisa .audi-ec-data-redes {
		margin-top: 0;
	}

	#audiencias-ecuavisa .audi-ec-data-redes-content {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item {
		justify-content: space-between;
	}

	/* Nombre de la red junto al icono (el HTML solo trae el icono) */
	#audiencias-ecuavisa .audi-ec-data-redes-item-icon {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		color: var(--color-white);
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item:nth-child(1) .audi-ec-data-redes-item-icon::after {
		content: "Instagram";
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item:nth-child(2) .audi-ec-data-redes-item-icon::after {
		content: "Facebook";
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item:nth-child(3) .audi-ec-data-redes-item-icon::after {
		content: "YouTube";
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item:nth-child(4) .audi-ec-data-redes-item-icon::after {
		content: "TikTok";
	}

	#audiencias-ecuavisa .audi-ec-data-redes-item:nth-child(5) .audi-ec-data-redes-item-icon::after {
		content: "X";
	}

	/* ---- Alcance por plataforma: donut centrado y leyenda debajo ---- */
	#audiencias-ecuavisa .audi-ec-content-data > .audi-ec-item-data:nth-child(1) .audi-ec-title {
		font-size: 22px;
		font-weight: 500;
	}

	#audiencias-ecuavisa .audi-ec-data-grafico {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	#audiencias-ecuavisa .grafico-donut {
		width: min(240px, 70vw);
		height: min(240px, 70vw);
		margin: 0 auto;
	}

	#audiencias-ecuavisa .grafico-donut-total {
		font-size: 34px;
	}

	#audiencias-ecuavisa .grafico-donut-center small {
		font-size: 15px;
		color: var(--color-white);
		margin-top: 4px;
	}

	#audiencias-ecuavisa .grafico-legend {
		gap: 12px;
	}

	/* Fila: punto de color | nombre | % | valor */
	#audiencias-ecuavisa .grafico-legend-item {
		grid-template-columns: 10px minmax(0, 1fr) auto 56px;
		gap: 12px;
		font-size: 14px;
	}

	#audiencias-ecuavisa .grafico-legend-dot {
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	#audiencias-ecuavisa .grafico-legend-dot--tv {
		background: rgba(79, 69, 249, 1);
	}

	#audiencias-ecuavisa .grafico-legend-dot--apps {
		background: rgba(103, 173, 255, 1);
	}

	#audiencias-ecuavisa .grafico-legend-dot--redes {
		background: rgba(78, 200, 198, 1);
	}

	#audiencias-ecuavisa .grafico-legend-dot--stream {
		background: rgba(253, 134, 50, 1);
	}

	#audiencias-ecuavisa .grafico-legend-dot--radio {
		background: rgba(252, 79, 162, 1);
	}

	/* El nombre deja de ser pastilla y pasa a texto plano */
	#audiencias-ecuavisa .grafico-legend-name {
		width: auto;
		padding: 0;
		font-size: 14px;
		text-align: left;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	#audiencias-ecuavisa .grafico-legend-pct {
		font-size: 14px;
	}

	#audiencias-ecuavisa .grafico-legend-val {
		font-size: 14px;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	/* Cifras algo más contenidas en pantallas chicas */
	#audiencias-ecuavisa .audi-ec-data-comu {
		font-size: 32px;
	}

	#audiencias-ecuavisa .grafico-donut-total {
		font-size: 30px;
	}
}

/* ============================================================
   RESPONSIVE Sección 6 - Tenemos un plan (#tenemos-plan-ecuavisa)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   - Bloque azul y tarjeta blanca sin bordes ni esquinas redondeadas;
     la tarjeta deja de superponerse al bloque azul.
   - Cards en fila horizontal con ancho uniforme y scroll horizontal
     solo con CSS (scroll-snap). La capa absoluta del hover se anula
     y el degradado pasa al propio card.
   ============================================================ */
@media (max-width: 768px) {
	#tenemos-plan-ecuavisa {
		padding-bottom: 0;
		background-color: var(--color-white);
	}

	/* Bloque principal (azul) */
	#tenemos-plan-ecuavisa .bg-azul-ec {
		min-height: auto;
		padding: 45px 0;
		border-radius: 0;
		align-items: stretch;
		text-align: left;
	}

	#tenemos-plan-ecuavisa .pq-ec-details {
		font-size: initial;
		max-width: 100%;
		padding-bottom: 0;
		text-align: left;
	}

	/* Titulares: "Tenemos un plan!" y "Soluciones para Marcas" */
	#tenemos-plan-ecuavisa .pq-ec-title,
	#tenemos-plan-ecuavisa .marcas-ec-title {
		width: 100%;
		font-size: 28px;
		font-weight: 900;
		line-height: 100%;
		letter-spacing: 0;
		text-align: left;
	}

	#tenemos-plan-ecuavisa .pq-ec-sub-title {
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		margin-top: 16px;
	}

	/* Tarjeta blanca: en flujo normal, sin borde ni radio */
	#tenemos-plan-ecuavisa .container-marcas {
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	#tenemos-plan-ecuavisa .container-marcas-body {
		padding: 45px 0;
		border: 0;
		border-radius: 0;
	}

	/* Cabecera: titular + descripción con separación de 16px */
	#tenemos-plan-ecuavisa .container-marcas-details {
		font-size: initial;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-top: 0;
		text-align: left;
	}

	/* Descripción: 2 líneas de 24px = 48px de alto, como en el diseño */
	#tenemos-plan-ecuavisa .marcas-ec-subtitle {
		max-width: 100%;
		font-size: 18px;
		line-height: 24px;
		opacity: 1;
	}

	/* ---- Cards en fila horizontal con scroll ---- */
	#tenemos-plan-ecuavisa .container-marcas-cards {
		padding-left: 0;
		padding-right: 0;
	}

	#tenemos-plan-ecuavisa .marcas-ec-cards-content {
		margin-top: 32px;
	}

	#tenemos-plan-ecuavisa .marcas-ec-items {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
		padding: 8px 16px 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#tenemos-plan-ecuavisa .marcas-ec-items::-webkit-scrollbar {
		display: none;
	}

	/* Card: ancho fijo uniforme, degradado radial y sin borde/radio */
	#tenemos-plan-ecuavisa .marcas-ec-item {
		position: relative;
		flex: 0 0 220px;
		min-height: 280px;
		scroll-snap-align: start;
		color: var(--color-white);
		background-color: var(--color-navy);
		background-image: radial-gradient(100% 100% at 100% 0%, #088fe7 0%, #00174c 100%);
		border: 0;
		border-radius: 16px;
		box-shadow: 0 12px 24px rgba(0, 23, 76, 0.2);
		transform: none;
	}

	/* La capa absoluta del hover de escritorio no se usa aquí */
	#tenemos-plan-ecuavisa .marcas-ec-item::before {
		display: none;
	}

	#tenemos-plan-ecuavisa .marcas-ec-item:hover {
		transform: none;
		box-shadow: 0 12px 24px rgba(0, 23, 76, 0.2);
	}

	#tenemos-plan-ecuavisa .marcas-ec-item-body {
		min-height: 280px;
		gap: 12px;
		padding: 28px 20px;
    border-radius: 16px;
	}

	/* Icono, titular y descripción siempre visibles */
	#tenemos-plan-ecuavisa .marcas-ec-item-icon,
	#tenemos-plan-ecuavisa .marcas-ec-item:hover .marcas-ec-item-icon {
		color: var(--color-cyan);
	}

	#tenemos-plan-ecuavisa .marcas-ec-item-title {
		font-size: 18px;
		font-weight: 700;
	}

	#tenemos-plan-ecuavisa .marcas-ec-item-descripcion {
		font-size: 14px;
		line-height: 20px;
		opacity: 1;
		max-height: none;
		transform: none;
	}
}

@media (max-width: 480px) {
	#tenemos-plan-ecuavisa .marcas-ec-item {
		flex-basis: 180px;
	}
}

/* ============================================================
   RESPONSIVE Sección 7 - Contar historia (#contar-h-ec)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Se conservan los colores; textos a la izquierda y en px.
   ============================================================ */
@media (max-width: 768px) {
	#contar-h-ec .bg-white-ec {
		min-height: auto;
	}

	/* Se anula la escala en "em" del contenedor */
	#contar-h-ec .pq-ec-details {
		font-size: initial;
		text-align: left;
	}

	/* Titular: en bloque (no grid) para que el <span> siga en la misma línea */
	#contar-h-ec .pq-ec-title {
		display: block;
		font-size: 28px;
		font-weight: 900;
		line-height: 34px;
		letter-spacing: 0;
		text-align: left;
	}

	/* Descripción */
	#contar-h-ec .pq-ec-descripcion {
		font-size: 20px;
		font-weight: 700;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		max-width: 100%;
		margin: 16px 0 0;
	}
}

/* ============================================================
   RESPONSIVE Sección 8 - Galería (#galeria-h-ec)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   Estructura: el plugin AdvancedCarousel (carousel-plugin.js,
   iniciado en main.js) rellena .info-panel, .img-2-slide y genera
   los slides en #track; su style.css externo ya apila el bloque a
   partir de 768px. Aquí se sobrescribe ese layout para el diseño:
   tarjeta azul con categoría, titular, imagen del slide, datos y
   flechas de navegación debajo. Los elementos absolutos del plugin
   (.img-2-slide, .bottom-nav) pasan al flujo con position: relative.
   ============================================================ */
@media (max-width: 768px) {
	#galeria-h-ec {
		padding: 0 16px 24px;
	}

	/* Tarjeta contenedora */
	#galeria-h-ec .hero-container {
		flex-direction: column;
		justify-content: flex-start;
		gap: 16px;
		height: auto;
		min-height: 0;
		max-height: none;
		padding: 16px;
		border-radius: 20px;
		opacity: 1;
		background: rgba(22, 48, 154, 1);
	}

	/* Fondo fotográfico del slide: no aparece en el diseño móvil */
	#galeria-h-ec .bg-fondo-dinamico {
		display: none;
	}

	/* El panel de info "se disuelve" para ordenar sus hijos junto a la
	   imagen: categoría, titular, imagen, datos y navegación. */
	#galeria-h-ec .info-panel {
		display: contents;
	}

	#galeria-h-ec .info-panel > * {
		margin: 0;
	}

	#galeria-h-ec .overline-line {
		display: none;
	}

	/* Categoría */
	#galeria-h-ec #slide-overline {
		order: 1;
		font-size: 11px;
		font-weight: 900;
		line-height: 100%;
		letter-spacing: 0;
		text-transform: uppercase;
		color: rgba(16, 212, 255, 1);
		opacity: 1;
	}

	/* Titular: el plugin separa las líneas con <br>; se ocultan y el
	   gap de flex hace de espacio, para leerlo en una sola línea. */
	#galeria-h-ec #slide-title {
		order: 2;
		display: flex;
		flex-wrap: wrap;
		column-gap: 0.25em;
		font-size: 28px;
		font-weight: 700;
		line-height: 100%;
		letter-spacing: 0;
		color: var(--color-white);
	}

	#galeria-h-ec #slide-title br {
		display: none;
	}

	/* Imagen del slide (solo en slides con img2): de absoluta a relativa */
	#galeria-h-ec .img-2-slide {
		order: 3;
		position: relative;
		top: auto;
		left: auto;
		display: flex !important;
		align-self: center;
		max-height: none;
		transform: none;
	}

	#galeria-h-ec .img-2-slide.visible {
		width: min(65%, 240px);
	}

	#galeria-h-ec .img-2-slide img {
		height: auto;
    filter: none;
    width: 73%;
	}

	/* Datos del slide */
	#galeria-h-ec .stats-list {
		order: 4;
		display: block;
	}

	#galeria-h-ec .stats-list li {
		gap: 6px;
		margin-bottom: 8px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
	}

	#galeria-h-ec .stats-list li:last-child {
		margin-bottom: 0;
	}

	/* CTA: no aparece en el diseño de referencia */
	#galeria-h-ec .btn-primary {
		display: none;
	}

	/* Las tarjetas laterales del carrusel no se muestran; se conserva
	   solo la navegación (flechas, progreso y contador). */
	#galeria-h-ec .carousel-panel {
		order: 5;
		display: block;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	#galeria-h-ec .carousel-track {
		display: none;
	}

	#galeria-h-ec .bottom-nav {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		gap: 12px;
	}

	#galeria-h-ec .icon-btn {
		width: 38px;
		height: 38px;
	}

	#galeria-h-ec .slide-counter {
		font-size: 24px;
	}
}

/* ============================================================
   RESPONSIVE Sección 9 - Preguntas frecuentes (#preguntas-f-ec)
   ------------------------------------------------------------
   Ajustes SOLO para tablet/móvil. El escritorio no se toca.
   El fondo de la Galería (sección anterior) pasa de blanco al
   celeste de este bloque para que ambos queden unidos sin cortes.
   ============================================================ */
@media (max-width: 768px) {
	/* Transición blanco -> celeste desde la sección anterior */
	#galeria-h-ec {
		background: linear-gradient(180deg, var(--color-white) 0%, rgba(209, 226, 242, 1) 100%);
	}

	#preguntas-f-ec {
		background-color: rgba(209, 226, 242, 1);
	}

	/* Bloque principal: sin esquinas redondeadas y mismo celeste */
	#preguntas-f-ec .bg-green-ec {
		padding: 32px 0 45px;
		border-radius: 0;
		background-color: rgba(209, 226, 242, 1);
	}

	#preguntas-f-ec .preguntas-f-ec-content {
		gap: 20px;
	}

	/* Titular */
	#preguntas-f-ec .pf-ec-title {
		font-size: 28px;
		font-weight: 900;
		line-height: 100%;
		letter-spacing: 0;
	}

	/* Pregunta */
	#preguntas-f-ec .pf-ec-item-head {
		padding: 12px 16px;
	}

	#preguntas-f-ec .pf-ec-item-title {
		font-size: 18px;
		font-weight: 500;
		line-height: 24px;
		color: var(--color-gray);
	}

	/* Respuesta sobre el fondo celeste, como en el diseño */
	#preguntas-f-ec .pf-ec-item-content.active .pf-ec-item-body {
		padding: 20px 24px 24px;
		background-color: rgba(209, 226, 242, 1);
	}

	#preguntas-f-ec .pf-ec-item-detils {
		font-size: 16px;
		line-height: 22px;
		color: var(--color-gray);
	}

	/* Botón "Más preguntas" */
	#preguntas-f-ec .pf-ec-btn-mas-fq {
		margin-top: 8px;
	}

	#preguntas-f-ec .btn-link-fq {
		font-size: 16px;
		font-weight: 500;
		margin-top: 12px;
	}
}

/* ============================================================
   RESPONSIVE Sección 10 - Formulario (#formulario-h-ec)
   ------------------------------------------------------------
   Escritorio: el formulario se ve como siempre; los elementos
   nuevos (categoría, botón que abre el modal y cabecera del modal)
   quedan ocultos.
   Tablet/móvil: el mismo formulario pasa a un modal. El fondo
   (#form-ec-modal) cubre toda la pantalla y el panel
   (.form-ec-sheet) sube desde abajo. main.js añade .is-open.
   ============================================================ */
.formulario-ec-kicker,
.form-ec-open,
.form-ec-modal-head {
	display: none;
}

@media (max-width: 768px) {
	#formulario-h-ec {
		padding: 0;
	}

	#formulario-h-ec .sec-4-content {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	#formulario-h-ec .pq-ec-details {
		font-size: initial;
		max-width: 100%;
		padding-bottom: 0;
		text-align: left;
	}

	/* Titular */
	#formulario-h-ec .pq-ec-title {
		font-size: 24px;
		font-weight: 900;
		line-height: 30px;
		letter-spacing: 0;
		text-align: left;
	}

	/* Descripción */
	#formulario-h-ec .pq-ec-descripcion {
		font-size: 18px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0;
		text-align: left;
		max-width: 100%;
		margin: 16px 0 0;
		color: rgba(255, 255, 255, 0.85);
	}

	#formulario-h-ec .formulario-ec-content {
		margin-top: 72px;
	}

	/* "Solicita tu paquete" */
	#formulario-h-ec .formulario-ec-kicker {
		display: block;
		margin: 0;
		font-size: 14px;
		font-weight: 900;
		line-height: 100%;
		letter-spacing: 0;
		color: rgba(16, 212, 255, 1);
	}

	/* "Nos pondremos en contacto" */
	#formulario-h-ec .formulario-ec-title-form {
		margin-top: 12px;
		font-size: 24px;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0;
		text-align: left;
	}

	/* Botón que abre el modal: texto + flecha */
	#formulario-h-ec .form-ec-open {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		width: 100%;
		height: 56px;
		margin-top: 40px;
		padding: 12px 24px;
		border: 0;
		border-radius: 12px;
		color: var(--color-white);
		background: rgba(255, 64, 144, 1);
		font-family: var(--font-gotham);
		font-size: 16px;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0;
		opacity: 1;
		cursor: pointer;
		transition: filter 0.2s ease, transform 0.2s ease;
	}

	#formulario-h-ec .form-ec-open:hover {
		filter: brightness(1.08);
	}

	#formulario-h-ec .form-ec-open:active {
		transform: scale(0.98);
	}

	#formulario-h-ec .form-ec-open:focus-visible {
		outline: 2px solid var(--color-white);
		outline-offset: 3px;
	}

	/* ---- Modal: fondo a pantalla completa ---- */
	#formulario-h-ec .formulario-ec-form-form {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		align-items: flex-end;
		max-width: none;
		margin: 0;
		background: rgba(0, 23, 76, 0.75);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.35s ease,
			visibility 0s linear 0.45s;
	}

	#formulario-h-ec .formulario-ec-form-form.is-open {
		opacity: 1;
		visibility: visible;
		transition:
			opacity 0.35s ease,
			visibility 0s linear 0s;
	}

	/* Panel que sube desde abajo */
	#formulario-h-ec .form-ec-sheet {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
		background: #00174cb8;
		/* border-radius: 20px 20px 0 0; */
		/* box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); */
		outline: none;
		transform: translateY(100%);
		transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
	}

  .formulario-ec-form-grid {
    gap: 5px;
  }

  .form-ec-field {
      padding-top: 10px;
  }

	#formulario-h-ec .formulario-ec-form-form.is-open .form-ec-sheet {
		transform: translateY(0);
    padding-top: 45px;
	}

	/* Cabecera del modal */
	#formulario-h-ec .form-ec-modal-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 8px;
	}

	#formulario-h-ec .form-ec-modal-title {
		margin: 0;
		font-size: 24px;
		font-weight: 900;
		line-height: 100%;
		color: var(--color-white);
	}

	#formulario-h-ec .form-ec-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		padding: 6px;
		color: var(--color-white);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	#formulario-h-ec .form-ec-close svg {
		width: 24px;
		height: 24px;
	}

	#formulario-h-ec .form-ec-close:focus-visible {
		outline: 2px solid var(--color-white);
		outline-offset: 2px;
	}

	/* Botón de envío del modal: mismo estilo que el que lo abre */
	#formulario-h-ec .form-ec-actions {
		margin-top: 16px;
	}

	#formulario-h-ec .formulario-ec-form-form .form-ec-submit {
		width: 100%;
		min-width: 0;
		height: 56px;
		justify-content: center;
		gap: 16px;
		padding: 12px 24px;
		border: 0;
		border-radius: 12px;
		background-color: rgba(255, 64, 144, 1);
		font-size: 16px;
		font-weight: 700;
		line-height: 100%;
		letter-spacing: 0;
	}

	/* Bloquea el scroll de la página mientras el modal está abierto */
	body.form-ec-modal-abierto {
		overflow: hidden;
	}
}

/* Sin animaciones si el usuario lo prefiere */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	#formulario-h-ec .formulario-ec-form-form,
	#formulario-h-ec .form-ec-sheet {
		transition: none;
	}
}