@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'OwenPro-SemiBold';
    src: url("../../fonts/Owen Pro/OwenPro-SemiBold.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OwenPro-Medium';
    src: url("../../fonts/Owen Pro/OwenPro-Medium.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OwenPro-Regular';
    src: url("../../fonts/Owen Pro/OwenPro-Regular.otf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--gris-claro: #646972;
	--owenPro-600: 'OwenPro-SemiBold';
	--owenPro-500: 'OwenPro-Medium';
	--owenPro-400: 'OwenPro-Regular';
}

.container__registro {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	min-height: 400px;
}

.container__registro-texto { 
	grid-area: 1 / 1 / 5 / 3; 
	align-self: center;
	text-align: center;
}
.container__registro-imagen { 
	grid-area: 1 / 3 / 5 / 5; 
}
.container__registro-imagen img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.container__registro-texto h1{
	font-family: var(--owenPro-500);
	font-size: 1.75rem;
	line-height: .8rem;
}
.texto__registro-negro{
	margin-left: -33%;
}
.texto__registro-aqua{
	color: var(--aqua);
}

/* From Uiverse.io by gharsh11032000 */ 
.btn_registrarse {
  font-family: var(--owenPro-500);
  font-size: 1.25rem;
  color: var(--gris-claro);
  border-radius: 30px;
  width: 38%;
  max-width: 304px;
  height: 3rem;
  margin-top: 1.5rem;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self:center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  background-color: inherit;
  box-shadow: 0 0 0 2px #00A0AF;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn_registrarse svg {
  position: absolute;
  width: 24px;
  fill: #00A0AF;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn_registrarse .arr-1 {
  right: 16px;
}

.btn_registrarse .arr-2 {
  left: -25%;
}

.btn_registrarse .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--aqua);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn_registrarse .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn_registrarse:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #FFFFFF;
  border-radius: 90px;
  height: 3rem;
}

.btn_registrarse:hover .arr-1 {
  right: -25%;
}

.btn_registrarse:hover .arr-2 {
  left: 16px;
}

.btn_registrarse:hover .text {
  transform: translateX(12px);
}

.btn_registrarse:hover svg {
  fill: #FFFFFF;
}

.btn_registrarse:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #00A0AF;
}

.btn_registrarse:hover .circle {
  width: 100%;
  height: 220px;
  opacity: 1;
}

@media only screen and (max-width: 921px){
.btn_registrarse{
	width: 50%;	
	padding: 16px 80px;
	}
}
@media only screen and (max-width: 725px){
.container__registro-texto h1 {
    font-size: 1.3rem;
    line-height: .8rem;
}
.btn_registrarse {
    font-size: 1rem;
    width: 47%;
    height: 2.5rem;
    margin-top: 7px;
}
}
@media only screen and (max-width: 569px){
.container__registro {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.container__registro-texto { 
    grid-area: 1 / 2 / 1 / 6;
    min-height: 60vh;
    align-content: center;
}
.container__registro-imagen { 
	grid-area: 2 / 1 / 7 / 7;
	max-height: 65vh;
	display: flex;
    justify-content: center; 
}
.texto__registro-negro {
    margin-left: 0%;
}
 .btn_registrarse {
     width: 80%;
	 margin-top: 15px;
    }
.container__registro-imagen img {
     height: 85vh;
     object-fit: cover; 
}
}