/* Fuentes (self-hosted, extraidas del bundle original) */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/quicksand-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/quicksand-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/quicksand-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/quicksand-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/quicksand-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/quicksand-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Estilos base */
html, body { margin: 0; padding: 0; background: #eef5ee; }
  html { scroll-behavior: smooth; scroll-padding-top: 32px; }
  body { overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: #3f7a58; text-decoration: none; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
  a:hover { color: #2e5c42; }
  ::selection { background: #d3e8d8; }
  :focus-visible { outline: 2px solid #6aa383; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

/* Menú del header: se oculta por completo en mobile (las opciones son redundantes con el resto de la página) */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .site-nav { display: none; }
}

/* Fotos del hero y de "Sobre mí": en mobile se quita la foto de "Sobre mí" y queda solo la del hero */
.hero-photo { display: block; }
.profile-photo { aspect-ratio: 3 / 4; display: block; overflow: hidden; }
@media (max-width: 720px) {
  .profile-photo { display: none; }
}

/* Aparición al hacer scroll. La clase .js-reveal solo la agrega el script,
   así que sin JS (o con prefers-reduced-motion) el contenido se ve normal.
   Este bloque va ANTES de los estados hover: .js-reveal.is-visible y los
   :hover de abajo tienen la misma especificidad, y el hover debe ganar
   una vez que la tarjeta ya apareció (gana la regla que aparece después). */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}
.js-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* Estados hover (antes atributos style-hover del canvas) */
.h1:hover { background: #e2efe4; color: #2e5c42; }
.h2:hover { background: #e2efe4; color: #2e5c42; }
.h3:hover { background: #e2efe4; color: #2e5c42; }
.h4:hover { background: #558d6d; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(64,112,84,0.28); }
.h5:hover { background: #558d6d; color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(64,112,84,0.3); }
.h6:hover { background: #e2efe4; color: #2e5c42; transform: translateY(-2px); }
.h7:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(64,112,84,0.14); }
.h8:hover { background: #e2efe4; color: #1f3a2b; transform: translateY(-2px); }
.h9:hover { background: #ffffff; color: #2e5c42; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

/* Tarjeta del mapa: el mapa tiene las esquinas de abajo redondeadas, lo
   que deja dos triangulitos sin cubrir en esas esquinas (por donde se ve
   el fondo de esta tarjeta, no el de la franja de dirección). Si solo
   la franja cambiara de color en hover, esos triangulitos quedarían con
   el color viejo y se notaría el corte. Con :has() hacemos que el fondo
   de TODA la tarjeta cambie junto con la franja, así siempre matchea. */
.map-card { background: #ffffff; transition: background-color 180ms ease; }
.map-card:has(.map-chin:hover) { background: #f2f8f2; }
.map-chin:hover { background: #f2f8f2; color: #2e5c42; }

/* Tarjetas de Modalidades: mismo lenguaje de hover que las de Servicios */
.card-hover { transition: transform 180ms ease, box-shadow 180ms ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(64,112,84,0.14); }

/* Acordeón de FAQ con <details>/<summary> nativos: sin JS, funciona igual
   si algo falla y es accesible por teclado/lector de pantalla de por sí. */
.faq-item {
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  font-family: Quicksand, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1f3a2b;
  transition: color 180ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #3f7a58; }
.faq-item .faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f2f8f2;
  color: #3f7a58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: transform 240ms ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p {
  margin: 0 26px 24px;
  padding-top: 16px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.7;
  color: #4a5b50;
  border-top: 1px solid #eef4ef;
}

/* Animación de apertura de la respuesta (el <details> en sí no anima su
   alto de forma nativa, pero el contenido puede entrar con un fade+slide). */
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-item[open] p {
  animation: faqReveal 280ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] p { animation: none; }
}

/* Carrusel de Reseñas: flechas + dots + arrastre */
.resena-track {
  touch-action: pan-y;
  cursor: grab;
  transition: transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}
.resena-track.is-dragging {
  cursor: grabbing;
  user-select: none;
  transition: none;
}
.resena-track.is-dragging .resena-slide {
  pointer-events: none;
}
.resena-nav {
  width: 44px;
  height: 44px;
  border: 1px solid #dbe8de;
  border-radius: 999px;
  background: #ffffff;
  color: #3f7a58;
  font-family: Quicksand, system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.resena-nav:hover {
  background: #6aa383;
  color: #ffffff;
  border-color: #6aa383;
  transform: translateY(-2px);
}
.resena-dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  background: #c7dccd;
  transition: width 260ms ease, background 260ms ease;
}
.resena-dot:hover { background: #9fc2ab; }
.resena-dot.is-active { width: 34px; background: #6aa383; }
.resena-dot.is-active:hover { background: #6aa383; }