/*
@font-face {
    font-family: 'Sheylendra';
    src: url('../.././sitio_web/css/Sheylendra_DEMO.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}
*/
  html,
  body {
    width: 100%;      
	  height: 100%;
    margin: 0;
    padding: 0;  
    font-family: 'Roboto', sans-serif;
  }

  form {
      margin: 0 auto;
    max-width: 700px;
  }

  #cabecera {
    width: 100%; /* El ancho siempre será del 100% del contenedor */
    height: 100%; /* La altura ocupará el 100% de la pantalla del dispositivo */
  }

  .color {
    color:        grey;
  }
  .color2 {  
    color:        white;
  }


  #pie {
	  width:            100%; /* El ancho siempre será del 100% del contenedor */
    height:           100%; /* La altura ocupará el 100% de la pantalla del dispositivo */
  }
  .separador_foto {
    z-index:          20;
    position:         relative;  
    margin:           80px 0px 240px 0px;
	  width:            100%; /* El ancho siempre será del 100% del contenedor */
    height:           100%; /* La altura ocupará el 100% de la pantalla del dispositivo */
  }
  .separador_texto {
    position:         relative; 
    width:            100%; 
    
  }


  #separador {
    position:         relative;  
	  width:            100%; /* El ancho siempre será del 100% del contenedor */
    height:           100%; /* La altura ocupará el 100% de la pantalla del dispositivo */
  }

  #separador2 {
    position:         relative;
	  width:            100%; /* El ancho siempre será del 100% del contenedor */
    height:           100%; /* La altura ocupará el 100% de la pantalla del dispositivo */  
  }



.container {
	  display:          block;
	  justify-content:  center; /* Centra horizontalmente */
	  align-items:      center;     /* Centra verticalmente */
    align-content:    center;
	  text-align:       center;      /* Alinea el texto en el centro (si el texto ocupa varias líneas) */
    font-size:				30px; 
  }

.cursiva {
  font-family:        'Dancing Script', 'Roboto', sans-serif;
	font-size:			    60px; 
  font-weight:        bolder;
}


.titulo {
  text-shadow:        0px 0px 15px goldenrod;
	font-size:			    60px; 
  font-weight:        bolder;
}
.subtitulo {
  text-shadow:        0px 0px 15px goldenrod;
	font-size:			    35px; 
}
.subtitulo2 {
  text-shadow:        0px 0px 15px goldenrod;
	font-size:			    20px; 
}

.content {
    position:         relative;
    z-index:          1; /* Asegura que el contenido esté delante del fondo */
    padding:          50px;
}

td {
  text-align:         left;
  vertical-align:     top;
}

.phone2 {
  width: 179px;
  height: 359px;
  background: #333;
  border-radius: 19px;
  padding: 1px;
  
}


.phone {
  width: 180px;
  height: 360px;
  background: #000;
  border-radius: 20px;
  padding: 6px;
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
}

/* Parte superior */
.phone-top {
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.speaker {
  width: 30px;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

/* Pantalla */
.screen {
  background: #fff;
  height: calc(100% - 30px);
  border-radius: 15px;
  padding: 8px;
  overflow-y: auto;
}

/* Parte inferior */
.phone-bottom {
  height: 15px;
}

/* Contenido de ejemplo */
h1 {
  font-size: 22px;
  margin-bottom: 10px;
}

p {
  font-size: 14px;
  color: #555;
}

.card {
  background: #f2f2f2;
  padding: 15px;
  border-radius: 12px;
  margin-top: 10px;
}



@media only screen and (max-width: 480px) {
    /* Estilos para pantallas pequeñas como teléfonos móviles en modo vertical */

}


@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Estilos para teléfonos móviles en modo horizontal */
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Estilos para tabletas en modo vertical */

}
@media only screen and (min-width: 1025px) {
    /* Estilos para tabletas en modo vertical */

}