/* ==========================================================================
   NEXO — Agencia de Marketing Digital
   Design tokens from Nexo-Kit-de-Marca.pdf
   ========================================================================== */

:root{
  /* --- Brand colors --- */
  --pink:        #EF4F9B;   /* Rosa Nexo — primario */
  --pink-soft:   #FDF1F6;   /* Rosa muy claro — fondos suaves */
  --pink-dark:   #C93A80;   /* hover/active de rosa */
  --brown:       #A9764E;   /* Marron Nexo — secundario, texto/apoyo */
  --brown-soft:  #F3E9DF;
  --green:       #2FAE7E;   /* Verde Nexo — acento, fondos y CTA */
  --green-dark:  #24895f;
  --ink:         #241A15;   /* Tinta — modo oscuro / video */
  --ink-soft:    #362820;
  --white:       #FFFFFF;

  /* --- Semantic tokens --- */
  --color-bg:            var(--white);
  --color-bg-soft:       var(--pink-soft);
  --color-text:          var(--ink);
  --color-text-muted:    #6b5c52;
  --color-border:        #ece1d8;
  --color-primary:       var(--pink);
  --color-primary-ink:   var(--white);
  --color-accent:        var(--green);
  --color-accent-ink:    var(--white);
  --color-support:       var(--brown);

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --lh-body: 1.6;

  /* --- Spacing scale (8pt rhythm, standard density) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container-w: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-hover: 220ms;

  --shadow-card: 0 1px 2px rgba(36,26,21,.04), 0 12px 32px -16px rgba(36,26,21,.18);
  --shadow-pop:  0 4px 8px rgba(36,26,21,.06), 0 24px 48px -20px rgba(36,26,21,.24);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg{ display: block; }

a, button, [role="button"], input, select, textarea{
  -webkit-tap-highlight-color: transparent;
}

:focus-visible{
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -100px;
  background: var(--ink);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
}
.eyebrow::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.eyebrow.on-dark{ color: var(--green); }

h1, .h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 2vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
h3, .h3{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.2;
}
.lede{
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
}
mark{
  background: none;
  color: var(--pink);
  font-style: italic;
}

/* Kinetic headline reveal: each word rises out of a mask as it scrolls in */
.kw-mask{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.kw-word{ display: inline-block; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn svg{ width: 18px; height: 18px; flex: none; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .btn:hover{ transform: translateY(-2px); }
}
.btn:active{ transform: translateY(0) scale(.97); transition-duration: 100ms; }

.btn-primary{
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover{ background: var(--pink); box-shadow: var(--shadow-pop); }
.btn-primary:hover svg{ transform: translate(3px,-3px); }

.btn-outline{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover{ border-color: var(--ink); background: var(--white); }

.btn-accent{
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-card);
}
.btn-accent:hover{ background: var(--green-dark); box-shadow: var(--shadow-pop); }
.btn-accent:hover svg{ transform: translate(3px,-3px); }

.btn-ghost-light{
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.28);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

.btn-sm{ padding: .7rem 1.2rem; font-size: .88rem; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position: fixed;
  top: var(--space-md);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.header-group{
  pointer-events: auto;
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.brand-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .32rem;
  flex: none;
  color: var(--pink);
  padding: .1rem 0;
}
.logo-wordmark{ width: 108px; height: auto; display: block; }
.logo-rule{ width: 54px; height: 1.5px; background: var(--brown); border-radius: 2px; }
.logo-tag{
  font-family: var(--font-body);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--brown);
  line-height: 1;
}
.nav-capsule{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(36,26,21,.08);
  border-radius: var(--radius-pill);
  padding: .6rem .6rem .6rem 1.3rem;
  box-shadow: 0 1px 1px rgba(36,26,21,.03), 0 20px 40px -24px rgba(36,26,21,.35);
  transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled .nav-capsule{
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 1px rgba(36,26,21,.03), 0 12px 28px -20px rgba(36,26,21,.3);
}

.brand{
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: none;
}
.brand-word{
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--ink);
}

.nav-links{
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a{
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-block: .3rem;
}
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .nav-links a:hover::after{ transform: scaleX(1); }
}

.nav-actions{ display: flex; align-items: center; gap: .5rem; flex: none; }

.nav-toggle{
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle:active{ transform: scale(.9); }
.nav-toggle svg{
  position: absolute;
  width: 20px; height: 20px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav-toggle .icon-close{ opacity: 0; transform: rotate(-45deg) scale(.8); }
.nav-toggle[aria-expanded="true"] .icon-open{ opacity: 0; transform: rotate(45deg) scale(.8); }
.nav-toggle[aria-expanded="true"] .icon-close{ opacity: 1; transform: rotate(0) scale(1); }

.mobile-menu{
  pointer-events: none;
  opacity: 0;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 7.5rem var(--gutter) var(--space-xl);
  overflow-y: auto;
  transition: opacity var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open{ pointer-events: auto; opacity: 1; }
.mobile-menu ul{ display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.mobile-menu a{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  color: var(--white);
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .mobile-menu a:hover{ color: var(--pink); }
}
.mobile-menu a:active{ transform: scale(.96); }
.mobile-menu .eyebrow{ color: var(--green); margin-bottom: var(--space-md); }
.mobile-menu > a.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

/* Staggered entrance for the full-screen menu */
.mobile-menu .eyebrow,
.mobile-menu li,
.mobile-menu > .btn{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.mobile-menu.is-open .eyebrow{ opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.mobile-menu.is-open li{ opacity: 1; transform: translateY(0); }
.mobile-menu.is-open li:nth-child(1){ transition-delay: 60ms; }
.mobile-menu.is-open li:nth-child(2){ transition-delay: 100ms; }
.mobile-menu.is-open li:nth-child(3){ transition-delay: 140ms; }
.mobile-menu.is-open li:nth-child(4){ transition-delay: 180ms; }
.mobile-menu.is-open li:nth-child(5){ transition-delay: 220ms; }
.mobile-menu.is-open li:nth-child(6){ transition-delay: 260ms; }
.mobile-menu.is-open > .btn{ opacity: 1; transform: translateY(0); transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce){
  .mobile-menu .eyebrow, .mobile-menu li, .mobile-menu > .btn{
    opacity: 1; transform: none; transition-delay: 0ms !important;
  }
}
.mobile-menu .btn{
  width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
  font-size: .92rem;
  padding-inline: 1.1rem;
}

@media (max-width: 860px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
}
@media (max-width: 600px){
  .nav-actions .btn-primary{ display: none; }
  .nav-capsule{ padding: .5rem .5rem .5rem 1rem; }
  .brand-badge{ padding: 0; }
  .logo-wordmark{ width: 84px; }
  .logo-rule{ width: 42px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  padding-top: clamp(6.5rem, 5rem + 5vw, 8.5rem);
  padding-bottom: var(--space-xl);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.hero::before{
  content: '';
  position: absolute;
  inset: -10% 0 0 0;
  background-image: radial-gradient(circle, rgba(36,26,21,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 75%);
  pointer-events: none;
}
.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-copy{ position: relative; z-index: 2; }
.hero-copy .eyebrow{ margin-bottom: var(--space-md); }
.hero-copy h1{ margin-bottom: var(--space-md); }
.hero-copy h1 em{
  font-style: normal;
  color: var(--pink);
}
.hero-copy .lede{ margin-bottom: var(--space-lg); max-width: 42ch; }
.hero-copy .lede strong{ color: var(--ink); font-weight: 700; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }

.hero-meta{
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-text-muted);
}
.hero-meta .avatars{ display: flex; }
.hero-meta .avatars span{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-soft);
  margin-left: -10px;
  display: block;
}
.hero-meta .avatars span:first-child{ margin-left: 0; }
.hero-meta .avatars span:nth-child(1){ background: var(--pink); }
.hero-meta .avatars span:nth-child(2){ background: var(--brown); }
.hero-meta .avatars span:nth-child(3){ background: var(--green); }
.hero-meta .avatars span:nth-child(4){ background: var(--ink); }

.hero-visual{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4/5;
  max-width: 440px;
  margin-inline: auto;
}
.hero-photo-back{
  position: absolute;
  right: -12%;
  bottom: -5%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
}
.hero-photo{
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% center;
  /* arco: mitad superior en semicírculo, base casi recta */
  border-radius: 50% 50% 20px 20px / 40% 40% 20px 20px;
  box-shadow: var(--shadow-pop);
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 380px; }
}
@media (max-width: 560px){
  .hero{ padding-top: 6.5rem; }
  .hero-visual{ max-width: 300px; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-band{
  background: var(--pink);
  color: var(--white);
  overflow: hidden;
  padding-block: var(--space-md);
  margin-block: -1px;
  position: relative;
  z-index: 3;
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
  animation-play-state: running;
}
@media (hover: hover) and (pointer: fine){
  .marquee-band:hover .marquee-track{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
.marquee-track span{
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-inline: var(--space-lg);
  white-space: nowrap;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
section{ position: relative; }
.section{ padding-block: clamp(3rem, 1.8rem + 3.2vw, 4.75rem); }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.section-head .eyebrow{ margin-bottom: var(--space-sm); }
.section-head .lede{ margin-top: var(--space-sm); }
.section-tag{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  flex: none;
}

.reveal{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ==========================================================================
   Stats / Intro
   ========================================================================== */
.intro{ background: var(--white); }
.intro-head{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-xl);
  align-items: end;
  margin-bottom: var(--space-xl);
}
.intro-head .eyebrow{ margin-bottom: var(--space-md); }
.intro-head p{ color: var(--color-text-muted); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.55; max-width: 40ch; }
.intro-head strong{ color: var(--ink); font-weight: 700; }
.text-link{ color: var(--pink-dark); font-weight: 600; }

.stat-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.stat-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  aspect-ratio: 1;
  padding: clamp(1.5rem, 3.4vw, 3rem);
  margin-inline: -1.5%;
  border-radius: 50%;
  text-align: center;
  background: var(--pink);
  color: var(--ink);
}
.stat-tile:nth-child(1){ width: min(30%, 380px); z-index: 2; }
.stat-tile:nth-child(2){ width: min(26%, 330px); z-index: 3; margin-top: 8%; background: var(--ink); color: var(--white); box-shadow: 0 0 0 6px var(--white); }
.stat-tile:nth-child(3){ width: min(28%, 360px); z-index: 1; margin-top: -4%; background: var(--green); box-shadow: 0 0 0 6px var(--white); }
.stat-tile:nth-child(4){ width: min(24%, 310px); z-index: 4; margin-top: 10%; background: var(--brown-soft); box-shadow: 0 0 0 6px var(--white); }
.stat-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.2rem + 4.5vw, 6rem);
  line-height: .9;
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .04em;
}
.stat-num.stat-word{ font-size: clamp(1.9rem, 1rem + 2.6vw, 3.6rem); }
.stat-label{
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.5;
}
.stat-label strong{ display: block; font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }

@media (max-width: 980px){
  .intro-head{ grid-template-columns: 1fr; gap: var(--space-md); align-items: start; }
  .stat-tile:nth-child(n){ width: 46%; margin-inline: -1%; margin-top: 0; padding: 2.4rem; }
  .stat-tile:nth-child(even){ margin-top: 6%; }
  .stat-tile:nth-child(3){ margin-top: -4%; }
  .stat-tile:nth-child(4){ margin-top: 2%; }
}
@media (max-width: 560px){
  .stat-grid{ flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .stat-tile:nth-child(n){ width: min(86%, 330px); margin-inline: 0; margin-top: -8%; padding: 1.4rem; gap: .5rem; }
  .stat-tile:nth-child(1){ margin-top: 0; }
  .stat-tile:nth-child(even){ align-self: flex-end; }
  .stat-tile:nth-child(odd){ align-self: flex-start; }
  .stat-num{ font-size: clamp(3rem, 15vw, 4.2rem); }
  .stat-num.stat-word{ font-size: clamp(2rem, 9vw, 2.8rem); }
  .stat-label{ font-size: .68rem; }
  .stat-label strong{ font-size: .8rem; }
}

/* ==========================================================================
   Nosotros
   ========================================================================== */
.about-hero{
  background: var(--color-bg-soft);
  padding-top: clamp(6.5rem, 5rem + 5vw, 8.5rem);
  padding-bottom: var(--space-xl);
  overflow: hidden;
}
.about-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 15vw, 12.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--ink);
}
.about-title-lo{
  color: var(--pink);
  font-weight: 900;
}
.about-hero-grid{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-xl);
  align-items: start;
}
.about-hero .lede strong{ color: var(--ink); font-weight: 700; }
.about-disciplines{ border-top: 1px solid var(--color-border); }
.about-disciplines a{
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .about-disciplines a:hover{ color: var(--pink); transform: translateX(10px); }
}
.about-statement{ background: var(--white); padding-block: var(--space-2xl); }
.about-big{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  max-width: 30ch;
  color: var(--ink);
}
.about-big strong{ color: var(--pink); font-weight: 800; }
.about-big em{
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: .1em;
  text-underline-offset: .12em;
}
.about-why{ background: var(--color-bg-soft); }
.why-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.why-item{
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.why-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
  margin-top: .5em;
}
.why-item h3{ margin-bottom: .35rem; }
.why-item p{ color: var(--color-text-muted); font-size: .95rem; }
@media (max-width: 900px){
  .why-list{ grid-template-columns: 1fr; }
}

.about-together{ background: var(--white); }
@media (max-width: 860px){
  .about-hero-grid{ grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{ background: var(--pink-soft); padding-bottom: 0; }
.services .container{ position: relative; z-index: 1; }
.services .section-head{ margin-bottom: var(--space-lg); }

/* Oversized watermark numeral: a continuous, always-visible depth cue that
   drifts slowly as the section scrolls past (never hidden/toggled). */
.section-bg-num{
  position: absolute;
  z-index: 0;
  top: -1.5rem;
  right: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 20vw, 15rem);
  line-height: 1;
  color: var(--pink);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 640px){
  .section-bg-num{ display: none; }
}

/* Servicios como filas separadas por líneas finas (sin tarjetas):
   icono en círculo, texto y flecha en círculo. */
.service-grid{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-2xl);
  padding-bottom: var(--space-xl);
}
.service-cell{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--color-border);
  color: var(--ink);
  transition: background-color var(--dur-med) var(--ease-out);
}
.service-cell:hover{ background-color: var(--white); }

.service-cell .icon-wrap{
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pink-soft);
}
.service-cell .icon-wrap img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
/* mismo tratamiento en las 6 fotos: velo rosa que se levanta al pasar el ratón */
.service-cell .icon-wrap::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--pink);
  mix-blend-mode: multiply;
  opacity: .32;
  transition: opacity var(--dur-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .service-cell:hover .icon-wrap img{ transform: scale(1.08); }
  .service-cell:hover .icon-wrap::after{ opacity: 0; }
}
.service-cell h3{ margin-bottom: .2rem; font-size: 1.15rem; }
.service-cell p{
  font-size: .92rem;
  color: var(--color-text-muted);
}
.service-cell .card-foot{ display: flex; align-items: center; }
.service-cell .num{ display: none; }
.service-cell .arrow{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.service-cell .arrow svg{ width: 16px; height: 16px; }
.service-cell:hover .arrow{ background: var(--pink); border-color: var(--pink); color: var(--white); transform: translate(3px,-3px); }

@media (max-width: 900px){
  .service-grid{ grid-template-columns: 1fr; padding-bottom: var(--space-xl); }
  .service-grid .service-cell:first-child{ border-top: 0; }
}
@media (max-width: 640px){
  .service-cell{ grid-template-columns: 56px minmax(0, 1fr); padding-inline: 0; }
  .service-cell .icon-wrap{ width: 56px; height: 56px; }
  .service-cell p{ display: none; }
  .service-cell .card-foot{ display: none; }
}

/* ==========================================================================
   Portfolio
   ========================================================================== */
.portfolio{ background: var(--white); }
.case-list{ display: flex; flex-direction: column; gap: var(--space-xl); }
.case{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.case:nth-child(even) .case-media{ order: 2; }
.case:nth-child(even) .case-copy{ order: 1; }

.case-media{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  max-width: 520px;
  width: 100%;
}
.case-media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Web projects: a single full-width screenshot instead of the two-image
   collage, since a browser screenshot already reads better wide than tall. */
.case-media--web{ display: block; max-width: 560px; }
.case-media--web img{ aspect-ratio: 8/5; object-position: top; height: auto; }
.case-media-link{
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.case-media-link svg{ width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine){
  .case-media-link:hover{ background: var(--pink); color: var(--white); transform: translateY(-2px); }
}

.case-media--overlap{
  display: block;
  position: relative;
  max-width: 420px;
}
.case-media--overlap .img-main{ aspect-ratio: 4/5; }
.case-media--overlap .img-accent{
  position: absolute;
  width: 42%;
  aspect-ratio: 3/4;
  right: -4%;
  bottom: -8%;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-pop);
}
/* Formas: casos impares con foto en arco, pares con esquinas casi rectas.
   Las capturas de webs no se recortan en arco. */
.case:nth-child(odd) .case-media:not(.case-media--web):not(.case-media--web-main) img{
  border-radius: 50% 50% 16px 16px / 40% 40% 16px 16px;
}
.case:nth-child(even) .case-media img,
.case-media--web img,
.case-media--web-main img{ border-radius: 12px; }
.case-media--web-main{ max-width: 540px; }
.case-media--web-main .img-main{ aspect-ratio: 1/1; object-position: top; }
.case-media--web-main .img-accent{ width: 34%; right: -5%; bottom: -7%; }
.case:nth-child(even) .case-media{ margin-left: auto; }
.case:nth-child(even) .case-media--overlap{ margin-left: auto; }

.case-copy .case-tag{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .4rem .9rem;
  margin-bottom: var(--space-md);
}
.case-copy h3{
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.case-copy p{ color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-md); }
.case-copy p strong{ color: var(--pink-dark); font-weight: 700; }
.case-copy .case-services{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-md); }
.case-copy .case-services li{
  font-family: var(--font-mono);
  font-size: .76rem;
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--pink-soft);
  color: var(--pink-dark);
}
.case-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
}
.case-link svg{ width: 16px; height: 16px; transition: transform var(--dur-hover) var(--ease-out); }
.case-link:hover svg{ transform: translate(3px,-3px); }

@media (max-width: 860px){
  .case{ grid-template-columns: 1fr; }
  .case:nth-child(even) .case-media,
  .case:nth-child(even) .case-copy{ order: initial; }
  .case-media{ max-width: 460px; margin-inline: auto; }
  .case-media--overlap{ margin-inline: auto; }
  .case:nth-child(even) .case-media--overlap{ margin-inline: auto; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process{ background: var(--pink-soft); }
.process-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.process-list{ --line-scale: 0; }
.process-list::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 22px;
  height: 2px;
  background: var(--pink);
  opacity: .35;
  transform: scaleX(var(--line-scale));
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce){
  .process-list{ --line-scale: 1 !important; }
}
.process-step{
  position: relative;
  padding-right: var(--space-md);
}
.process-step .step-num{
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
  background: var(--white);
  border: 2px solid var(--pink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  position: relative;
}
.process-step h3{ margin-bottom: .5rem; }
.process-step p{ color: var(--color-text-muted); font-size: .94rem; max-width: 30ch; }

@media (max-width: 980px){
  .process-list{ grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-lg); }
  .process-list::before{ display: none; }
}
@media (max-width: 560px){
  .process-list{ grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  background: var(--ink);
  color: var(--white);
  padding-block: var(--space-xl) var(--space-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta::before, .cta::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.cta::before{
  width: 320px; height: 320px;
  background: var(--pink);
  opacity: .18;
  top: -120px; left: -120px;
}
.cta::after{
  width: 380px; height: 380px;
  background: var(--green);
  opacity: .14;
  bottom: -160px; right: -140px;
}
.cta-inner{ position: relative; max-width: 800px; margin-inline: auto; }
.cta .eyebrow{ justify-content: center; margin-bottom: var(--space-md); }
.cta h2{ margin-bottom: var(--space-md); }
.cta .lede{ color: rgba(255,255,255,.75); margin-inline: auto; margin-bottom: var(--space-lg); }
.cta-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); width: 100%; }
.cta-actions .btn{
  flex: 1 1 260px;
  justify-content: center;
  padding: 1.25rem 2rem;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
}
.cta-contact{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}
.cta-contact a, .cta-contact span{
  padding: .45rem 1.1rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-pill);
}
.cta-contact a, .cta-contact span{ color: var(--white); }
.cta-contact a:hover{ border-color: var(--white); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding-top: var(--space-lg);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr repeat(3, .9fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand .brand-word{ color: var(--white); }
.footer-brand .brand{ margin-bottom: var(--space-md); }
.footer-brand p{ max-width: 34ch; color: rgba(255,255,255,.55); margin-bottom: var(--space-md); }
.footer-social{ display: flex; gap: .6rem; }
.footer-social a{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social svg{ width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine){
  .footer-social a:hover{ background: var(--pink); border-color: var(--pink); transform: translateY(-3px); }
}
.footer-social a:active{ transform: scale(.93); }

.footer-col h3{
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  margin-bottom: var(--space-md);
}
.footer-col ul{ display: flex; flex-direction: column; gap: .7rem; }
.footer-col a{ transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--pink); }

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: rgba(255,255,255,.4);
}
.back-to-top{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.7);
}
.back-to-top svg{ width: 16px; height: 16px; }
.back-to-top:hover{ color: var(--white); }

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Misc responsive helpers
   ========================================================================== */
@media (max-width: 640px){
  .section{ padding-block: var(--space-2xl); }
  .section-head{ flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Service detail pages
   ========================================================================== */
.service-breadcrumb{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}
.service-breadcrumb svg{ width: 14px; height: 14px; transform: scaleX(-1); transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .service-breadcrumb:hover{ color: var(--pink-dark); }
  .service-breadcrumb:hover svg{ transform: scaleX(-1) translateX(3px); }
}

.service-hero-num{ display: flex; align-items: center; justify-content: center; }
.service-hero-num .num-giant{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 22vw, 16rem);
  line-height: 1;
  color: var(--pink);
  opacity: .16;
  user-select: none;
}
/* Below the hero-inner's 1-column breakpoint, the giant numeral stacks
   under the copy and its 8rem floor is still huge on a phone — hide it
   rather than leave a near-empty square before the marquee. */
@media (max-width: 640px){
  .service-hero-num{ display: none; }
}

.intro .kinetic-heading{ margin-bottom: var(--space-md); }
.service-intro{ max-width: 62ch; }
.service-intro p + p{ margin-top: var(--space-md); }
.service-intro strong{ color: var(--pink-dark); font-weight: 700; }

.empty-case-cta{
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.empty-case-cta p{ color: var(--color-text-muted); margin-bottom: var(--space-md); }

.related-services{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--space-lg);
}
.related-services a{
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.includes-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-xl);
}
.includes-list li{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 1.02rem;
}
.includes-list svg{
  width: 22px; height: 22px;
  flex: none;
  margin-top: .15em;
  color: var(--green);
}
@media (max-width: 640px){
  .includes-list{ grid-template-columns: 1fr; }
}
@media (hover: hover) and (pointer: fine){
  .related-services a:hover{ background: var(--pink); border-color: var(--pink); color: var(--white); }
}

/* ==========================================================================
   Header nav dropdown (Servicios)
   ========================================================================== */
.nav-item-dropdown{ position: relative; }
.nav-item-dropdown > a{ display: inline-flex; align-items: center; gap: .3rem; }
.nav-caret{ width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }

.nav-dropdown{
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xs);
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: min(320px, 90vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  z-index: 30;
}
/* Invisible bridge over the gap to the trigger, so the cursor never leaves
   the hoverable area while moving down from the link into the menu. */
.nav-dropdown::before{
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown a{
  padding: .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  font-weight: 500;
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-dropdown a::after{ display: none; }
.nav-dropdown a:hover{ background: var(--pink-soft); color: var(--pink-dark); }

@media (hover: hover) and (pointer: fine){
  .nav-item-dropdown:hover .nav-dropdown,
  .nav-item-dropdown:focus-within .nav-dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item-dropdown:hover .nav-caret,
  .nav-item-dropdown:focus-within .nav-caret{ transform: rotate(180deg); }
}

.mobile-menu .submenu{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 1px solid rgba(255,255,255,.18);
}
.mobile-menu .submenu a{
  font-family: var(--font-mono);
  font-weight: 500;
  font-variation-settings: normal;
  font-size: .95rem;
  color: rgba(255,255,255,.7);
}

/* ==========================================================================
   Portfolio page (dedicated) — uniform organized grid. Equal-size cards,
   image framed with real depth, caption in plain text below (not an
   overlay) — legible, scannable, consistent with how the rest of the
   site presents case copy.
   ========================================================================== */
.portfolio-index{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  text-align: center;
}
.portfolio-masonry{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.case-tile{
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .case-tile:hover{ transform: translateY(-6px); }
}

.case-tile img{
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px;
  box-shadow: var(--shadow-card);
}
.case-tile:nth-child(3n+2) img{ border-radius: 12px; }
.case-tile-scrim{
  padding: var(--space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.case-tile-tag{
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown);
}
.case-tile h3{ font-size: 1.1rem; margin-bottom: 0; }

.case-tile-extra{ display: flex; flex-direction: column; gap: .5rem; }
.case-tile-extra .case-services{ display: flex; flex-wrap: wrap; gap: .4rem; }
.case-tile-extra .case-services li{
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: .25rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--pink-soft);
  color: var(--pink-dark);
}
.case-tile-link{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  width: fit-content;
}
.case-tile-link svg{ width: 14px; height: 14px; }

@media (max-width: 860px){
  .portfolio-masonry{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .portfolio-masonry{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog listing
   ========================================================================== */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
.post-card{
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  a.post-card:hover{ transform: translateY(-6px); }
}
a.post-card:active{ transform: scale(.98); transition-duration: 100ms; }
.post-card-media{
  aspect-ratio: 4/3;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
}
.post-card-media svg{ width: 25%; height: 25%; color: rgba(255,255,255,.9); }
.post-card-body{ padding: var(--space-sm) 0 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card-tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pink-dark);
}
.post-card h3{ font-size: 1.2rem; line-height: 1.25; }
.post-card-body p{ color: var(--color-text-muted); font-size: .92rem; flex: 1; }
.post-card-meta{
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--color-text-muted);
  display: flex;
  gap: .75rem;
  padding-top: .4rem;
  border-top: 1px solid var(--color-border);
}
.post-card.is-soon{ opacity: .55; }
.post-card.is-soon .post-card-tag{ display: flex; align-items: center; gap: .5rem; }
.post-card.is-soon .post-card-tag::after{
  content: 'Próximamente';
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .15rem .55rem;
}

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog article
   ========================================================================== */
.article{ max-width: 68ch; margin-inline: auto; }
.article-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.article h1{ margin-bottom: var(--space-md); }
.article-lede{ margin-bottom: var(--space-lg); }
.article-body p{ margin-bottom: var(--space-md); }
.article-body h2{
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.article-body ul{
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: var(--space-md);
}
.article-body li{ margin-bottom: .5rem; }
.article-body li::marker{ color: var(--pink); }
@media (hover: hover) and (pointer: fine){
  .mobile-menu .submenu a:hover{ color: var(--pink); }
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-page{
  background: var(--color-bg-soft);
  padding-top: clamp(6.5rem, 5rem + 5vw, 8.5rem);
  padding-bottom: clamp(3rem, 1.8rem + 3.2vw, 4.75rem);
}
.contact-grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--space-xl);
  align-items: start;
}
.contact-intro .eyebrow{ margin-bottom: var(--space-md); }
.contact-intro h1{ margin-bottom: var(--space-md); }
.contact-intro .lede{ margin-bottom: var(--space-lg); }
.contact-intro .lede strong{ color: var(--ink); }
.contact-ways{ display: flex; flex-direction: column; gap: var(--space-md); }
.contact-ways li{ display: flex; align-items: center; gap: var(--space-sm); font-size: .98rem; color: var(--color-text-muted); }
.contact-ways strong{ display: block; color: var(--ink); font-weight: 800; }
.contact-ways a{ color: var(--ink); border-bottom: 1px solid var(--color-border); }
.contact-ways a:hover{ border-color: var(--pink); color: var(--pink-dark); }
.contact-ico{
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  color: var(--pink);
}
.contact-ico svg{ width: 22px; height: 22px; }

.contact-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.field{ display: flex; flex-direction: column; gap: .4rem; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field label{ font-weight: 700; font-size: .95rem; color: var(--ink); }
.field-opt{ font-weight: 400; color: var(--color-text-muted); }
.field input:not([type="checkbox"]),
.field select,
.field textarea{
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: .95rem 1.4rem;
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.field textarea{ border-radius: 26px; resize: vertical; min-height: 9rem; }
.field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241A15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 18px; padding-right: 3rem; }
.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(239,79,155,.18);
}
.field.has-error input:not([type="checkbox"]),
.field.has-error select,
.field.has-error textarea{ border-color: #C0264F; }
.field-error{ min-height: 0; font-size: .85rem; color: #B0203F; }
.field-check{ display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: start; }
.field-check input{ width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--pink); }
.field-check label{ font-weight: 400; color: var(--color-text-muted); font-size: .92rem; }
.field-check .field-error{ grid-column: 2; }
.btn-lg{ align-self: flex-start; padding: 1.15rem 2.2rem; font-size: 1.05rem; }
.form-status{ font-size: .95rem; color: var(--color-text-muted); min-height: 1.4em; }
.form-status.is-ok{ color: var(--green); font-weight: 700; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns: 1fr; }
  .btn-lg{ align-self: stretch; justify-content: center; }
}
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-error{ color: #B0203F; font-weight: 700; }

/* Servicios relacionados dentro del CTA oscuro */
.cta .related-services{ justify-content: center; margin-top: var(--space-lg); }
.cta .related-services a{
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.35);
}

/* ==========================================================================
   Páginas legales
   ========================================================================== */
.legal-page{
  background: var(--color-bg-soft);
  padding-top: clamp(6.5rem, 5rem + 5vw, 8.5rem);
  padding-bottom: clamp(3rem, 1.8rem + 3.2vw, 4.75rem);
}
.legal-doc{ max-width: 820px; }
.legal-doc .eyebrow{ margin-bottom: var(--space-md); }
.legal-doc h1{ margin-bottom: var(--space-sm); }
.legal-updated{ color: var(--color-text-muted); font-size: .92rem; margin-bottom: var(--space-lg); }
.legal-doc h2{ font-family: var(--font-body); font-weight: 800; font-size: 1.3rem; line-height: 1.25; margin: var(--space-lg) 0 var(--space-xs); }
.legal-doc p, .legal-doc li{ color: var(--color-text); line-height: 1.7; max-width: 70ch; }
.legal-doc p + p{ margin-top: var(--space-sm); }
.legal-doc ul{ list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .4rem; margin-top: var(--space-xs); }
.legal-doc a{ color: var(--pink-dark); text-decoration: underline; text-underline-offset: 3px; }
.ph{ background: #FFF0A8; color: var(--ink); padding: 0 .3em; border-radius: 4px; font-weight: 600; }

.footer-bottom-left{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; }
.footer-legal{ display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.footer-legal a{ transition: color var(--dur-fast) var(--ease-out); }
.footer-legal a:hover{ color: var(--pink); }

.empty-case-cta .btn{ white-space: normal; text-align: center; justify-content: center; max-width: 100%; }
@media (max-width: 640px){
  .empty-case-cta{ padding: var(--space-lg) var(--space-md); }
}

.footer-col a, .cta-contact a, .contact-ways a{ overflow-wrap: anywhere; }