/* --- ÍNDICE --- 
   1. GLOBAL: Base y reset
   2. HERO: Imagen y texto
   3. CTA: Botón acción
   4. PROYECTOS: Lista y cards
   5. SOFTWARE: Grid 4x2
   6. FOOTER: Iconos laterales
   7. LOADER: Pantalla carga + color
   8. MODAL: Carrusel horizontal + diseño
------------------- */

body {font-family: "Hepta Slab", serif;
  font-optical-sizing: auto;
  font-weight: <weight>; 
  font-style: normal; 

  font-family: "Wix Madefor Text", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

  margin: 0; background-color: #FFE07A; color: #333;}

.container { width: 90%; max-width: 500px; margin: 0 auto; padding: 20px 0; }

.hero { font-family:"Hepta Slab" ;text-align: center; margin-bottom: 30px;  }
.hero h1 {font-weight: 800;}
.hero p { font-weight: 600;}

.avatar-circle { width: 170px; height: 170px; background: #FFE07A; border-radius: 50%; margin: 5px auto 15px; overflow: hidden; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center;}

.cta-section a {font-family: Wix Madefor Text; font-weight: 800}
.btn-contact { display: block; padding: 15px; background: #ED6D4B; color: #fff; text-align: center; text-decoration: none; border-radius: 50px; margin-bottom: 30px; }

.project-card {display: flex; align-items: center; justify-content: center; background: white; border-radius: 10px; padding: 10px; margin-bottom: 10px; gap: 15px; cursor: pointer; }
.img-box { width: 30%; aspect-ratio: 4/4; background: none; }
.img-box img {width: 100%;  height: 100%; object-fit: cover;}
.img-box-panoramica {width: 30%; aspect-ratio: 1/1; background: none; display: flex;}
.img-box-panoramica img { width: 100%; height: 100%; object-fit: contain; padding-left: 7px}
.project-info {flex: 0 0 auto; text-align: center; color: white;}
.project-info h3 {font-family: "Hepta Slab"; font-weight: 700; color: #683F69}
.project-info p {font-family: "Wix Madefor Text"; font-weight: 500; color: #683F69}

.software-section h2 { font-family: "Hepta Slab"; font-weight: 700;text-align: center; margin: 30px 0 20px; }
.software-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
  @media (min-width: 768px) {.software-grid {grid-template-columns: repeat(4, 1fr);}}

.tool { text-align: center; min-width: 0;}
.tool p {font-family: "Wix Madefor Text"; font-weight: 400}
.icon { width: 100%; aspect-ratio: 1/1; background: none; margin-bottom: 5px; }
.icon img {width: 100%; height: 100%; display: block; object-fit: contain;}

.footer { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 2px solid #683F69; }
.footer {font-family: "Hepta Slab"; font-weight: 500}
.footer a:link {color: black; text-decoration: none;}
.footer a:visited {color: black; text-decoration: none;}
.footer-icon { width: 40px; height: 40px; background: none; }
.footer-icon img {width: 100%; height: 100%; }

/* 7. LOADER */
.loader { position: fixed; top:0; left:0; width:100%; height:100%; background: #683F69; display: flex; justify-content: center; align-items: center; z-index: 9999; }
.loader-icon { animation: pulseColor 1.7s infinite; color: #000; }
.loader-icon svg { width: 100%; max-width: 60px; height: auto; display: block;}
@keyframes pulseColor { 0% { color: #683F69; } 33% { color: #ED6D4B; } 66% { color: white;} 99% { color: #FFE07A;} }

/* 8. MODAL */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; }
.modal.active { display: flex; flex-direction: column; justify-content: center; }
.modal-content { width: 90%; max-width: 400px; margin: auto; background: white; border-radius: 10px; overflow: hidden; position: relative; }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 30px; color: black; cursor: pointer; z-index: 10001; }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto ;width: 100%; }
.carousel img { min-width: 100%; aspect-ratio: 1/1; object-fit: cover; scroll-snap-align: start;}
.description { padding: 15px; font-size: 0.9rem; font-family: "Wix Madefor Text"}