/* engandia.es — landing del dominio (prefijo landing/engandia en el bucket).
   Sin fuentes externas, sin cookies, sin analítica de terceros: esta página
   afirma justo eso, así que tiene que cumplirlo. Las familias son las que ya
   están en el equipo; el carácter lo pone la serif editorial.
   Paleta: azul Mediterráneo + taronja (La Safor es tierra de naranja). */

:root{
  --paper:#F4F1EA; --paper-2:#EAE5DA; --white:#FCFBF8;
  --ink:#1E1B17; --ink-soft:#6A6255; --ink-faint:#97907F;
  --sea:#0C4F63; --sea-deep:#06303D; --sea-tint:#D5E4E9;
  --taronja:#E8804C; --taronja-bg:#FCF0E8; --taronja-deep:#B45820;
  --line:#D3CCBE; --line-soft:#E3DED2;

  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --body:ui-sans-serif,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; line-height:1.08; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--taronja); outline-offset:3px}

.wrap{width:min(var(--wrap),100% - 44px); margin-inline:auto}

/* grano de papel — textura, no ruido visual */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────────── marca ─────────────────────────────── */
.mark{display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none}
.mark b{
  font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:.01em;
}
.mark i{
  font-style:normal; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--taronja); font-family:var(--body); font-weight:700;
}

/* ─────────────────────────────── hero ──────────────────────────────── */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--sea-deep); color:var(--paper);
  padding:clamp(22px,3vw,32px) 0 clamp(72px,10vw,124px);
}
/* halo de luz: da profundidad sin usar una foto */
.hero::before{
  content:""; position:absolute; z-index:-1; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(232,128,76,.20) 0%, transparent 62%),
    radial-gradient(48% 40% at 8% 96%, rgba(12,79,99,.95) 0%, transparent 70%);
}
.hero .wrap{position:relative; z-index:2}

.hero-top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:clamp(48px,8vw,96px)}
.hero-top .mark b{color:var(--white)}
.hero-top nav{display:flex; gap:26px; font-size:14.5px}
.hero-top nav a{color:rgba(244,241,234,.72); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent}
.hero-top nav a:hover{color:var(--white); border-bottom-color:var(--taronja)}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taronja); display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,rgba(232,128,76,.55),transparent)}

.hero h1{
  font-size:clamp(38px,6.6vw,80px);
  max-width:16ch; color:var(--white); text-wrap:balance;
}
.hero h1 em{
  font-style:normal; position:relative; white-space:nowrap;
}
/* subrayado a mano alzada bajo la palabra clave */
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.30em;
  background:var(--taronja); opacity:.9; z-index:-1;
  transform:skewY(-1.1deg);
}
.hero .lede{
  margin-top:clamp(22px,3vw,30px); max-width:52ch;
  font-size:clamp(17px,1.5vw,20.5px); line-height:1.62; color:rgba(244,241,234,.82);
}
.hero .lede b{color:var(--white); font-weight:600}

.cta-row{display:flex; flex-wrap:wrap; gap:13px; margin-top:clamp(30px,4vw,42px); align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:600; font-size:16px; padding:15px 26px; border-radius:2px;
  border:1px solid transparent; transition:transform .16s ease, background .16s ease;
}
.btn.primary{background:var(--taronja); color:var(--sea-deep); border-color:var(--taronja)}
.btn.primary:hover{background:#F0996B; transform:translateY(-2px)}
.btn.ghost{border-color:rgba(244,241,234,.34); color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper); background:rgba(255,255,255,.06); transform:translateY(-2px)}
.btn .arrow{transition:transform .16s ease}
.btn:hover .arrow{transform:translateX(3px)}

.hero-note{margin-top:20px; font-size:14px; color:rgba(244,241,234,.55)}

/* ría: línea de costa dibujada, ancla la marca en el sitio */
.ria{position:absolute; z-index:1; left:0; right:0; bottom:-1px; height:clamp(60px,9vw,120px); opacity:.5}
.ria svg{width:100%; height:100%; display:block}

/* ───────────────────────────── secciones ───────────────────────────── */
.sec{padding:clamp(64px,9vw,112px) 0; position:relative}
.sec-head{max-width:60ch; margin-bottom:clamp(38px,5vw,58px)}
.sec-head .kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--taronja-deep); margin-bottom:16px;
}
.sec-head h2{font-size:clamp(28px,3.9vw,44px); text-wrap:balance}
.sec-head p{margin-top:16px; color:var(--ink-soft); font-size:18px; max-width:54ch}

/* pasos — numerales grandes, aire de revista */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,48px)}
.step{border-top:2px solid var(--ink); padding-top:22px}
.step .n{
  font-family:var(--display); font-size:56px; line-height:1; color:var(--taronja-deep);
  display:block; margin-bottom:14px; font-weight:600;
}
.step h3{font-size:21px; margin-bottom:10px}
.step p{color:var(--ink-soft); font-size:16px}

/* lo que incluye — rejilla con filetes, no tarjetas con sombra */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.cell{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(24px,2.6vw,34px);
}
.cell h3{font-size:19px; margin-bottom:9px; display:flex; align-items:center; gap:10px}
.cell h3::before{content:""; width:7px; height:7px; background:var(--taronja); border-radius:50%; flex:none}
.cell p{color:var(--ink-soft); font-size:15.5px}

/* ejemplo real */
.example{background:var(--paper-2)}
.specimen{
  background:var(--white); border:1px solid var(--line); border-radius:3px;
  display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden;
}
.specimen .txt{padding:clamp(28px,3.4vw,46px)}
.specimen h3{font-size:clamp(23px,2.5vw,31px); margin-bottom:14px}
.specimen p{color:var(--ink-soft); margin-bottom:22px; font-size:16.5px}
.specimen .addr{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:var(--display); font-size:clamp(17px,1.7vw,21px); color:var(--sea);
  border-bottom:2px solid var(--taronja); padding-bottom:3px; font-weight:600;
  transition:color .16s ease;
}
.specimen .addr:hover{color:var(--sea-deep)}
/* miniatura abstracta: la forma de una web, sin inventar una captura */
.thumb{background:var(--sea-deep); padding:clamp(22px,2.6vw,34px); display:grid; align-content:center; gap:9px}
.thumb i{display:block; background:rgba(244,241,234,.16); border-radius:2px; height:9px}
.thumb i.t{height:22px; width:62%; background:var(--taronja); opacity:.9}
.thumb i.w1{width:88%} .thumb i.w2{width:74%} .thumb i.w3{width:80%}
.thumb .row{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:8px}
.thumb .row i{height:44px; border-radius:2px}

/* cierre */
.close{background:var(--sea); color:var(--paper); position:relative; overflow:hidden; isolation:isolate}
.close h2{color:var(--white); font-size:clamp(28px,4.2vw,46px); max-width:20ch; text-wrap:balance}
.close p{margin-top:18px; color:rgba(244,241,234,.8); max-width:48ch; font-size:18px}

/* pie */
.foot{background:var(--sea-deep); color:rgba(244,241,234,.6); font-size:14.5px; padding:44px 0}
.foot .wrap{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center}
.foot .mark b{color:var(--white); font-size:17px}
.foot a{color:rgba(244,241,234,.72); text-decoration:none}
.foot a:hover{color:var(--white); text-decoration:underline}
.foot .right{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}

/* ───────────────────────── entrada escalonada ──────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .72s cubic-bezier(.2,.7,.3,1) backwards}
  .rise:nth-child(1){animation-delay:.04s}
  .rise:nth-child(2){animation-delay:.12s}
  .rise:nth-child(3){animation-delay:.20s}
  .rise:nth-child(4){animation-delay:.28s}
  @keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
}

/* ──────────────────────────── responsive ───────────────────────────── */
@media (max-width:900px){
  .steps{grid-template-columns:1fr; gap:30px}
  .grid{grid-template-columns:1fr 1fr}
  .specimen{grid-template-columns:1fr}
  .thumb{order:-1}
  .hero-top nav{display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .foot .right{margin-left:0; width:100%}
}

/* ── páginas legales del dominio ─────────────────────────────────────── */
.legal-head{background:var(--sea-deep); color:var(--paper); padding:clamp(22px,3vw,32px) 0 clamp(40px,6vw,64px)}
.legal-head .mark b{color:var(--white)}
.legal-head h1{color:var(--white); font-size:clamp(30px,4.6vw,52px); margin-top:clamp(34px,5vw,58px)}
.legal-body{padding:clamp(48px,7vw,84px) 0 clamp(64px,9vw,104px)}
.legal-body .col{max-width:66ch}
.legal-body h2{font-size:clamp(21px,2.4vw,27px); margin:clamp(32px,4vw,46px) 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--ink-soft); margin-bottom:14px; font-size:16.5px}
.legal-body ul{color:var(--ink-soft); margin:0 0 14px; padding-left:20px; font-size:16.5px}
.legal-body li{margin-bottom:7px}
.legal-body strong{color:var(--ink)}
.legal-body .back{display:inline-block; margin-top:34px; color:var(--sea); font-weight:600;
  text-decoration:none; border-bottom:2px solid var(--taronja); padding-bottom:2px}
.pend{background:var(--taronja-bg); border:1px solid var(--taronja); border-radius:3px;
  padding:14px 16px; font-size:15px; color:var(--taronja-deep); margin-bottom:18px}