/* =========================
   OBJECTIVES — Tilt Cards
   Basado en parallaxTiltEffect reference code
   ========================= */

#objetivos {
   overflow: visible;
}

/* ===== Grid principal ===== */
.obj-cards-main {
   display: grid;
   grid-template-columns: 1fr;
   gap: 3rem;
   justify-items: center;
   width: 100%;
   box-sizing: border-box;
}

@media (min-width: 768px) {
   .obj-cards-main {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
      justify-items: stretch;
      align-items: stretch;
   }
}

@media (min-width: 1024px) {
   .obj-cards-main {
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
   }
}

/* ===== Wrap — perspectiva (reference: .wrap) ===== */
.wrap {
   width: 100%;
   max-width: 100%;
   padding: 0 1rem;
   transform-style: preserve-3d;
   transform: perspective(100rem);
   cursor: pointer;
   box-sizing: border-box;
}

@media (min-width: 480px) {
   .wrap {
      max-width: 420px;
   }
}

@media (min-width: 768px) {
   .wrap {
      max-width: none;
   }
}

@media (min-width: 1024px) {
   .wrap {
      padding: 0;
      height: 100%;
   }
}

/* ===== Container — card con tilt (reference: .container) ===== */
.container {
   --rX: 0;
   --rY: 0;
   --bX: 50%;
   --bY: 80%;

   width: 100%;
   box-sizing: border-box;
   min-height: 36rem;
   height: auto;
   border: 1px solid rgba(240, 168, 48, 0.15);
   border-left: 3px solid var(--accent-gold, #F0A830);
   border-radius: 1.25rem;
   padding: 2.75rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   position: relative;
   overflow: hidden;

   transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
   background: rgba(26, 31, 42, 0.65);
   box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
   transition: transform .6s 1s;
}


/* Tablet: altura uniforme */
@media (min-width: 768px) {
   .container {
      height: 100%;
   }
}

/* Desktop: grid controla altura */
@media (min-width: 1024px) {
   .container {
      min-height: auto;
      height: 100%;
   }
}

/* Corners (reference: .container::before / ::after) */
.container::before,
.container::after {
   content: "";
   width: 2rem;
   height: 2rem;
   border: 2px solid rgba(240, 168, 48, 0.55);
   position: absolute;
   z-index: 2;
   opacity: .7;
   transition: .3s;
}

.container::before {
   top: 2rem;
   right: 2rem;
   border-bottom-width: 0;
   border-left-width: 0;
}

.container::after {
   bottom: 2rem;
   left: 2rem;
   border-top-width: 0;
   border-right-width: 0;
}

/* Sin transición mientras sigue al mouse (reference: .container--active) */
.container--active {
   transition: none;
}

/* Corners se expanden en hover (reference: .wrap:hover .container::before/after) */
.wrap:hover .container::before,
.wrap:hover .container::after {
   width: calc(100% - 4.1rem);
   height: calc(100% - 4.1rem);
   opacity: .9;
}

/* ===== Contenido de las cards ===== */
.obj-card__icon {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
}

.obj-card__icon svg {
   width: 100%;
   height: 100%;
}

.obj-card__title {
   font-size: 1rem;
   font-weight: 700;
   color: rgba(240, 255, 252, 0.92);
   margin: 0;
}

.obj-card__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.obj-card__list li {
   position: relative;
   padding-left: 1.25rem;
   font-size: 0.875rem;
   line-height: 1.5;
   color: rgba(240, 255, 252, 0.72);
}

.obj-card__list li::before {
   content: "•";
   position: absolute;
   left: 0;
   color: var(--accent-gold, #F0A830);
}

/* ===== Contacto: máximo 2 columnas ===== */
@media (min-width: 1024px) {
   .obj-cards-main--contact {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ===== Links usados como container ===== */
.contact-link {
   text-decoration: none;
   color: inherit;
   /* Layout horizontal: ícono | texto | flecha */
   display: grid;
   grid-template-columns: 52px 1fr 32px;
   align-items: center;
   gap: 0;
   flex-direction: unset;
   min-height: auto;
}

/* Sin esquinas decorativas */
.contact-link::before,
.contact-link::after {
   display: none;
}

/* Hover: texto dorado */
.contact-link:hover .contact-card__label,
.contact-link:hover .contact-card__value,
.contact-link:hover .contact-card__arrow {
   color: var(--accent-gold, #F0A830);
   transition: color 0.25s ease;
}

/* ===== Mobile / Tablet (<1024px): simple, sin tilt ===== */
@media (max-width: 1023px) {
   .wrap {
      transform: none;
      cursor: default;
   }

   .container {
      min-height: auto;
      transform: none !important;
      transition:
         background 220ms ease,
         border-color 220ms ease,
         box-shadow 220ms ease;
      -webkit-tap-highlight-color: transparent;
   }

   .container:active {
      border-color: rgba(240, 168, 48, 0.4);
      box-shadow: 0 8px 32px rgba(240, 168, 48, 0.12);
      background: rgba(26, 31, 42, 0.85);
   }
}