/* ===== Desktop ===== */
@media (min-width: 987px) {

  body {
    font-family: 'Poppins', sans-serif;
    background-color: rgb(19, 6, 19);
    color: white;
    margin-top: 14rem; /* compensa navbar fija */
  }

  .title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    text-align: left;
    color: white;
    width: 84%;
  }

  /* --- Tarjetas de modelos --- */
  .photo-container {
    position: relative;             /* importante para el overlay inferior */
    background-size: cover;
    z-index: 10;
    width: 100%;
    height: 24rem;
    border-radius: 2.8rem;
    overflow: hidden;
    border: .4rem solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: glow 2s infinite;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
    margin-bottom: 3.2rem;          /* MÁS SEPARACIÓN ENTRE TARJETAS */
  }

  @keyframes glow{
    0%{ border: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff); }
    50%{ border: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff); }
    100%{ border: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff); }
  }

  .photo-container:hover{
    transform: scale(1.03);
    box-shadow: 0 0 2.2rem rgba(255,255,255,0.8);
  }

  /* Bloque inferior: nombre (arriba) + fila de iconos (debajo) */
  .div-model-info-text{
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;                                     /* separa nombre y fila de iconos */
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28)); /* MÁS transparente */
    padding: 1rem 1.15rem;                           /* más grande */
    border-radius: 1.1rem;
    backdrop-filter: blur(2px);
    isolation: isolate;                              /* para el pseudo-elemento */
  }

  /* Borde elegante SOLO en hover (fade-in, sin giro) */
  .div-model-info-text::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
                rgba(241,139,184,.55),
                rgba(255,255,255,.18),
                rgba(241,139,184,.55));
    /* máscara para mostrar solo el borde */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 2px;
    opacity: 0;                                      /* oculto por defecto */
    transition: opacity .35s ease;                   /* aparece suavemente */
    pointer-events: none;
  }
  .div-model-info-text:hover::before{
    opacity: .6;                                     /* aparece solo en hover */
  }

  .model-name{
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.55rem);       /* un poco más grande */
    letter-spacing: .035em;
  }

  .model-actions{
    display: flex;
    align-items: center;
    gap: .85rem;                                     /* separación entre iconos */
  }

  .icon{
    width: 2.4rem;                                   /* iconos más grandes */
    height: 2.4rem;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .92;
    transition: transform .2s ease, opacity .2s ease;
  }
  .icon:hover{ transform: translateY(-2px); opacity: 1; }

  .icon.insta{ background-image: url("../assets/images/instaLogo4.png"); }
  .icon.only { background-image: url("../assets/images/logoOnly4.png"); }
  .icon.see  { background-image: url("../assets/images/logoSeeMore24.png"); }

  /* Fondos de ejemplo existentes */
  .modelo1{ background: url('../assets/images/pibaextrahome6.png') center/cover no-repeat; }
  .modelo2{ background: url('../assets/images/pibaextrahome9.jpg') center/cover no-repeat; }
  .modelo3{ background: url('../assets/images/pibaextrahome8.png') center/cover no-repeat; }
  .modelo4{ background: url('../assets/images/pibaextrahome23.jpg') center/cover no-repeat; }

  /* ===========================
     BOTÓN ACCESS NOW (DESKTOP)
     =========================== */

  /* animación cíclica de las flechas tipo "empuje / llamada" */
  @keyframes arrowPulse {
    0%   { transform: translateX(0);    opacity: 1;   }
    40%  { transform: translateX(4px);  opacity: .8; }
    80%  { transform: translateX(0);    opacity: 1;   }
    100% { transform: translateX(0);    opacity: 1;   }
  }

  /* brillo que recorre la línea inferior */
  @keyframes underlineSweep {
    0%   { left: -20%; opacity: 0; }
    30%  { opacity: .9; }
    60%  { left: 60%; opacity: .9; }
    100% { left: 110%; opacity: 0; }
  }

  


  /* ================
     SLOGAN
     ================ */
  .slogan-hero{
    max-width: min(1100px, 92vw);
    margin: 0 auto;
    padding: clamp(8px, 2vw, 16px) clamp(8px, 2vw, 16px);
    display: grid;
    row-gap: clamp(10px, 1.2vw, 16px);
    background: transparent;
  }
  .slogan-title{
    margin: 0;
    line-height: 1.04;
    letter-spacing: .02em;
    font-weight: 800;
    font-size: clamp(22px, 4.8vw, 56px);
    text-transform: uppercase;
    color: #B52DC7;
    text-align: left;
  }
  .slogan-text{ display: inline-block; }
  .slogan-cursor{
    display: inline-block;
    width: .08em; height: .9em;
    transform: translateY(.08em);
    background: currentColor;
    animation: blink 1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .slogan-sub{
    margin: .35rem 0 0 0;
    max-width: 72ch;
    color: #dedede;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.9;
    letter-spacing: .005em;
    text-align: left;
    text-wrap: pretty;
    white-space: pre-line;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

/* ===== Mobile ===== */
@media (max-width: 987px) {

  body{
    font-family: 'Poppins', sans-serif;
    background-color: rgb(19, 6, 19);
    color: white;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 12rem;
  }

  .title{
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    text-align: left;
    color: white;
    width: 100%;
    position: relative;
  }

  /* Tarjetas */
  .photo-container{
    position: relative;            /* igual que desktop */
    background-size: cover;
    z-index: 10;
    width: 100%;
    height: 20rem;
    border-radius: 2rem;
    overflow: hidden;
    border: .4rem solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: glow 2s infinite;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
    margin-bottom: 2.4rem;         /* MÁS SEPARACIÓN EN MÓVIL */
  }

  .div-model-info-text{
    position: absolute;
    left: .9rem;
    bottom: .9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.07), rgba(0,0,0,0.26)); /* MÁS transparente */
    padding: .85rem 1rem;                              /* más grande */
    border-radius: 1rem;
    backdrop-filter: blur(2px);
    isolation: isolate;
  }

  /* Borde elegante SOLO en hover (móvil) */
  .div-model-info-text::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
                rgba(241,139,184,.5),
                rgba(255,255,255,.14),
                rgba(241,139,184,.5));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 2px;
    opacity: 0;                                  /* oculto por defecto */
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .div-model-info-text:hover::before{
    opacity: .55;                                /* aparece solo en hover */
  }

  .model-name{
    margin: 0;
    font-size: 1.15rem;                                /* un poco más grande */
    letter-spacing: .02em;
  }

  .model-actions{
    display: flex;
    align-items: center;
    gap: .7rem;
  }

  .icon{
    width: 2.2rem;                                     /* iconos más grandes */
    height: 2.2rem;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .94;
    transition: transform .2s ease, opacity .2s ease;
  }
  .icon:hover{ transform: translateY(-1px); opacity: 1; }

  .icon.insta{ background-image: url("../assets/images/instaLogo4.png"); }
  .icon.only { background-image: url("../assets/images/logoOnly4.png"); }
  .icon.see  { background-image: url("../assets/images/logoSeeMore24.png"); }

  /* Fondos (móvil) */
  .modelo1{ background: url('../assets/images/pibaextrahome6.png') center/cover no-repeat; }
  .modelo2{ background: url('../assets/images/pibaextrahome9.jpg') center/cover no-repeat; }
  .modelo3{ background: url('../assets/images/pibaextrahome8.png') center/cover no-repeat; }
  .modelo4{ background: url('../assets/images/pibaextrahome23.jpg') center/cover no-repeat; }

  /* ===========================
     BOTÓN ACCESS NOW (MOBILE)
     =========================== */

  @keyframes arrowPulse {
    0%   { transform: translateX(0);    opacity: 1;   }
    40%  { transform: translateX(4px);  opacity: .8; }
    80%  { transform: translateX(0);    opacity: 1;   }
    100% { transform: translateX(0);    opacity: 1;   }
  }

  @keyframes underlineSweep {
    0%   { left: -20%; opacity: 0; }
    30%  { opacity: .9; }
    60%  { left: 60%; opacity: .9; }
    100% { left: 110%; opacity: 0; }
  }

  /* ================
     SLOGAN
     ================ */
  .slogan-hero{
    max-width: min(1100px, 92vw);
    margin: 0 auto;
    padding: clamp(8px, 4vw, 16px) clamp(8px, 5vw, 18px);
    display: grid;
    row-gap: 12px;
    background: transparent;
  }
  .slogan-title{
    margin: 0;
    line-height: 1.06;
    letter-spacing: .02em;
    font-weight: 800;
    font-size: clamp(22px, 7vw, 34px);
    text-transform: uppercase;
    color: #B52DC7;
    text-align: left;
  }
  .slogan-text{ display: inline-block; }
  .slogan-cursor{
    display: inline-block;
    width: .08em; height: .9em;
    transform: translateY(.08em);
    background: currentColor;
    animation: blink 1s steps(1) infinite;
  }
  .slogan-sub{
    margin: .3rem 0 0 0;
    max-width: 76ch;
    color: #e2e2e2;
    font-weight: 400;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.85;
    letter-spacing: .004em;
    text-align: left;
    text-wrap: pretty;
    white-space: pre-line;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

/* Accesibilidad (reduce motion) */
@media (prefers-reduced-motion: reduce){
  .slogan-cursor{ animation: none; }
}