/*
  Headlink Solutions - styles.css
  - Estilos globales + secciones (Header, Hero, Servicios, Nosotros, Misión/Visión, Proceso, Contacto, Footer)
  - Nota: Mantén las clases del HTML; aquí solo se estiliza.
*/

:root{
      --navy:#0d2b3a;
      --navy-2:#0a2230;
      --orange:#f59a23;
      --white:#ffffff;
      --muted:rgba(255,255,255,.78);
      --muted2:rgba(255,255,255,.65);
      --shadow: 0 10px 25px rgba(0,0,0,.25);
      --radius:16px;
      --container: 1200px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--white);
      background: #061824;
    }

    /* ============================
   Header
   ============================ */
    .header{
      background:#fff;
      color:#0b1f2a;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .header .wrap{
      max-width: var(--container);
      margin:0 auto;
      padding: 14px 18px;
      display:flex;
      align-items:center;
      gap:18px;
    }

    .brand{
      display: flex;
      align-items: center;
    }

    .brand-link{
      display: inline-flex;
      align-items: center;
    }

    .brand-logo{
      height: 42px;        
      width: auto;
      object-fit: contain;
    }

    @media (max-width: 980px){
      .brand-logo{
        height: 36px;
        max-width: 140px;
      }
    }

    @media (max-width: 520px){
      .brand-logo{
        height: 30px;
        max-width: 120px;
      }
    }

    .nav{
      flex:1;
      display:flex;
      justify-content:center;
      gap:34px;
      font-weight:600;
      font-size:15px;
    }
    .nav a{
      color:#0b1f2a;
      text-decoration:none;
      opacity:.9;
    }
    .nav a:hover{ opacity:1; }

    .nav-cta{
      margin-left:auto;
    }
    .btn{
      border:0;
      border-radius: 12px;
      padding: 12px 18px;
      font-weight:700;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      text-decoration:none;
      user-select:none;
      transition: transform .15s ease, filter .15s ease;
      white-space:nowrap;
    }
    .btn:active{ transform: translateY(1px); }

    .btn-navy{
      background: #12354a;
      color:#fff;
      box-shadow: 0 8px 18px rgba(3, 27, 40, .25);
    }
    .btn-navy:hover{ filter: brightness(1.05); }

    /* ============================
   Hero (Particles + CTA)
   ============================ */
    .hero{
      position:relative;
      min-height: 640px;
      overflow:hidden;
    }
    #particles-js{
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      z-index:0;
      background:
        radial-gradient(900px 500px at 25% 25%, rgba(255,255,255,.12), transparent 55%),
        radial-gradient(700px 420px at 80% 60%, rgba(245,154,35,.14), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
      filter: saturate(1.05);
      transform: scale(1.02);
    }

    .hero::after{
      content:"";
      position:absolute; inset:0;
      z-index:2;
      background: rgba(6, 20, 30, .35);
      backdrop-filter: blur(1px);
    }

    .hero .wrap{
      position:relative;
      z-index:3;
      max-width: var(--container);
      margin:0 auto;
      padding: 78px 18px 70px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      align-items:center;
      gap: 44px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      background: rgba(245,154,35,.95);
      color:#fff;
      font-weight:800;
      font-size:13px;
      padding: 10px 16px;
      border-radius: 999px;
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
      margin-bottom: 18px;
    }

    .h1{
      margin:0;
      font-size: 60px;
      line-height: .98;
      letter-spacing:-1.2px;
      font-weight: 900;
      text-shadow: 0 10px 24px rgba(0,0,0,.28);
    }
    .h1 .accent{
      color: var(--orange);
      display:block;
      margin-top: 10px;
    }

    .lead{
      margin: 18px 0 0;
      max-width: 560px;
      font-size: 18px;
      line-height: 1.6;
      color: var(--muted);
      text-shadow: 0 6px 14px rgba(0,0,0,.22);
    }

    .actions{
      display:flex;
      gap:14px;
      margin-top: 30px;
      flex-wrap:wrap;
    }
    .btn-orange{
      background: var(--orange);
      color:#fff;
      padding: 14px 20px;
      border-radius: 14px;
      box-shadow: 0 12px 26px rgba(245,154,35,.25);
    }
    .btn-orange:hover{ filter: brightness(1.03); }
    .btn-ghost{
      background: rgba(255,255,255,.10);
      color:#fff;
      border: 1px solid rgba(255,255,255,.25);
      padding: 14px 20px;
      border-radius: 14px;
      backdrop-filter: blur(6px);
    }
    .btn-ghost:hover{ filter: brightness(1.06); }

    /* Right “card image” */
    .card{
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(10, 34, 48, .35);
      backdrop-filter: blur(10px);
    }

    .card::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(500px 240px at 70% 40%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, rgba(245,154,35,.18), transparent 40%),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
      z-index:1;
      pointer-events:none;
    }
    .card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform: scale(1.03);
      filter: contrast(1.05) saturate(1.05);
    }
    .card .glow{
      position:absolute;
      inset:auto -30% -40% auto;
      width: 240px;
      height: 240px;
      background: radial-gradient(circle, rgba(245,154,35,.35), transparent 65%);
      z-index:2;
      filter: blur(2px);
    }

        /* Mobile/tablet: que no se deforme */
    @media (max-width: 980px){
      .card{
        min-height: unset;          
        aspect-ratio: 16 / 10;      
      }
    }

    /* Celular chico */
    @media (max-width: 520px){
      .card{
        aspect-ratio: 4 / 3;       
        border-radius: 14px;
      }
    }

    /* small arrow icon */
    .arrow{
      width: 18px; height: 18px;
      display:inline-block;
      border-right: 3px solid currentColor;
      border-bottom: 3px solid currentColor;
      transform: rotate(-45deg);
      margin-left: 2px;
      opacity:.9;
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .nav{ display:none; }
      .brand{ min-width: unset; }
      .hero .wrap{
        grid-template-columns: 1fr;
        padding-top: 46px;
      }
      .h1{ font-size: 52px; }
      .card{ min-height: 240px; }
    }
    @media (max-width: 520px){
      .btn{ width:100%; justify-content:center; }
      .actions{ width:100%; }
      .h1{ font-size: 44px; }
      .lead{ font-size: 16px; }
    }

            /* ============================
   Servicios
   ============================ */
    .services{
      width: 100%;
      padding: 120px 18px;
      background: #ffffff;
      color: #1f2937;
    }

    .services-head{
      max-width: 920px;
      margin: 0 auto 56px;
      text-align: center;
    }

    .section-kicker{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #eef4fa;
      border: 1px solid #dbe7f3;
      color: #1d4872;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .services h2{
      margin: 0 0 14px;
      font-size: clamp(28px, 3.2vw, 40px);
      letter-spacing: -0.6px;
      line-height: 1.12;
      color: #1d4872;
    }

    .services p.subtitle{
      margin: 0 auto;
      max-width: 760px;
      line-height: 1.7;
      color: #4b5563;
      font-size: 16px;
    }

    .services-grid{
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }

    .service-card{
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 14px 34px rgba(0,0,0,.08);
      min-height: 190px;

      /* hidden state (reveal) */
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
    }

    .service-card.is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    .service-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 18px 46px rgba(29,72,114,.18);
    }

    .service-card{
      position: relative;
      overflow: hidden;
      will-change: transform;
    }

    .service-card::after{
      content:"";
      position:absolute;
      inset:-60%;
      background:
        radial-gradient(
          circle at var(--x, 50%) var(--y, 50%),
          rgba(29,72,114,.30),
          transparent 55%
        );
      opacity:0;
      transition: opacity .25s ease;
      pointer-events:none;
      z-index:0;
    }

    .service-card > *{
      position: relative;
      z-index: 1;
    }

    .service-card:hover{
      box-shadow:
        0 18px 46px rgba(29,72,114,.22),
        0 0 0 1px rgba(29,72,114,.35);
    }

    .service-card:hover::after{
      opacity:1;
    }
    
    .service-card h3{
      margin: 14px 0 8px;
      font-size: 18px;
      color: #0f172a;
    }

    .service-card p{
      margin: 0 0 14px;
      font-size: 14.5px;
      line-height: 1.6;
      color: #4b5563;
    }

    .service-icon{
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #ffffff;
    }

    .service-icon img{
      width: 35px;
      height: 35px;
      object-fit: contain;
      display: block;
      filter: none;
      opacity: .9;
    }

    .service-points{
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 8px;
    }

    .service-points li{
      color: #334155;
      font-size: 13.5px;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .service-points li::before{
      content: "✓";
      color: #1d4872;
      font-weight: 900;
      line-height: 1;
      margin-top: 2px;
    }

    @media (max-width: 980px){
      .services-grid{ grid-template-columns: 1fr; }
      .services-head{ margin-bottom: 40px; }
    }


    /*  Proceso */
    .processText{
      padding: 120px 18px;
      background: #fff;
    }

    .processText-wrap{
      max-width: var(--container);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(22px, 3.2vw, 52px);
      align-items: center;
    }

    .processText-media{
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      background: #fff;
      box-shadow: 0 14px 34px rgba(0,0,0,.08);
    }

    .processText-media img{
      width: 100%;
      height: clamp(360px, 56vh, 620px);
      object-fit: cover;
      display: block;
    }

    .processText-content{
      color: #0f172a;
    }

    .processText-kicker{
      margin: 0 0 12px;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #1d4872;
    }

    .processText-title{
      margin: 0 0 26px;
      font-size: clamp(34px, 3.6vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.8px;
      color: #1d4872;
      font-weight: 900;
    }

    .processText-list{
      display: grid;
      gap: 22px;
      padding-left: 18px;
      border-left: 2px solid #e5e7eb;
    }

    .processText-item{
      padding-left: 14px;
      position: relative;
    }

    .processText-item::before{
      content: "";
      position: absolute;
      left: -23px;
      top: 6px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #1d4872;
      box-shadow: 0 0 0 6px rgba(29,72,114,.10);
    }

    .processText-h3{
      margin: 0 0 8px;
      font-size: clamp(18px, 2.1vw, 26px);
      font-weight: 900;
      color: #1d4872;
    }

    .processText-p{
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
      color: #475569;
      max-width: 60ch;
    }

    /* Responsive */
    @media (max-width: 980px){
      .processText-wrap{
        grid-template-columns: 1fr;
        align-items: start;
      }
      .processText-media img{
        height: clamp(260px, 45vh, 520px);
      }
      .processText-list{
        padding-left: 16px;
      }
    }

    /*  Animaciones */
    [data-reveal]{
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s ease, transform .55s ease;
    }

    [data-reveal].is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    [data-pop]{
      opacity: 0;
      transform: scale(.86);
      transform-origin: left center;
      transition: opacity .6s ease, transform .6s ease;
    }
    [data-pop].is-visible{
      opacity: 1;
      transform: scale(1);
    }

    [data-reveal-right]{
      opacity: 0;
      transform: translateX(40px);
      transition: opacity .6s ease, transform .6s ease;
    }
    [data-reveal-right].is-visible{
      opacity: 1;
      transform: translateX(0);
    }

    [data-reveal-left]{
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity .6s ease, transform .6s ease;
    }

    [data-reveal-left].is-visible{
      opacity: 1;
      transform: translateX(0);
      transition-timing-function: cubic-bezier(.4,0,.2,1);
    }

    .processText{
      position: relative;
      padding: 120px 18px;
      background: #ffffff;
      overflow: hidden;
    }

    .processText::before,
    .processText::after{
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      filter: blur(90px);          
      opacity: .32;               
      z-index: 0;
    }

    .processText::before{
      background: radial-gradient(
        circle at 30% 30%,
        #2b57ff 0%,
        #1d4872 60%,
        transparent 70%
      );
      top: -180px;
      left: -160px;
    }

    .processText::after{
      background: radial-gradient(
        circle at 70% 70%,
        #1d4872 0%,
        #1d4872 55%,
        transparent 70%
      );
      bottom: -200px;
      right: -160px;
    }

    .processText-wrap{
      position: relative;
      z-index: 1;
    }

        /* ============================
   Contacto (Formulario + Info)
   ============================ */
.contacto.pro{
  padding: 120px 18px;
}

.contacto.pro.contacto-dark{
  position: relative;
  background: linear-gradient(180deg, #0d2b3a 0%, #0a2230 100%);
  overflow: hidden;
}

.contacto.pro.contacto-dark::before,
.contacto.pro.contacto-dark::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .28;
  z-index: 0;
  pointer-events:none;
}
.contacto.pro.contacto-dark::before{
  background: radial-gradient(circle at 30% 30%, rgba(43,87,255,.85), transparent 65%);
  top: -220px;
  left: -200px;
}
.contacto.pro.contacto-dark::after{
  background: radial-gradient(circle at 70% 70%, rgba(245,154,35,.75), transparent 65%);
  bottom: -240px;
  right: -220px;
}

.contacto.pro .container{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}

.contacto-head{
  text-align: center;
  max-width: 72ch;
  margin: 0 auto 28px;
}

.contacto-title{
  margin: 0 0 10px;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.4px;
  font-weight: 600;   
  color: #ffffff;
}

.contacto-sub{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

.contacto-center{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  justify-content: center;
}

.contacto-card{
  width: min(640px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: clamp(18px, 2.4vw, 28px);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.contacto-card::before{
  content:"";
  position:absolute;
  inset: -40% -20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 80% 40%, rgba(245,154,35,.14), transparent 55%);
  pointer-events:none;
}

.contacto-card > *{ position: relative; z-index: 1; }

/* Bloque de info de contacto (lado izquierdo) */
.contacto-info{
  color: #ffffff;
  max-width: 420px;
}

.contacto-info-title{
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
}

.contacto-info-text{
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}

.contacto-info-item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.contacto-info-item span{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-weight: 700;
}

.contacto-info-item a{
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.contacto-info-item a:hover{
  text-decoration: underline;
}

@media (max-width: 980px){
  .contacto-center{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .contacto-info{
    text-align: center;
    margin: 0 auto;
  }
}


/* Form */
.contact-form{ margin: 0; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}

.form-group{ display: grid; gap: 8px; }
.form-group--full{ grid-column: 1 / -1; }

.form-group label{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}

.form-group input,
.form-group textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  padding: 14px 14px;
  font-size: 15px;
  color: #ffffff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.form-group textarea{ resize: vertical; min-height: 160px; }

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: rgba(245,154,35,.55);
  box-shadow: 0 0 0 6px rgba(245,154,35,.12);
}

.form-group input:required:valid,
.form-group textarea:required:valid{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 6px rgba(16,185,129,.10);
}

.form-group input:required:invalid:not(:placeholder-shown),
.form-group textarea:required:invalid:not(:placeholder-shown){
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 6px rgba(239,68,68,.10);
}

.hint{
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}

.meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.counter{
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}

.btn-send{
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 900;
}

.form-note{
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.62);
  text-align: center;
}

/* Responsive */
@media (max-width: 980px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* FOOTER */
.site-footer{
  background: #0f1f2d;          
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 18px;
}

.site-footer .container{
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}

.site-footer p{
  margin: 0;
  font-size: 13.5px;
  color: #94a3b8;
  letter-spacing: .02em;
}

.hp-field{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vf{
  width: 100%;
  padding: 120px 18px;
  background: #ffffff;        
  color: #1f2937;              
}

.vf-wrap{
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}


.vf-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef4fa;
  border: 1px solid #dbe7f3;
  color: #1d4872;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.vf-title{
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -0.6px;
  line-height: 1.12;
  font-weight: 700; 
  color: #1d4872;
}


.vf-reg{
  font-weight: 700;
  font-size: .45em;
  vertical-align: super;
  margin-left: 6px;
  opacity: .85;
  color: inherit;
}

.vf-lead{
  margin: 0 auto 56px;
  max-width: 760px;         
  line-height: 1.7;
  color: #4b5563;             
  font-size: 16px;            
}

.vf-lead b{
  color: #0f172a;             
}

.vf-card{
  margin: 0 auto;
  max-width: 1040px;
  background: #ffffff;
  border: 1px solid #e5e7eb;                 
  border-radius: 18px;                       
  box-shadow: 0 14px 34px rgba(0,0,0,.08);   
  overflow: hidden;
}

.vf-img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================
   Misión & Visión (cards con flip)
   ============================ */

.mv-section-title{
  margin: 56px auto 56px;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d4872;
}

.mv-grid{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 860px){
  .mv-grid{ grid-template-columns: 1fr; }
}

.mv-card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  padding: 22px;
  min-height: 170px;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  isolation: isolate;
}

.mv-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(29,72,114,.95), rgba(72,167,204,.88));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}

.mv-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}


.mv-front, .mv-back{ position: relative; z-index: 1; }

.mv-front{
  display: flex;
  flex-direction: column;      
  align-items: center;         
  justify-content: center;     
  gap: 14px;
  text-align: center;
  height: 100%;                
  transition: opacity .25s ease, transform .25s ease;
}


.mv-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d4872;
  transition: opacity .2s ease, transform .2s ease;
}
.mv-icon img{
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}


.mv-title{
  font-weight: 900;
  color: #1d4872;
  letter-spacing: -0.02em;
  font-size: 18px;
}

.mv-back{
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
  color: rgba(255,255,255,.93);
  font-size: 15px;
  line-height: 1.55;
  max-width: 42ch;     
  margin: 0 auto;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.mv-back-title{
  font-size: 16px;        
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.mv-card:hover,
.mv-card:focus-visible{
  transform: translateY(-3px);
  border-color: rgba(29,72,114,.45);
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
  outline: none;
}

.mv-card:hover::before,
.mv-card:focus-visible::before{ opacity: 1; }

.mv-card:hover::after,
.mv-card:focus-visible::after{ opacity: 1; }

.mv-card:hover .mv-front,
.mv-card:focus-visible .mv-front{
  opacity: 0;
  transform: translateY(-8px);
}

.mv-card:hover .mv-back,
.mv-card:focus-visible .mv-back{
  opacity: 1;
  transform: translateY(0);
}