/* ============================================================
   NacionalidadEs — Abogada Rodríguez Rey
   Estética: retrato protagonista, monocromo elegante, un acento
   ============================================================ */

:root{
  --ink:#141412;
  --ink-soft:#1d1d1a;
  --paper:#fafaf7;
  --smoke:#63625d;
  --line:#e4e2db;
  --line-dark:#33322e;
  --granate:#6e2230;
  --ivory:#efece4;
  --max:1200px;
}

*{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{
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  font-weight:300;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--granate);outline-offset:3px;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

.eyebrow{
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--smoke);
}
.dark .eyebrow{color:#9a988f}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(250,250,247,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.brand em{font-style:normal;color:var(--smoke);font-weight:300}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.5vw,30px)}
.nav-links a{font-size:13.5px;color:var(--smoke);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.btn{
  display:inline-block;
  border:1px solid var(--ink);
  padding:11px 26px;font-size:13.5px;letter-spacing:.06em;
  color:var(--ink);background:transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--granate);border-color:var(--granate);color:#fff}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--granate);border-color:var(--granate);color:#fff}
.dark .btn{border-color:#4a4944;color:var(--ivory)}
.dark .btn:hover{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.dark .btn-solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.dark .btn-solid:hover{background:transparent;color:var(--ivory)}
.nav .btn{padding:9px 20px}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);color:var(--ivory);
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  min-height:100svh;
}
.hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,12vh,140px) clamp(24px,4.5vw,64px) clamp(48px,8vh,80px) clamp(20px,5vw,72px);
}
.hero-text .eyebrow{margin-bottom:28px}
.hero h1{
  font-size:clamp(42px,5.6vw,78px);
  color:#f6f4ee;
}
.hero h1 em{
  font-style:italic;font-weight:500;
  color:#cfc9ba;
}
.hero-sub{
  margin-top:26px;max-width:44ch;
  color:#b7b5ab;font-size:16px;
}
.hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}
.hero-foot{
  margin-top:auto;padding-top:48px;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#807e74;
}
.hero-img{
  position:relative;min-height:60vh;
}
.hero-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  filter:grayscale(1) contrast(1.02);
}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(20,20,18,0) 12%);
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-img{order:-1;min-height:70vw;max-height:78svh}
  .hero-img::after{background:linear-gradient(0deg,var(--ink) 0%,rgba(20,20,18,0) 16%)}
  .hero-text{padding-top:40px}
  .hero-foot{margin-top:44px;padding-top:0}
}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-text>*{animation:rise .7s ease both}
.hero-text>*:nth-child(2){animation-delay:.08s}
.hero-text>*:nth-child(3){animation-delay:.16s}
.hero-text>*:nth-child(4){animation-delay:.24s}

/* ---------- Secciones ---------- */
section{padding:clamp(72px,10vw,120px) 0}
.sec-head{margin-bottom:clamp(36px,5vw,64px);max-width:60ch}
.sec-head h2{font-size:clamp(32px,3.8vw,52px);margin-top:14px}

/* Servicios */
.feature{
  border-top:1px solid var(--ink);
  padding:34px 0 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,4vw,56px);
}
.feature h3{font-size:clamp(26px,2.6vw,36px)}
.feature .tag{
  display:inline-block;margin-top:14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--granate);font-weight:500;
}
.feature p{color:var(--smoke);max-width:56ch}
.feature ul{list-style:none;margin-top:18px;columns:2;column-gap:32px}
.feature li{
  padding:7px 0;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--line);break-inside:avoid;
}
.rows{border-top:1px solid var(--ink)}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,4vw,56px);
  padding:26px 0;border-bottom:1px solid var(--line);
}
.row h3{font-size:clamp(21px,2vw,26px);font-weight:500}
.row p{color:var(--smoke);font-size:15.5px}
.svc-note{
  margin-top:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);
}
@media(max-width:720px){
  .feature,.row{grid-template-columns:1fr;gap:10px}
  .feature ul{columns:1}
}

/* Opiniones */
.dark{background:var(--ink);color:var(--ivory)}
.quote-main{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(28px,3.6vw,48px);font-style:italic;font-weight:500;
  line-height:1.2;max-width:22ch;color:#f0eee6;
}
.quote-main + figcaption{margin-top:22px}
figcaption{
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#8f8d83;
}
.quote-grid{
  margin-top:clamp(44px,6vw,72px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);
}
.quote-grid figure{
  border-top:1px solid var(--line-dark);padding-top:22px;
}
.quote-grid blockquote{font-size:16px;color:#c9c6bb;line-height:1.6}
.quote-grid figcaption{margin-top:14px}
.reviews-src{margin-top:48px;font-size:13px;color:#807e74}
.reviews-src a{border-bottom:1px solid #4a4944;transition:border-color .2s,color .2s}
.reviews-src a:hover{color:#fff;border-color:#fff}
@media(max-width:820px){.quote-grid{grid-template-columns:1fr}}

/* Sobre mí */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.about-img{position:relative}
.about-img img{width:100%;height:auto;display:block;filter:grayscale(.15)}
.about-text h2{font-size:clamp(30px,3.4vw,46px);margin:14px 0 26px}
.about-text p{color:var(--smoke);max-width:56ch}
.about-text p + p{margin-top:18px}
.about-cred{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke);
  display:flex;flex-direction:column;gap:8px;
}
@media(max-width:820px){.about{grid-template-columns:1fr}.about-img{max-width:440px}}

/* Contacto */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px)}
.contact h2{font-size:clamp(32px,3.8vw,52px);margin-top:14px}
.contact-data{margin-top:34px;display:flex;flex-direction:column;gap:22px}
.contact-data .item span{
  display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin-bottom:5px;
}
.contact-data .item a{border-bottom:1px solid var(--line);transition:border-color .2s}
.contact-data .item a:hover{border-color:var(--granate);color:var(--granate)}
form{display:flex;flex-direction:column;gap:18px}
label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
input,textarea{
  width:100%;margin-top:7px;
  border:none;border-bottom:1px solid var(--ink);
  background:transparent;padding:10px 2px;font:inherit;color:var(--ink);
  border-radius:0;
}
textarea{min-height:120px;resize:vertical}
form .btn{align-self:flex-start;margin-top:8px}
.form-note{font-size:12.5px;color:var(--smoke)}
.form-note a{border-bottom:1px solid var(--line)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);padding:34px 0 44px;font-size:13px;color:var(--smoke)}
.foot{
  max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px);
  display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center;
}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot a:hover{color:var(--ink)}

/* Páginas legales */
.legal{max-width:760px;margin:0 auto;padding:130px clamp(20px,4vw,48px) 90px}
.legal h1{font-size:clamp(34px,4vw,48px);margin-bottom:8px}
.legal .updated{font-size:13px;color:var(--smoke);margin-bottom:40px}
.legal h2{font-size:24px;margin:38px 0 12px}
.legal p,.legal li{color:#3c3b37;font-size:16px}
.legal ul{padding-left:22px;margin:10px 0}
.legal a{color:var(--granate);border-bottom:1px solid var(--line)}
.back{display:inline-block;margin-bottom:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.back:hover{color:var(--ink)}