/* Reset básico */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: "Raleway", sans-serif;
     background-color: #fff;
     color: #000;
 }

 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
     width: 100%;
 }

 /* =============================================== CONTACT =============================================== */
 .contact-section {
     display: flex;
     flex-direction: column;
     gap: 32px;
     padding: 64px 123px;
 }

 .contact-columns {
     display: grid;
     grid-template-columns: 41.7% calc(58.3% - 32px);
     gap: 32px;
     align-items: center;
     width: 100%;
 }

 /* Columna izquierda */
 .contact-info h2 {
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 56px;
     font-style: normal;
     font-weight: 600;
     line-height: 64px;
     letter-spacing: -2%;
     margin-bottom: 16px;
 }

 .contact-info p {
     color: #000;
     font-family: "Raleway", sans-serif;
     font-size: 24px;
     font-style: normal;
     font-weight: 400;
     line-height: 32px;
     letter-spacing: -2%;
     margin-bottom: 96px;
 }

 /* Contenedor de texto + ícono */
 .contact-row {
     display: flex;
     align-items: center;
     gap: 16px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 /* Texto del mail */
 .contact-mail {
     font-size: 20px;
     font-style: normal;
     font-weight: 400;
     line-height: 28px;
     letter-spacing: 0%;
     text-decoration: underline;
     color: #000;
     transition: color 0.3s ease;
 }

 /* Círculo con ícono */
 .contact-circle {
     display: flex;
     align-items: center;
     justify-content: center;
     background: #000;
     border-radius: 100%;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .contact-circle svg path {
     stroke: white;
     transition: stroke 0.3s ease;
 }

 /* ========== HOVER: se aplica a todo el bloque ========== */
 .contact-row:hover .contact-mail {
     color: rgba(0, 0, 0, 0.25);
 }

 .contact-row:hover .contact-circle {
     background: rgba(0, 0, 0, 0.25);
     transform: scale(1.05);
 }

 /* ========== ACTIVE (click) ========== */
 .contact-row:active .contact-circle {
     background: #fff;
 }

 .contact-row:active .contact-circle svg path {
     stroke: #000;
 }

 .contact-row:active .contact-mail {
     color: #000;
 }

 /* ================== Columna derecha (botones) ==============================  */
 .contact-buttons {
     width: 100%;
     height: 504px;
     margin: 0;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #C3F5FB;
     border-radius: 24px;
     overflow: hidden;
 }

 /* Estilo base de los botones */
 .contact-btn {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 8px;
     height: 56px;
     padding: 12px 24px;
     background: transparent;
     color: #2B9FAC;
     font-weight: 500;
     font-size: 24px;
     line-height: 32px;
     border: 1px solid #2B9FAC;
     border-radius: 9999px;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
     white-space: nowrap;
 }

 /* SVG hereda el color del texto */
 .contact-btn svg {
     width: 24px;
     height: 24px;
     transition: color 0.3s ease;
 }

 /* Hover: fondo azul, texto y SVG blancos */
 .contact-btn:hover {
     background-color: #2B9FAC;
     color: #fff;
 }

 /* Active (clic) */
 .contact-btn:active {
     background: #fff;
     border-color: #2B9FAC;
     color: #2B9FAC;
 }


 /* ============ Posiciones fijas personalizadas ============ */
 .btn1 {
     top: 235px;
     left: 35px;
     transform: rotate(-18deg);
 }

 .btn2 {
     top: 310px;
     left: 100px;
     transform: rotate(2deg);
 }

 .btn3 {
     top: 385px;
     left: 24px;
     transform: rotate(15deg);
 }

 .btn4 {
     top: 245px;
     right: 20px;
     transform: rotate(23deg);
 }

 .btn5 {
     bottom: 60px;
     right: 24px;
     transform: rotate(10deg);
 }

 .contact-btn:hover {
     background-color: #2B9FAC;
     color: #fff;
 }

 .contact-btn:active {
     background: none;
     border: none;
     color: #2B9FAC;
 }


 /* Div ancho completo con p + botón */
 .contact-fullwidth {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 32px;
     padding: 64px 0;
     width: 100%;
     background-color: transparent;
     text-align: center;
 }

 .contact-fullwidth p {
     font-size: 24px;
     font-weight: 400;
     letter-spacing: -2%;
 }

 .contact-action-btn {
     display: flex;
     padding: 12px 24px;
     justify-content: center;
     align-items: center;
     gap: 8px;
     height: 48px;
     border-radius: 9999px;
     font-family: "Raleway", sans-serif;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
     white-space: nowrap;
 }

 .contact-action-btn {
     background: #000;
     color: #fff;
 }

 .contact-action-btn:hover {
     background: rgba(0, 0, 0, 0.25);
     color: #fff;
 }

 .contact-action-btn:active {
     background: #fff;
     color: #000;
     border: 1px solid #fff;
 }


 /* ================== FORMULARIO ================== */

 .contact-form {
     position: absolute;
     display: none;
     padding: 64px;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
     width: 100%;
     animation: fadeIn 0.5s ease forwards;
 }


 .contact-form form {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }


 .contact-form.active {
     display: block;
 }

 .form-row {
     display: flex;
     gap: 32px;
     margin-bottom: 24px;
     height: 48px;
 }

 .form-column {
     display: flex;
     flex-direction: column;
     gap: 24px;
     height: 48px;
 }

 /* ====== Grupo de campo con título ====== */
 .field-group,
 .field-group-description {
     display: flex;
     flex-direction: column;
     gap: 4px;
     width: 100%;
     max-width: 100%;
     font-family: "Raleway", sans-serif;
 }

 /* Título del campo */
 .field-group label,
 .field-group-description label {
     font-size: 16px;
     line-height: 24px;
     font-weight: 600;
     color: white;
 }

 /* Campo de texto minimalista */
 .field-group input,
 .field-group textarea,
 .field-group-description input,
 .field-group-description textarea {
     background: transparent;
     border: none;
     border-bottom: 1px solid white;
     padding: 0px 0;
     color: white;
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     outline: none;
     width: 100%;
     font-family: "Raleway", sans-serif;
 }

 .field-group textarea,
 .field-group-description textarea {
     resize: none;
 }

 .field-group input::placeholder,
 .field-group textarea::placeholder,
 .field-group-description input::placeholder,
 .field-group-description textarea::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 /* Altura específica para la descripción */
 .field-group-description,
 .field-group-description textarea {
     height: 72px;
 }

 #form-status {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 16px;
     font-weight: 500;
     color: #fff;
     margin-top: 16px;
     transition: opacity 0.3s ease;
 }

 /* ====== Botón de envío ====== */
 .send-btn {
     display: flex;
     padding: 8px 16px;
     justify-content: center;
     align-items: center;
     gap: 8px;
     height: 40px;
     border-radius: 9999px;
     font-family: "Raleway", sans-serif;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.3s, color 0.3s, border 0.3s;
     align-self: flex-start;
     margin-top: auto;
     background: #fff;
     color: #000;
     border: 1px solid transparent;
 }

 .send-btn:hover {
     background: rgba(255, 255, 255, 0.25);
     color: #fff;
     border: 1px solid transparent;
 }


 .send-btn:active {
     background: #000;
     color: #fff;
     border: 1px solid transparent;
 }

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

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

 /* Estado cuando se cambia el fondo a negro */
 .contact-buttons.dark-mode {
     background-color: #000;
     color: white;
 }


 /* ===================== RESPONSIVE DESIGN ===================== */
 @media (min-width: 1367px) and (max-width: 2000px) {
     .btn1 {
         top: 160px;
         left: 120px;
         transform: rotate(-15deg);
     }

     .btn2 {
         top: 260px;
         left: 230px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 380px;
         left: 150px;
         transform: rotate(10deg);
     }

     .btn4 {
         top: 180px;
         right: 90px;
         transform: rotate(18deg);
     }

     .btn5 {
         bottom: 100px;
         right: 180px;
         transform: rotate(12deg);
     }

 }

 @media (max-width: 1575px) {
     .btn1 {
         top: 160px;
         left: 80px;
         transform: rotate(-15deg);
     }

     .btn2 {
         top: 260px;
         left: 180px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 380px;
         left: 90px;
         transform: rotate(10deg);
     }

     .btn4 {
         top: 160px;
         right: 60px;
         transform: rotate(18deg);
     }

     .btn5 {
         bottom: 100px;
         right: 110px;
         transform: rotate(12deg);
     }

 }

 /* ==================== ≤ 1366px ==================== */
 @media (max-width: 1366px) {
     .contact-columns {
         grid-template-columns: 41.7% calc(58.3% - 32px);
         gap: 32px;
     }

     .btn1 {
         top: 235px;
         left: 35px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 310px;
         left: 100px;
         transform: rotate(2deg);
     }

     .btn3 {
         top: 385px;
         left: 24px;
         transform: rotate(15deg);
     }

     .btn4 {
         top: 245px;
         right: 20px;
         transform: rotate(23deg);
     }

     .btn5 {
         bottom: 60px;
         right: 24px;
         transform: rotate(10deg);
     }

     .contact-fullwidth {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         gap: 32px;
         padding: 42px 0;
         width: 100%;
         text-align: left;
     }

     .contact-fullwidth p {
         font-size: 24px;
         line-height: 32px;
         flex-grow: 1;
         margin: 0;
     }

     .contact-action-btn {
         flex-shrink: 0;
         white-space: nowrap;
     }

 }

 /* ---------- 1220px ---------- */
 @media (max-width: 1220px) {
     .btn1 {
         top: 220px;
         left: 34px;
         transform: rotate(-17deg);
     }

     .btn2 {
         top: 290px;
         left: 97px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 382px;
         left: 23px;
         transform: rotate(14deg);
     }

     .btn4 {
         top: 200px;
         right: 20px;
         transform: rotate(22deg);
     }

     .btn5 {
         bottom: 85px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 @media (max-width: 1185px) {
     .btn1 {
         top: 210px;
         left: 25px;
         transform: rotate(-17deg);
     }

     .btn2 {
         top: 280px;
         left: 97px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 382px;
         left: 23px;
         transform: rotate(14deg);
     }

     .btn4 {
         top: 175px;
         right: 20px;
         transform: rotate(22deg);
     }

     .btn5 {
         bottom: 85px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 @media (max-width: 1145px) {
     .btn4 {
         top: 160px;
         right: 20px;
         transform: rotate(22deg);
     }

     .btn5 {
         bottom: 95px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 @media (max-width: 1075px) {
     .btn1 {
         top: 200px;
         left: 25px;
         transform: rotate(-17deg);
     }

     .btn2 {
         top: 265px;
         left: 97px;
         transform: rotate(-5deg);
     }

     .btn4 {
         top: 135px;
         right: 20px;
         transform: rotate(22deg);
     }

     .btn5 {
         bottom: 105px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 @media (max-width: 1025px) {
     .btn1 {
         top: 185px;
         left: 25px;
         transform: rotate(-17deg);
     }

     .btn2 {
         top: 255px;
         left: 80px;
         transform: rotate(-5deg);
     }

     .btn4 {
         top: 115px;
         right: 20px;
         transform: rotate(22deg);
     }

     .btn5 {
         bottom: 115px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 /* ---------- Hasta 996px (Tablets horizontales) ---------- */
 @media (max-width: 996px) {
     .contact-section {
         padding: 64px 68px;
         gap: 32px;
     }

     .contact-columns {
         grid-template-columns: 45% 55%;
         gap: 32px;
         align-items: center;
         justify-content: center;
     }

     .contact-info {
         width: 100%;
     }

     .contact-buttons {
         width: 100%;
         height: 504px;
     }

     .contact-fullwidth {
         flex-direction: column;
         text-align: center;
         gap: 32px;
     }

     /* Posiciones ajustadas */
     .btn1 {
         top: 210px;
         left: 24px;
         transform: rotate(0deg);
     }

     .btn2 {
         top: 280px;
         left: 48px;
         transform: rotate(-10deg);
     }

     .btn3 {
         top: 400px;
         left: 24px;
         transform: rotate(8deg);
     }

     .btn4 {
         top: 155px;
         right: 24px;
         transform: rotate(15deg);
     }

     .btn5 {
         bottom: 100px;
         right: 24px;
         transform: rotate(6deg);
     }

     /* Ajuste del contenedor principal del formulario */
     .contact-form {
         padding: 42px;
         height: auto;
         width: 100%;
     }

     /* Ajuste del formulario interno */
     .contact-form form {
         flex-direction: column;
         height: auto;
     }

     /* Filas: mantener dos columnas para nombre y apellido */
     .form-row {
         flex-direction: row;
         gap: 24px;
         height: auto;
         margin-bottom: 24px;
     }

     .form-column {
         gap: 24px;
         height: auto;
     }

     /* Ajuste del botón de envío */
     .send-btn {
         width: 100%;
         align-self: center;
         margin-top: 48px;
     }

     .contact-fullwidth {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         gap: 32px;
         padding: 42px 0;
         width: 100%;
         text-align: left;
     }

     .contact-fullwidth p {
         font-size: 24px;
         line-height: 32px;
         flex-grow: 1;
         margin: 0;
     }

     .contact-action-btn {
         flex-shrink: 0;
         white-space: nowrap;
     }

 }

 /* ---------- Hasta 850px ---------- */
 @media (max-width: 850px) {
     .btn1 {
         top: 195px;
         left: 25px;
         transform: rotate(-10deg);
     }

     .btn2 {
         top: 270px;
         left: 16px;
         transform: rotate(-5deg);
     }

     .btn4 {
         top: 115px;
         right: 20px;
         transform: rotate(15deg);
     }

     .btn5 {
         bottom: 105px;
         right: 24px;
         transform: rotate(9deg);
     }
 }

 /* ---------- Hasta 768px (Tablets verticales) ---------- */
 @media (max-width: 768px) {
     .contact-section {
         padding: 48px 36px;
         gap: 24px;
         flex-direction: column;
     }

     /* Columnas pasan a una sola columna */
     .contact-columns {
         grid-template-columns: 1fr;
         gap: 48px;
     }

     /* Columna izquierda alineada a la izquierda */
     .contact-info {
         text-align: left;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
     }

     .contact-info h2,
     .contact-info p,
     .contact-info .contact-row {
         text-align: left;
         margin-left: 0;
         margin-right: 0;
     }

     .contact-row {
         justify-content: flex-start;
     }

     /* Columna izquierda */
     .contact-info h2 {
         font-size: 40px;
         font-style: normal;
         font-weight: 600;
         line-height: 48px;
         letter-spacing: -2%;
         margin-bottom: 16px;
     }

     .contact-info p {
         font-size: 20px;
         font-style: normal;
         font-weight: 400;
         line-height: 28px;
         letter-spacing: -2%;
         margin-bottom: 24px;
     }

     /* Contenedor de texto + ícono */
     .contact-row {
         display: flex;
         align-items: center;
         gap: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

     /* Texto del mail */
     .contact-mail {
         font-size: 18px;
         font-style: normal;
         font-weight: 400;
         line-height: 24px;
         letter-spacing: 0%;
         text-decoration: underline;
         color: #000;
         transition: color 0.3s ease;
     }


     /* Columna de botones debajo de la info */
     .contact-buttons {
         width: 100%;
         position: relative;
         height: auto !important;
         min-height: 320px;
         margin: 0 auto;
     }

     /* Círculo con ícono */
     .contact-circle {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #000;
         border-radius: 100%;
         width: 32px;
         height: 32px;
         flex-shrink: 0;
         transition: background-color 0.3s ease, transform 0.2s ease;
     }

     .contact-circle svg {
         width: 16px;
         height: 16px;
     }

     .contact-circle svg path {
         stroke: white;
         transition: stroke 0.3s ease;
     }


     /* ---------- BLOQUE contact-fullwidth ---------- */
     .contact-fullwidth {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         gap: 32px;
         padding: 32px 0;
         width: 100%;
         text-align: left;
     }

     .contact-fullwidth p {
         font-size: 20px;
         font-style: normal;
         font-weight: 400;
         line-height: 28px;
         letter-spacing: -2%;
         flex-grow: 1;
         margin: 0;
     }

     .contact-btn {
         position: absolute;
         display: flex;
         align-items: center;
         gap: 8px;
         height: 48px;
         padding: 12px 24px;
         background: transparent;
         color: #2B9FAC;
         font-weight: 500;
         font-size: 18px;
         line-height: 24px;
         border: 1px solid #2B9FAC;
         border-radius: 9999px;
         cursor: pointer;
         text-decoration: none;
         transition: all 0.3s ease;
         white-space: nowrap;
     }

     /* Ícono SVG */
     .contact-btn svg {
         width: 24px;
         height: 24px;
         color: #2B9FAC;
     }

     /* Ajuste posiciones de los botones absolutos */
     .btn1 {
         top: 80px;
         left: 80px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 135px;
         left: 200px;
         transform: rotate(-2deg);
     }

     .btn3 {
         top: 190px;
         left: 45px;
         transform: rotate(15deg);
     }

     .btn4 {
         top: 100px;
         right: 35px;
         transform: rotate(23deg);
     }

     .btn5 {
         bottom: 70px;
         right: 80px;
         transform: rotate(10deg);
     }

     /* Ajuste del formulario */
     .contact-form {
         position: static !important;
         display: flex;
         flex-direction: column;
         width: 100%;
         padding: 32px;
         background: transparent;
         height: auto !important;
         min-height: unset !important;
         max-height: unset !important;
         display: none !important;
     }

     .contact-form.active {
        display: flex !important;
        flex-direction: column;
    }


     /* Filas: Nombre y Apellido siguen en dos columnas */
     .form-row {
         flex-direction: row;
         gap: 32px;
         height: auto;
         margin-bottom: 16px;
     }

     .form-column {
         gap: 16px;
         height: auto;
     }


     /* Botón de envío ocupa ancho completo */
     .send-btn {
         width: 100%;
         margin-top: 32px;
         align-self: center;
     }
 }

 /* ---------- Hasta 715px ---------- */
 @media (max-width: 715px) {
     .btn2 {
         top: 135px;
         left: 175px;
         transform: rotate(-2deg);
     }

     .btn4 {
         top: 90px;
         right: 35px;
         transform: rotate(23deg);
     }
 }

 /* ---------- Hasta 665px ---------- */
 @media (max-width: 665px) {
     .btn1 {
         top: 70px;
         left: 80px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 130px;
         left: 155px;
         transform: rotate(-2deg);
     }

     .btn3 {
         top: 190px;
         left: 45px;
         transform: rotate(15deg);
     }

     .btn4 {
         top: 68px;
         right: 35px;
         transform: rotate(15deg);
     }

     .btn5 {
         bottom: 50px;
         right: 64px;
         transform: rotate(10deg);
     }
 }

 /* ---------- Hasta 615px ---------- */
 @media (max-width: 615px) {
     .btn1 {
         top: 70px;
         left: 80px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 130px;
         left: 155px;
         transform: rotate(-2deg);
     }

     .btn4 {
         top: 68px;
         right: 35px;
         transform: rotate(15deg);
     }
 }

 /* ---------- Hasta 600px ---------- */
 @media (max-width: 600px) {
     .btn1 {
         top: 90px;
         left: 40px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 145px;
         left: 125px;
         transform: rotate(-2deg);
     }

     .btn3 {
         top: 210px;
         left: 24px;
         transform: rotate(15deg);
     }

     .btn4 {
         top: 75px;
         right: 25px;
         transform: rotate(15deg);
     }

     .btn5 {
         bottom: 40px;
         right: 24px;
         transform: rotate(10deg);
     }
 }

 /* ---------- Hasta 545px ---------- */
 @media (max-width: 545px) {
     .btn1 {
         top: 55px;
         left: 20px;
         transform: rotate(-18deg);
     }

     .btn2 {
         top: 140px;
         left: 45px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 225px;
         left: 24px;
         transform: rotate(10deg);
     }

     .btn4 {
         top: 80px;
         right: 15px;
         transform: rotate(10deg);
     }

     .btn5 {
         bottom: 70px;
         right: 24px;
         transform: rotate(10deg);
     }

 }

 /* ---------- Hasta 505px ---------- */
 @media (max-width: 505px) {
     .btn1 {
         top: 25px;
         left: 20px;
         transform: rotate(-10deg);
     }

     .btn2 {
         top: 140px;
         left: 30px;
         transform: rotate(-5deg);
     }

     .btn3 {
         top: 230px;
         left: 16px;
         transform: rotate(5deg);
     }

     .btn4 {
         top: 75px;
         right: 15px;
         transform: rotate(5deg);
     }

     .btn5 {
         bottom: 80px;
         right: 10px;
         transform: rotate(10deg);
     }

 }

 /* ---------- Hasta 470px ---------- */
 @media (max-width: 470px) {
     .btn1 {
         top: 15px;
         left: 35px;
         transform: rotate(-2deg);
     }

     .btn2 {
         top: 130px;
         left: 15px;
         transform: rotate(2deg);
     }

     .btn3 {
         top: 240px;
         left: 16px;
         transform: rotate(-2deg);
     }

     .btn4 {
         top: 70px;
         right: 15px;
         transform: rotate(-2deg);
     }

     .btn5 {
         bottom: 85px;
         right: 10px;
         transform: rotate(2deg);
     }

     /* ---------- BLOQUE contact-fullwidth ---------- */
     .contact-fullwidth {
         flex-direction: column;
         text-align: center;
         gap: 24px;
     }

 }

 /* ---------- Hasta 360px (Móviles) ---------- */
 @media (max-width: 360px) {

     /* Padding general reducido */
     .contact-section {
         padding: 48px 14px;
         gap: 16px;
         flex-direction: column;
     }

     /* Columnas a una sola columna */
     .contact-columns {
         grid-template-columns: 1fr;
         gap: 32px;
     }

     /* Columna izquierda centrada */
     .contact-info {
         text-align: center;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .contact-info h2 {
         font-size: 36px;
         line-height: 44px;
         letter-spacing: -2%;
     }

     .contact-info h2,
     .contact-info p,
     .contact-info .contact-row {
         text-align: center;
     }

     .contact-row {
         justify-content: center;
     }

     .contact-buttons {
         height: 380px;
     }
     /* Book a Call */
     .btn1 {
         top: 85px;
         left: 15px;
         transform: rotate(-5deg);
     }

     /* Connect on LinkedIn */
     .btn2 {
         top: 195px;
         left: 10px;
         transform: rotate(5deg);
     }
     /* Explore on Behance */
     .btn3 {
         top: 250px;
         left: 15px;
         transform: rotate(5deg);
     }
     /* Send a Message */
     .btn4 {
         top: 24px;
         right: 25px;
         transform: rotate(5deg);
     }
    /* Email me */
     .btn5 {
         bottom: 135px;
         right: 20px;
         transform: rotate(0deg);
     }

     /* Formulario ocupa ancho completo */
     .contact-form {
         padding: 24px;
         width: 100%;
         height: auto;
     }

     .contact-form form {
         flex-direction: column;
         height: auto;
     }

     /* TODO el formulario en UNA columna */
     .form-row {
         flex-direction: column;
         gap: 12px;
         margin-bottom: 12px;
     }

     .form-column {
         gap: 12px;
     }

     /* Etiquetas y campos de texto más pequeños */
     .field-group label,
     .field-group-description label {
         font-size: 14px;
         line-height: 20px;
     }

     .field-group input,
     .field-group textarea,
     .field-group-description input,
     .field-group-description textarea {
         font-size: 14px;
         line-height: 20px;
     }

     /* Botón de envío ocupa ancho completo */
     .send-btn {
         width: 100%;
         margin-top: 16px;
         align-self: center;
     }

     /* ---------- BLOQUE contact-fullwidth ---------- */
     .contact-fullwidth {
         flex-direction: column;
         text-align: center;
         gap: 24px;
     }
 }