:root{
  --bg: #fbfaf7;
  --bg2:#f5f2ec;
  --text:#1c1c1b;
  --muted:#585550;
  --line: rgba(28,28,27,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
  --pad: 24px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; padding:10px 12px; border-radius:12px; box-shadow: var(--shadow); z-index:9999;}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(251,250,247,.62);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand__logo{width:42px; height:42px; border-radius:12px; object-fit:cover; border:1px solid var(--line);}
.topbar__actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line);
  background: rgba(255,255,255,.6);
}
.icon-btn svg{width:20px; height:20px; fill:var(--text); opacity:.9}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  background: var(--text); color:#fff;
  border:1px solid rgba(0,0,0,.25);
  font-weight:600; letter-spacing:.2px;
}
.btn--ghost{background: rgba(255,255,255,.65); color: var(--text); border:1px solid var(--line);}

.hero{
  position:relative;
  min-height:100vh;
  padding-top:86px;
  display:grid;
  align-items:center;
  overflow:hidden;
}
.hero__layer{
  position:absolute; inset:-6%;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform: translateY(var(--shift, 0px));
  will-change: transform;
}
.hero__bg{background:none !important; opacity:0 !important;}
.hero__mid{background-image:url("assets/hero-mid.png"); opacity:.42; mix-blend-mode:screen; filter:saturate(1.06) brightness(1.04);}
.hero__front{background-image:url("assets/hero-front.png"); opacity:.22; mix-blend-mode:screen; filter:saturate(1.02) brightness(1.03);}

.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(251,250,247,.08), rgba(251,250,247,.86));
  z-index:-1;
}

.hero__inner{text-align:center; padding: 56px 0 36px;}
.hero__logo{
  width:86px; height:86px; border-radius:22px;
  border:1px solid var(--line);
  object-fit:cover;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  margin:0 auto 16px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.2px;
  font-size: clamp(34px, 4vw, 56px);
  line-height:1.08;
  margin: 14px 0 10px;
}
.lede{
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--muted);
  margin: 0 0 22px;
}
.hero__cta{margin: 10px 0 18px;}
.phone{
  display:inline-flex; align-items:center; gap:10px;
  font-size: clamp(18px, 2.3vw, 26px);
  font-weight:650;
  padding:10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  border:1px solid var(--line);
}
.hero__social{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.chip{
  padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.52);
  border:1px solid var(--line);
  color: var(--muted);
  font-weight:600;
}

/* Sections with Utophy background field */
.parallax{position:relative; overflow:hidden;}
.section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
.section__overlay{
  position:absolute; inset:0;
  /* lighter veil so the color field stays visible */
  background: linear-gradient(to bottom, rgba(251,250,247,.10), rgba(251,250,247,.74));
  z-index:-2;
}

.section{padding: 86px 0;}
.section__head{text-align:center; margin-bottom: 26px;}
.section__head h2{
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 38px);
  margin: 0 0 8px;
  letter-spacing:.2px;
  font-weight:600;
}
.section__head .muted{margin:0; color: var(--muted);}
.section__cta{margin-top: 26px; display:flex; justify-content:center;}

.card{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.64);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}
.card--manifesto{max-width: 860px; margin:0 auto; text-align:center;}
.card--manifesto h2{font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 14px; font-weight:600;}
.card--manifesto p{margin: 10px 0; color: var(--muted); font-size: 18px;}

.grid{display:grid; gap: 16px;}
.grid--3{grid-template-columns: repeat(3, 1fr);}
@media (max-width: 920px){ .grid--3{grid-template-columns:1fr} }

.tile{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.56);
  padding: 22px 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05);
}
.tile h3{font-family: var(--serif); margin: 0 0 8px; font-weight:600; letter-spacing:.2px;}
.tile p{margin:0; color: var(--muted)}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding:0; margin: 16px 0 0; list-style:none;}
@media (max-width: 920px){ .steps{grid-template-columns:1fr} }
.step{border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.56); padding: 22px 20px;}
.step__num{display:inline-flex; width:34px; height:34px; border-radius:999px; align-items:center; justify-content:center; border: 1px solid var(--line); background: rgba(255,255,255,.75); font-weight:700; margin-bottom: 10px;}
.step p{margin:0; color: var(--muted); font-size:18px}

.section--trust .pill{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.52);
  padding: 14px 16px;
  text-align:center;
  font-weight:650;
  color: rgba(28,28,27,.82);
}
.trust__contact{margin-top: 18px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}

.footer{border-top: 1px solid var(--line); background: rgba(251,250,247,.86); padding: 34px 0;}
.footer__inner{display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; align-items:start;}
@media (max-width: 920px){ .footer__inner{grid-template-columns:1fr} }
.footer__name{font-family: var(--serif); font-weight:650; font-size: 20px;}
.footer__tag{color: var(--muted); margin-top:6px}
.footer__meta{color: var(--muted); display:flex; flex-direction:column; gap:8px}
.footer__links{display:flex; flex-direction:column; gap:10px}
.footer__links a{color: var(--muted)}
.footer__links a:hover{color: var(--text)}

[data-reveal]{opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease;}
.revealed{opacity:1 !important; transform: translateY(0) !important;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none}
}


/* --- COLOR FIELD SYSTEM (Utophy + curated accents per section) --- */
.section{ --c1: rgba(255, 214, 102, .42);  /* warm yellow */
          --c2: rgba(110, 231, 183, .36);  /* mint green */
          --c3: rgba(244, 114, 182, .32);  /* magenta */
          --c4: rgba(167, 139, 250, .38);  /* violet */
}

/* Hero is already Utophy. For the rest we blend Utophy layers + color accents */
.section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}

/* Lighter veil so colors live */
.section__overlay{
  background: linear-gradient(to bottom, rgba(251,250,247,.06), rgba(251,250,247,.66));
}

/* Section-specific palettes (harmonic flow) */
.section--manifesto{ --c1: rgba(255, 214, 102, .30);
                    --c2: rgba(110, 231, 183, .22);
                    --c3: rgba(244, 114, 182, .26);
                    --c4: rgba(167, 139, 250, .34); }

.section--ofrecemos{ --c1: rgba(255, 214, 102, .38);
                    --c2: rgba(110, 231, 183, .34);
                    --c3: rgba(244, 114, 182, .30);
                    --c4: rgba(167, 139, 250, .26); }

.section--steps{ --c1: rgba(255, 214, 102, .26);
                --c2: rgba(110, 231, 183, .36);
                --c3: rgba(244, 114, 182, .22);
                --c4: rgba(167, 139, 250, .36); }

.section--trust{ --c1: rgba(255, 214, 102, .30);
                --c2: rgba(110, 231, 183, .22);
                --c3: rgba(244, 114, 182, .36);
                --c4: rgba(167, 139, 250, .30); }



/* ===== Amor Eterno — Estética final (paleta + CTA + marca) ===== */
:root{
  --ae-violet:#6B5CA5;
  --ae-magenta:#C07A8C;
  --ae-sage:#6E8B7E;
  --ae-yellow:#F3E7B3;
  --ae-ink:#1f1f1f;
  --ae-cream:rgba(251,250,247,0.92);
  --ae-glass:rgba(255,255,255,0.14);
  --ae-glass-strong:rgba(255,255,255,0.18);
}

/* Logo hero: elegante (glass + sombra) */
.brandmark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  border-radius:22px;
  background: var(--ae-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.22);
}
.brandmark__img{
  display:block;
  width:110px;
  height:auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.12));
}

/* CTA principal (adiós negro funeraria) */
.btn-primary,
.hero .btn,
a.btn,
button.btn,
.nav__cta,
.header__cta{
  background: var(--ae-magenta) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.18) !important;
}
.btn-primary:hover,
.hero .btn:hover,
a.btn:hover,
button.btn:hover,
.nav__cta:hover,
.header__cta:hover{
  background: #b86b7d !important;
  transform: translateY(-1px);
}

/* Botones secundarios (tel/whatsapp) */
.pill,
.chip,
.badge,
.contact-pill,
.hero__pill,
.hero__phone,
.hero__contact{
  background: rgba(255,255,255,0.22) !important;
  color: var(--ae-ink) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Secciones: orden armónico por pantalla */
.section--manifesto .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
.section--ofrecemos .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
.section--steps .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
.section--trust .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}

/* Menos velo para que el color viva */
.section__overlay{
  background: linear-gradient(to bottom, rgba(251,250,247,.04), rgba(251,250,247,.60)) !important;
}

/* Tipografía: suaviza el negro puro */
h1,h2,h3{ color: rgba(10,10,10,0.90); }
p{ color: rgba(20,20,20,0.72); }

@media (max-width: 480px){ .brandmark__img{ width:96px; } }



/* ===== Ajuste: Hero con más vida (menos gris) ===== */
.hero__bg{background:none !important; opacity:0 !important;}
.hero__mid{ opacity:.52 !important; filter:saturate(1.25) brightness(1.05) !important; }
.hero__front{ opacity:.28 !important; filter:saturate(1.15) brightness(1.04) !important; }

/* Velo más cálido (sin lavar el color) */
.hero__overlay{
  background:
    radial-gradient(900px 600px at 20% 15%, rgba(244,114,182,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 25%, rgba(255,214,102,.22), transparent 62%),
    linear-gradient(to bottom, rgba(251,250,247,.06), rgba(251,250,247,.78)) !important;
}

/* Marca en texto (sin logotipo) */
.topbar .brand{
  font-family: var(--serif, ui-serif);
  font-weight: 650;
  letter-spacing: .2px;
  font-size: 18px;
  color: rgba(10,10,10,.88);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__brand{
  font-family: var(--serif, ui-serif);
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(10,10,10,.58);
  margin-bottom: 14px;
}



/* ===== Desktop Boost: más vida (solo PC) ===== */
@media (min-width: 992px){
  .hero__bg{background:none !important; opacity:0 !important;}
  .hero__mid{ opacity:.66 !important; filter:saturate(1.55) brightness(1.06) !important; }
  .hero__front{ opacity:.34 !important; filter:saturate(1.35) brightness(1.04) !important; }

  .hero__overlay{
    background:
      radial-gradient(1100px 720px at 18% 14%, rgba(167,139,250,.34), transparent 62%),
      radial-gradient(1100px 720px at 80% 22%, rgba(244,114,182,.30), transparent 64%),
      radial-gradient(1100px 820px at 60% 78%, rgba(255,214,102,.26), transparent 66%),
      linear-gradient(to bottom, rgba(251,250,247,.02), rgba(251,250,247,.70)) !important;
  }

  .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
  .section__overlay{
    background: linear-gradient(to bottom, rgba(251,250,247,.03), rgba(251,250,247,.58)) !important;
  }

  .card{ background: rgba(255,255,255,.56) !important; }
  .tile{ background: rgba(255,255,255,.52) !important; }
}

/* Hero subtitle in white */
.hero .lede,
.hero .subtitle,
.hero p.lede{
  color: rgba(255,255,255,0.96) !important;
}



/* ===== Mobile Boost: más vida (celular) ===== */
@media (max-width: 991px){
  /* Hero: sube presencia cromática */
  .hero__bg{background:none !important; opacity:0 !important;}
  .hero__mid{ opacity:.62 !important; filter:saturate(1.45) brightness(1.06) !important; }
  .hero__front{ opacity:.32 !important; filter:saturate(1.25) brightness(1.04) !important; }

  .hero__overlay{
    background:
      radial-gradient(900px 640px at 20% 12%, rgba(167,139,250,.30), transparent 62%),
      radial-gradient(900px 640px at 82% 22%, rgba(244,114,182,.26), transparent 64%),
      radial-gradient(900px 720px at 60% 86%, rgba(255,214,102,.22), transparent 66%),
      linear-gradient(to bottom, rgba(251,250,247,.03), rgba(251,250,247,.70)) !important;
  }

  /* Secciones: subir color */
  .section__layer{
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image:
    radial-gradient(720px 520px at 12% 18%, var(--c4), transparent 60%),
    radial-gradient(760px 560px at 84% 28%, var(--c2), transparent 62%),
    radial-gradient(820px 620px at 26% 78%, var(--c3), transparent 62%),
    radial-gradient(860px 640px at 74% 86%, var(--c1), transparent 64%);
  background-size: auto, auto, auto, auto;
  background-position: center, center, center, center;
  opacity: .70;
  filter: saturate(1.15) brightness(1.08);
}
  .section__overlay{
    background: linear-gradient(to bottom, rgba(251,250,247,.03), rgba(251,250,247,.60)) !important;
  }

  /* Tarjetas: más translúcidas */
  .card{ background: rgba(255,255,255,.56) !important; }
  .tile{ background: rgba(255,255,255,.52) !important; }
}



/* ===== Tipografía Opción B (Poética suave) ===== */
:root{
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Cormorant Infant", Georgia, "Times New Roman", serif;
}

/* Base */
body{ font-family: var(--font-body) !important; }

/* Hero claim (título principal) */
.hero h1,
.hero .hero__title{
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

/* Marca en pleca superior con la misma fuente del hero */
.brand--hero{
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Subtítulo en blanco (hero) */
.hero .lede,
.hero .subtitle,
.hero p.lede{
  color: rgba(255,255,255,.96) !important;
}

/* ===== Performance: fondo Utophy cargado una sola vez ===== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    url("assets/hero-front.png"),
    url("assets/hero-mid.png"),
    url("assets/hero-bg.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat:no-repeat;
  transform: translateZ(0);
  will-change: transform;
}

/* Para que no “parpadee” en iOS durante scroll */
@supports (-webkit-touch-callout: none){
  body::before{ position:fixed; }
}