:root {
     --bg: #0e1a23;
     --panel: #0f2230;
     --panel-2: #0c1b27;
     --ink: #e7f0fa;
     --muted: #9fb1c3;
     --accent: #22c6f3;
     --radius: 20px;
     --shadow: 0 18px 50px rgba(0, 0, 0, .45);
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: "Poppins", system-ui, sans-serif;
     color: var(--ink);
     background: linear-gradient(180deg, #071119, #0a1620);
 }

 .shell {
     max-width: 420px;
     margin: 0 auto;
     padding: 22px;
 }

 .phone {
     background: linear-gradient(180deg, var(--panel), var(--panel-2));
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 28px;
     box-shadow: var(--shadow);
     padding: 18px;
     overflow: hidden;
     position: relative;
 }

 /* === Header con degradado animado === */
 header {
     text-align: center;
     padding: 20px 0;
     background: linear-gradient(120deg, #0e2237, #22c6f3);
     border-radius: 16px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
     animation: gradientMove 6s ease infinite;
     background-size: 200% 200%;
 }

 @keyframes gradientMove {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 header .portrait img {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     border: 3px solid #fff;
     object-fit: cover;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
 }

 header .nameBlock {
     margin-top: 10px;
 }

 header .role {
     font-weight: 700;
     font-size: 20px;
 }

 header .script {
     font-style: italic;
     opacity: 0.9;
 }

 .line {
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
     margin: 14px 0;
 }

 /* === Secciones === */
 .section {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 20px;
     margin: 20px 0;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     animation: fadeIn 1s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .section h2 {
     text-align: center;
     color: var(--accent);
     margin-top: 0;
 }

 .section ul {
     list-style: none;
     padding: 0;
 }

 .section ul li {
     margin: 8px 0;
     padding-left: 20px;
     position: relative;
 }

 .section ul li::before {
     content: "✔";
     color: var(--accent);
     position: absolute;
     left: 0;
 }

 /* === Lista de contactos === */
 .list {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 10px;
     display: grid;
     gap: 8px;
 }

 .row {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 12px;
     transition: all 0.2s ease;
 }

 .row:hover {
     background: rgba(34, 198, 243, 0.08);
     transform: translateX(3px);
 }

 .label {
     font-weight: 700;
 }

 .sub {
     color: var(--muted);
     font-size: 13px;
 }

 a.row {
     text-decoration: none;
     color: inherit;
 }

 /* === Botón moderno === */
 .btn-modern {
     display: inline-block;
     background: linear-gradient(90deg, #22c6f3, #00b09b);
     color: #fff;
     padding: 14px 26px;
     border-radius: 30px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .btn-modern:hover {
     transform: scale(1.05);
     box-shadow: 0 0 20px rgba(34, 198, 243, 0.6);
 }

 /* === Formulario de contacto === */
 .contact-form form {
     display: grid;
     gap: 12px;
 }

 .contact-form input,
 .contact-form textarea {
     border: none;
     border-radius: 10px;
     padding: 10px;
     background: rgba(255, 255, 255, 0.07);
     color: #fff;
     font-size: 15px;
 }

 .contact-form input:focus,
 .contact-form textarea:focus {
     outline: 2px solid #22c6f3;
     background: rgba(255, 255, 255, 0.1);
 }

 footer {
     text-align: center;
     font-size: 12px;
     color: #9fb1c3;
     margin-top: 20px;
 }

 /* === Responsive === */
 @media (max-width: 480px) {
     .shell {
         padding: 10px;
     }

     header .portrait img {
         width: 90px;
         height: 90px;
     }
 }

 /* === Indicador interactivo sobre la foto === */
 header .portrait {
     position: relative;
     display: inline-block;
 }

 /* 🔹 Texto fijo “Ver en grande” */
 header .portrait::after {
     content: "Ver";
     position: absolute;
     bottom: 6px;
     left: 50%;
     transform: translateX(-50%);
     background: rgba(14, 34, 55, 0.75);
     color: #fff;
     font-size: 11px;
     padding: 3px 10px;
     border-radius: 10px;
     opacity: 1;
     /* siempre visible */
     pointer-events: none;
     transition: all 0.3s ease;
     letter-spacing: 0.3px;
 }

 /* Efecto de brillo cuando el usuario pasa el cursor */
 header .portrait:hover::after {
     background: rgba(34, 198, 243, 0.9);
     color: #fff;
     transform: translateX(-50%) scale(1.05);
 }

 /* === QR arriba a la derecha con animación === */
 .qr-top {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 80px;
     height: 80px;
     border-radius: 10px;
     background: #fff;
     border: 2px solid #22c6f3;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     padding: 5px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     z-index: 10;
     opacity: 0;
     transform: translateY(-15px);
     animation: qrFadeIn 1s ease forwards 0.4s;
 }

 .qr-top img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .qr-top:hover {
     transform: scale(1.08);
     box-shadow: 0 0 20px rgba(34, 198, 243, 0.6);
 }

 /* === Animación de aparición === */
 @keyframes qrFadeIn {
     from {
         opacity: 0;
         transform: translateY(-15px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* === Responsive para móviles === */
 @media (max-width: 480px) {
     .qr-top {
         width: 60px;
         height: 60px;
         top: 10px;
         right: 10px;
         padding: 4px;
     }
 }

 /* === Estilo del modal de QR === */
 .qr-modal {
     display: none;
     /* oculto por defecto */
     position: fixed;
     z-index: 1000;
     padding-top: 80px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.8);
     animation: fadeIn 0.3s ease;
 }

 .qr-modal-content {
     margin: auto;
     display: block;
     width: 80%;
     max-width: 400px;
     border-radius: 14px;
     background: #fff;
     padding: 10px;
     animation: zoomIn 0.4s ease;
 }

 .qr-close {
     position: absolute;
     top: 30px;
     right: 40px;
     color: #fff;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     transition: color 0.3s;
 }

 .qr-close:hover {
     color: #22c6f3;
 }

 /* Animaciones */
 @keyframes zoomIn {
     from {
         transform: scale(0.5);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* Móviles */
 @media (max-width: 480px) {
     .qr-modal-content {
         width: 90%;
         max-width: 300px;
     }

     .qr-close {
         top: 20px;
         right: 25px;
         font-size: 30px;
     }
 }

 /* Texto debajo del QR */
 .qr-text {
     color: #22c6f3;
     font-size: 1rem;
     margin-top: 15px;
     font-weight: 600;
     text-align: center;
     animation: pulseText 1.6s infinite;
 }

 /* Efecto pulsante del texto */
 @keyframes pulseText {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.6;
         transform: scale(1.05);
     }
 }

 a.row[href$=".vcf"] {
     background: linear-gradient(90deg, #22c6f3, #0e2237);
     color: #fff;
     box-shadow: 0 4px 10px rgba(34, 198, 243, 0.3);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 a.row[href$=".vcf"]:hover {
     transform: scale(1.03);
     box-shadow: 0 0 20px rgba(34, 198, 243, 0.6);
 }

 /* === Modal general === */
 .image-modal {
     display: none;
     /* Oculto por defecto */
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.85);
     justify-content: center;
     align-items: center;
     animation: fadeIn 0.4s ease;
 }

 /* Imagen ampliada */
 .image-modal-content {
     max-width: 90%;
     max-height: 80vh;
     border-radius: 12px;
     box-shadow: 0 0 25px rgba(34, 198, 243, 0.4);
     animation: zoomIn 0.4s ease;
 }

 /* Botón de cierre */
 .image-close {
     position: absolute;
     top: 25px;
     right: 35px;
     color: #fff;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .image-close:hover {
     color: #22c6f3;
 }

 /* Animaciones */
 @keyframes zoomIn {
     from {
         transform: scale(0.7);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* Responsive */
 @media (max-width: 480px) {
     .portrait img {
         width: 90px;
         height: 90px;
     }

     .image-modal-content {
         max-width: 95%;
         max-height: 75vh;
     }

     .image-close {
         top: 15px;
         right: 20px;
         font-size: 34px;
     }
 }

 /* === Tabs estilo moderno === */
 .tab-buttons {
     display: flex;
     justify-content: center;
     gap: 15px;
 }

 .tab-btn {
     background: linear-gradient(90deg, #22c6f3, #00b09b);
     border: none;
     color: #fff;
     padding: 10px 20px;
     border-radius: 25px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .tab-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 18px rgba(34, 198, 243, 0.5);
 }

 /* === Modal general === */
 .modal {
     display: none;
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(10, 15, 25, 0.9);
     justify-content: center;
     align-items: center;
     animation: fadeIn 0.4s ease;
 }

 .modal-content {
     background: #0f2230;
     color: #e7f0fa;
     padding: 25px;
     border-radius: 16px;
     width: 90%;
     max-width: 400px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
     animation: zoomIn 0.4s ease;
 }

 .modal-content h2 {
     color: #22c6f3;
     margin-top: 0;
     text-align: center;
 }

 .modal-content ul {
     list-style: none;
     padding: 0;
     margin-top: 15px;
 }

 .modal-content li {
     margin-bottom: 8px;
     position: relative;
     padding-left: 18px;
 }

 .modal-content li::before {
      content: "";
     position: absolute;
     left: 0;
     top: 4px;
     width: 14px;
     height: 14px;
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322c6f3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center center;
     background-size: contain;
 }

 .close {
     position: absolute;
     top: 20px;
     right: 30px;
     color: #fff;
     font-size: 32px;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close:hover {
     color: #22c6f3;
 }

 /* Animaciones */
 @keyframes zoomIn {
     from {
         transform: scale(0.7);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* === Responsive === */
 @media (max-width: 480px) {
      .tab-buttons {
         flex-direction: row;
         justify-content: center;
         gap: 8px;
         flex-wrap: wrap;
     }

     .tab-btn {
         flex: 1;
         min-width: 120px;
         padding: 10px 0;
         font-size: 14px;
     }

     .modal-content {
         width: 92%;
         padding: 20px;
     }

     .close {
         top: 15px;
         right: 20px;
         font-size: 28px;
     }
 }

 /* === Mensaje de respuesta del formulario === */
 .form-message {
     margin-top: 15px;
     text-align: center;
     font-size: 15px;
     padding: 10px;
     border-radius: 8px;
     display: none;
     transition: all 0.4s ease;
 }

 .form-message.success {
     background: rgba(0, 180, 90, 0.15);
     color: #00b45a;
     border: 1px solid #00b45a;
     display: block;
     animation: fadeIn 0.4s ease;
 }

 .form-message.error {
     background: rgba(255, 80, 80, 0.15);
     color: #ff5050;
     border: 1px solid #ff5050;
     display: block;
     animation: fadeIn 0.4s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* === Scroll interno para el modal "Sobre mí" === */
 #modalAbout .modal-content {
     max-height: 80vh;
     /* Altura máxima visible del modal */
     overflow-y: auto;
     /* Habilita desplazamiento vertical */
     padding-right: 15px;
     /* Espacio para el scrollbar */
 }

 /* Scroll personalizado (moderno) */
 #modalAbout .modal-content::-webkit-scrollbar {
     width: 8px;
 }

 #modalAbout .modal-content::-webkit-scrollbar-thumb {
     background-color: rgba(34, 198, 243, 0.4);
     border-radius: 6px;
 }

 #modalAbout .modal-content::-webkit-scrollbar-thumb:hover {
     background-color: rgba(34, 198, 243, 0.7);
 }

 .texto-justificado{
text-align: justify;
}