/* =========================================================
   edermex · corporate one-pager
   Aesthetic: refined dermocosmetics — warm cocoa + blush +
   dusty rose, editorial serif (Playfair) + geometric sans (Poppins)
   ========================================================= */

:root{
  /* palette */
  --cocoa:        #3a2926;
  --cocoa-deep:   #2c1f1d;
  --cream:        #f6eae4;
  --cream-2:      #f1ddd5;
  --blush:        #eed8d0;
  --card:         #fbf4f0;
  --rose:         #c08d8b;
  --rose-deep:    #a86d6b;
  --rose-soft:    #dbb4af;
  --ink:          #3a2926;
  --ink-soft:     #5e4742;
  --muted:        #927670;
  --muted-light:  #c8a9a3;
  --line:         rgba(58,41,38,.12);
  --line-light:   rgba(246,234,228,.16);

  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* metrics */
  --maxw: 1180px;
  --gap: clamp(1rem, 2.4vw, 1.6rem);
  --radius: 18px;
  --radius-lg: 26px;
  --sec-pad: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--rose-deep); color:#fff; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem,5vw,2.5rem); }

.ico{ width:1.25em; height:1.25em; fill:none; stroke:currentColor; flex:none; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--cocoa); color:var(--cream); padding:.7rem 1.1rem; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,234,228,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); background:rgba(246,234,228,.92); }
.header-inner{ display:flex; align-items:center; gap:1.5rem; height:72px; }

.brand{
  font-weight:700; font-size:1.45rem; letter-spacing:-.01em; color:var(--cocoa);
  margin-right:auto;
}
.brand-dot{ color:var(--rose-deep); }

.nav{ display:flex; gap:1.7rem; }
.nav a{
  font-size:.86rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:.35rem 0; transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--rose-deep); transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--cocoa); }
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.lang-switch{ display:flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; color:var(--muted); }
.lang-switch button{
  background:none; border:none; cursor:pointer; font:inherit; color:var(--muted);
  padding:.15rem .1rem; transition:color .2s; letter-spacing:.04em;
}
.lang-switch button.is-active{ color:var(--cocoa); }
.lang-switch button:hover{ color:var(--rose-deep); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-weight:500; font-size:.9rem; cursor:pointer; border:none;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn .ico{ width:1.05em; height:1.05em; }
.btn-pill{
  background:var(--cocoa); color:var(--cream); padding:.6rem 1.25rem; border-radius:100px;
}
.btn-pill:hover{ background:var(--rose-deep); transform:translateY(-2px); }
.btn-solid{
  background:var(--rose-deep); color:#fff; padding:.95rem 1.7rem; border-radius:100px;
  box-shadow:0 10px 30px -12px rgba(168,109,107,.7);
}
.btn-solid:hover{ background:#925a58; transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(168,109,107,.8); }
.btn-ghost{
  color:var(--cream); padding:.95rem 1.5rem; border-radius:100px;
  border:1px solid var(--line-light);
}
.btn-ghost:hover{ background:rgba(246,234,228,.1); transform:translateY(-2px); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; }
.menu-toggle span{ width:24px; height:2px; background:var(--cocoa); border-radius:2px; transition:.3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:.2rem; padding:1rem clamp(1.2rem,5vw,2.5rem) 1.6rem;
  border-top:1px solid var(--line); background:var(--cream);
}
.mobile-nav a{ padding:.7rem 0; font-weight:500; color:var(--ink-soft); border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border:none; margin-top:.6rem; align-self:flex-start; color:var(--cream); }

/* =========================================================
   SHARED SECTION BITS
   ========================================================= */
.section{ padding-block:var(--sec-pad); position:relative; }
.section--blush{ background:var(--cream-2); }
.section--dark{ background:var(--cocoa); color:var(--cream); }

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:1.4rem;
}
.eyebrow-light{ color:var(--rose-soft); }
.num{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--rose-deep); font-size:.78rem; letter-spacing:0;
}
.num-light{ border-color:var(--rose-soft); }

.h-display{
  font-family:var(--serif); font-weight:500; color:var(--cocoa);
  font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.08; letter-spacing:-.01em;
  max-width:18ch; margin-bottom:1.1rem;
}
.h-display em{ font-style:italic; color:var(--rose-deep); }
.h-light{ color:var(--cream); }
.h-light em{ color:var(--rose-soft); }

.lede{
  font-size:clamp(1.02rem, 1.6vw, 1.22rem); color:var(--ink-soft);
  max-width:56ch; line-height:1.6; margin-bottom:2.8rem;
}
.lede strong{ font-weight:600; color:var(--cocoa); }
.lede-light{ color:var(--muted-light); }
.lede-light strong{ color:var(--cream); }
.accent{ color:var(--rose-soft); font-weight:600; }

.rule{ display:block; width:64px; height:3px; border-radius:2px; background:var(--rose-deep); margin-bottom:1.6rem; }
.rule-light{ background:var(--rose-soft); }

.source{ font-size:.8rem; color:var(--muted); margin-top:1.6rem; }
.pullquote{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2.2vw,1.5rem);
  color:var(--rose-deep); margin-top:2.4rem;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; background:var(--cocoa); color:var(--cream); overflow:hidden;
  padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:clamp(2rem,4vw,3rem);
  min-height:min(92vh,820px); display:flex; flex-direction:column;
}
.hero-inner{ flex:1; display:grid; grid-template-columns:1.5fr auto; align-items:center; gap:3rem; }
.hero-blob{
  position:absolute; right:-12%; top:-10%; width:60%; height:130%;
  background:radial-gradient(60% 60% at 50% 40%, rgba(192,141,139,.5), rgba(192,141,139,.12) 60%, transparent 72%);
  filter:blur(8px); transform:rotate(-8deg);
  pointer-events:none;
}
.hero-blob::after{
  content:""; position:absolute; right:8%; top:14%; width:64%; height:72%;
  border-radius:48% 52% 60% 40% / 55% 45% 55% 45%;
  background:linear-gradient(160deg, rgba(219,180,175,.22), rgba(168,109,107,.1));
}
.hero-grain{
  position:absolute; inset:0; opacity:.5; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-copy{ position:relative; z-index:2; }
.eyebrow-light.eyebrow{ color:var(--rose-soft); }

.hero-wordmark{
  font-size:clamp(3.6rem,9vw,6.4rem); font-weight:700; letter-spacing:-.03em; line-height:.9;
  color:var(--cream); margin:.4rem 0 .2rem;
}
.hero-wordmark span{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1rem,2vw,1.4rem); letter-spacing:0; color:var(--rose-soft); margin-top:.6rem;
}
.hero-title{
  font-family:var(--serif); font-weight:500; color:var(--cream);
  font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.04; letter-spacing:-.01em;
  margin:1.4rem 0 1.3rem;
}
.hero-title em{ font-style:italic; color:var(--rose-soft); }
.hero-sub{ max-width:48ch; color:var(--muted-light); font-size:clamp(1rem,1.5vw,1.15rem); margin-bottom:2.2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

.hero-badges{ display:flex; flex-direction:column; gap:1.4rem; z-index:2; position:relative; }
.hero-badges li{ display:flex; align-items:center; gap:.9rem; }
.badge-circle{
  display:grid; place-items:center; width:70px; height:70px; border-radius:50%;
  border:1.5px solid var(--line-light); color:var(--rose-soft); flex:none;
}
.badge-circle .ico{ width:26px; height:26px; }
.badge-label{ font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-light); line-height:1.4; }

.hero-footer{
  display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding-top:1.5rem; position:relative; z-index:2;
  border-top:1px solid var(--line-light); margin-top:1rem;
}

/* =========================================================
   01 · STATS
   ========================================================= */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:1rem; }
.stat-card{
  background:var(--card); border-radius:var(--radius); padding:1.7rem 1.6rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem; min-height:170px; justify-content:flex-start;
  border:1px solid var(--line); box-shadow:0 18px 40px -32px rgba(58,41,38,.5);
}
.stat-card--dark{ background:var(--cocoa); color:var(--cream); border-color:transparent; }
.stat-num{ font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,4.5vw,3.4rem); line-height:1; color:var(--rose-deep); }
.stat-card--dark .stat-num{ color:var(--cream); }
.stat-num small{ font-size:.42em; font-weight:600; font-family:var(--sans); margin-left:.1em; color:var(--muted); }
.stat-card--dark .stat-num small{ color:var(--rose-soft); }
.stat-cap{ font-size:.86rem; color:var(--muted); margin-top:auto; }
.stat-card--dark .stat-cap{ color:var(--muted-light); }

.trace-strip{
  display:flex; align-items:center; gap:.9rem; margin-top:var(--gap);
  background:var(--blush); border-radius:var(--radius); padding:1.1rem 1.5rem; color:var(--rose-deep);
}
.trace-strip .ico{ width:1.5rem; height:1.5rem; flex:none; }
.trace-strip p{ font-size:.95rem; color:var(--ink-soft); }
.trace-strip strong{ color:var(--rose-deep); font-weight:600; }

/* =========================================================
   02 · OPORTUNIDAD (split)
   ========================================================= */
.split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.callout{ background:var(--blush); border-radius:var(--radius); padding:1.5rem 1.6rem; margin-top:.6rem; }
.callout h3{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--rose-deep); margin-bottom:.4rem; }
.callout p{ font-size:.92rem; color:var(--ink-soft); }
.bigstats{ display:flex; flex-direction:column; gap:1.8rem; }
.bigstat{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:center; border-left:3px solid var(--rose); padding-left:1.4rem; }
.bigstat-n{ font-family:var(--serif); font-weight:700; font-size:clamp(2.8rem,6vw,4.4rem); line-height:.9; color:var(--cocoa); }
.bigstat-n small{ font-size:.5em; }
.bigstat p{ font-size:.95rem; color:var(--ink-soft); }

/* =========================================================
   03 · SERVICIOS (3 cards)
   ========================================================= */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.svc-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.2rem 1.9rem; min-height:280px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -34px rgba(58,41,38,.6); }
.svc-card--dark{ background:var(--cocoa); color:var(--cream); border-color:transparent; }
.svc-ico{
  display:grid; place-items:center; width:54px; height:54px; border-radius:14px;
  background:var(--blush); color:var(--rose-deep); margin-bottom:1.5rem;
}
.svc-ico .ico{ width:26px; height:26px; }
.svc-card--dark .svc-ico{ background:rgba(219,180,175,.16); color:var(--rose-soft); }
.svc-card h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; margin-bottom:.7rem; }
.svc-card p{ font-size:.94rem; color:var(--muted); }
.svc-card--dark p{ color:var(--muted-light); }

/* =========================================================
   04 · TIMELINE
   ========================================================= */
.timeline{ margin-top:1rem; }
.tl-head,.tl-bands,.tl-row{ display:grid; grid-template-columns:minmax(180px,1.1fr) 3fr; gap:1.2rem; align-items:center; }
.tl-label{ font-size:.9rem; color:var(--muted-light); }
.tl-row .tl-label strong{ color:var(--cream); font-weight:600; display:block; }
.tl-row .tl-label em{ font-style:normal; color:var(--rose-soft); font-size:.82rem; }
.tl-months{ display:grid; grid-template-columns:repeat(6,1fr); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-light); text-align:center; }
.tl-months i{ font-style:normal; }
.tl-bands{ margin:.7rem 0 .4rem; }
.tl-band-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; }
.tl-band{
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-align:center; padding:.45rem .4rem; border-radius:8px; color:var(--cream);
}
.tl-band--a{ background:rgba(219,180,175,.18); color:var(--rose-soft); }
.tl-band--b{ background:rgba(168,109,107,.32); color:var(--cream); }
.tl-row{ padding:.42rem 0; }
.tl-track{ display:grid; grid-template-columns:repeat(6,1fr); align-items:center; min-height:26px; position:relative; }
.tl-track::before{ content:""; position:absolute; inset:0; border-left:1px solid var(--line-light); background-image:repeating-linear-gradient(90deg, transparent, transparent calc(100%/6 - 1px), var(--line-light) calc(100%/6 - 1px), var(--line-light) calc(100%/6)); opacity:.5; }
.tl-bar{
  height:14px; border-radius:100px; background:var(--rose); position:relative; z-index:1;
  margin:0 4px; display:flex; align-items:center; justify-content:flex-end;
  box-shadow:0 6px 16px -8px rgba(192,141,139,.8);
}
.tl-bar--star{ background:linear-gradient(90deg,var(--rose-deep),var(--rose)); }
.tl-bar--star .ico{ width:14px; height:14px; color:var(--cream); margin-right:6px; }
.tl-bar--end{
  background:var(--cocoa-deep); color:var(--rose-soft); height:24px; font-size:.62rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; justify-content:center;
  border:1px solid var(--rose-soft);
}

/* =========================================================
   05 · FEATURES 4
   ========================================================= */
.feature-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.4rem); margin-top:1rem; }
.feat{ position:relative; padding-top:1.6rem; }
.feat-line{ position:absolute; top:0; left:0; width:100%; height:1.5px; background:var(--line); }
.feat-line::after{ content:""; position:absolute; left:0; top:0; width:30%; height:100%; background:var(--rose-deep); }
.feat-ico{ display:inline-grid; place-items:center; width:48px; height:48px; color:var(--rose-deep); margin-bottom:1rem; }
.feat-ico .ico{ width:28px; height:28px; stroke-width:1.4; }
.feat h3{ font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--cocoa); margin-bottom:.5rem; }
.feat p{ font-size:.9rem; color:var(--muted); }

.big-claim{ display:flex; align-items:center; gap:1.6rem; margin-top:clamp(2.5rem,5vw,4rem); flex-wrap:wrap; }
.big-claim-n{ font-family:var(--serif); font-weight:700; font-size:clamp(3.5rem,8vw,5.5rem); line-height:.85; color:var(--rose-deep); }
.big-claim-n small{ font-size:.45em; }
.big-claim p{ font-size:clamp(1rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:22ch; }

/* =========================================================
   06 · COMPARE TABLE
   ========================================================= */
.compare{ margin-top:1rem; display:flex; flex-direction:column; gap:.7rem; }
.compare-head,.compare-row{ display:grid; grid-template-columns:minmax(120px,1fr) 1.5fr 1.5fr; gap:.8rem; align-items:stretch; }
.compare-head{ margin-bottom:.2rem; }
.ch{ border-radius:12px 12px 0 0; padding:.9rem 1.2rem; font-weight:600; text-align:center; font-size:.95rem; }
.ch-us{ background:var(--rose-deep); color:#fff; }
.ch-them{ color:var(--muted); }
.cr-key{ display:flex; align-items:center; font-weight:600; color:var(--rose-deep); font-size:.92rem; }
.cr-us,.cr-them{ background:var(--blush); border-radius:10px; padding:.85rem 1.2rem; font-size:.9rem; color:var(--ink-soft); display:flex; align-items:center; }
.cr-them{ background:transparent; border:1px solid var(--line); color:var(--muted); }
.compare-row--hl .cr-us{ background:var(--rose-deep); color:#fff; font-weight:500; }
.compare-row--hl .cr-key{ color:var(--cocoa); }

/* =========================================================
   07 · GRID 12 (valor agregado)
   ========================================================= */
.grid-12{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:1rem; }
.mini{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.3rem; text-align:center; transition:transform .3s var(--ease), box-shadow .3s, background .3s;
}
.mini:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -32px rgba(58,41,38,.6); }
.mini .ico{ width:30px; height:30px; color:var(--rose-deep); margin:0 auto .85rem; stroke-width:1.4; }
.mini h3{ font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--cocoa); margin-bottom:.25rem; }
.mini p{ font-size:.8rem; color:var(--muted); }
.mini--hl{ background:var(--rose-deep); border-color:transparent; }
.mini--hl .ico,.mini--hl h3{ color:#fff; }
.mini--hl p{ color:rgba(255,255,255,.8); }

/* =========================================================
   08 · SOSTENIBILIDAD
   ========================================================= */
.sos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:1rem; }
.sos-head{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.sos-head--us{ color:var(--rose-deep); }
.sos-list{ display:flex; flex-direction:column; gap:.6rem; }
.sos-list li{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1.1rem .85rem 1.1rem; font-size:.92rem; color:var(--ink-soft);
}
.sos-list--resp li{ padding-left:2.7rem; background:var(--blush); border-color:transparent; }
.sos-list--resp li::before{
  content:""; position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--rose-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

/* =========================================================
   09 · CERTS
   ========================================================= */
.certs{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); margin-top:1rem; }
.cert{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1rem 1.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.55rem;
  min-height:190px; justify-content:center; transition:transform .3s var(--ease);
}
.cert:hover{ transform:translateY(-4px); }
.cert-ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:1.5px solid var(--line); color:var(--rose-deep); margin-bottom:.4rem; }
.cert-ico .ico{ width:28px; height:28px; }
.cert h3{ font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--cocoa); line-height:1.25; }
.cert p{ font-size:.78rem; color:var(--muted); }
.cert--dark{ background:var(--cocoa); border-color:transparent; }
.cert--dark .cert-ico{ border-color:var(--line-light); color:var(--rose-soft); }
.cert--dark h3{ color:var(--cream); }

/* =========================================================
   10 · LÍNEAS
   ========================================================= */
.lines{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:1rem; }
.line{
  background:rgba(246,234,228,.05); border:1px solid var(--line-light); border-radius:var(--radius);
  padding:1.6rem 1.4rem; transition:transform .3s var(--ease), background .3s;
}
.line:hover{ transform:translateY(-4px); background:rgba(246,234,228,.09); }
.line-ico{ display:inline-grid; place-items:center; width:46px; height:46px; color:var(--rose-soft); margin-bottom:1rem; }
.line-ico .ico{ width:26px; height:26px; }
.line h3{ font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--cream); margin-bottom:.4rem; }
.line p{ font-size:.85rem; color:var(--muted-light); }
.line--hl{ background:var(--rose-deep); border-color:transparent; }
.line--hl .line-ico,.line--hl h3{ color:#fff; }
.line--hl p{ color:rgba(255,255,255,.82); }
.formats{ margin-top:2.2rem; text-align:center; font-size:.92rem; color:var(--muted-light); letter-spacing:.02em; }
.formats strong{ color:var(--rose-soft); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin-right:.4rem; }

/* =========================================================
   11 · SECTORES
   ========================================================= */
.sectors{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:1rem; }
.sector{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.4rem; transition:transform .3s var(--ease), box-shadow .3s;
}
.sector:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -34px rgba(58,41,38,.6); }
.sector .ico{ width:30px; height:30px; color:var(--rose-deep); margin-bottom:.9rem; stroke-width:1.4; }
.sector h3{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--cocoa); margin-bottom:.3rem; }
.sector p{ font-size:.82rem; color:var(--muted); }
.sector--hl{ background:var(--rose-deep); border-color:transparent; }
.sector--hl .ico,.sector--hl h3{ color:#fff; }
.sector--hl p{ color:rgba(255,255,255,.82); }

/* =========================================================
   12 · PRESENCIA
   ========================================================= */
.presence{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); margin-top:1rem; align-items:center; }
.presence-map{
  position:relative; aspect-ratio:2/1; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--blush); border:1px solid var(--line); color:var(--rose-deep);
}
.map-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:9% 13%; opacity:.6;
}
.map-link{ position:absolute; inset:0; width:100%; height:100%; color:var(--rose-deep); opacity:.75; }
.map-node{
  position:absolute; display:inline-flex; align-items:center; gap:.4rem; z-index:2;
  background:var(--cocoa); color:var(--cream); font-size:.74rem; font-weight:600;
  padding:.35rem .7rem; border-radius:100px; white-space:nowrap;
}
.map-node--eu{ top:38%; right:18%; }
.map-node--mx{ top:62%; left:14%; }
.map-pin{ width:8px; height:8px; border-radius:50%; background:var(--rose-soft); box-shadow:0 0 0 4px rgba(219,180,175,.4); }

.presence-list{ display:flex; flex-direction:column; gap:1.3rem; }
.region-h{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-deep); margin-bottom:.25rem; }
.region-b{ font-size:.98rem; color:var(--ink-soft); }
.region-b strong{ color:var(--cocoa); font-weight:600; }
.region-note{ font-size:.82rem; color:var(--muted); border-top:1px solid var(--line); padding-top:1.1rem; }
.region-note strong{ color:var(--rose-deep); }
.hq{ background:var(--cocoa); color:var(--cream); border-radius:var(--radius); padding:1.2rem 1.4rem; }
.hq-h{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-soft); margin-bottom:.4rem; }
.hq-b{ font-size:.9rem; color:var(--muted-light); line-height:1.5; }

/* =========================================================
   13 · PROPUESTA
   ========================================================= */
.value-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:1rem; }
.value{ background:var(--blush); border-radius:var(--radius); padding:1.8rem 1.6rem; min-height:170px; display:flex; flex-direction:column; }
.value-t{ font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,2.5vw,2rem); color:var(--rose-deep); margin-bottom:.7rem; line-height:1.1; }
.value p{ font-size:.9rem; color:var(--ink-soft); margin-top:auto; }
.value--hl{ background:var(--rose-deep); color:#fff; }
.value--hl .value-t{ color:#fff; }
.value--hl p{ color:rgba(255,255,255,.85); }

.value-bars{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); margin-top:var(--gap); }
.vbar{ background:var(--cocoa); color:var(--cream); border-radius:var(--radius); padding:1.6rem 1.8rem; position:relative; }
.vbar+.vbar::before{ content:""; }
.vbar h3{ font-family:var(--sans); font-weight:600; font-size:1.1rem; margin-bottom:.5rem; color:var(--cream); }
.vbar p{ font-size:.9rem; color:var(--muted-light); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{ overflow:hidden; }
.contact-blob{
  position:absolute; right:-10%; top:-20%; width:46%; height:120%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(192,141,139,.4), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.contact .container{ position:relative; z-index:2; }
.contact-badges{ display:flex; gap:1rem; justify-content:flex-end; margin-bottom:1rem; }
.badge-circle--lg{ width:84px; height:84px; flex-direction:column; gap:.2rem; }
.badge-circle--lg .ico{ width:22px; height:22px; }
.badge-circle--lg small{ font-size:.52rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-align:center; line-height:1.3; color:var(--muted-light); }
.contact-title{ max-width:none; }
.contact-tags{ color:var(--muted-light); font-size:clamp(.92rem,1.5vw,1.1rem); margin-bottom:2.6rem; max-width:60ch; }

.contact-card{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  background:rgba(246,234,228,.06); border:1px solid var(--line-light); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.cc-person{ display:flex; align-items:center; gap:1.1rem; }
.cc-avatar{
  width:72px; height:72px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--rose),var(--rose-deep)); color:#fff;
  font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.02em;
  box-shadow:0 0 0 3px rgba(219,180,175,.3);
}
.cc-name{ font-weight:600; font-size:1.25rem; color:var(--cream); }
.cc-role{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-soft); }
.cc-links{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.5rem; }
.cc-links a,.cc-addr{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--muted-light); transition:color .2s; }
.cc-links a:hover{ color:var(--cream); }
.cc-links .ico{ width:1.1rem; height:1.1rem; color:var(--rose-soft); flex:none; }
.cc-addr{ grid-column:1/-1; align-items:flex-start; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--cocoa-deep); color:var(--muted-light); padding-block:2rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-brand{ font-weight:700; font-size:1.2rem; color:var(--cream); }
.footer-brand em{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:.8rem; color:var(--rose-soft); margin-left:.3rem; }
.footer-meta{ font-size:.8rem; }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.06s; }
.reveal[data-d="2"]{ transition-delay:.14s; }
.reveal[data-d="3"]{ transition-delay:.22s; }
.reveal[data-d="4"]{ transition-delay:.3s; }
.reveal[data-d="5"]{ transition-delay:.38s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-badges{ flex-direction:row; flex-wrap:wrap; }
  .stat-grid,.grid-12,.lines,.sectors{ grid-template-columns:repeat(2,1fr); }
  .certs{ grid-template-columns:repeat(3,1fr); }
  .feature-4,.value-4{ grid-template-columns:repeat(2,1fr); }
  .cards-3{ grid-template-columns:1fr; max-width:520px; }
}
@media (max-width:760px){
  .split,.sos,.presence,.value-bars,.contact-card{ grid-template-columns:1fr; }
  .cc-links{ grid-template-columns:1fr; }
  .contact-card{ text-align:left; }
  .compare-head,.compare-row{ grid-template-columns:1fr; gap:.4rem; }
  .compare-head{ display:none; }
  .compare-row{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; gap:.55rem; }
  .section--blush .compare-row{ background:var(--card); }
  .cr-key{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
  .cr-us::before{ content:"edermex · "; font-weight:600; }
  .cr-them::before{ content:"genérica · "; font-weight:600; opacity:.7; }
  .cr-us,.cr-them{ border-radius:8px; }
  /* timeline -> stacked */
  .tl-head,.tl-bands{ display:none; }
  .tl-row{ grid-template-columns:1fr; gap:.5rem; padding:.7rem 0; border-bottom:1px solid var(--line-light); }
  .tl-track{ grid-template-columns:repeat(6,1fr); }
  .presence-map{ order:2; }
}
@media (max-width:480px){
  .stat-grid,.grid-12,.lines,.sectors,.certs,.feature-4,.value-4{ grid-template-columns:1fr; }
  .hero-badges li{ flex:1 1 40%; }
  .big-claim{ flex-direction:column; align-items:flex-start; }
}