/* ======= VARIABLES Y ESTILOS BASE ======= */
:root {
  --bg: #f6fbfc;
  --text: #0f2d2e;
  --muted: #426063;
  --brand-1: #0fb5c9; /* turquesa */
  --brand-2: #2aa6df; /* azul claro */
  --outline: #d9e8ea;
  --surface: #ffffff;
  --shadow: 0 10px 30px rgba(5, 64, 72, 0.12);

  --container-w: min(1120px, 92%);
  --header-h: 72px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(
    180deg,
    #dff6f7 0%,
    #a8dee2 35%,
    #7bc8cf 70%,
    #6bb5bd 100%
  );
  background-attachment: fixed;
}

.container {
  width: var(--container-w);
  margin-inline: auto;
}

/* Anclaje correcto para secciones */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* ======= HEADER / NAVBAR ======= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--outline);
  z-index: 2000;
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolling {
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 58px;
  width: auto;
  transition: transform 0.2s ease, filter 0.25s ease;
}
.brand:hover .brand-logo {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 6px 14px rgba(15, 181, 201, 0.25));
}

/* Navegación (Desktop) */
.site-nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  padding: 0.5rem 0.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0.15rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.16s ease;
}
.site-nav a:hover::after,
.site-nav a[aria-current='true']::after {
  transform: scaleX(1);
}

/* Botón Hamburguesa (Mobile) */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  position: relative;
}
.nav-toggle-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}
.nav-toggle-bar:nth-child(1) { top: 15px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav-toggle-bar:nth-child(3) { top: 27px; }

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }


/* ======= HERO ======= */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
  isolation: isolate;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../img/hero-backgroundd.webp') no-repeat center center / cover;
  background-color: #1a4f54; /* Color de respaldo por si la imagen no carga */
  pointer-events: none;
}

.hero-title {
  margin: 0 0 0.75rem;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #0c2230;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}



.hero-slogan {
  color: #ffffff;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  margin: 0 auto 2rem;
  max-width: 60ch;
  text-wrap: balance;
  opacity: 0.95;
}

/* Tarjetas (Solo Mobile) */
.hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1rem;
}
.hero-card {
  text-decoration: none;
  color: inherit;
  border: 2.5px solid #0077b6;
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffffd9 0%, #ffffff75 100%);
  box-shadow: 0 6px 18px rgba(59, 168, 146, 0.25);
  padding: 1.2rem;
  text-align: center;
  transition: all 0.3s ease;
}
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(6, 50, 60, 0.16);
  border-color: rgb(36, 104, 97);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.22));
}
.hero-card h3 {
  margin: 0.25rem 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0077b6;
}
.hero-card p {
  margin: 0;
  color: #0077b6;
  opacity: 0.95;
}

/* Indicador de scroll */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 1.8s infinite;
  cursor: pointer;
  z-index: 999;
  pointer-events: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 0;
  color: #246c99;
}
.scroll-indicator svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, 8px); }
  60% { transform: translate(-50%, 4px); }
}

/* ======= SERVICIOS, BIOGRAFÍA Y CONTACTO (FONDO COMÚN) ======= */
#servicios,
#biografia,
#contacto {
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 40%, #ccecf0 75%, #9ddae0 100%);
  background-attachment: fixed;
  color: #0f2d2e;
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

/* ======= SERVICIOS ======= */
.services-hero {
  text-align: center;
  margin-bottom: 3.5rem;
}
.services-title {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  color: #0c2230;
  margin-bottom: 0.5rem;
}
.services-lead {
  color: #0f2d2e;
  font-weight: 500;
  max-width: 65ch;
  margin: 0 auto 2rem;
  opacity: 0.9;
}
.services-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.chip {
  padding: 0.6rem 1.2rem;
  border: 1.5px solid rgba(15, 70, 80, 0.3);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  color: #0f2d2e;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
}
.chip:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 70, 80, 0.5);
}
.chip.is-active {
  background: #ffffff;
  border-color: #0fb5c9;
  box-shadow: 0 3px 10px rgba(15, 181, 201, 0.15);
  color: #0a4a52;
}
.srv-panel {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.srv-panel.is-open {
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.srv-panel-head {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  color: #0f2d2e;
}
.srv-panel-head:hover {
  background: rgba(255, 255, 255, 0.65);
}
.srv-panel .head-title { display: flex; align-items: center; gap: 0.65rem; }
.srv-panel h3 { margin:0; font-size:clamp(1.05rem,2.2vw,1.35rem); font-weight:800; color:#0c2230; }
.srv-panel .head-lead { margin:0; color:#55767a; margin-left: 1.7rem; font-size: 0.95rem; opacity: 0.85; }
.chev {
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.srv-panel.is-open .chev { transform: rotate(-135deg); }
.srv-grid {
  display: none;
  gap: 1.2rem;
  padding: 1.5rem 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.srv-panel.is-open .srv-grid { display: grid; }
.srv-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.srv-card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.srv-ico { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.srv-card h4 { font-weight: 700; color: #0c2230; margin-bottom: 0.4rem; }
.srv-card p { color: #0f2d2e; opacity: 0.9; line-height: 1.5; font-size: 0.95rem; margin:0; }





.bio-main { grid-area: main; }
.bio-side { grid-area: side; }
.bio-header { text-align: left; margin-bottom: 1.6rem; }
.bio-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  color: #0c2230;
  margin: 0 0 0.6rem;
  line-height: 1.15;
}
.bio-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, #0fb5c9, #2aa6df);
  border-radius: 10px;
}
.bio-subtitle {
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: #227a87;
  opacity: 0.9;
}
.bio-content p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; color: #0f2d2e; }
.bio-content a {
  color: #0e8fa0;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 181, 201, 0.3);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bio-content a:hover { color: #0b7484; border-color: rgba(15, 181, 201, 0.7); }
.bio-photo {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
}

/* ======= CONTACTO ======= */
#contacto {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  padding: 3.5rem 0;
}
#contacto .container {
  max-width: 960px;
}
.contact-header { text-align: center; margin-bottom: 2rem; }
.contact-title { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 900; color: #0c2230; }
.contact-lead { margin: 0.5rem 0 0; color: #000000; opacity: 0.9; font-size: 1.05rem; }

.contact-card {
  background: #fff;
  border: 2.5px solid #046396;
  border-radius: 1.6rem;
  box-shadow: 0 10px 25px rgba(70, 184, 120, 0.12);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0;  }
.field label { font-weight: 600; color: #0f2d2e; }
.field input, .field select {
  border: 2px solid #0076b69f;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: #0f2d2e;
  background-color: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field textarea, .field select {
  border: 2px solid #0076b69f;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: #0f2d2e;
  background-color: #fff;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field select {
  text-overflow: ellipsis;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: rgb(5, 68, 110);
  box-shadow: 0 0 0 4px rgba(70, 184, 120, 0.15);
}
.actions { grid-column: 1 / -1; }
.btn[type="submit"] {
  display: block;
  margin: 1.2rem auto 0;
  text-align: center;
  background: linear-gradient(90deg, #46b878, #3fa96e);
  color: white;
  border: none;
  border-radius: 1rem;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(70, 184, 120, 0.3);
}
.btn[type="submit"]:hover {
  background: linear-gradient(90deg, #3fa96e, #369c64);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(70, 184, 120, 0.45);
}
.contact-alert {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  animation: fadeIn 0.4s ease;
}
.contact-alert.success { background-color: #e6f7ec; color: #207b3e; border: 1px solid #b8e6c1; }
.contact-alert.error { background-color: #fdeaea; color: #a83232; border: 1px solid #f5c2c2; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ======= MEDIA QUERIES (RESPONSIVE) ======= */
@media (max-width: 1024px) {

  .bio-side { grid-area: photo; display: block !important; justify-self: center; margin-top: -10rem; }
  .bio-photo { width: clamp(220px, 48vw, 300px); max-width: 90%; margin: 8rem auto 0.5rem; }
  .bio-header { text-align: center; }
  .bio-title::after { margin-inline: auto; }
}



@media (max-width: 880px) {
  /* Header */
  .nav-toggle { display: block; z-index: 1300; }
  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    background: var(--surface);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.2s, box-shadow 0.2s ease;
    z-index: 1200;
    border-bottom: 1px solid transparent;
  }
  .site-nav[aria-expanded='true'] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(5, 64, 72, 0.1);
    border-bottom-color: var(--outline);
    transition-delay: 0s;
  }
  .site-nav ul { flex-direction: column; padding: 0.75rem 1rem 1rem; gap: 0.25rem; }
  .site-nav a { display: block; padding: 0.8rem 0.25rem; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current='true'] {
    position: relative;
    background: linear-gradient(180deg, rgba(15, 181, 201, 0.06), rgba(42, 166, 223, 0.06));
    border-radius: 0.5rem;
    padding-left: 1.25rem;
  }
  .site-nav a[aria-current='true']::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.4em;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  }

  /* Hero */
  .hero-cards { display: grid; }
  .scroll-indicator { display: none; }
  
  /* Contacto */
  .contact-card { grid-template-columns: 1fr; padding: 2rem 1.4rem; }
}


/* Ocultar hero-cards en desktop y tablet */
@media (min-width: 881px) {
  .hero-cards {
    display: none;
  }
}


/* 1. Ajuste de flechas del acordeón */

/* Flecha cerrada (apuntando a la derecha) */
.chev {
  transform: rotate(-45deg);
}

/* Flecha abierta (apuntando hacia abajo) */
.srv-panel.is-open .chev {
  transform: rotate(45deg);
}

.srv-panel {
  border: 1px solid rgba(109, 255, 158, 0.712); /* Color de borde como los chips */
}


/* --- Posicionamiento de la Foto en Desktop --- */

.site-footer {
  background: linear-gradient(
    to right,
    #457b9da1 0%,  /* Azul acero claro en el borde izquierdo */
    #ffffff 12%, /* Transición a blanco */
    #ffffff 88%, /* Blanco en el centro */
    #457b9da1 100% /* Azul acero claro en el borde derecho */
  );
  padding: 0.5rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: #444;
  border-top: none;
}









/* ================================================== */
/* ESTILO DE TÍTULOS CON LÍNEAS LATERALES             */
/* ================================================== */

/* Títulos de sección que SÍ llevan líneas */
.services-title,
.contact-title,
.section-title { /* La nueva clase que agregamos en Biografía */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: 1px;
  color: #212529;
  margin-bottom: 2.5rem; /* Espacio extra debajo del título con líneas */
}

/* Las líneas laterales */
.services-title::before,
.services-title::after,
.contact-title::before,
.contact-title::after,
.section-title::before,
.section-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: #212529;
}

/* Ahora, nos aseguramos que el título del nombre NO tenga líneas */
#biografia .bio-title {
  font-family: 'Montserrat', sans-serif; /* Mantenemos la tipografía */
  text-align: left; /* Lo alineamos a la izquierda como antes */
}

/* Eliminamos específicamente las líneas para el título del nombre */
#biografia .bio-title::before,
#biografia .bio-title::after {
  display: none !important;
}



.section-title {
  grid-column: 1 / -1; /* Esto hace que el título ocupe todo el ancho disponible */
}

/* ======================================================= */
/* ARREGLO FINAL Y REFORZADO PARA BIOGRAFÍA EN MÓVIL       */
/* ======================================================= */

@media (max-width: 1024px) {
  /*
    1. Forzamos el layout a ser de una sola columna.
    'grid-template-columns: 1fr' es más efectivo que 'display: block'
    para sobreescribir una grilla existente.
  */


  /*
    2. Anulamos explícitamente el ancho máximo que causa el desbordamiento.
  */
  #biografia .bio-main {
    max-width: 100%; /* Asegura que el contenedor se ajuste a la pantalla */
  }

  /*
    3. Nos aseguramos de que la foto esté centrada y se vea bien.
  */
  #biografia .bio-side {
    justify-self: center; /* Centra la foto dentro de la grilla */
    position: static;     /* Resetea la posición de escritorio */
  }

  /* 4. Centramos el texto de la cabecera. */
  #biografia .bio-header {
    text-align: center;
  }
}


/* ==================================================================== */
/* SOLUCIÓN FINAL Y LIMPIA PARA LAYOUT DE BIOGRAFÍA (DESKTOP)           */
/* ==================================================================== */

/* --- Estructura principal de la Biografía --- */

/* --- Posicionamiento de la Foto en Desktop --- */




/* ================================================ */
/* ESTILO ÚNICO Y RESPONSIVE PARA LÍNEAS DE TÍTULOS */
/* ================================================ */

.services-title::before,
.services-title::after,
.contact-title::before,
.contact-title::after,
.section-title::before,
.section-title::after {
  content: '';
  background: #212529;
  height: 2px;
  flex-grow: 1; /* Permite que las líneas se encojan y crezcan */
  max-width: 100px; /* Ancho máximo para que no se estiren demasiado en desktop */
}







/* ================================================================ */
/* SOLUCIÓN FINAL UNIFICADA PARA EL LAYOUT DE BIOGRAFÍA             */
/* ================================================================ */

/* --- Estilos por defecto (MÓVIL) --- */
#biografia .bio-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#biografia .bio-main {
  width: 100%; /* El texto ocupa todo el ancho, evitando desbordes */
  order: 2;    /* El texto va después de la foto */
}

#biografia .bio-side {
  order: 1;    /* La foto va primero */
}

/* --- Estilos para DESKTOP (se activan solo en pantallas grandes) --- */
@media (min-width: 1025px) {
  #biografia .bio-layout {
    display: grid;
    /* Columnas: Texto a la izquierda (máx 72ch), Foto a la derecha (espacio restante) */
    grid-template-columns: minmax(0, 72ch) 1fr;
    align-items: start;
    gap: 3rem;
  }

  #biografia .bio-main {
    order: initial; /* Reseteamos el orden para que la grilla funcione */
  }

  #biografia .bio-side {
    order: initial; /* Reseteamos el orden */
    margin-top: -80px;
    transform: translateX(50px);
  }
}


/* ======================================================= */
/* SOLUCIÓN DEFINITIVA PARA LAYOUT Y ESPACIO EN BIOGRAFÍA  */
/* ======================================================= */

/* --- Contenedor Principal de la Biografía --- */
#biografia .bio-layout {
  display: grid;
  /* Columnas: Texto a la izquierda, espacio para foto a la derecha */
  grid-template-columns: minmax(0, 72ch) 1fr;
  grid-template-areas: "main ."; /* El punto reserva el espacio para la foto posicionada */
  align-items: start;
  gap: 3rem;
  position: relative; /* Contenedor de posicionamiento para la foto */
}

/* --- Posicionamiento de la Foto en Desktop --- */
@media (min-width: 1025px) {
  #biografia .bio-side {
    position: absolute; /* ¡Esta es la clave! Saca la foto del flujo normal */
    width: 440px;       /* Asignamos un ancho fijo */
    top: 310px;         /* Sube la imagen. ¡Ajusta este valor a tu gusto! */
    right: 0;           /* La alinea a la derecha del contenedor */
  }
}

/* --- Aseguramos que en móvil todo se apile correctamente --- */
@media (max-width: 1024px) {
  #biografia .bio-layout {
    grid-template-columns: 1fr; /* Una sola columna en móvil */
    grid-template-areas:
      "photo"
      "main";
    gap: 1.5rem;
  }

  #biografia .bio-side {
    position: static; /* En móvil, vuelve al flujo normal */
    width: auto;      /* Ancho automático */
    justify-self: center;
  }
}

/* Centrar el título del nombre en la biografía (solo en móvil) */
@media (max-width: 1024px) {
  #biografia .bio-title {
    text-align: center;
  }
}

/* ===== Estilo degradado para el título principal PANÓPTICO ===== */
.hero-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.1;
  background: linear-gradient(90deg, #007c89 0%, #00bfa6 45%, #4ef59c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); /* un leve realce */
}

/* Ajuste suave al pasar el mouse */
.hero-title:hover {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25));
  transform: scale(1.01);
  transition: all 0.3s ease;
}


/* ===== HERO - Fondo con capa oscura ===== */
.hero {
  position: relative;
  color: white;
  overflow: hidden;
}

/* Capa de oscurecimiento (overlay) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0); /* opacidad: más alto = más oscuro */
  z-index: 1;
}

/* Contenido del hero por encima de la capa */
.hero .hero-inner {
  position: relative;
  z-index: 2;
}


/* ===== Reubicar texto del HERO a la izquierda ===== */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* alinea a la izquierda */
  text-align: left;        /* texto alineado a la izquierda */
  justify-content: center; /* centra verticalmente */
  min-height: calc(100vh - var(--header-h, 80px));
  padding-left: -10vw;       /* margen izquierdo (ajustá según gusto) */
  z-index: 2;
  position: relative;
}

/* Ajuste del título principal */
.hero-title {
  margin-left: -150px;
  text-align: left;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1;
}

/* Ajuste del slogan */
.hero-slogan {
  text-align: left;
  max-width: 40ch;
  margin-top: 0.8rem;
  margin-left: -165px;
}

/* Para pantallas pequeñas (centrar en mobile si querés mantener balance) */
@media (max-width: 768px) {
  .hero-inner {
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
}




/* --- Mobile/Tablet: no mover; usa padding cómodo --- */
@media (max-width: 880px){
  .hero .hero-inner{
    transform: none !important;         /* ← resetea el desplazamiento */
    padding-left: clamp(16px, 6vw, 28px);
    padding-right: clamp(16px, 6vw, 28px);
    align-items: center;
    text-align: center;                   /* evita centrado accidental */
  }

  .hero-title,
  .hero-slogan{
    margin-left: 0 !important;          /* por si algún estilo previo empuja */
  }
}

@media (max-width: 880px) {
  /* centramos únicamente el slogan */
  .hero-slogan {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto;
  }


  /* si querés que ambos (título + slogan) estén centrados, activá esto también: */
  /* 
  .hero .hero-inner {
    align-items: center;
    text-align: center;
  } 
  */
}


/* === Capa blanca degradada sobre el fondo del hero === */
.hero::before {
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el fondo */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.301) 0%,   /* blanco visible al inicio */
    rgba(255, 255, 255, 0.171) 40%,  /* se atenúa hacia el centro */
    rgba(255, 255, 255, 0.05) 70%,  /* casi transparente a la derecha */
    rgba(255, 255, 255, 0) 100%     /* completamente transparente al final */
  );
  z-index: 1; /* capa sobre la imagen */
}

/* Aseguramos que el contenido quede por encima */
.hero .container,
.hero .hero-inner,
.hero-content {
  position: relative;
  z-index: 2;
}

/* --- Ajuste de altura para que el hero completo encaje en pantalla --- */
.hero {
  position: relative;
  min-height: 100vh;        /* ocupa toda la altura visible */
  height: 100dvh;           /* usa la altura dinámica en móviles modernos */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centra verticalmente */
  overflow: hidden;
  box-sizing: border-box;
}

/* Flecha de scroll visible dentro del hero */
.scroll-indicator {
  position: absolute;
  bottom: 5.5rem;           /* sube o baja la flecha según necesites */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* Evitamos padding excesivo que empuje el contenido */
.hero .container,
.hero-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================================ */
/* AJUSTES DE COLOR ESPECÍFICOS PARA #servicios     */
/* ================================================ */

/* Nuevos colores azules para usar en esta sección */
#servicios {
  --servicios-brand-1: #0077b6; /* Azul primario más intenso */
  --servicios-brand-2: #0096c7; /* Azul secundario, complementario */
  --servicios-text-dark: #003f63; /* Azul más oscuro para texto */
  --servicios-border-light: rgba(0, 118, 182, 0.596); /* Borde azul claro */
  --servicios-border-medium: rgba(0, 119, 182, 0.5); /* Borde azul medio */
  --servicios-shadow-light: rgba(0, 119, 182, 0.15); /* Sombra azul clara */
  --servicios-shadow-medium: rgba(0, 119, 182, 0.1); /* Sombra azul media */
  --servicios-hover-bg: rgba(224, 247, 250, 0.5); /* Fondo hover azulado sutil */

  /* Sobrescribir el fondo radial si es necesario, o mantener el original */
  /* background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 40%, #d1f1f8 75%, #aae3f0 100%); */
  /* background-attachment: fixed; */ /* Ya está en la regla original */
}

/* Chips dentro de #servicios */
#servicios .chip {
  border-color: var(--servicios-border-light);
  /* Mantiene el fondo y color de texto originales por defecto */
}
#servicios .chip:hover {
  border-color: var(--servicios-border-medium);
  /* Mantiene el fondo hover original */
}
#servicios .chip.is-active {
  border-color: var(--servicios-brand-1); /* Borde activo azul */
  box-shadow: 0 3px 10px var(--servicios-shadow-light); /* Sombra activa azul */
  color: var(--servicios-text-dark); /* Texto activo azul oscuro */
  /* Mantiene el fondo blanco activo original */
}

/* Paneles dentro de #servicios */
#servicios .srv-panel {
   border: 1px solid var(--servicios-border-light); /* Borde panel azul sutil */
   /* Mantiene fondos y sombra originales */
}
#servicios .srv-panel.is-open {
  box-shadow: 0 8px 30px var(--servicios-shadow-medium); /* Sombra panel abierto azulada */
  /* Mantiene fondo blanco original */
}
#servicios .srv-panel-head:hover {
  background: var(--servicios-hover-bg); /* Fondo hover azulado sutil */
}

/* Puedes añadir más reglas aquí si otros elementos dentro de #servicios
   necesitan colores específicos, por ejemplo, los iconos o títulos de las tarjetas */

/* #servicios .srv-card h4 { color: var(--servicios-text-dark); } */
/* #servicios .srv-ico { color: var(--servicios-brand-1); } */


body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--text); /* Asegúrate que '--text' sea oscuro para el centro blanco */
  /* Degradado HORIZONTAL: Azul -> Blanco -> Azul */
  background: linear-gradient(
    to right,
    #A6C8E6 0%,  /* Azul acero claro en el borde izquierdo */
    #ffffff 20%, /* Transición a blanco */
    #ffffff 80%, /* Blanco en el centro */
    #A6C8E6 100% /* Azul acero claro en el borde derecho */
  );
  background-attachment: fixed; /* Mantenemos el efecto fijo */
}


#servicios,
#biografia,
#contacto {
  background: linear-gradient(
    to right,
    #457b9d6c 0%,  /* Azul acero claro en el borde izquierdo */
    #ffffff 12%, /* Transición a blanco */
    #ffffff 88%, /* Blanco en el centro */
    #457b9d6c 100% /* Azul acero claro en el borde derecho */
  );
  color: var(--text);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  /* background-attachment: fixed; ya no es necesario aquí */
}


/* ================================================ */
/* AJUSTES PARA MOBILE: Fondos más claros         */
/* ================================================ */

/* ================================================ */
/* AJUSTES PARA MOBILE: Fondos más claros         */
/* ================================================ */

@media (max-width: 768px) { /* Aplica estos estilos en pantallas de 768px o menos */

  body {
    /* Opción 1: Degradado azul MUY MUY claro casi blanco */
    background: linear-gradient(
      to right,
      #f8fcff 0%,  /* Azul extremadamente pálido */
      #ffffff 30%, /* Blanco */
      #ffffff 70%, /* Blanco */
      #f8fcff 100% /* Azul extremadamente pálido */
    );
    background-attachment: fixed; /* Mantenemos el efecto fijo */
  }

  #servicios,
  #biografia,
  #contacto {
    /* Hacemos el fondo de las secciones completamente blanco en móvil */
    background: #ffffff;
    /* Ya no necesita el degradado lateral en móvil */
  }

  /* --- NUEVA REGLA PARA EL FOOTER EN MOBILE --- */
  .site-footer {
    /* Quitamos el degradado horizontal y ponemos un fondo simple */
    background: #f8f9fa; /* Puedes usar #ffffff (blanco) o un gris muy claro */
    /* background: linear-gradient(to left, #e0f7fa 0%, #ffffff 100%); Si prefieres el azul claro del footer de desktop pero sin bordes */
    /* Hereda padding, text-align, font-size, color del estilo desktop */
    border-top: 1px solid var(--outline); /* Agregamos un borde superior sutil en móvil */
  }
  /* --- FIN NUEVA REGLA --- */

} /* Fin de la media query */