/* ==========================================================================
   garcIA · digital & AI — hoja de estilos
   Mobile-first. Colores con contraste comprobado (WCAG AA):
   negro/crudo 16.6:1 · naranja/negro 5.7:1 · naranja/crudo 2.9:1 (✗ texto)
   → el naranja nunca va como texto sobre crudo; sobre crudo se usa como
     fondo (con texto negro) o en elementos decorativos.
   ========================================================================== */

/* ---------- Tipografías autoalojadas ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #F4F0E8;
  --cream-2: #EAE4D8;
  --ink: #111111;
  --accent: #FF4D00;
  --accent-ink: #B83700;   /* naranja oscuro: 5.1:1 sobre crudo, para texto pequeño */
  --muted: #5A554D;        /* 6.5:1 sobre crudo */
  --muted-dark: #C9C2B5;   /* sobre negro */
  --line: rgba(17, 17, 17, .16);

  --f-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --f-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1320px;
  --radius: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --focus: var(--ink);
  --bar-h: 0px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: var(--bar-h);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.is-dark { --focus: var(--accent); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1rem; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.is-dark { background: var(--ink); color: var(--cream); }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.kicker::before {
  content: ''; width: 1.75rem; height: 3px; background: var(--accent); border-radius: 2px;
}
.section-title {
  font-size: clamp(2.25rem, 1rem + 5.5vw, 5.75rem);
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 14ch;
}
.lead { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.45; max-width: 38ch; }
.muted { color: var(--muted); }
.is-dark .muted { color: var(--muted-dark); }

/* Marca naranja: rotulador detrás del texto (texto negro: 5.7:1) */
.mark {
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 88% / 100% .9em;
  padding-inline: .06em;
  margin-inline: -.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Botones ---------- */
.btn {
  --bg: var(--ink); --fg: var(--cream);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.5rem; padding: .9rem 1.5rem;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 600 1.0625rem/1.1 var(--f-text);
  text-decoration: none; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-back);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform .4s var(--ease);
}
.btn svg { width: 1.35em; height: 1.35em; flex: none; }
.btn:hover, .btn:focus-visible { color: var(--ink); transform: translateY(-2px); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }

.btn--ghost { --bg: transparent; --fg: var(--ink); }
.btn--accent { --bg: var(--accent); --fg: var(--ink); border-color: var(--accent); }
.btn--accent::before { background: var(--cream); }
.is-dark .btn--ghost { --fg: var(--cream); border-color: var(--cream); }
.is-dark .btn--ghost:hover, .is-dark .btn--ghost:focus-visible { border-color: var(--accent); }
.btn--sm { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn--xl { min-height: 4.25rem; padding: 1.1rem 2rem; font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); }

.text-link {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 3px; text-underline-offset: .25em;
  transition: text-decoration-color .2s;
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 240, 232, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.header-logo { display: block; width: 7.5rem; flex: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.js .site-header:not(.show-logo) .header-logo { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem .9rem;
  background: transparent; border: 2px solid var(--ink); border-radius: 999px;
  font: 600 .9375rem var(--f-text); color: var(--ink); cursor: pointer;
}
.nav-toggle-lines { width: 1.1rem; height: 10px; position: relative; }
.nav-toggle-lines::before, .nav-toggle-lines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle-lines::before { top: 0; }
.nav-toggle-lines::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after { top: 4px; transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 2px solid var(--ink);
  padding: .5rem var(--gutter) 1.5rem;
}
.site-nav ul { display: grid; gap: .25rem; }
.site-nav a:not(.btn) {
  display: block; padding: .75rem 0;
  font: 700 1.75rem/1 var(--f-display); letter-spacing: -.02em; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-nav .nav-cta { margin-top: 1rem; }
.no-js .nav-toggle { display: none; }
.no-js .site-nav { display: block; position: static; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; padding: 0; border: 0; background: none; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); }
  .site-nav a:not(.btn) {
    font: 500 .9375rem var(--f-text); letter-spacing: 0; padding: .5rem 0; border: 0;
    background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 3px;
    transition: background-size .3s var(--ease);
  }
  .site-nav a:not(.btn):hover, .site-nav a:not(.btn):focus-visible { background-size: 100% 3px; }
  .site-nav .nav-cta { margin: 0 0 0 .5rem; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem); }
.masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  border-bottom: 3px solid var(--ink);
  padding-bottom: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.masthead-logo { width: min(100%, clamp(15rem, 52vw, 34rem)); color: var(--ink); }
.masthead-logo .logo-svg { width: 100%; height: auto; overflow: visible; }
.masthead-meta {
  display: grid; gap: .25rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.masthead-meta span:last-child { color: var(--muted); }
@media (min-width: 768px) { .masthead-meta { text-align: right; } }

.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.hero-title {
  font-size: clamp(2.6rem, .9rem + 7.6vw, 8rem);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 800;
  max-width: 13.5ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow-wrap: break-word;
}
.hero-title .line { display: block; }
.hero-lead { font-size: clamp(1.1875rem, 1rem + .9vw, 1.75rem); line-height: 1.35; max-width: 30ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions .btn { flex: 1 1 15rem; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }

/* Tarjeta «lista de tareas» del hero */
.todo {
  align-self: end;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 10px 10px 0 var(--accent);
  max-width: 26rem;
  margin-right: 10px;
}
.todo h2 {
  font-size: .8125rem; font-family: var(--f-text); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark);
  margin-bottom: 1rem;
}
.todo li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem 0; border-top: 1px solid rgba(244, 240, 232, .14);
  font-size: 1.0625rem; line-height: 1.35;
}
.todo-box {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  border: 2px solid var(--muted-dark); border-radius: 5px; position: relative;
}
.todo-box::after {
  content: ''; position: absolute; left: 4px; top: 0; width: 6px; height: 11px;
  border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
}
.todo-text { text-decoration: line-through; text-decoration-thickness: 2.5px; text-decoration-color: var(--accent); }
/* Estado final (sin animación): tachado */
.todo li .todo-box { background: var(--accent); border-color: var(--accent); }
.todo li .todo-box::after { transform: rotate(45deg) scale(1); }
.todo li .todo-text { color: var(--muted-dark); }
.todo-foot {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 2px solid var(--accent);
  font: 700 1.375rem/1.1 var(--f-display); letter-spacing: -.02em;
}
.todo-foot em { font-style: normal; color: var(--accent); }

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: end; }
  .todo { transform: rotate(2deg); }
}

/* ---------- Cinta ---------- */
.ticker {
  background: var(--ink); color: var(--cream);
  overflow: hidden; white-space: nowrap;
  padding-block: 1rem;
  border-block: 3px solid var(--ink);
}
.ticker-track { display: inline-flex; gap: 2.5rem; padding-left: 2.5rem; }
.ticker span {
  font: 700 clamp(1.25rem, 1rem + 1.5vw, 2rem)/1 var(--f-display); letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 2.5rem;
}
.ticker span::after { content: '✱'; color: var(--accent); }

/* ---------- Problemas ---------- */
.problems-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .problems-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .35s var(--ease-back), box-shadow .35s var(--ease);
}
.card:hover, .card:focus-within { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--accent); }
.problem-icon {
  width: 3rem; height: 3rem; border-radius: 12px;
  background: var(--ink); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.problem-icon svg { width: 1.6rem; height: 1.6rem; }
.card h3 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); margin-bottom: .85rem; }
.card p:last-child { margin-bottom: 0; }
.problems-close {
  margin-top: clamp(2rem, 4vw, 3rem);
  font: 700 clamp(1.5rem, 1rem + 2.2vw, 2.75rem)/1.05 var(--f-display);
  letter-spacing: -.03em; max-width: 22ch; text-wrap: balance;
}

/* ---------- Servicios ---------- */
.services-head { display: grid; gap: 1rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 1024px) { .services-head { grid-template-columns: 1fr 1fr; align-items: end; } .services-head .section-title { margin: 0; } }
.service-num { font: 700 .875rem/1 var(--f-text); letter-spacing: .1em; }

/* Webs: el servicio protagonista */
.svc-web {
  display: grid; gap: 1.75rem;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 10px 10px 0 var(--accent);
  margin-right: 10px;
  --focus: var(--accent);
}
.svc-web h3 { font-size: clamp(3.5rem, 2rem + 7vw, 7.5rem); letter-spacing: -.05em; margin: .5rem 0 1rem; }
.svc-web h3::after { content: '.'; color: var(--accent); }
.svc-lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.4; max-width: 34ch; margin-bottom: 1.5rem; }
.svc-checks { display: grid; gap: .25rem; align-content: center; }
.svc-checks li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .85rem 0; border-top: 1px solid rgba(244, 240, 232, .16);
  font-size: 1.0625rem; line-height: 1.35;
}
.svc-checks li:first-child { border-top: 0; }
.svc-checks li::before {
  content: ''; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.8' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
@media (min-width: 900px) { .svc-web { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; } }

/* Automatizaciones y software: dos tarjetas compactas */
.svc-pair { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .svc-pair { grid-template-columns: 1fr 1fr; } }
.svc-card {
  container-type: inline-size;
  position: relative; isolation: isolate; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.svc-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.svc-card:hover::before, .svc-card:focus-within::before { transform: scaleY(1); }
/* El título se ajusta al ancho de la tarjeta: «Automatizaciones» nunca se corta */
.svc-card h3 { font-size: min(clamp(2rem, 1.2rem + 2.5vw, 3.25rem), 11.5cqi); letter-spacing: -.045em; margin: .75rem 0 .75rem; }
.svc-card p { margin: 0; max-width: 40ch; }
.ia-note {
  margin-top: 1.5rem;
  display: flex; gap: 1rem; align-items: center;
  background: var(--cream-2); border-radius: var(--radius); padding: 1rem 1.25rem; max-width: 52rem;
}
.ia-note b { font-family: var(--f-display); font-size: 1.25rem; line-height: 1; background: var(--accent); padding: .35rem .5rem; border-radius: 6px; flex: none; }
.ia-note p { margin: 0; }

/* ---------- Calculadora ---------- */
.calc-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.calc-form { display: grid; gap: 2rem; margin-top: 2rem; }
.field label { display: block; font-weight: 600; margin-bottom: .75rem; font-size: 1.0625rem; }
.field-row { display: flex; align-items: center; gap: 1rem; }
.field input[type="number"] {
  width: 7.5rem; flex: none;
  min-height: 3.25rem; padding: .5rem .75rem;
  background: transparent; color: var(--cream);
  border: 2px solid var(--cream); border-radius: 10px;
  font: 700 1.5rem var(--f-display);
}
.field input[type="number"]:focus-visible { border-color: var(--accent); outline-offset: 2px; }
.field .unit { color: var(--muted-dark); font-size: .9375rem; }
.field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2.75rem; background: transparent; margin-top: .5rem; cursor: pointer;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / var(--fill, 0%) 100%, rgba(244, 240, 232, .25);
}
.field input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(244, 240, 232, .25); }
.field input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; margin-top: -11px;
  background: var(--cream); border: 4px solid var(--accent); transition: transform .2s var(--ease-back);
}
.field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 4px solid var(--accent);
}
.field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.field input[type="range"]:focus-visible { outline: 3px solid var(--accent); }
.field-hint { font-size: .875rem; color: var(--muted-dark); margin: .25rem 0 0; }

.results { display: grid; gap: 1px; background: rgba(244, 240, 232, .2); border: 1px solid rgba(244, 240, 232, .2); border-radius: var(--radius); overflow: hidden; }
.result { background: var(--ink); padding: clamp(1.25rem, 3vw, 1.75rem); }
.result dt { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: .5rem; }
.result dd { margin: 0; font: 800 clamp(2.75rem, 1.5rem + 5vw, 5.5rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.result dd small { font-size: .4em; letter-spacing: 0; font-weight: 600; margin-left: .15em; }
.result--main { background: var(--accent); color: var(--ink); }
.result--main dt { color: var(--ink); }
.result--main dd { font-size: clamp(3.25rem, 1.5rem + 7vw, 7.5rem); }
@media (min-width: 560px) { .results { grid-template-columns: 1fr 1fr; } .result--main { grid-column: 1 / -1; } }
.calc-note {
  margin: 1.25rem 0 0; padding-left: 1rem; border-left: 3px solid var(--accent);
  font-size: .9375rem; color: var(--muted-dark);
}
.calc-cta { margin-top: 2rem; }

/* ---------- Cómo trabajo ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.step-num {
  display: block; font: 800 clamp(4.5rem, 3rem + 5vw, 8rem)/.8 var(--f-display); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px var(--ink);
  margin-bottom: 1.25rem; transition: color .4s var(--ease), -webkit-text-stroke-color .4s;
}
.step:hover .step-num, .step.is-in .step-num { color: var(--accent); -webkit-text-stroke-color: var(--ink); }
.step h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); margin-bottom: .75rem; }

/* ---------- Precios ---------- */
.pricing-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .price-banner { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .price-banner { grid-column: span 2; } }
.price {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: transform .35s var(--ease-back), box-shadow .35s var(--ease);
}
.price:hover, .price:focus-within { transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
.price h3 { font-family: var(--f-text); font-size: .9375rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.price-amount { font: 800 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--f-display); letter-spacing: -.045em; margin: .35rem 0 .15rem; }
.price-amount .from { display: block; font: 500 .875rem var(--f-text); letter-spacing: 0; margin-bottom: .3rem; }
.price-amount .tax { font: 600 .875rem var(--f-text); letter-spacing: 0; margin-left: .25rem; white-space: nowrap; }
.price p { margin: 0; }
.price--free { background: var(--accent); }
.price--free .btn { margin-top: .75rem; align-self: flex-start; }
.price--web { background: var(--ink); color: var(--cream); border-color: var(--ink); --focus: var(--accent); }
.price--web:hover { box-shadow: 0 8px 0 var(--accent); }
.price-banner {
  justify-content: center; gap: .75rem;
  background: var(--cream-2); border-style: dashed;
}
.price-banner:hover { transform: none; box-shadow: none; }
.price-banner strong { font: 700 clamp(1.5rem, 1rem + 1.5vw, 2rem)/1.05 var(--f-display); letter-spacing: -.03em; }
.price-banner strong em { font-style: normal; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 90% / 100% .45em; }
.price-banner p { color: var(--muted); font-size: .9375rem; }

/* ---------- Proyectos ---------- */
.projects-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
.project {
  border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--cream);
  transition: transform .35s var(--ease-back), box-shadow .35s var(--ease);
}
.project:hover, .project:focus-within { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.project-visual {
  aspect-ratio: 2 / 1; position: relative; display: grid; place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(17, 17, 17, .07) 14px 16px),
    var(--cream-2);
  border-bottom: 2px solid var(--ink);
}
.project-visual span {
  font: 800 clamp(2.25rem, 1.5rem + 3vw, 3.75rem)/1 var(--f-display); letter-spacing: -.04em;
  padding: .3em .5em; background: var(--cream); border: 2px solid var(--ink); border-radius: 8px;
  transform: rotate(-3deg); transition: transform .4s var(--ease-back);
}
.project:hover .project-visual span { transform: rotate(0) scale(1.04); }
.project-body { padding: 1.5rem clamp(1.5rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.project-body h3 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.project-body p { flex-basis: 100%; margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--cream);
  padding: .4rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.badge::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); }
.js:not(.reduce-motion) .badge::before { animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .6; } }

/* ---------- Sobre mí ---------- */
.about-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 768px) { .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.portrait {
  margin: 0; position: relative; aspect-ratio: 4 / 5; max-width: 26rem;
  border-radius: var(--radius); overflow: hidden; background: var(--ink);
  box-shadow: 12px 12px 0 var(--accent);
  margin-right: 12px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--cream);
  padding: 1.5rem;
}
.portrait-placeholder b {
  display: block; font: 800 clamp(6rem, 4rem + 8vw, 10rem)/.8 var(--f-display); letter-spacing: -.06em;
}
.portrait-placeholder b i { font-style: normal; color: var(--accent); }
.portrait-placeholder small { display: block; margin-top: 1.25rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); }
.about-text .section-title { max-width: 12ch; }
.about-text p { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); max-width: 36ch; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.facts li { background: var(--cream-2); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .9375rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.faq-list { border-top: 3px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--ink); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0;
  font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.15 var(--f-display); letter-spacing: -.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ink);
  position: relative; transition: background .3s, transform .35s var(--ease-back);
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq-item summary:hover .faq-icon { background: var(--accent); }
.faq-item[open] .faq-icon { background: var(--accent); transform: rotate(180deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-answer { padding: 0 0 1.75rem; max-width: 60ch; }
.faq-answer p:last-child { margin: 0; }

/* ---------- Contacto ---------- */
.contact { background: var(--accent); color: var(--ink); overflow: hidden; }
.contact-title {
  font-size: clamp(3rem, 1rem + 10vw, 10rem); line-height: .85; letter-spacing: -.055em; font-weight: 800;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.contact-grid { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr auto; } }
.contact .lead { max-width: 30ch; }
.contact-actions { display: grid; gap: 1rem; justify-items: start; }
.contact-links { display: grid; gap: .5rem; font-size: 1.0625rem; }
.contact-links a { font-weight: 600; }
.contact .btn::before { background: var(--cream); }

/* ---------- Pie ---------- */
.site-footer { padding-block: 3.5rem 2.5rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr auto; align-items: end; } }
.footer-logo { width: 11rem; margin-bottom: 1rem; }
.site-footer p { margin: 0; color: var(--muted-dark); font-size: .9375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9375rem; }
.footer-links a { text-decoration: none; padding-block: .5rem; display: inline-block; }
.footer-links a:hover, .footer-links a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- WhatsApp fijo (móvil) ---------- */
.wa-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom));
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.wa-bar .btn { width: 100%; min-height: 3.25rem; padding: .7rem 1rem; font-size: 1rem; white-space: nowrap; }
.wa-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 768px) { .wa-bar { display: none; } }

/* ---------- Páginas simples (legal / 404) ---------- */
.page-simple { padding-block: clamp(3rem, 8vw, 6rem); }
.page-simple h1 { font-size: clamp(2.5rem, 1rem + 6vw, 5.5rem); margin-bottom: 2rem; }
.page-simple h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); margin: 2.5rem 0 1rem; }
.page-simple .prose { max-width: 70ch; }
.page-simple .prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1em; }
.page-simple .prose li { margin-bottom: .35em; }
.pending { background: var(--accent); color: var(--ink); font-weight: 700; padding: 0 .25em; border-radius: 3px; }
.review-note {
  border: 2px solid var(--ink); background: var(--cream-2); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: 2rem; font-weight: 500;
}
.simple-header .header-logo { opacity: 1; }
.error-code { font: 800 clamp(8rem, 4rem + 22vw, 20rem)/.8 var(--f-display); letter-spacing: -.07em; margin-bottom: 1.5rem; }
.error-code em { font-style: normal; color: var(--accent); }

/* ==========================================================================
   Animaciones (solo con JS activo y sin «reducir movimiento»)
   ========================================================================== */

/* Entrada del logo: «garc» sube letra a letra; «IA» cae con rebote y gira */
.anim .masthead-logo .lg-l,
.anim .masthead-logo .lg-i,
.anim .masthead-logo .lg-desc { transform-box: fill-box; }
.anim .masthead-logo .lg-l { opacity: 0; transform: translateY(40%); animation: lg-up .7s var(--ease) forwards; }
.anim .masthead-logo .lg-l:nth-child(2) { animation-delay: .06s; }
.anim .masthead-logo .lg-l:nth-child(3) { animation-delay: .12s; }
.anim .masthead-logo .lg-l:nth-child(4) { animation-delay: .18s; }
.anim .masthead-logo .lg-i { opacity: 0; transform-origin: 50% 100%; animation: lg-drop .9s var(--ease-back) forwards; }
.anim .masthead-logo .lg-i:nth-child(1) { animation-delay: .45s; }
.anim .masthead-logo .lg-i:nth-child(2) { animation-delay: .57s; }
.anim .masthead-logo .lg-desc { opacity: 0; animation: lg-fade .8s var(--ease) .95s forwards; }
@keyframes lg-up { to { opacity: 1; transform: none; } }
@keyframes lg-drop {
  0% { opacity: 0; transform: translateY(-90%) rotate(-12deg) scale(1.2); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes lg-fade { from { opacity: 0; letter-spacing: 0; } to { opacity: 1; } }

/* Rotulador del hero */
.anim .hero-title .mark { background-size: 0 .9em; animation: mark-in .8s var(--ease) 1.1s forwards; }
@keyframes mark-in { to { background-size: 100% .9em; } }

/* Lista de tareas que se tachan solas */
.anim .todo li .todo-box { background: transparent; border-color: var(--muted-dark); animation: box-on .3s var(--ease) forwards; }
.anim .todo li .todo-box::after { transform: rotate(45deg) scale(0); animation: tick-on .3s var(--ease-back) forwards; }
.anim .todo li .todo-text { color: var(--cream); text-decoration-color: transparent; animation: text-off .45s var(--ease) forwards; }
.anim .todo li:nth-child(1) > * , .anim .todo li:nth-child(1) .todo-box::after { animation-delay: 1.6s; }
.anim .todo li:nth-child(2) > * , .anim .todo li:nth-child(2) .todo-box::after { animation-delay: 2.1s; }
.anim .todo li:nth-child(3) > * , .anim .todo li:nth-child(3) .todo-box::after { animation-delay: 2.6s; }
.anim .todo li:nth-child(4) > * , .anim .todo li:nth-child(4) .todo-box::after { animation-delay: 3.1s; }
@keyframes box-on { to { background: var(--accent); border-color: var(--accent); } }
@keyframes tick-on { to { transform: rotate(45deg) scale(1); } }
@keyframes text-off { to { color: var(--muted-dark); text-decoration-color: var(--accent); } }

/* Cinta en movimiento */
.anim .ticker-track { animation: ticker 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Revelado al hacer scroll */
.anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.anim .reveal.is-in { opacity: 1; transform: none; }
.anim .reveal[data-delay="1"] { transition-delay: .1s; }
.anim .reveal[data-delay="2"] { transition-delay: .2s; }
.anim .reveal[data-delay="3"] { transition-delay: .3s; }
/* Títulos: suben por líneas desde una máscara */
.anim .reveal-title { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); translate: 0 .3em; transition: clip-path 1s var(--ease), translate 1s var(--ease); }
.anim .reveal-title.is-in { clip-path: inset(-10% -5% -20% -5%); translate: 0 0; }

/* Accesibilidad: con «reducir movimiento» no hay desplazamientos ni bucles */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Red de seguridad si main.js no carga: todo visible a los 6,5 s */
.reveal-all .reveal, .reveal-all .reveal-title { opacity: 1 !important; transform: none !important; clip-path: none !important; translate: none !important; }
.pt-0 { padding-top: 0; }
.section--alt { background: var(--cream-2); }
.section--alt .project-visual { background-color: var(--cream); }
.calc-note--plain { border: 0; padding: 0; margin-top: .5rem; }
/* Las cifras grandes de la calculadora se ajustan a su caja (hasta 1.040.000 €) */
.result { container-type: inline-size; }
.result dd { font-size: min(clamp(2.75rem, 1.5rem + 5vw, 5.5rem), 19cqi); }
.result--main dd { font-size: min(clamp(3.25rem, 1.5rem + 7vw, 7.5rem), 16cqi); }
.project-meta { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.project-body .project-meta + p { margin-top: -.25rem; }

/* ---------- Versión compacta en móvil: menos scroll, mismo contenido ---------- */
@media (max-width: 767.98px) {
  /* Problemas: icono al lado del título */
  .card { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: center; padding: 1.25rem; }
  .card .problem-icon { margin: 0; width: 2.75rem; height: 2.75rem; }
  .card h3 { margin: 0; font-size: 1.5rem; }
  .card p { grid-column: 1 / -1; margin-top: .5rem; }

  /* Cómo trabajo: número al lado del título */
  .step { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.25rem; align-items: center; padding-top: 1.25rem; }
  .step-num { font-size: 4.5rem; margin: 0; grid-row: span 2; align-self: start; }
  .step h3 { margin: 0; }
  .step p { margin: 0; }

  /* Proyectos: franja visual más baja */
  .project-visual { aspect-ratio: 3 / 1; }
  .project-visual span { font-size: 1.75rem; }

  /* Calculadora: horas al año y recuperables, lado a lado */
  .results { grid-template-columns: 1fr 1fr; }
  .result--main { grid-column: 1 / -1; }
  .calc-form { gap: 1.5rem; margin-top: 1.5rem; }

  .svc-checks li { padding: .6rem 0; }
}

/* Precios en dos columnas desde 360 px */
@media (min-width: 360px) and (max-width: 639.98px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .price { padding: 1rem; container-type: inline-size; }
  .price h3 { font-size: .75rem; letter-spacing: .06em; }
  .price-amount { font-size: min(2.25rem, 22cqi); }
  .price p { font-size: .9375rem; }
  .price-banner { grid-column: 1 / -1; }
}