/* Manuel Mejías — hoja de estilos de la portada
   Paleta y tipografías descritas en README.md */

:root{
    --paper:#F7F5F0;
    --paper-deep:#EEEBE3;
    --ink:#23303A;
    --ink-soft:#586771;
    --azulejo:#2B5EA7;
    --albero:#B98A2A;
    --line:#DAD6CC;
    --display:'Fraunces', Georgia, serif;
    --body:'IBM Plex Sans', -apple-system, sans-serif;
    --mono:'IBM Plex Mono', monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--body);font-size:18px;line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--azulejo);outline-offset:4px;border-radius:2px}
  .wrap{max-width:760px;margin:0 auto;padding:0 28px}
  .mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

  /* reveal on scroll */
  .r{opacity:0;transform:translateY(18px);transition:opacity .9s ease, transform .9s ease}
  .r.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none}}

  /* ---- floating contact ---- */
  .float{
    position:fixed;bottom:24px;right:24px;z-index:60;
    background:var(--azulejo);color:#fff;text-decoration:none;
    font-family:var(--body);font-weight:500;font-size:15px;
    padding:13px 22px;border-radius:40px;
    box-shadow:0 6px 24px rgba(35,48,58,.22);
    transition:transform .15s, background .15s;
  }
  .float:hover{background:#1F477F;transform:translateY(-2px)}
  @media(max-width:560px){.float{padding:12px 18px;font-size:14px;bottom:16px;right:16px}}

  /* ---- hero ---- */
  .hero{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 90px}
  .hero .mark{display:block;width:60px;height:60px;margin-bottom:30px;transition-delay:0s!important}
  .hero .mark .piece{transform-origin:48px 48px;opacity:0;transform:scale(.6) rotate(-12deg);animation:seat 1s .5s cubic-bezier(.2,.8,.2,1) forwards}
  .hero .mark .pivot{opacity:0;animation:fade .6s 1.15s ease forwards}
  @keyframes seat{to{opacity:1;transform:none}}
  @keyframes fade{to{opacity:1}}
  @media(prefers-reduced-motion:reduce){
    .hero .mark .piece,.hero .mark .pivot{opacity:1;transform:none;animation:none}
  }
  .hero .name{color:var(--azulejo);margin-bottom:34px}
  h1{
    font-family:var(--display);font-weight:400;
    font-size:clamp(33px,6vw,58px);line-height:1.16;letter-spacing:-.015em;
  }
  h1 em{font-style:italic;color:var(--azulejo)}
  .hero p{margin-top:32px;font-size:20px;color:var(--ink-soft);max-width:58ch}
  .hero .scroll-hint{margin-top:64px;color:var(--ink-soft);display:flex;align-items:center;gap:12px}
  .hero .scroll-hint::before{content:"";width:38px;height:1px;background:var(--albero)}

  /* ---- long-form rhythm ---- */
  .block{padding:70px 0}
  .lead{
    font-family:var(--display);font-weight:400;font-size:clamp(24px,3.6vw,34px);
    line-height:1.4;letter-spacing:-.01em;
  }
  .lead em{font-style:italic;color:var(--azulejo)}
  .kicker{color:var(--albero);display:block;margin-bottom:26px}
  .prose p{margin-bottom:22px;font-size:19px}
  .prose p:last-child{margin-bottom:0}

  .divider{height:1px;background:var(--line);max-width:760px;margin:0 auto}

  /* ---- método ---- */
  .metodo{counter-reset:step}
  .metodo .step{
    display:grid;grid-template-columns:64px 1fr;gap:24px;
    padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;
  }
  .metodo .step:last-child{border-bottom:none}
  .metodo .step .n{
    font-family:var(--display);font-style:italic;font-size:34px;color:var(--azulejo);
    line-height:1;
  }
  .metodo .step h3{font-family:var(--display);font-weight:500;font-size:22px;margin-bottom:4px}
  .metodo .step p{color:var(--ink-soft);font-size:17px;line-height:1.6}

  /* ---- entorno pull ---- */
  .pull{
    background:var(--ink);color:var(--paper);padding:96px 0;
  }
  .pull .kicker{color:var(--albero)}
  .pull .lead{color:var(--paper)}
  .pull .lead em{color:#84A8DA}
  .pull .prose{margin-top:30px}
  .pull .prose p{color:rgba(247,245,240,.82)}

  /* ---- capacidades ---- */
  .caps{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  @media(max-width:620px){.caps{grid-template-columns:1fr}}
  .caps .cap{background:var(--paper);padding:26px 24px;transition:background .18s}
  .caps .cap:hover{background:#fff}
  .caps .cap .tag-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azulejo);display:block;margin-bottom:10px}
  .caps .cap h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;margin-bottom:8px}
  .caps .cap p{font-size:15.5px;color:var(--ink-soft);line-height:1.55}
  .caps .cap.wide{grid-column:1 / -1}
  .caps .cap.accent{background:var(--paper-deep)}
  .caps .cap.accent:hover{background:#fff}

  /* ---- sectores inline ---- */
  .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
  .tags span{
    border:1px solid var(--line);border-radius:40px;
    padding:8px 16px;font-size:15px;color:var(--ink-soft);
    transition:border-color .15s,color .15s;
  }
  .tags span:hover{border-color:var(--azulejo);color:var(--ink)}
  .tags .any{border-color:var(--azulejo);color:var(--azulejo);background:rgba(43,94,167,.06)}

  /* ---- manifiesto ---- */
  .mani{padding:80px 0}
  .mani ul{list-style:none;margin-top:8px}
  .mani li{
    font-family:var(--display);font-weight:400;font-size:clamp(21px,3.2vw,29px);
    line-height:1.4;padding:22px 0;border-bottom:1px solid var(--line);
  }
  .mani li:first-child{border-top:1px solid var(--line)}
  .mani li em{font-style:italic;color:var(--azulejo)}

  /* ---- credenciales ---- */
  .cred{background:var(--paper-deep);padding:72px 0}
  .cred .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:28px}
  @media(max-width:560px){.cred .grid{grid-template-columns:1fr}}
  .cred .grid div{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .cred .grid .mono{color:var(--albero);display:block;margin-bottom:4px}

  /* ---- contacto ---- */
  .contacto{padding:100px 0 90px}
  .contacto h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,44px);line-height:1.2;letter-spacing:-.01em}
  .contacto h2 em{font-style:italic;color:var(--azulejo)}
  .contacto p{margin-top:24px;color:var(--ink-soft);font-size:19px;max-width:52ch}
  /* formulario de contacto */
  .form{margin-top:44px;display:flex;flex-direction:column;gap:22px}
  .form .honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .form .field{display:flex;flex-direction:column;gap:8px}
  .form label{
    font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-soft);
  }
  .form label .req{color:var(--azulejo)}
  .form label .opt{letter-spacing:0;text-transform:none;font-size:11.5px;opacity:.7}
  .form input,.form textarea{
    font-family:var(--body);font-size:17px;color:var(--ink);
    background:var(--paper);border:1px solid var(--line);border-radius:6px;
    padding:13px 15px;width:100%;transition:border-color .15s,box-shadow .15s;
  }
  .form textarea{resize:vertical;min-height:110px;line-height:1.6}
  .form input:hover,.form textarea:hover{border-color:var(--ink-soft)}
  .form input:focus,.form textarea:focus{
    outline:none;border-color:var(--azulejo);box-shadow:0 0 0 3px rgba(43,94,167,.14);
  }
  .form button{
    align-self:flex-start;margin-top:4px;cursor:pointer;
    font-family:var(--body);font-weight:500;font-size:16px;color:#fff;
    background:var(--azulejo);border:none;border-radius:40px;padding:14px 30px;
    transition:background .15s,transform .15s;
  }
  .form button:hover{background:#1F477F;transform:translateY(-2px)}

  /* datos fijos de contacto */
  .datos{
    margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
    font-style:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
    font-size:14px;color:var(--ink-soft);
  }
  .datos a{text-decoration:none;transition:color .15s}
  .datos a:hover{color:var(--azulejo)}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line);padding:48px 0 60px;background:var(--paper-deep)}
  footer .eco{margin-bottom:22px}
  footer .eco .mono{color:var(--ink-soft);display:block;margin-bottom:14px}
  footer .eco ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px}
  footer .eco a{text-decoration:none;font-size:15px;color:var(--ink-soft);transition:color .15s}
  footer .eco a:hover{color:var(--azulejo)}
  footer small{color:var(--ink-soft);font-size:13.5px}
  footer .foot-close{display:flex;align-items:center;gap:16px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
  footer .foot-close .mini{width:30px;height:30px;flex-shrink:0;opacity:.75}