/* Web Dra. Laura Vázquez — diseño "Monograma" */

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/cormorant-garamond-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("/fonts/cormorant-garamond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/jost-500.woff2") format("woff2"); }

:root {
  --blanco: #FFFFFF;
  --gris-claro: #F5F7F8;
  --linea: #D9E1E5;
  --gris-medio: #7D8B91;
  --texto-suave: #3E5566;
  --texto-tenue: #5B6B73;
  --azul: #1B3C59;
  --verde-azul: #1F7A7A;   /* #2D9C9C oscurecido para contraste AA */
  --verde-suave: #9CD9C2;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --ancho: 1240px;
  --ancho-texto: 760px;
  --margen: clamp(20px, 4vw, 32px);
  --seccion: clamp(72px, 10vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--azul);
  background: var(--gris-claro);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde-azul); }
a:hover { color: var(--azul); }
:focus-visible { outline: 2px solid var(--verde-azul); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--azul); color: var(--blanco); padding: 8px 16px; z-index: 10; }
.skip-link:focus { left: 8px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); }
.contenedor--texto { max-width: var(--ancho-texto); }
.fondo-blanco { background: var(--blanco); }

/* Tipografía */
.titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.1;
}
.etiqueta {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--verde-azul);
}
.texto-suave { color: var(--texto-suave); }

/* Botones */
.boton {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--azul);
  color: var(--blanco);
  border: 0;
  padding: 16px 36px;
  cursor: pointer;
  transition: background .2s;
}
.boton:hover { background: var(--verde-azul); color: var(--blanco); }
.boton:disabled { opacity: .6; cursor: wait; }

/* Cabecera */
.cabecera { padding-block: 28px; }
.menu {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
}
.menu a { color: var(--azul); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--verde-azul); }
.menu__contacto a { color: var(--verde-azul); font-weight: 500; }

/* Portada */
.portada {
  padding-block: 56px 104px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}
.portada__monograma {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(110px, 16vw, 150px); line-height: .9; letter-spacing: -8px;
  margin: 0;
}
.portada__nombre {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 4vw, 34px); letter-spacing: 6px; text-transform: uppercase; line-height: 1.2;
}
.portada__cargo { font-size: 14px; letter-spacing: 8px; text-transform: uppercase; color: var(--texto-suave); }
.portada__raya { width: 64px; height: 1px; background: var(--verde-azul); margin: 16px 0; }
.portada__lema {
  margin: 0; max-width: 720px;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 4vw, 36px); line-height: 1.3;
}
.portada .boton { margin-top: 16px; }

/* Sobre mí */
.sobre {
  padding-block: var(--seccion);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(40px, 6vw, 72px); align-items: center;
}
.sobre__foto {
  width: 100%; max-width: 460px; justify-self: center;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; border: 10px solid var(--gris-claro);
}
.sobre__texto { display: flex; flex-direction: column; gap: 20px; }
.sobre__texto p { margin: 0; }

/* Áreas */
.areas { padding-block: var(--seccion); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.areas .titulo { text-align: center; }
.areas__lista {
  width: 100%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 48px; text-align: center;
}
.area { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 16px; }
.area__num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--verde-azul); }
.area__titulo { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; }
.area p { margin: 0; color: var(--texto-suave); }

/* Trayectoria */
.trayectoria { padding-block: var(--seccion); display: flex; flex-direction: column; gap: 40px; }
.trayectoria .titulo { text-align: center; }
.hitos { margin: 0; padding: 0; list-style: none; }
.hito {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 4px 24px; padding-block: 20px; border-bottom: 1px solid var(--linea);
}
.hito__que { font-weight: 500; }
.hito__donde { display: block; font-weight: 400; color: var(--texto-tenue); font-size: 15px; }
.hito__anio { font-family: var(--serif); font-size: 24px; color: var(--verde-azul); }

/* Contacto */
.contacto { padding-block: var(--seccion); display: flex; flex-direction: column; gap: 32px; }
.contacto__intro { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.contacto__intro p { margin: 0; }
/* Tarjeta de perfil profesional (LinkedIn) */
.perfil {
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 440px; padding-block: 8px;
  text-align: center; text-decoration: none; color: var(--azul);
}
.perfil:hover { color: var(--azul); }
.perfil__icono {
  width: 44px; height: 44px; margin-bottom: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--azul); color: var(--azul);
  transition: color .2s, border-color .2s;
}
.perfil__icono svg { width: 22px; height: 22px; }
.perfil:hover .perfil__icono { color: var(--verde-azul); border-color: var(--verde-azul); }
.perfil .etiqueta { font-size: 12px; }
.perfil__titulo { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; }
.perfil__texto { font-size: 15px; line-height: 1.6; color: var(--texto-tenue); }
.perfil__accion {
  margin-top: 6px;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde-azul);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}
.perfil:hover .perfil__accion { text-decoration-color: currentColor; }
.separador {
  display: flex; align-items: center; gap: 20px; margin: 8px 0 0;
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--texto-tenue);
}
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.formulario { display: flex; flex-direction: column; gap: 22px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.campo input, .campo textarea {
  font: inherit; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--azul);
  padding: 12px 0; border: 0; border-bottom: 1.5px solid var(--gris-medio); border-radius: 0;
  background: transparent;
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--verde-azul); box-shadow: 0 1.5px 0 var(--verde-azul); }
.aceptar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-suave); }
.aceptar input { margin-top: 5px; width: 18px; height: 18px; flex: none; accent-color: var(--verde-azul); }
.formulario .boton { align-self: center; }
.formulario__estado { margin: 0; min-height: 1.7em; text-align: center; }
.formulario__estado--error { color: #A3302A; }
.formulario__estado--ok { color: var(--verde-azul); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nota-legal { margin: 0; font-size: 13px; line-height: 1.6; color: var(--texto-tenue); }

/* Pie */
.pie { border-top: 1px solid var(--linea); }
.pie__dentro {
  padding-block: 32px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--texto-tenue);
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.pie a { color: var(--texto-tenue); }
.pie a:hover { color: var(--azul); }

/* Páginas legales */
.legal { padding-block: 24px var(--seccion); }
.legal h1 { margin: 0 0 32px; }
.legal h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.25; margin: 40px 0 8px; }
.legal p, .legal li { color: var(--texto-suave); }
.legal .pendiente { background: #FFF3C4; color: var(--azul); padding: 0 4px; }
.volver { display: inline-block; margin-bottom: 32px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }