/* ============================================================
NACHO DUCCA — DESIGN SYSTEM + WEB CSS
Director digital externo · estética digital con personalidad
============================================================
Marca oscura por defecto. Teal #1E8A8A protagonista.
============================================================ */
/* ── FUENTES ─────────────────────────────────────────────── */
/* En cada :
*/
/* ── TOKENS ──────────────────────────────────────────────── */
:root {
/* Teal primario */
--nd-teal-50: #E1F5EE;
--nd-teal-200: #9FE1CB;
--nd-teal-400: #5DCAA5;
--nd-teal-500: #1E8A8A;
--nd-teal-700: #14605F;
--nd-teal-900: #0A3433;
/* Oscuros de marca */
--nd-black: #0E1416;
--nd-surface: #1A2428;
--nd-surface-2:#243136;
--nd-border: #2E3C42;
/* Claros */
--nd-bone: #F4F1EA;
--nd-bone-dim: #B8C0BE;
--nd-bone-mut: #7E8987;
/* Spark */
--nd-spark: #5DCAA5;
/* Roles semánticos */
--nd-bg: var(--nd-black);
--nd-bg-elevated: var(--nd-surface);
--nd-bg-hover: var(--nd-surface-2);
--nd-text: var(--nd-bone);
--nd-text-soft: var(--nd-bone-dim);
--nd-text-faint: var(--nd-bone-mut);
--nd-accent: var(--nd-teal-500);
--nd-accent-hover: var(--nd-teal-400);
--nd-line: var(--nd-border);
/* Tipografía */
--nd-font-display: "Space Grotesk", "Segoe UI", sans-serif;
--nd-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--nd-font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Escala */
--nd-text-xs: 0.75rem;
--nd-text-sm: 0.875rem;
--nd-text-base: 1rem;
--nd-text-lg: 1.25rem;
--nd-text-xl: 1.563rem;
--nd-text-2xl: 1.953rem;
--nd-text-3xl: 2.441rem;
--nd-text-4xl: 3.052rem;
/* Espaciado */
--nd-space-1: 0.25rem;
--nd-space-2: 0.5rem;
--nd-space-3: 0.75rem;
--nd-space-4: 1rem;
--nd-space-6: 1.5rem;
--nd-space-8: 2rem;
--nd-space-12: 3rem;
--nd-space-16: 4rem;
--nd-space-24: 6rem;
/* Radios */
--nd-radius-sm: 6px;
--nd-radius: 10px;
--nd-radius-lg: 16px;
--nd-radius-xl: 20px;
--nd-radius-full: 999px;
/* Transiciones */
--nd-ease: cubic-bezier(0.16, 1, 0.3, 1);
--nd-dur: 0.4s;
/* Layout */
--nd-maxw: 1120px;
/* Sombras (sobre fondo oscuro) */
--shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
--shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
--shadow-lg: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.2);
}
/* Tema claro (secciones puntuales) */
.nd-theme-light {
--nd-bg: var(--nd-bone);
--nd-bg-elevated: #FFFFFF;
--nd-bg-hover: #ECE8DE;
--nd-text: var(--nd-black);
--nd-text-soft: #4A5552;
--nd-text-faint: #7E8987;
--nd-line: #D8D3C7;
}
/* ── RESET + BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--nd-font-body);
font-size: var(--nd-text-base);
line-height: 1.7;
color: var(--nd-text);
background: var(--nd-bg);
font-weight: 400;
}
h1, h2, h3, h4 {
font-family: var(--nd-font-display);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--nd-text);
}
h1 { font-size: clamp(2rem, 5vw, var(--nd-text-4xl)); }
h2 { font-size: clamp(1.5rem, 3vw, var(--nd-text-3xl)); }
h3 { font-size: var(--nd-text-xl); }
h4 { font-size: var(--nd-text-lg); }
p { color: var(--nd-text-soft); max-width: 65ch; }
a { color: var(--nd-accent); text-decoration: none; transition: color var(--nd-dur) var(--nd-ease); }
a:hover { color: var(--nd-accent-hover); }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--nd-teal-500); color: var(--nd-bone); }
/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--nd-maxw);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 3rem);
}
.section { padding-block: var(--nd-space-24); }
.section--alt { background: var(--nd-surface); }
.section--dark { background: var(--nd-black); }
.section--bone { background: var(--nd-surface); } /* was --nd-bone, fixed for dark theme */
/* ── TIPOGRAFÍA UTILS ────────────────────────────────────── */
.eyebrow {
font-family: var(--nd-font-mono);
font-size: var(--nd-text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--nd-accent);
display: block;
margin-bottom: 12px;
}
.lead {
font-size: var(--nd-text-lg);
color: var(--nd-text-soft);
line-height: 1.65;
}
.mono {
font-family: var(--nd-font-mono);
font-size: var(--nd-text-sm);
}
.text-accent { color: var(--nd-accent); }
/* Section headers */
.section-header { margin-bottom: 48px; }
.section-header--center { text-align: center; }
.section-header--center p { margin-inline: auto; }
.section-desc {
color: var(--nd-text-soft);
line-height: 1.7;
max-width: 58ch;
margin-top: 12px;
}
/* ── EL RAYO — firma gráfica ─────────────────────────────── */
.nd-spark::before {
content: "";
display: inline-block;
width: 0.7em; height: 1em;
margin-right: 0.5em;
background: var(--nd-spark);
clip-path: polygon(55% 0, 0 58%, 40% 58%, 30% 100%, 100% 38%, 55% 38%);
vertical-align: -0.1em;
}
.nd-divider {
height: 2px; border: none;
background: linear-gradient(90deg, var(--nd-accent) 0%, transparent 60%);
margin-block: var(--nd-space-8);
}
/* ── GRIDS ───────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.sectors-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1023px) { .sectors-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sectors-grid { grid-template-columns: 1fr; } }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
/* ── BOTONES ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--nd-font-display);
font-size: var(--nd-text-sm);
font-weight: 500;
letter-spacing: 0.01em;
padding: 0.8em 1.6em;
border-radius: var(--nd-radius);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--nd-dur) var(--nd-ease);
text-decoration: none;
white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn--primary {
background: var(--nd-accent);
color: var(--nd-bone);
border-color: var(--nd-accent);
}
.btn--primary:hover {
background: var(--nd-accent-hover);
border-color: var(--nd-accent-hover);
color: var(--nd-black);
transform: translateY(-2px);
}
.btn--outline {
background: transparent;
color: var(--nd-text);
border-color: var(--nd-line);
}
.btn--outline:hover {
border-color: var(--nd-accent);
color: var(--nd-accent);
}
.btn--ghost {
background: transparent;
color: var(--nd-text);
border-color: var(--nd-line);
}
.btn--ghost:hover { border-color: var(--nd-accent); color: var(--nd-accent); }
.btn--ghost-light {
background: rgba(255,255,255,.07);
color: var(--nd-bone);
border: 1px solid rgba(255,255,255,.2);
}
.btn--ghost-light:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.4);
}
.btn--white {
background: var(--nd-bone);
color: var(--nd-black);
border-color: var(--nd-bone);
}
.btn--white:hover {
background: #fff;
transform: translateY(-2px);
}
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(14,20,22,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--nd-border);
transition: box-shadow .2s;
}
.navbar.scrolled {
box-shadow: 0 1px 32px rgba(0,0,0,.5);
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.navbar__logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
flex-shrink: 0;
}
.navbar__logo img { height: 28px; width: auto; }
.navbar__logo-name {
font-family: var(--nd-font-display);
font-size: 15px;
font-weight: 600;
color: var(--nd-bone);
letter-spacing: -0.02em;
}
.navbar__links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
}
.navbar__link { position: relative; }
.navbar__link > a,
.navbar__link > button {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 13px;
border-radius: var(--nd-radius);
font-size: 13px;
font-weight: 500;
color: var(--nd-text-soft);
text-decoration: none;
background: none;
border: none;
transition: color .15s, background .15s;
white-space: nowrap;
}
.navbar__link > a:hover,
.navbar__link > button:hover,
.navbar__link > a.active,
.navbar__link > button.active {
color: var(--nd-bone);
background: var(--nd-surface);
}
.navbar__chevron {
width: 14px; height: 14px;
transition: transform .2s;
flex-shrink: 0;
}
.navbar__link.open .navbar__chevron { transform: rotate(180deg); }
.navbar__dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 210px;
background: var(--nd-surface);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
box-shadow: var(--shadow-lg);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.navbar__link.open .navbar__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.navbar__dropdown a {
display: block;
padding: 9px 13px;
border-radius: 8px;
font-size: 13px;
color: var(--nd-text-soft);
text-decoration: none;
transition: background .12s, color .12s;
}
.navbar__dropdown a:hover { background: var(--nd-surface-2); color: var(--nd-bone); }
.navbar__dropdown a.active { color: var(--nd-accent); background: rgba(30,138,138,.12); }
.navbar__dropdown-feat {
display: flex !important;
align-items: center;
gap: 8px;
color: var(--nd-accent) !important;
font-weight: 600;
background: rgba(30,138,138,.10);
border: 1px solid rgba(30,138,138,.25);
margin-bottom: 6px;
padding-block: 11px !important;
}
.navbar__dropdown-feat:hover { background: rgba(30,138,138,.18) !important; color: var(--nd-spark) !important; }
.navbar__dropdown-feat svg { width: 15px; height: 15px; flex-shrink: 0; }
.navbar__mobile-feat {
color: var(--nd-accent) !important;
font-weight: 600;
background: rgba(30,138,138,.10);
border-radius: 8px;
}
.all-services-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: 24px;
padding: 22px 26px;
background: var(--nd-surface-2);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
text-decoration: none;
transition: border-color .15s, background .15s;
}
.all-services-card:hover { border-color: var(--nd-accent); background: rgba(30,138,138,.07); }
.all-services-card__title { font-family: var(--nd-font-display); font-size: 16px; font-weight: 600; color: var(--nd-bone); margin-bottom: 4px; }
.all-services-card__desc { font-size: 13px; color: var(--nd-text-soft); max-width: 560px; line-height: 1.5; }
.all-services-card__link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--nd-accent); white-space: nowrap; }
.featured-service {
display: flex;
gap: 24px;
padding: 32px;
background: linear-gradient(135deg, rgba(30,138,138,.12), rgba(30,138,138,.04));
border: 1px solid var(--nd-accent);
border-radius: var(--nd-radius-xl);
text-decoration: none;
margin-bottom: 40px;
transition: box-shadow .2s, transform .2s;
}
.featured-service:hover { box-shadow: 0 18px 48px -22px rgba(30,138,138,.5); transform: translateY(-2px); }
.featured-service__icon {
flex-shrink: 0;
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
background: var(--nd-accent);
border-radius: var(--nd-radius);
color: var(--nd-bg);
}
.featured-service__icon svg { width: 26px; height: 26px; }
.featured-service__badge {
display: inline-block;
font-family: var(--nd-font-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nd-accent);
margin-bottom: 8px;
}
.featured-service__body h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--nd-bone); }
.featured-service__body > p { font-size: 14px; color: var(--nd-text-soft); line-height: 1.6; margin-bottom: 16px; max-width: 640px; }
.featured-service__feats { list-style: none; padding: 0; margin: 0 0 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.featured-service__feats li { position: relative; padding-left: 20px; font-size: 13px; color: var(--nd-bone-dim); line-height: 1.5; }
.featured-service__feats li::before { content: '✓'; position: absolute; left: 0; color: var(--nd-accent); font-weight: 700; }
.featured-service__link { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--nd-accent); }
.services-index-label { font-family: var(--nd-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-text-faint); margin-bottom: 18px; }
@media (max-width: 767px) {
.featured-service { flex-direction: column; padding: 24px; gap: 16px; }
.featured-service__feats { grid-template-columns: 1fr; }
}
.navbar__actions { display: flex; align-items: center; gap: 10px; }
.navbar__contact {
font-size: 13px;
font-weight: 500;
color: var(--nd-text-soft);
text-decoration: none;
transition: color .15s;
}
.navbar__contact:hover { color: var(--nd-bone); }
.navbar__burger {
display: none;
padding: 6px;
border-radius: var(--nd-radius);
background: none;
border: none;
color: var(--nd-text-soft);
}
.navbar__mobile {
display: none;
border-top: 1px solid var(--nd-border);
padding: 10px 0 16px;
background: var(--nd-surface);
}
.navbar__mobile.open { display: block; }
.navbar__mobile-group { padding: 0 8px; }
.navbar__mobile-label {
font-family: var(--nd-font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nd-text-faint);
padding: 10px 8px 4px;
}
.navbar__mobile a {
display: block;
padding: 9px 10px;
border-radius: var(--nd-radius);
font-size: 13px;
font-weight: 500;
color: var(--nd-text-soft);
text-decoration: none;
}
.navbar__mobile a:hover { background: var(--nd-surface-2); color: var(--nd-bone); }
.navbar__mobile-cta { margin: 10px 8px 0; }
.navbar__mobile-cta a {
display: block;
text-align: center;
padding: 11px;
background: var(--nd-accent);
color: var(--nd-bone) !important;
border-radius: var(--nd-radius);
font-weight: 600;
}
/* ── HERO ────────────────────────────────────────────────── */
.hero {
padding-top: 100px;
padding-bottom: 48px;
position: relative;
overflow: hidden;
min-height: 72vh;
display: flex;
align-items: center;
}
.hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 65% at 70% 50%, rgba(30,138,138,.12), transparent 60%),
radial-gradient(ellipse 35% 40% at 8% 85%, rgba(30,138,138,.05), transparent 60%);
pointer-events: none;
}
.hero__grid {
display: grid;
grid-template-columns: 1fr minmax(380px, 420px);
gap: 64px;
align-items: stretch;
width: 100%;
min-height: calc(72vh - 100px);
}
.hero__content {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: 64px;
padding-right: 64px;
}
.hero__eyebrow { margin-bottom: 18px; }
.hero__headline {
font-size: clamp(2rem, 5vw, var(--nd-text-4xl));
font-weight: 500;
letter-spacing: -.035em;
line-height: 1.05;
color: var(--nd-bone);
margin-bottom: 20px;
max-width: 14ch;
}
.hero__sub {
font-size: var(--nd-text-lg);
color: var(--nd-text-soft);
line-height: 1.65;
max-width: 48ch;
margin-bottom: 32px;
}
.hero__metrics {
display: flex;
gap: clamp(10px, 2vw, 28px);
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid var(--nd-border);
flex-wrap: nowrap;
}
.hero__metric {
flex: 1 1 0;
min-width: 0;
}
.hero__metric-val {
font-family: var(--nd-font-display);
font-size: clamp(1.25rem, 4vw, 1.6rem);
font-weight: 600;
color: var(--nd-accent);
letter-spacing: -.03em;
line-height: 1;
}
.hero__metric-lbl {
font-size: clamp(0.65rem, 2.2vw, var(--nd-text-xs));
color: var(--nd-text-faint);
margin-top: 4px;
line-height: 1.35;
}
.hero__photo-wrap {
position: relative;
overflow: hidden;
align-self: center;
width: 100%;
min-height: 0;
max-height: 560px;
height: 100%;
border-radius: var(--nd-radius-xl);
margin-bottom: 0;
}
.hero__photo {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
animation: hero-img-in 0.85s cubic-bezier(.22,.68,0,1) 0.35s forwards,
img-glow 4s ease-in-out 1.5s infinite alternate;
}
.hero__photo-wrap::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 100px;
background: linear-gradient(to top, rgba(30,138,138,.08), transparent);
z-index: 2;
pointer-events: none;
}
/* ── HERO ENTRY ANIMATIONS ──────────────────────────────── */
.hero-anim-text {
opacity: 0;
transform: translateY(28px);
animation: hero-text-in 0.75s cubic-bezier(.22,.68,0,1) 0.15s forwards;
}
@keyframes hero-text-in {
to { opacity: 1; transform: translateY(0); }
}
.hero-anim-img {
opacity: 0;
transform: scale(0.96) translateY(16px);
animation: hero-img-in 0.85s cubic-bezier(.22,.68,0,1) 0.35s forwards;
}
@keyframes hero-img-in {
to { opacity: 1; transform: scale(1) translateY(0); }
}
.hero-anim-text .eyebrow {
opacity:0; transform:translateY(14px);
animation: hero-text-in 0.5s ease 0.2s forwards;
}
.hero-anim-text .hero__headline {
opacity:0; transform:translateY(14px);
animation: hero-text-in 0.55s ease 0.35s forwards;
}
.hero-anim-text .hero__sub {
opacity:0; transform:translateY(14px);
animation: hero-text-in 0.55s ease 0.5s forwards;
}
.hero-anim-text .btn-group {
opacity:0; transform:translateY(14px);
animation: hero-text-in 0.55s ease 0.65s forwards;
}
.hero-anim-text .hero__metrics {
opacity:0; transform:translateY(14px);
animation: hero-text-in 0.55s ease 0.8s forwards;
}
@keyframes img-glow {
from { filter: drop-shadow(0 0 0px rgba(30,138,138,0)); }
to { filter: drop-shadow(0 0 28px rgba(30,138,138,.3)); }
}
@media (prefers-reduced-motion: reduce) {
.hero-anim-text, .hero-anim-img,
.hero-anim-text .eyebrow, .hero-anim-text .hero__headline,
.hero-anim-text .hero__sub, .hero-anim-text .btn-group,
.hero-anim-text .hero__metrics {
opacity:1; transform:none; animation:none; filter:none;
}
}
/* ── LOGO SLIDER ─────────────────────────────────────────── */
.logo-slider-section {
padding-block: 52px;
background: var(--nd-surface);
border-top: 1px solid var(--nd-border);
border-bottom: 1px solid var(--nd-border);
overflow: hidden;
}
.logo-slider-label {
text-align: left;
font-family: var(--nd-font-mono);
font-size: var(--nd-text-xs);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--nd-text-faint);
margin-bottom: 28px;
}
.logo-track-wrap {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.logo-track {
display: flex;
align-items: center;
gap: 48px;
width: max-content;
animation: slide-logos 28s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
@keyframes slide-logos {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logo-item {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 8px;
flex-shrink: 0;
opacity: .55;
transition: opacity .2s;
}
.logo-item:hover { opacity: 1; }
.logo-item__placeholder {
height: 32px;
padding: 0 18px;
background: var(--nd-surface-2);
border: 1px solid var(--nd-border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--nd-font-mono);
font-size: 11px;
font-weight: 500;
color: var(--nd-text-faint);
white-space: nowrap;
}
.logo-item img { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
/* ── PROBLEM SECTION ─────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.problem-card {
background: var(--nd-surface);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
padding: 24px;
}
.problem-card--symptom { border-top: 2px solid var(--nd-border); }
.problem-card__quote {
font-size: 14px;
font-style: italic;
color: var(--nd-text-soft);
line-height: 1.6;
margin-bottom: 16px;
padding-left: 14px;
border-left: 2px solid var(--nd-accent);
}
.problem-card__divider {
height: 1px;
background: var(--nd-border);
margin-bottom: 16px;
}
.problem-card__title {
font-family: var(--nd-font-display);
font-size: 14px;
font-weight: 600;
color: var(--nd-bone);
letter-spacing: -.01em;
}
/* ── DIFFERENTIAL ────────────────────────────────────────── */
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.diff-checklist { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.diff-item { display: flex; align-items: flex-start; gap: 12px; }
.diff-item__check {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--nd-accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.diff-item__check svg { width: 11px; height: 11px; color: var(--nd-black); stroke-width: 3; }
.diff-item p { font-size: 14px; color: var(--nd-text-soft); line-height: 1.6; }
/* ── CARDS ───────────────────────────────────────────────── */
.nd-card {
background: var(--nd-bg-elevated);
border: 1px solid var(--nd-line);
border-radius: var(--nd-radius-lg);
padding: var(--nd-space-8);
transition: border-color var(--nd-dur) var(--nd-ease), transform var(--nd-dur) var(--nd-ease);
}
.nd-card:hover { border-color: var(--nd-accent); transform: translateY(-4px); }
.nd-card h3 { margin-bottom: var(--nd-space-3); }
.nd-card-accent { border-left: 3px solid var(--nd-accent); border-radius: 0 var(--nd-radius-lg) var(--nd-radius-lg) 0; }
.nd-pill {
display: inline-flex; align-items: center; gap: .4em;
font-family: var(--nd-font-mono); font-size: var(--nd-text-xs);
letter-spacing: .05em; padding: .35em .9em;
border-radius: var(--nd-radius-full);
background: var(--nd-teal-900); color: var(--nd-teal-200);
border: 1px solid var(--nd-teal-700);
}
/* ── SERVICE CARDS ───────────────────────────────────────── */
.sector-card, .service-card {
background: var(--nd-surface);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
padding: 22px;
text-decoration: none;
display: block;
transition: border-color .18s, box-shadow .18s;
}
.sector-card:hover, .service-card:hover {
border-color: var(--nd-accent);
box-shadow: 0 6px 24px rgba(30,138,138,.12);
}
.sector-card__icon, .service-card__icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(30,138,138,.12);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.sector-card__icon svg, .service-card__icon svg { width: 15px; height: 15px; color: var(--nd-accent); }
.sector-card h3, .service-card h3 { font-size: 15px; margin-bottom: 8px; color: var(--nd-bone); }
.sector-card p, .service-card p { font-size: 13px; color: var(--nd-text-soft); line-height: 1.65; margin-bottom: 18px; }
.sector-card__link, .service-card__link {
font-size: 12px; font-weight: 600;
color: var(--nd-text-faint);
display: flex; align-items: center; gap: 5px;
transition: color .15s;
}
.sector-card:hover .sector-card__link,
.service-card:hover .service-card__link { color: var(--nd-accent); }
/* Cards de servicio a igual altura: el enlace se ancla abajo y no quedan huecos */
.grid-4 .service-card {
display: flex;
flex-direction: column;
height: 100%;
}
.grid-4 .service-card .service-card__link {
margin-top: auto;
}
/* ── CORE SERVICE BLOCK ──────────────────────────────────── */
.core-service {
background: rgba(30,138,138,.08);
border: 1px solid rgba(30,138,138,.25);
border-radius: var(--nd-radius-xl);
padding: 36px;
}
.core-service__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.core-badge {
display: inline-block;
font-family: var(--nd-font-mono);
font-size: 10px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
color: var(--nd-accent);
background: rgba(30,138,138,.12);
border: 1px solid rgba(30,138,138,.25);
padding: 4px 10px;
border-radius: var(--nd-radius-full);
margin-bottom: 14px;
}
.core-service__title { margin-bottom: 12px; color: var(--nd-bone); }
.core-service__desc { font-size: 14px; color: var(--nd-text-soft); line-height: 1.7; margin-bottom: 24px; }
.core-service__includes { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; height: 100%; }
.include-item {
background: var(--nd-surface);
border: 1px solid rgba(30,138,138,.15);
border-radius: var(--nd-radius-lg);
padding: 14px;
display: flex;
flex-direction: column;
}
.include-item__dot {
width: 20px; height: 20px;
border-radius: 6px;
background: rgba(30,138,138,.12);
display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
.include-item__dot svg { width: 10px; height: 10px; color: var(--nd-accent); stroke-width: 2.5; }
.include-item p { font-size: 12px; font-weight: 500; color: var(--nd-text-soft); line-height: 1.45; }
/* ── CASE CARDS ──────────────────────────────────────────── */
.cases-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; }
.cases-header .section-header { margin-bottom: 0; }
.cases-header__link {
font-size: 13px; font-weight: 600;
color: var(--nd-accent);
text-decoration: none;
display: flex; align-items: center; gap: 5px;
flex-shrink: 0;
}
.cases-header__link:hover { color: var(--nd-accent-hover); }
.case-card {
background: var(--nd-surface);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
overflow: hidden;
transition: box-shadow .18s, border-color .18s;
text-decoration: none;
display: block;
}
.case-card:hover { box-shadow: var(--shadow-lg); border-color: var(--nd-accent); }
.case-card__bar { height: 2px; background: var(--nd-accent); }
.case-card__body { padding: 22px; }
.sector-tag {
display: inline-block;
font-family: var(--nd-font-mono);
font-size: 11px; font-weight: 500;
color: var(--nd-accent);
background: rgba(30,138,138,.1);
border: 1px solid rgba(30,138,138,.2);
padding: 3px 10px;
border-radius: var(--nd-radius-full);
margin-bottom: 12px;
}
.case-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--nd-bone); }
.case-card p { font-size: 12px; color: var(--nd-text-soft); line-height: 1.65; margin-bottom: 18px; }
.metrics-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.metric-box {
background: var(--nd-surface-2);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius);
padding: 10px 8px;
text-align: center;
}
.metric-box__val { font-family: var(--nd-font-mono); font-size: 15px; font-weight: 500; color: var(--nd-accent); }
.metric-box__lbl { font-size: 10px; color: var(--nd-text-faint); margin-top: 2px; line-height: 1.3; }
/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonials-section { padding-block: 80px; background: var(--nd-surface); }
.testimonial-slider { overflow: hidden; }
.testimonial-track {
display: flex;
gap: 16px;
align-items: stretch;
transition: transform .5s cubic-bezier(.22,.68,0,1);
will-change: transform;
}
.testimonial-card {
flex: 0 0 calc((100% - 32px) / 3);
box-sizing: border-box;
background: var(--nd-surface-2);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-xl);
padding: 28px;
display: flex; flex-direction: column; gap: 20px;
}
.testimonial-card__quote {
font-size: 15px; line-height: 1.7;
color: var(--nd-text-soft);
font-style: italic;
flex: 1;
position: relative;
padding-top: 8px;
}
.testimonial-card__quote::before {
content: '"';
font-size: 48px; line-height: 1;
color: var(--nd-accent);
opacity: .3;
font-style: normal;
font-weight: 700;
position: absolute;
top: -10px; left: -4px;
}
.testimonial-card__author {
display: flex; align-items: center; gap: 12px;
border-top: 1px solid var(--nd-border);
padding-top: 18px;
}
.testimonial-card__avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(30,138,138,.15);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: var(--nd-font-mono);
font-size: 13px; font-weight: 500;
color: var(--nd-accent);
}
.testimonial-card__name { font-size: 14px; font-weight: 600; color: var(--nd-bone); margin-bottom: 2px; }
.testimonial-card__role { font-size: 12px; color: var(--nd-text-faint); }
.testimonial-card__company { font-size: 11px; color: var(--nd-accent); margin-top: 2px; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; }
.slider-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--nd-border);
border: none; cursor: pointer;
transition: background .2s, transform .2s; padding: 0;
}
.slider-dot.active { background: var(--nd-accent); transform: scale(1.25); }
.slider-arrow {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--nd-border);
background: var(--nd-surface);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--nd-text-soft);
transition: border-color .15s, color .15s;
}
.slider-arrow:hover { border-color: var(--nd-accent); color: var(--nd-accent); }
.slider-arrow svg { width: 16px; height: 16px; }
/* ── CTA SECTION ─────────────────────────────────────────── */
.cta-section { padding-block: 80px; text-align: center; background: var(--nd-surface); }
.cta-section h2 { color: var(--nd-bone); margin-bottom: 12px; }
.cta-section p { color: var(--nd-text-soft); font-size: 16px; margin-bottom: 32px; max-width: 52ch; margin-inline: auto; }
.cta-section .btn-group { justify-content: center; }
.section--dark.cta-section { background: var(--nd-black); }
/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background: #080e10; padding-top: 64px; padding-bottom: 28px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.footer__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.footer__logo img { height: 24px; opacity: .85; }
.footer__logo-name { font-family: var(--nd-font-display); font-size: 14px; font-weight: 600; color: var(--nd-bone); }
.footer__desc { font-size: 13px; color: var(--nd-text-faint); line-height: 1.65; margin-bottom: 20px; max-width: 28ch; }
.footer__cta {
display: inline-block; padding: 9px 18px;
background: var(--nd-accent); color: var(--nd-bone);
border-radius: var(--nd-radius); font-family: var(--nd-font-display);
font-size: 12px; font-weight: 500;
text-decoration: none; transition: background .15s;
}
.footer__cta:hover { background: var(--nd-accent-hover); color: var(--nd-black); }
.footer__group-title {
font-family: var(--nd-font-mono); font-size: 10px;
font-weight: 500; letter-spacing: .12em;
text-transform: uppercase; color: var(--nd-text-faint);
margin-bottom: 16px;
}
.footer__group a {
display: block; font-size: 13px;
color: var(--nd-text-faint);
text-decoration: none; margin-bottom: 9px;
transition: color .15s;
}
.footer__group a:hover { color: var(--nd-bone); }
.footer__bottom {
border-top: 1px solid var(--nd-border);
padding-top: 22px;
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: var(--nd-text-faint);
font-family: var(--nd-font-mono);
flex-wrap: wrap; gap: 10px;
}
.footer__bottom a { color: var(--nd-text-faint); text-decoration: none; }
.footer__bottom a:hover { color: var(--nd-bone); }
.footer__legal { display: flex; gap: 18px; }
/* ── PAGE HERO (interior) ────────────────────────────────── */
.page-hero {
padding-top: 100px; padding-bottom: 64px;
position: relative; overflow: hidden;
background: var(--nd-black);
}
.page-hero__bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse 55% 50% at 20% -5%, rgba(30,138,138,.1), transparent 65%);
pointer-events: none;
}
.page-hero__eyebrow { margin-bottom: 14px; }
.page-hero h1 {
font-size: clamp(1.75rem, 4vw, var(--nd-text-3xl));
font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
color: var(--nd-bone); margin-bottom: 16px; max-width: 16ch;
}
.page-hero__desc {
font-size: var(--nd-text-lg); color: var(--nd-text-soft);
line-height: 1.65; max-width: 52ch; margin-bottom: 28px;
}
.breadcrumb {
display: flex; align-items: center; gap: 6px;
font-family: var(--nd-font-mono); font-size: 11px;
color: var(--nd-text-faint); margin-bottom: 20px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--nd-text-faint); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--nd-accent); }
.breadcrumb svg { width: 12px; height: 12px; flex-shrink: 0; }
.breadcrumb span { color: var(--nd-text-soft); font-weight: 500; }
/* ── INNER PAGE COMPONENTS ───────────────────────────────── */
.includes-list { display: flex; flex-direction: column; gap: 10px; }
.includes-list__item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
background: var(--nd-surface);
border: 1px solid rgba(30,138,138,.15);
border-radius: var(--nd-radius-lg);
}
.includes-list__check {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--nd-accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.includes-list__check svg { width: 11px; height: 11px; color: var(--nd-black); stroke-width: 3; }
.includes-list__item p { font-size: 13px; color: var(--nd-text-soft); line-height: 1.55; }
.results-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.result-card { background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); padding: 28px 20px; text-align: center; }
.result-card__val { font-family: var(--nd-font-mono); font-size: 2rem; font-weight: 500; color: var(--nd-accent); letter-spacing: -.02em; margin-bottom: 8px; }
.result-card__lbl { font-size: 13px; color: var(--nd-text-soft); line-height: 1.5; }
.process-vertical { max-width: 640px; display: flex; flex-direction: column; }
.process-v-step { display: flex; gap: 20px; }
.process-v-step__left { display: flex; flex-direction: column; align-items: center; }
.process-v-step__num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--nd-accent); color: var(--nd-black);
font-family: var(--nd-font-mono); font-size: 13px; font-weight: 600;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.process-v-step__line { width: 1px; flex: 1; background: var(--nd-border); margin: 4px 0; min-height: 24px; }
.process-v-step__content { padding-bottom: 28px; padding-top: 4px; }
.process-v-step__content h3 { font-size: 15px; margin-bottom: 6px; color: var(--nd-bone); }
.process-v-step__content p { font-size: 13px; color: var(--nd-text-soft); line-height: 1.65; }
.when-grid { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.when-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); }
.when-item__icon { width: 24px; height: 24px; border-radius: 6px; background: rgba(30,138,138,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.when-item__icon svg { width: 12px; height: 12px; color: var(--nd-accent); }
.when-item p { font-size: 13px; color: var(--nd-text-soft); line-height: 1.6; }
.benefits-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-width: 720px; }
.benefit-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); }
.benefit-item__dot { width: 22px; height: 22px; border-radius: 6px; background: rgba(30,138,138,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.benefit-item__dot svg { width: 11px; height: 11px; color: var(--nd-accent); stroke-width: 2.5; }
.benefit-item p { font-size: 13px; color: var(--nd-text-soft); line-height: 1.55; }
.opp-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.opp-card { background: rgba(30,138,138,.06); border: 1px solid rgba(30,138,138,.18); border-radius: var(--nd-radius-lg); padding: 20px; }
.opp-card__dot { width: 24px; height: 24px; border-radius: 6px; background: rgba(30,138,138,.12); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.opp-card__dot svg { width: 12px; height: 12px; color: var(--nd-accent); }
.opp-card h3 { font-size: 13px; font-weight: 600; color: var(--nd-accent); line-height: 1.45; margin-bottom: 6px; }
.opp-card p { font-size: 12px; color: var(--nd-text-soft); line-height: 1.5; }
.services-index-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.service-index-card {
background: var(--nd-surface); border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg); padding: 28px;
text-decoration: none; display: block;
transition: border-color .18s, box-shadow .18s;
}
.service-index-card:hover { border-color: var(--nd-accent); box-shadow: var(--shadow-md); }
.service-index-card__icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(30,138,138,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.service-index-card__icon svg { width: 16px; height: 16px; color: var(--nd-accent); }
.service-index-card h2 { font-size: var(--nd-text-lg); margin-bottom: 10px; color: var(--nd-bone); }
.service-index-card p { font-size: 14px; color: var(--nd-text-soft); line-height: 1.65; margin-bottom: 18px; max-width: none; }
.service-index-card__link { font-size: 12px; font-weight: 600; color: var(--nd-text-faint); display: flex; align-items: center; gap: 5px; }
.service-index-card:hover .service-index-card__link { color: var(--nd-accent); }
.about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; padding-top: 100px; padding-bottom: 72px; }
.about-photo-wrap { position: relative; }
.about-photo-bg { position: absolute; inset: -14px; background: rgba(30,138,138,.1); border-radius: var(--nd-radius-xl); }
.about-photo { position: relative; width: 100%; border-radius: var(--nd-radius-lg); object-fit: cover; object-position: center top; aspect-ratio: 3/4; max-height: 500px; box-shadow: var(--shadow-lg); }
.about-body h1 { margin-bottom: 20px; }
.about-body p { font-size: 15px; color: var(--nd-text-soft); line-height: 1.75; margin-bottom: 16px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 32px; }
.skill-tag {
background: rgba(30,138,138,.1); color: var(--nd-accent);
font-family: var(--nd-font-mono); font-size: 12px; font-weight: 500;
padding: 6px 14px; border-radius: var(--nd-radius);
border: 1px solid rgba(30,138,138,.2);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; padding-top: 100px; padding-bottom: 72px; }
.contact-info h2 { margin-bottom: 14px; }
.contact-info > p { font-size: 15px; color: var(--nd-text-soft); line-height: 1.7; margin-bottom: 32px; }
.contact-detail { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); margin-bottom: 10px; text-decoration: none; color: var(--nd-text-soft); font-size: 14px; font-weight: 500; transition: border-color .15s; }
.contact-detail:hover { border-color: var(--nd-accent); color: var(--nd-bone); }
.contact-detail__icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(30,138,138,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail__icon svg { width: 15px; height: 15px; color: var(--nd-accent); }
.form-wrap { background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-xl); padding: 40px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-family: var(--nd-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--nd-text-faint); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 10px 14px;
font-size: 14px; font-family: inherit;
background: var(--nd-surface-2);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius);
color: var(--nd-bone);
transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--nd-accent);
box-shadow: 0 0 0 3px rgba(30,138,138,.15);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-checkbox { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
.form-checkbox input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--nd-accent); flex-shrink: 0; }
.form-checkbox label { font-size: 12px; color: var(--nd-text-faint); line-height: 1.55; }
.form-submit { width: 100%; padding: 14px; background: var(--nd-accent); color: var(--nd-black); border: none; border-radius: var(--nd-radius); font-family: var(--nd-font-display); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, transform .1s; }
.form-submit:hover { background: var(--nd-accent-hover); transform: translateY(-2px); }
.form-note { font-family: var(--nd-font-mono); font-size: 11px; color: var(--nd-text-faint); text-align: center; margin-top: 12px; }
.diag-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 48px; }
.diag-benefit { background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); padding: 20px; }
.diag-benefit__icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(30,138,138,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.diag-benefit__icon svg { width: 14px; height: 14px; color: var(--nd-accent); }
.diag-benefit h3 { font-size: 14px; margin-bottom: 7px; color: var(--nd-bone); }
.diag-benefit p { font-size: 12px; color: var(--nd-text-soft); line-height: 1.6; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-btn {
padding: 7px 16px; border-radius: var(--nd-radius-full);
font-family: var(--nd-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .05em;
border: 1px solid var(--nd-border); background: var(--nd-surface);
color: var(--nd-text-faint); cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.filter-btn.active, .filter-btn:hover { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-black); }
.cases-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.sectors-index-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
/* ── ND-REVEAL ANIMATION ─────────────────────────────────── */
@keyframes nd-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.nd-reveal { animation: nd-rise 0.8s var(--nd-ease) both; }
.nd-reveal[data-delay="1"] { animation-delay: .1s; }
.nd-reveal[data-delay="2"] { animation-delay: .2s; }
.nd-reveal[data-delay="3"] { animation-delay: .3s; }
.nd-reveal[data-delay="4"] { animation-delay: .4s; }
/* ── RESPONSIVE ──────────────────────────────────────────── */
/* ── SVG SIZE CONSTRAINTS ────────────────────────────────── */
/* Prevent SVGs from inheriting full-size in card links */
.sector-card__link svg,
.service-card__link svg,
.service-index-card__link svg,
.cases-header__link svg,
.insights-header__link svg,
.navbar__chevron {
width: 14px !important;
height: 14px !important;
flex-shrink: 0;
}
/* Any SVG inside a btn */
.btn svg {
width: 14px !important;
height: 14px !important;
}
/* SVGs inside icon containers — already sized by container */
.sector-card__icon svg,
.service-card__icon svg,
.service-index-card__icon svg,
.diag-benefit__icon svg,
.when-item__icon svg,
.opp-card__dot svg,
.diff-item__check svg,
.includes-list__check svg,
.benefit-item__dot svg,
.include-item__dot svg,
.process-v-step__num,
.contact-detail__icon svg {
width: 14px !important;
height: 14px !important;
}
/* Footer chevron in mobile nav */
.navbar__burger svg {
width: 22px !important;
height: 22px !important;
}
/* Breadcrumb arrows */
.breadcrumb svg {
width: 12px !important;
height: 12px !important;
}
/* ═══════════════════════════════════════════════
PAIN POINT COLOR SYSTEM
Semántica visual: dolor/problema ≠ solución/acento
Token: --nd-pain (rojo apagado, legible en oscuro)
═══════════════════════════════════════════════ */
:root {
--nd-pain: #C0392B; /* rojo base */
--nd-pain-soft: #E8574A; /* rojo claro — texto sobre oscuro */
--nd-pain-dim: rgba(192,57,43,.15); /* fondo sutil */
--nd-pain-border: rgba(192,57,43,.35); /* borde */
}
/* ── HOME: nd-card dentro de .problem-grid ──── */
.problem-grid .nd-card {
background: var(--nd-surface);
border: 1px solid var(--nd-pain-border);
border-left: 3px solid var(--nd-pain-soft);
border-radius: var(--nd-radius-lg);
}
.problem-grid .nd-card:hover {
border-color: var(--nd-pain-soft);
transform: translateY(-2px);
}
/* Número (01/02/03) */
.problem-grid .mono {
color: var(--nd-pain-soft) !important;
}
/* Cita en cursiva */
.problem-grid p[style*="border-left"] {
border-left-color: var(--nd-pain-soft) !important;
border-left-width: 2px !important;
}
/* Título con rayo — cambiar rayo a pain */
.problem-grid .nd-spark::before {
background: var(--nd-pain-soft);
}
.problem-grid h3 {
color: var(--nd-bone);
}
/* ── SECTORES: challenge-card ──────────────── */
.challenge-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
}
.subsection-title {
font-size: 18px;
color: var(--nd-bone);
margin-top: 48px;
margin-bottom: 20px;
}
.problems-list {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 14px;
}
.challenge-card {
background: var(--nd-pain-dim);
border: 1px solid var(--nd-pain-border);
border-radius: var(--nd-radius-lg);
padding: 22px;
}
.challenge-card:hover {
border-color: var(--nd-pain-soft);
}
.challenge-card__num {
font-family: var(--nd-font-display);
font-size: 30px;
font-weight: 700;
color: rgba(232,87,74,.2);
line-height: 1;
margin-bottom: 10px;
user-select: none;
}
.challenge-card h3 {
font-size: 14px;
margin-bottom: 7px;
color: var(--nd-bone);
}
.challenge-card p {
font-size: 13px;
color: var(--nd-bone-dim);
line-height: 1.6;
}
/* ── SECTORES: problems-list ───────────────── */
.problems-list__item {
background: var(--nd-pain-dim);
border: 1px solid var(--nd-pain-border);
border-radius: var(--nd-radius-lg);
padding: 14px 16px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.problems-list__item:hover {
border-color: var(--nd-pain-soft);
}
.problems-list__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--nd-pain-soft);
flex-shrink: 0;
margin-top: 6px;
}
.problems-list__item p {
font-size: 13px;
color: var(--nd-bone-dim);
line-height: 1.6;
}
/* ── ACOMPAÑAMIENTO: problem-num-card ──────── */
.problem-num-card {
background: var(--nd-pain-dim);
border: 1px solid var(--nd-pain-border);
border-left: 3px solid var(--nd-pain-soft);
border-radius: var(--nd-radius-lg);
padding: 24px;
}
.problem-num-card:hover {
border-color: var(--nd-pain-soft);
}
.problem-num-card__num {
font-family: var(--nd-font-display);
font-size: 32px;
font-weight: 700;
color: rgba(232,87,74,.2);
line-height: 1;
margin-bottom: 12px;
user-select: none;
}
.problem-num-card h3 {
font-size: 14px;
color: var(--nd-bone);
margin-bottom: 8px;
}
.problem-num-card p {
font-size: 13px;
color: var(--nd-bone-dim);
line-height: 1.6;
}
/* ── CONTRAST FIXES ──────────────────────────────────────── */
/* Ensure readable text on all dark surfaces */
.eyebrow { color: var(--nd-spark); } /* brighter teal for labels */
.mono { color: var(--nd-bone-dim); }
.section-desc { color: var(--nd-bone-dim); }
p { color: var(--nd-bone-dim); }
/* Price block: fix contrast of "Desde" label and price */
.price-box__label {
font-family: var(--nd-font-mono);
font-size: 10px; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase;
color: var(--nd-spark); /* bright teal, readable */
margin-bottom: 6px;
}
.price-box__amount {
font-family: var(--nd-font-display);
font-size: 2.5rem; font-weight: 700;
color: var(--nd-bone); /* bone white, max contrast */
letter-spacing: -.04em; line-height: 1;
}
.price-box__sub {
font-size: 11px;
color: var(--nd-spark);
margin-top: 6px;
}
.price-box {
text-align: center;
background: rgba(30,138,138,.12);
border: 1px solid rgba(30,138,138,.3);
border-radius: var(--nd-radius-lg);
padding: 28px 36px;
flex-shrink: 0;
min-width: 200px;
}
.price-section {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
max-width: 820px;
}
@media (max-width: 767px) {
.price-section { grid-template-columns: 1fr; }
.price-box { min-width: unset; padding: 20px; }
}
/* ── PRICING ESCALONADO (3 niveles) ─────────────────────── */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
margin-top: 40px;
}
.plan-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--nd-surface);
border: 1px solid var(--nd-border);
border-radius: var(--nd-radius-lg);
padding: 28px 24px;
}
.plan-card--featured {
border-color: var(--nd-accent);
box-shadow: 0 0 0 1px var(--nd-accent), 0 18px 48px -20px rgba(30,138,138,.5);
}
.plan-card__badge {
position: absolute;
top: -11px; left: 50%; transform: translateX(-50%);
background: var(--nd-accent);
color: var(--nd-bone);
font-family: var(--nd-font-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--nd-radius-full);
white-space: nowrap;
}
.plan-card__name {
font-family: var(--nd-font-mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--nd-accent);
margin-bottom: 10px;
}
.plan-card__price {
font-family: var(--nd-font-display);
font-size: 2rem;
font-weight: 600;
letter-spacing: -.03em;
color: var(--nd-bone);
line-height: 1.05;
}
.plan-card__price span {
font-size: .9rem;
font-weight: 400;
color: var(--nd-spark);
}
.plan-card__sub {
font-size: 12px;
color: var(--nd-text-faint);
margin-top: 4px;
margin-bottom: 20px;
}
.plan-card__feats {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 11px;
flex-grow: 1;
}
.plan-card__feats li {
position: relative;
padding-left: 22px;
font-size: 13px;
color: var(--nd-text-soft);
line-height: 1.5;
}
.plan-card__feats li::before {
content: '';
position: absolute;
left: 0; top: 6px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--nd-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/9px no-repeat;
}
.plan-card__cta {
width: 100%;
justify-content: center;
margin-top: auto;
}
@media (max-width: 1023px) {
.pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
/* nd-card on dark bg: ensure text is bone */
.nd-card h3 { color: var(--nd-bone); }
.nd-card p { color: var(--nd-bone-dim); }
.nd-card-accent h3 { color: var(--nd-bone); }
/* Sector/service card text */
.sector-card h3, .service-card h3 { color: var(--nd-bone); }
.sector-card p, .service-card p { color: var(--nd-bone-dim); }
/* Footer desc contrast */
.footer__desc { color: var(--nd-bone-mut); }
/* Form labels */
.form-group label { color: var(--nd-bone-dim); }
/* Breadcrumb readable */
.breadcrumb span { color: var(--nd-bone-dim); }
@media (max-width: 1023px) {
/* ── HERO ── */
.hero { min-height: auto; padding-top: 90px; padding-bottom: 48px; }
.hero__grid { grid-template-columns: 1fr; min-height: auto; gap: 0; }
.hero__content { order: 0; padding-right: 0; padding-block: 48px 40px; }
.hero__photo-wrap { order: 1; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 3 / 4; max-height: none; border-radius: var(--nd-radius-xl); }
.hero__photo { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; }
.hero__metrics { flex-wrap: nowrap; gap: clamp(10px, 1.5vw, 20px); }
.hero__metric { flex: 1 1 0; min-width: 0; }
/* ── GRIDS → 2 cols at tablet ── */
.grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.problem-grid { grid-template-columns: 1fr; } /* 3 problems → 1 col */
.challenge-grid { grid-template-columns: 1fr 1fr; }
.opp-grid { grid-template-columns: 1fr 1fr; }
.diag-benefits { grid-template-columns: 1fr 1fr; }
.services-index-grid { grid-template-columns: 1fr 1fr; }
.sectors-index-grid { grid-template-columns: 1fr 1fr; }
.core-service__grid { grid-template-columns: 1fr; }
.diff-grid { grid-template-columns: 1fr; gap: 28px; }
/* ── TESTIMONIALS: 2 per view at tablet ── */
.testimonial-card { flex: 0 0 calc((100% - 16px) / 2); }
/* ── ABOUT / CONTACT ── */
.about-grid { grid-template-columns: 1fr; padding-top: 90px; }
.about-photo-wrap { max-width: 340px; order: -1; }
.contact-grid { grid-template-columns: 1fr; padding-top: 90px; }
/* ── FOOTER ── */
.footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 767px) {
:root { --nd-text-4xl: 2.25rem; --nd-text-3xl: 1.9rem; }
.section { padding-block: var(--nd-space-16); }
/* ── HERO ── */
.hero__photo { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; }
.hero__photo-wrap { margin-bottom: 2rem; max-width: 340px; border-radius: var(--nd-radius-lg); }
.hero__metrics { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.hero__metric { flex: 1 1 0; width: auto; text-align: left; }
/* ── ALL GRIDS → 1 column on mobile ── */
.grid-2,
.grid-3,
.grid-4 { grid-template-columns: 1fr; }
.problem-grid { grid-template-columns: 1fr; }
.problem-num-grid { grid-template-columns: 1fr; }
.results-grid { grid-template-columns: 1fr; }
.benefits-grid { grid-template-columns: 1fr; }
.challenge-grid { grid-template-columns: 1fr; }
.problems-list { grid-template-columns: 1fr; }
.opp-grid { grid-template-columns: 1fr; }
.diag-benefits { grid-template-columns: 1fr; }
.cases-grid { grid-template-columns: 1fr; }
.services-index-grid { grid-template-columns: 1fr; }
.sectors-index-grid { grid-template-columns: 1fr; }
.core-service__grid { grid-template-columns: 1fr; }
.core-service__includes { grid-template-columns: 1fr; }
.diff-grid { grid-template-columns: 1fr; gap: 24px; }
/* ── METRICS inside case cards ── */
.metrics-row { grid-template-columns: repeat(3,1fr); gap: 6px; }
.metric-box { padding: 8px 4px; }
.metric-box__val { font-size: 12px; letter-spacing: 0; }
.metric-box__lbl { font-size: 9px; }
.case-card__body { padding: 14px; }
/* ── TESTIMONIALS: 1 per view on mobile ── */
.testimonial-card { flex: 0 0 100%; }
/* ── FORMS ── */
.form-row { grid-template-columns: 1fr; }
.form-wrap { padding: 20px; }
/* ── ABOUT / CONTACT ── */
.about-grid { gap: 28px; }
.contact-grid { gap: 28px; }
/* ── FOOTER ── */
.footer__grid { grid-template-columns: 1fr; gap: 28px; }
/* ── NAVBAR ── */
.navbar__links, .navbar__actions { display: none; }
.navbar__burger { display: flex; }
/* ── LOGO SLIDER ── */
.logo-track { gap: 20px; }
.logo-item__placeholder { padding: 0 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.nd-reveal { animation: none; }
html { scroll-behavior: auto; }
}
/* ═══════════════════════════════════════════════
DARK THEME SAFETY — prevent white-on-white
═══════════════════════════════════════════════ */
/* Inline white backgrounds in inner pages — override to surface */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"] {
background: var(--nd-surface) !important;
}
/* Inline white text overrides for elements that set it explicitly */
[style*="background:var(--nd-bone)"] {
background: var(--nd-surface) !important;
}
/* Price block in acompanamiento */
.price-block-inner {
background: rgba(30,138,138,.08) !important;
border-color: rgba(30,138,138,.25) !important;
}
/* ── BULLETPROOF SVG SIZE IN LINKS ───────────────────────── */
/* Target all inline SVGs without explicit width attr in link containers */
a svg:not([width]),
span svg:not([width]) {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Except burger and larger intentional SVGs */
.navbar__burger svg:not([width]) {
width: 22px;
height: 22px;
}
/* ── PÁGINA DE GRACIAS ── */
.thanks-icon {
width: 72px; height: 72px;
margin: 0 auto 24px;
display: flex; align-items: center; justify-content: center;
background: rgba(30,138,138,.12);
border: 1px solid var(--nd-accent);
border-radius: 50%;
color: var(--nd-accent);
}
.thanks-icon svg { width: 34px; height: 34px; }
/* ── GALERÍA DE PROYECTO (slider de fotos) ── */
.proj-gallery { position: relative; border-radius: var(--nd-radius-xl); overflow: hidden; background: var(--nd-surface); }
.proj-track { display: flex; transition: transform .5s cubic-bezier(.22,.68,0,1); will-change: transform; }
.proj-slide { flex: 0 0 100%; }
.proj-slide img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.proj-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(14,20,22,.7); border: 1px solid var(--nd-border);
color: var(--nd-bone); display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s, border-color .15s; z-index: 2;
}
.proj-arrow:hover { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-bg); }
.proj-arrow svg { width: 20px; height: 20px; }
.proj-arrow--prev { left: 16px; }
.proj-arrow--next { right: 16px; }
.proj-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.proj-dot {
width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
background: var(--nd-border); cursor: pointer; transition: background .15s, transform .15s;
}
.proj-dot.active { background: var(--nd-accent); transform: scale(1.25); }
.proj-content { max-width: 760px; }
.proj-content h2 { margin-bottom: 16px; }
.proj-content h3 { margin-top: 28px; margin-bottom: 10px; color: var(--nd-bone); }
.proj-content p { margin-bottom: 8px; }