/* ============================================
   CONTENEDOR GENERAL
   ============================================ */
.marco-mascara {
  position: relative;
  /* width: 100%; */
  aspect-ratio: 4 / 3;
  overflow: hidden;

  /* VARIABLES POR DEFECTO */
  --img-src: url('/img/tz/1024_x_768/tz44.jpg');

  /* Imagen */
  --img-x: 50%;
  --img-y: 50%;
  --img-scale: 1;

  /* Máscara */
  --mask-x: 50%;
  --mask-y: 50%;
  --mask-scale: 100%; /* porcentaje */
}

/* ============================================
   MÁSCARA
   ============================================ */
.mascara-contenedor {
  position: absolute;
  width: 100%;
  height: 100%;
  top: calc(var(--mask-y) + 50%);
  left: calc(var(--mask-x) + 50%);

  mask-image: url('/svg/recorte.svg');
  -webkit-mask-image: url('/svg/recorte.svg');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;

  /* CORRECCIÓN: Separar scale() de rotate() */
  transform: translate(-50%, -50%) 
             scale(calc(var(--mask-scale) / 100%)) 
             rotate(var(--mask-rotate, 0deg));
}
/* ============================================
   IMAGEN INTERNA
   ============================================ */
.imagen-mascara {
  position: absolute;
  width: 100%;
  height: 100%;
  
  /* Dejamos el anclaje base en el centro exacto */
  top: 50%;
  left: 50%;

  background-image: var(--img-src);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* 
     ORDEN DEL TRANSFORM (Crucial):
     1. Centramos (-50%)
     2. Aplicamos escala e independencia de rotación
     3. Aplicamos el movimiento (translate) usando las variables.
     Al poner el movimiento después del scale, el 1% de movimiento 
     equivale al 1% visual de la imagen.
  */
  transform: translate(-50%, -50%) 
             scale(calc(var(--img-scale) / 100%)) 
             rotate(calc(var(--img-rotate, 0deg) - var(--mask-rotate, 0deg)))
             translate(calc(var(--img-x) - var(--mask-x)), calc(var(--img-y) - var(--mask-y)));
}




/* ============================================
   AJUSTES POR SECCIÓN
   ============================================ */

/* ELEGIRNOS */
.mascara-elegirnos {
  --img-src: url('/img/tz/1024_x_768/tz44.jpg');

  /* Imagen */
  --img-x: 4%;
  --img-y: -5%;
  --img-scale: 77%;
  --img-rotate: 0deg;
  /* Máscara */
  --mask-x: 25%;
  --mask-y: -10%;
  --mask-scale: 143%;
  --mask-rotate: -8deg;
}

/* CONTACTO */
.mascara-contacto {
  --img-src: url('/img/mx/1024_x_768/mx34.jpg');

  /* Imagen */
  --img-x: -5%;
  --img-y: -5%;
  --img-scale: 70%;
  --img-rotate: 0deg;
  /* Máscara */
  --mask-x: -20%;
  --mask-y: 20%;
  --mask-scale: 130%;
  --mask-rotate: 185deg;
}

/* ============================================
   MÓVIL
   ============================================ */
@media (max-width: 768px) {

  .mascara-elegirnos {
    --img-scale: 100%;
    --mask-scale: 130%;
  }

  .mascara-contacto {
    --img-scale: 110%;
    --mask-scale: 125%;
  }
  .columna-mascara {
    height: auto;              /* evita columnas gigantes */
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .imagen-mascara {
    position: static;          /* elimina desplazamientos */
    transform: none;
    height: 50vw;              /* tamaño proporcional al ancho */
    max-height: 300px;         /* límite razonable */
    width: 50vw;
    aspect-ratio: 1 / 1;
  }
}