/* ===== Perceptia · styles.css (desde cero) ===== */

/* Tipografías */
@font-face{
  font-family:"Uncut Sans";
  src:url("/fonts/Uncut-Sans-Regular.otf") format("opentype");
  font-display:swap; font-weight:400; font-style:normal;
}
@font-face{
  font-family:"Uncut Sans";
  src:url("/fonts/Uncut-Sans-Medium.otf") format("opentype");
  font-display:swap; font-weight:500; font-style:normal;
}
@font-face{
  font-family:"Uncut Sans";
  src:url("/fonts/Uncut-Sans-Semibold.otf") format("opentype");
  font-display:swap; font-weight:600; font-style:normal;
}

/* Variables */
:root{
  --c-primary:#00373c;
  --c-secondary:#fd7e5e;
  --c-white:#ffffff;
  --c-ink:#0b2123;
  --wrap:clamp(960px, 90vw, 1200px);
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.12);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Uncut Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color:var(--c-ink);
  background:#f6f8f8;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 14px}
ul,ol{margin:0; padding:0; list-style:none}
[id]{scroll-margin-top:84px}

/* Tipo */
.h1{font-size:clamp(36px,5vw,56px); line-height:1.1; letter-spacing:-.02em; margin:0 0 12px}
.h2{font-size:clamp(28px,3.5vw,40px); line-height:1.15; margin:0 0 14px}
.h3{font-size:clamp(20px,2.4vw,24px); margin:0 0 6px}
.h4{font-size:18px; margin:0 0 6px}
.lead{font-size:18px; max-width:72ch; opacity:.9}
.accent{color:var(--c-secondary)}

/* Layout */
.wrap{width:min(var(--wrap),100%); margin-inline:auto; padding:0 24px}
.section{padding:80px 0; background:var(--c-white)}
.section--alt{background:#eef5f5}
.section--dark{background:var(--c-primary); color:#eaf1f1}

/* Accesibilidad */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:var(--c-secondary); color:#000; z-index:1000}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand__logo{height:30px; width:auto}
.nav__toggle{display:none}
.nav__list{display:flex; gap:26px; font-weight:500}
.nav__list a{padding:8px 0; position:relative}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--c-secondary);
  transition:width .2s ease;
}
.nav__list a:hover::after{width:100%}

/* Hero */
.hero{background:var(--c-primary); color:#fff; padding:96px 0 72px}
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:32px}
.hero .lead{color:#d8e7e8}
.cta{display:flex; gap:12px; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:10px; font-weight:600; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease}
.btn--primary{background:var(--c-secondary); color:#141414}
.btn--primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn--light{border:2px solid #ffffff; color:#fff}
.btn--light:hover{background:#fff; color:#111}
.hero{
  background:var(--c-primary);
  color:#fff;
  padding:96px 0 72px;
}
.hero__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:32px;
}
.hero .lead{color:#d8e7e8}
.cta{display:flex; gap:12px; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:10px; font-weight:600; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease}
.btn--primary{background:var(--c-secondary); color:#141414}
.btn--primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn--light{border:2px solid #ffffff; color:#fff}
.btn--light:hover{background:#fff; color:#111}

.hero__image{
  border-radius:16px;
  overflow:hidden;
}
.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Diferenciar “Quiénes somos” */
.section--dark{
  background:#012d31; /* tono distinto del hero */
}


/* Chips (quiénes somos) */
.chips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px}
.chips li{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  padding:14px 16px; border-radius:12px; color:#eef7f7;
}

/* Cards de servicios */
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px)}
.pill{display:inline-block; margin-top:8px; padding:6px 10px; border-radius:999px; background:var(--c-secondary); color:#111; font-weight:600; font-size:12px}

/* Pasos metodología */
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
.steps li{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px}

/* Entregables */
.deliverables{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.deliverables li{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px}

/* Formulario */
.form .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
input,textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.1); color:#fff; outline:none
}
textarea{resize:vertical}
button[type=submit]{margin-top:12px}

/* Footer */
.site-footer{background:var(--c-primary); color:#e9f1f1; padding:36px 0}
.footer__grid{display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px}
.footer__logo{height:24px; width:auto; margin-bottom:8px}
.footer__links{display:flex; gap:16px}
.footer__links a{opacity:.9}
.footer__links a:hover{opacity:1}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .deliverables{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav__toggle{display:inline-flex; background:none; border:2px solid var(--c-primary); padding:8px 12px; border-radius:10px}
  .nav__list{
    display:none; position:absolute; right:24px; top:68px; background:#fff; border:1px solid rgba(0,0,0,.06);
    border-radius:12px; padding:12px 14px; box-shadow:var(--shadow)
  }
  .nav__list.is-open{display:flex; flex-direction:column; gap:8px}

  .chips{grid-template-columns:1fr}
  .cards,.steps,.deliverables{grid-template-columns:1fr}
  .form .grid{grid-template-columns:1fr}
}

.form__alert{
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:10px;
  font-weight:500;
  border:1px solid transparent;
  min-height:20px;
}
.form__alert.is-success{background:#e7f7ef; border-color:#b8e6cb; color:#0b5137}
.form__alert.is-error{background:#fdecea; border-color:#f5c2c0; color:#842029}
.form__alert.is-info{background:#eef5f5; border-color:#d7e6e6; color:#0b2123}
button[disabled]{opacity:.7; cursor:not-allowed}