.info-card {
  position: relative;
  /* max-width: 480px; */
  margin: 60px auto 20px;
}

/* Hilo + pin que "cuelga" la etiqueta */
.info-card__pin {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 2px;
  height: 50px;
  background: #333;
  transform: translateX(-50%);
}

.info-card__pin-dot {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-color);
  border: 2px solid #333;
  transform: translateX(-50%);
}

/* Etiqueta del título, centrada arriba, superpuesta al marco */
.info-card__label {
  position: relative;
  z-index: 2;
  width: max-content;
  margin: 0 auto -14px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 4px 22px;
  box-shadow: 3px 3px 0 var(--card-color);
}

.info-card__label h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Marco de color exterior */
.info-card__frame {
  background: var(--card-color);
  border: 3px solid #333;
  border-radius: 14px;
  padding: 10px;
}

/* Caja blanca interior con los puntos en las esquinas */
.info-card__box {
  position: relative;
  background: #fff;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 28px 24px;
}

.info-card__box p {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #222;
}

.dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
}
.dot--tl { top: 10px;    left: 10px; }
.dot--tr { top: 10px;    right: 10px; }
.dot--bl { bottom: 10px; left: 10px; }
.dot--br { bottom: 10px; right: 10px; }

/* EL ROWWWW */

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  max-width: 1400px;
  margin: 60px auto 20px;
}

/* Si quieres alternar la imagen a la derecha en otro bloque */
.info-row--reverse {
  flex-direction: row-reverse;
}

/* Foto colgada */
.hang-photo {
  position: relative;
  flex: 0 0 220px;
  margin-top: 40px; /* deja espacio para el pin arriba */
}

.hang-photo__pin {
  position: absolute;
  top: -50px;
  left: 50%;
  width: 2px;
  height: 50px;
  background: #333;
  transform: translateX(-50%);
}

.hang-photo__pin-dot {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f6c453; /* cambia el color del pin si quieres */
  border: 2px solid #333;
  transform: translateX(-50%);
}

.hang-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #333;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}

.hang-photo video {
  display: block;
  width: 120%;
  height: auto;
  border: 3px solid #333;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}

/* La tarjeta de texto ahora ocupa el espacio restante */
.info-row .info-card {
  flex: 1;
  margin: 0; /* quitamos el margin auto que tenía cuando iba sola */
}




/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

.info-row {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;

    box-sizing: border-box;
}


/* =========================================
   VIDEO
========================================= */

.hang-photo {
    /* flex: 1 1 45%; */
    flex: .30 .90 1%;
    min-width: 0;
    position: relative;
}

.hang-photo video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;

    object-fit: cover;
}


/* =========================================
   TARJETA
========================================= */

.info-card {
    flex: 1 1 55%;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================
   TÍTULO
========================================= */

.info-card__label {
    width: 100%;
    box-sizing: border-box;
}

.info-card__label h3 {
 .card-frame{
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:16 / 18;
  }
  
}


/* =========================================
   FRAME
========================================= */

.info-card__frame {
    width: 100%;
    box-sizing: border-box;
}

.info-card__box {
    position: relative;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    padding: clamp(25px, 4vw, 50px);
}


/* =========================================
   LISTA
========================================= */

.info-card__box ul {
    margin: 0;
    padding-left: 1.4em;

    width: 100%;
    box-sizing: border-box;
}

.info-card__box li {
    margin-bottom: 12px;

    overflow-wrap: break-word;
    word-break: normal;
}

.info-card__box a {
    display: inline;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
    font-size: 20px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .info-row {
        gap: 25px;
    }

    .info-card__label h3 {
        font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    }

    .info-card__box {
        padding: 30px;
    }
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 700px) {

    .info-row {
        flex-direction: column;
        align-items: stretch;

        gap: 30px;

        padding: 0 20px;
    }

    .hang-photo {
        width: 100%;
    }

    .info-card {
        width: 100%;
    }

    .info-card__label h3 {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    .info-card__box {
        padding: 25px 20px;
    }
}


/* =========================================
   CELULARES PEQUEÑOS
========================================= */

@media (max-width: 480px) {

    .info-row {
        padding: 0 15px;
    }

    .info-card__label h3 {
        font-size: 1.15rem;
    }

    .info-card__box {
        padding: 20px 15px;
    }

    .info-card__box ul {
        padding-left: 1.2em;
    }

    .info-card__box li {
        font-size: 0.95rem;
        line-height: 1.4;
    }
}