:root{
    --navy:#1B2A3A;
    --navy-2:#24364A;
    --marfil:#F6F3EC;
    --marfil-2:#EDE8DC;
    --oro:#B08D57;
    --tinta:#2B3440;
    --tenue:#5E6670;
    --linea:#D9D1BF;
    --ancho:1080px;
    --titular:"Spectral", Georgia, serif;
    --texto:"Spectral", Georgia, "Times New Roman", serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--texto);
    font-size:1.0625rem; line-height:1.7; color:var(--tinta);
    background:var(--marfil);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--titular); font-weight:400; letter-spacing:-.005em; color:var(--navy); line-height:1.15}
  a{color:inherit}
  .contenedor{max-width:var(--ancho); margin:0 auto; padding:0 28px}

  /* Encabezado */
  header{
    position:sticky; top:0; z-index:10;
    background:rgba(246,243,236,.96);
    border-bottom:1px solid var(--linea);
    backdrop-filter:saturate(1.2) blur(6px);
  }
  .barra{display:flex; align-items:center; justify-content:space-between; height:84px}
  .barra img{height:52px; width:auto; display:block}
  nav ul{list-style:none; display:flex; gap:34px}
  nav a{
    text-decoration:none; font-family:var(--texto); font-size:.8rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
    padding:6px 0; border-bottom:1px solid transparent; white-space:nowrap; transition:border-color .2s;
  }
  nav a:hover, nav a:focus-visible{border-bottom-color:var(--oro); outline:none}

  /* Portada */
  .portada{background:var(--navy); color:var(--marfil); position:relative; overflow:hidden}
  .portada .contenedor{padding-top:120px; padding-bottom:128px; position:relative}
  .portada .monograma{
    position:absolute; right:-40px; top:50%; transform:translateY(-50%);
    width:440px; opacity:.06; pointer-events:none;
  }
  .antetitulo{
    font-family:var(--texto); font-size:.8rem; letter-spacing:.26em;
    text-transform:uppercase; color:var(--oro); margin-bottom:22px;
    display:flex; align-items:center; gap:16px;
  }
  .antetitulo::before{content:""; width:44px; height:1px; background:var(--oro)}
  .portada h1{color:var(--marfil); font-size:clamp(2.1rem, 4.4vw, 3.4rem); max-width:820px; font-weight:300}
  .portada h1 em{font-style:italic; color:#E6DCC6}
  .portada p.lema{margin-top:18px; max-width:640px; font-size:1.15rem; color:#D7D3CA}
  .boton{
    display:inline-block; margin-top:44px; padding:14px 34px;
    border:1px solid var(--oro); color:var(--marfil); text-decoration:none;
    font-family:var(--texto); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
    transition:background .2s, color .2s;
  }
  .boton:hover, .boton:focus-visible{background:var(--oro); color:var(--navy); outline:none}

  /* Secciones */
  section{scroll-margin-top:84px}
  .seccion{padding:112px 0}
  .encabezado-seccion{margin-bottom:40px}
  .encabezado-seccion h2{font-size:clamp(1.85rem, 3.1vw, 2.5rem)}
  .filete{width:56px; height:1px; background:var(--oro); margin-top:18px}

  /* La firma */
  .firma{display:grid; grid-template-columns:1.6fr 1fr; gap:72px; align-items:start}
  .firma p + p{margin-top:1.1em}
  .firma .entrada{font-family:var(--titular); font-weight:300; font-size:1.3rem; line-height:1.55; color:var(--navy)}
  .cifra{border-left:1px solid var(--oro); padding:6px 0 6px 34px}
  .cifra .numero{font-family:var(--titular); font-size:4.8rem; line-height:1; color:var(--navy); font-weight:300}
  .cifra .numero sup{font-size:.45em; vertical-align:top; position:relative; top:.35em; color:var(--oro)}
  .cifra .leyenda{margin-top:10px; font-size:.95rem; color:var(--tenue); letter-spacing:.02em}
  .valores{margin-top:38px; list-style:none; border-top:1px solid var(--linea)}
  .valores li{
    padding:12px 0; border-bottom:1px solid var(--linea);
    font-family:var(--texto); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  }

  /* Práctica */
  .practica{background:var(--marfil-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
  .subtitulo{
    font-family:var(--texto); font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--oro); margin-bottom:16px;
  }
  .rejilla{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--navy)}
  .materia{padding:30px 26px 34px 0; border-bottom:1px solid var(--linea)}
  .materia + .materia{padding-left:26px; border-left:1px solid var(--linea)}
  .materia .num{font-family:var(--titular); color:var(--oro); font-size:1rem; letter-spacing:.1em}
  .materia h3{font-size:1.55rem; margin:6px 0 8px}
  .materia p{font-size:.98rem; color:var(--tenue); line-height:1.6}
  .temas{list-style:none; margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
  .temas li{position:relative; padding-left:16px; font-size:.9rem; line-height:1.5; color:var(--tinta)}
  .temas li + li{margin-top:7px}
  .temas li::before{content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--oro)}
  .servicios{margin-top:72px; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px}
  .servicio h3{font-size:1.35rem; margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid var(--linea)}
  .servicio p{font-size:.98rem; color:var(--tenue); line-height:1.6}

  /* Contacto */
  .contacto{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start}
  .dato{padding:22px 0; border-bottom:1px solid var(--linea)}
  .dato:first-child{border-top:1px solid var(--linea)}
  .dato .etiqueta{
    font-family:var(--texto); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--oro);
  }
  .dato .valor{font-size:1.12rem; color:var(--navy); margin-top:4px}
  .dato a{text-decoration:none; border-bottom:1px solid var(--linea)}
  .dato a:hover{border-bottom-color:var(--oro)}
  .tarjeta{
    background:var(--navy); color:var(--marfil); padding:56px 48px; text-align:center;
  }
  .tarjeta img{width:220px; max-width:80%; margin:0 auto 30px; display:block}
  .tarjeta p{color:#D7D3CA; font-size:1.05rem}
  .tarjeta .boton{margin-top:32px}

  /* Pie */
  footer{background:var(--navy); color:#AFB4BB; border-top:1px solid var(--oro)}
  footer .contenedor{padding-top:34px; padding-bottom:34px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.9rem}

  /* Responsivo */
  @media (max-width:900px){
    .firma, .contacto{grid-template-columns:1fr; gap:48px}
    .rejilla{grid-template-columns:1fr 1fr}
    .materia:nth-child(3){padding-left:0; border-left:none}
    .servicios{grid-template-columns:1fr; gap:28px}
  }
  @media (max-width:640px){
    body{font-size:1rem}
    .barra{height:70px}
    .barra img{height:34px}
    nav ul{gap:12px}
    nav a{font-size:.68rem; letter-spacing:.06em}
    .antetitulo{letter-spacing:.16em; font-size:.72rem}
    .antetitulo::before{width:28px}
    nav li.ocultar-movil{display:none}
    section{scroll-margin-top:70px}
    .portada .contenedor{padding-top:84px; padding-bottom:92px}
    .portada .monograma{width:300px; right:-90px}
    .seccion{padding:80px 0}
    .rejilla{grid-template-columns:1fr}
    .materia, .materia + .materia{padding-left:0; border-left:none}
    .tarjeta{padding:44px 28px}
  }

  /* Aviso de privacidad */
  .legal{padding:96px 0 112px}
  .legal .contenedor{max-width:820px}
  .legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:6px}
  .legal .fecha{color:var(--tenue); font-size:.92rem; margin-bottom:40px}
  .legal h2{font-size:1.4rem; margin:44px 0 9px; padding-top:20px; border-top:1px solid var(--linea)}
  .legal p, .legal li{font-size:1rem}
  .legal p + p{margin-top:.9em}
  .legal ul, .legal ol{margin:.6em 0 .6em 1.4em}
  .legal li{margin:.3em 0}
  .volver{display:inline-block; margin-top:48px; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--oro)}
  footer a{color:#D7D3CA; text-decoration:none; border-bottom:1px solid rgba(176,141,87,.6)}
  footer a:hover{color:var(--marfil)}
  .nota-legal{margin-top:22px; font-size:.92rem; color:var(--tenue)}
  .nota-legal a{color:var(--navy)}