/* -----------------------------------------------------------
   TIPOGRAFÍAS
   (las mismas que trabajaste en clase: Mozilla Headline/Text)
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@400;600&family=Mozilla+Headline:wght@700&display=swap');

/* -----------------------------------------------------------
   VARIABLES (podés cambiar la paleta desde acá)
----------------------------------------------------------- */
:root{
  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #0f172a;          /* texto principal */
  --muted: #475569;        /* texto secundario */
  --brand: #1d72db;        /* azul marca */
  --brand-2: #1557a6;      /* azul oscuro */
  --line: #dbe2ea;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

/* Preferencias de movimiento */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font: 16px/1.55 "Mozilla Text", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.wrap{ width: min(1100px, 92%); margin-inline: auto; }

h1,h2,h3{ font-family: "Mozilla Headline", Georgia, serif; margin: 0 0 .6rem; line-height: 1.2; }
p{ margin: 0 0 1rem; color: var(--muted); }
small, .small{ font-size: .875rem; color: var(--muted); }

/* Botones */
.btn{
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease;
}
.btn:hover{ background: var(--brand-2); transform: translateY(-1px); }
.btn:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
.btn--ghost{
  background: transparent; color: var(--brand); border: 2px solid var(--brand);
}
.btn--ghost:hover{ background: var(--brand); color:#fff; }

/* Skip link */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: .5rem .75rem;
  background: var(--brand); color:#fff; border-radius: 8px; z-index: 10000;
}

/* -----------------------------------------------------------
   HERO con imagen de fondo (opcional hero.jpg)
   Si no subís hero.jpg, se ve el degradé azul igual.
----------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 230px;
  padding-top: 24px;
  background:
    linear-gradient(180deg, rgba(13, 64, 120,.86), rgba(9, 38, 71,.86)),
    url('hero.jpg') center/cover no-repeat fixed;
  color: #fff;
}
.hero__overlay{ position: absolute; inset: 0; }
.hero__wrap{ position: relative; padding: 24px 0 18px; }
.site-title{ font-size: clamp(28px, 4.2vw, 48px); letter-spacing:.2px; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
.site-subtitle{ margin-top: .35rem; color:#e6f0ff; }

/* Navegación */
.main-nav{
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.main-nav ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 28px;
  justify-content: center; align-items: center;
  min-height: 48px;
}
.main-nav a{
  color: var(--brand-2); text-decoration: none; font-weight: 600; padding: 10px 4px; border-radius: 6px;
}
.main-nav a:hover, .main-nav a:focus-visible{
  background: #e8f1ff;
  outline: none;
}

/* Secciones */
.section{ padding: 48px 0; }
.section__title{
  font-size: clamp(24px, 3.2vw, 32px);
  border-bottom: 3px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 24px;
  color: var(--brand-2);
}

/* Tarjetas */
.cards{
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 26px;
}
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.card h3{ margin-bottom: .35rem; }

/* Imagen destacada centrada con difuminado a bordes */
.feature{ margin: 18px auto 0; max-width: 860px; }
.feature__img{
  width: 100%; display: block; border-radius: 18px; box-shadow: var(--shadow);
  /* Difuminado en bordes (si el navegador soporta mask-image) */
  -webkit-mask-image: radial-gradient(160% 100% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(160% 100% at 50% 50%, #000 60%, transparent 100%);
}
.feature__caption{ text-align: center; margin-top: .5rem; }

/* Timeline simple */
.timeline{ list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.timeline li{
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px 16px 52px; margin: 0 0 12px;
  box-shadow: var(--shadow);
}
.timeline li::before{
  counter-increment: paso;
  content: counter(paso);
  position: absolute; left: 16px; top: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items:center;
  background: var(--brand); color:#fff; font-weight: 700;
}

/* FAQ */
.faq{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.faq > summary{
  cursor: pointer; list-style: none; font-weight: 700; color: var(--ink);
}
.faq[open] > summary{ color: var(--brand-2); }
.faq > summary::-webkit-details-marker{ display:none; }

/* Contacto */
.contact{ text-align: center; }

/* Volver arriba */
.to-top{
  position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px;
  display: grid; place-items: center;
  text-decoration: none; color: #fff; background: var(--brand);
  border-radius: 50%; box-shadow: var(--shadow);
}
.to-top:hover{ background: var(--brand-2); }

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 22px 0 28px;
  text-align: center;
}

/* Responsivo pequeño */
@media (max-width: 640px){
  .main-nav ul{ gap: 16px; }
}