/* ==========================================================================
   MD FARO — Sistema de diseño
   Nombre de marca, colores y tipografías centralizados aquí.
   Cambiar el nombre de marca en TODO el sitio = editar brand.js + este bloque.
   ========================================================================== */

:root{
  /* ---- Marca (único punto de verdad de color) ---- */
  --brand-ink:        #14171b;   /* casi-negro, texto y fondos oscuros */
  --brand-ink-soft:    #2b2f34;
  --brand-paper:       #f1efe7;   /* papel cálido, fondo base */
  --brand-paper-soft:  #e8e5da;
  --brand-cream:       #f8f7f2;   /* superficies claras sobre papel */
  --brand-accent:      #1f6f63;   /* verde-azulado, acento principal */
  --brand-accent-dark: #164f46;
  --brand-accent-tint: #4fb6a6;   /* acento sobre fondo oscuro */
  --brand-brass:       #a67a24;   /* acento secundario, uso escaso */
  --brand-brass-tint:  #d9ae5c;

  /* ---- Tokens funcionales ---- */
  --ink:        var(--brand-ink);
  --ink-soft:   #4b4f55;
  --muted:      #6d7278;
  --paper:      var(--brand-paper);
  --surface:    var(--brand-cream);
  --surface-2:  #ffffff;
  --line:       rgba(20,23,27,.13);
  --line-soft:  rgba(20,23,27,.07);
  --accent:     var(--brand-accent);
  --accent-ink: var(--brand-accent-dark);
  --accent-soft:rgba(31,111,99,.10);
  --on-dark:    #efece3;
  --on-dark-soft: #b7b4a9;
  --on-dark-accent: var(--brand-accent-tint);
  --line-on-dark: rgba(239,236,227,.14);
  --brass:      var(--brand-brass);
  --brass-soft: rgba(166,122,36,.12);
  --danger:     #a1493a;

  --shadow-sm: 0 1px 2px rgba(20,23,27,.05);
  --shadow-md: 0 10px 30px -14px rgba(20,23,27,.28);
  --shadow-lg: 0 24px 60px -20px rgba(20,23,27,.34);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --container: 1180px;
  --container-narrow: 760px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s;
  --dur: .5s;
  --dur-slow: .9s;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", ui-sans-serif, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:"Fraunces", Georgia, "Times New Roman", serif; font-weight:600; line-height:1.08; letter-spacing:-.01em; text-wrap:balance; }
::selection{ background:var(--accent-soft); color:var(--accent-ink); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Utility ---- */
.container{ max-width:var(--container); margin:0 auto; padding:0 1.25rem; }
.container-narrow{ max-width:var(--container-narrow); margin:0 auto; padding:0 1.25rem; }
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:1.3em; height:1px; background:var(--accent); display:inline-block; }
.on-dark .eyebrow{ color:var(--on-dark-accent); }
.on-dark .eyebrow::before{ background:var(--on-dark-accent); }

.section{ padding:5.5rem 0; }
.section-tight{ padding:3.5rem 0; }
@media (max-width:720px){ .section{ padding:3.75rem 0; } .section-tight{ padding:2.75rem 0; } }
.section.on-dark{ background:var(--ink); color:var(--on-dark); }
.section.on-surface{ background:var(--surface); }

.section-head{ max-width:640px; margin-bottom:2.75rem; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:.6rem; }
.section-head p{ margin-top:.9rem; color:var(--ink-soft); font-size:1.05rem; line-height:1.6; }
.on-dark .section-head p{ color:var(--on-dark-soft); }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{
  position:fixed; top:-60px; left:1rem; z-index:200; background:var(--ink); color:var(--on-dark);
  padding:.7em 1.1em; border-radius:var(--radius-sm); transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.6em; border-radius:99px; font-weight:600; font-size:.94rem;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-ink); box-shadow:var(--shadow-md); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:var(--surface-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.on-dark .btn-ghost{ border-color:var(--line-on-dark); color:var(--on-dark); background:transparent; }
.on-dark .btn-ghost:hover{ border-color:var(--on-dark); }
.btn-text{ font-weight:600; color:var(--accent-ink); display:inline-flex; align-items:center; gap:.4em; }
.btn-text .arrow{ transition:transform var(--dur-fast) var(--ease); }
.btn-text:hover .arrow{ transform:translateX(3px); }
.on-dark .btn-text{ color:var(--on-dark-accent); }
.btn-sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.btn-whatsapp{
  display:inline-flex; align-items:center; gap:.5em; background:#1f6f63; color:#fff;
  padding:.75em 1.3em; border-radius:99px; font-weight:600; font-size:.9rem; box-shadow:var(--shadow-sm);
}
.btn-whatsapp:hover{ background:var(--accent-ink); }
.btn-whatsapp svg{ width:1.1em; height:1.1em; flex:none; }

/* ---- Navbar ---- */
.navbar{
  position:sticky; top:0; z-index:100; background:rgba(241,239,231,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.navbar.is-scrolled{ border-color:var(--line); box-shadow:var(--shadow-sm); }
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.15rem 1.25rem; max-width:var(--container); margin:0 auto; transition:padding var(--dur-fast) var(--ease); }
.navbar.is-scrolled .navbar-inner{ padding:.75rem 1.25rem; }
.brand-logo{ display:flex; align-items:center; gap:.55em; font-family:"Fraunces"; font-weight:600; font-size:1.28rem; letter-spacing:-.01em; }
.brand-logo .mark{ width:1.8em; height:1.8em; border-radius:50%; object-fit:contain; display:block; flex:none; }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-size:.92rem; font-weight:500; color:var(--ink-soft); position:relative; padding:.2rem 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-fast) var(--ease); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.nav-wa{ display:none; }
.nav-toggle{ display:none; width:2.4rem; height:2.4rem; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; display:block; width:1.35rem; height:1.5px; background:var(--ink); position:relative; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle::before{ position:absolute; transform:translateY(-6px); }
.nav-toggle::after{ position:absolute; transform:translateY(6px); }
.nav-toggle[aria-expanded="true"] span{ opacity:0; }
.nav-toggle[aria-expanded="true"]::before{ transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after{ transform:rotate(-45deg); }

.mobile-panel{
  position:fixed; inset:0 0 0 auto; width:min(88vw,360px); background:var(--brand-paper); z-index:110;
  transform:translateX(100%); transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; padding:1.4rem; overflow-y:auto;
}
.mobile-panel.is-open{ transform:translateX(0); }
.mobile-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.mobile-panel a{ display:block; padding:.95rem 0; font-size:1.15rem; font-family:"Fraunces"; font-weight:500; border-bottom:1px solid var(--line); }
.mobile-panel-foot{ margin-top:auto; padding-top:1.5rem; display:flex; flex-direction:column; gap:.8rem; }
.scrim{ position:fixed; inset:0; background:rgba(20,23,27,.4); z-index:105; opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease); }
.scrim.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:920px){
  .nav-links, .nav-cta .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta{ gap:.6rem; }
}
@media (min-width:921px){ .mobile-panel, .scrim, .nav-toggle{ display:none; } }

/* WhatsApp flotante */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; width:3.3rem; height:3.3rem; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform var(--dur-fast) var(--ease);
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:1.5rem; height:1.5rem; }

/* ---- Hero ---- */
.hero{ position:relative; padding:6.5rem 0 5rem; background:var(--ink); color:var(--on-dark); overflow:hidden; }
.hero-field{ position:absolute; inset:0; pointer-events:none; }
.hero-field canvas{ width:100%; height:100%; display:block; }
.hero-grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 1.25rem; }
.hero-eyebrow{ margin-bottom:1.6rem; }
.hero h1{ font-size:clamp(2.5rem,6.4vw,4.6rem); max-width:16ch; line-height:1.03; }
.hero h1 em{ font-style:italic; color:var(--on-dark-accent); }
.hero .dek{ margin-top:1.5rem; max-width:46ch; font-size:1.18rem; line-height:1.6; color:var(--on-dark-soft); }
.hero-actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-meta{ margin-top:4rem; display:flex; gap:2.2rem; flex-wrap:wrap; border-top:1px solid var(--line-on-dark); padding-top:1.6rem; }
.hero-meta div{ font-family:"IBM Plex Mono"; font-size:.76rem; color:var(--on-dark-soft); display:flex; align-items:center; gap:.6em; }
.hero-meta div::before{ content:"—"; color:var(--on-dark-accent); }

/* Hero secundario (páginas internas) */
.page-hero{ padding:3.4rem 0 3rem; background:var(--ink); color:var(--on-dark); }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3.1rem); max-width:20ch; }
.page-hero .dek{ margin-top:1rem; max-width:56ch; color:var(--on-dark-soft); font-size:1.05rem; line-height:1.6; }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:.4em; font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--on-dark-soft); margin-bottom:1.3rem; }
.breadcrumbs a{ color:var(--on-dark-soft); }
.breadcrumbs a:hover{ color:var(--on-dark); }
.breadcrumbs .sep{ opacity:.5; }
.breadcrumbs [aria-current]{ color:var(--on-dark); }
.section .breadcrumbs{ color:var(--muted); }
.section .breadcrumbs a{ color:var(--muted); }
.section .breadcrumbs a:hover{ color:var(--ink); }
.section .breadcrumbs [aria-current]{ color:var(--ink); }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; } /* red de seguridad: si JS falla, el texto igual se ve */
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---- Trust strip ---- */
.trust-strip{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(6,1fr); }
.trust-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:2.1rem 1rem; border-left:1px solid var(--line); }
.trust-item:first-child{ border-left:none; }
.trust-item svg{ width:1.6rem; height:1.6rem; color:var(--accent); }
.trust-item span{ font-size:.8rem; font-weight:600; color:var(--ink-soft); }
@media (max-width:920px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } .trust-item{ border-left:none; border-top:1px solid var(--line); } .trust-item:nth-child(3n+1){ border-left:none; } }
@media (max-width:520px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Quiénes somos ---- */
.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
@media (max-width:860px){ .about-split{ grid-template-columns:1fr; gap:2rem; } }
.about-split h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.about-split .lede{ font-size:1.2rem; line-height:1.55; color:var(--ink-soft); margin-top:1rem; }
.about-points{ display:flex; flex-direction:column; gap:1.5rem; }
.about-point{ display:flex; gap:1rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.about-point:last-child{ border-bottom:none; padding-bottom:0; }
.about-point .num{ font-family:"IBM Plex Mono"; color:var(--accent-ink); font-size:.85rem; padding-top:.2rem; }
.about-point h3{ font-size:1.05rem; font-family:"Public Sans"; font-weight:700; margin-bottom:.35rem; }
.about-point p{ font-size:.94rem; color:var(--muted); line-height:1.55; }

/* ---- Servicios ---- */
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.1rem 1.8rem; display:flex; flex-direction:column; gap:1rem; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.service-card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service-card .num{ font-family:"IBM Plex Mono"; font-size:.74rem; color:var(--brass); }
.service-card h3{ font-size:1.28rem; }
.service-card p{ color:var(--muted); font-size:.92rem; line-height:1.55; flex:1; }
.service-card .benefit{ font-size:.84rem; color:var(--accent-ink); font-weight:600; }
.service-card .btn-text{ margin-top:.3rem; }

/* ---- Plantillas ---- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:2.2rem; }
.filter-chip{
  font-family:"IBM Plex Mono"; font-size:.76rem; padding:.55em 1.05em; border-radius:99px;
  border:1px solid var(--line); color:var(--ink-soft); background:var(--surface-2); transition:all var(--dur-fast) var(--ease);
}
.filter-chip:hover{ border-color:var(--ink); }
.filter-chip.is-active{ background:var(--ink); color:var(--brand-paper); border-color:var(--ink); }

.template-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:980px){ .template-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .template-grid{ grid-template-columns:1fr; } }
.template-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.template-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.template-card .mock{ aspect-ratio:4/3; background:var(--ink); position:relative; overflow:hidden; }
.template-card .mock .chrome{ display:flex; gap:.3rem; padding:.6rem .7rem; }
.template-card .mock .chrome i{ width:.4rem; height:.4rem; border-radius:50%; background:rgba(239,236,227,.35); display:block; }
.template-card .mock .frame{ position:absolute; inset:1.6rem .9rem .9rem; background:var(--brand-paper); border-radius:4px; padding:.8rem; display:flex; flex-direction:column; gap:.45rem; }
.template-card .mock .bar{ height:.5rem; border-radius:2px; background:var(--line); }
.template-card .mock .bar.w60{ width:60%; } .template-card .mock .bar.w40{ width:40%; } .template-card .mock .bar.w80{ width:80%; } .template-card .mock .bar.w30{width:30%;}
.template-card .mock .blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-top:.3rem; flex:1; }
.template-card .mock .blocks span{ background:var(--accent-soft); border-radius:3px; }
.template-card .mock .accent-shape{ position:absolute; width:60%; height:60%; border-radius:50%; opacity:.5; }
.template-card .body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.template-card .cat{ font-family:"IBM Plex Mono"; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.template-card h3{ font-size:1.15rem; }
.template-card p{ font-size:.86rem; color:var(--muted); line-height:1.5; }
.template-card .feats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.template-card .feats span{ font-size:.7rem; font-family:"IBM Plex Mono"; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:.25em .65em; }
.template-card .actions{ display:flex; gap:.7rem; margin-top:.7rem; }

/* ---- Template cards with live preview (tcard) ---- */
.tcard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tcard:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.tcard-shot{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--line); }
.tcard-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform var(--dur-slow) var(--ease); }
.tcard:hover .tcard-shot img{ transform:scale(1.035); }
.tcard-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); background:rgba(20,23,27,.82); color:#fff; font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:.7em 1.35em; border-radius:99px; opacity:0; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; }
.tcard-play svg{ width:.9em; height:.9em; }
.tcard-shot:hover .tcard-play, .tcard-shot:focus-visible .tcard-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.tcard-body{ padding:1.3rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.tcard-body .cat{ font-family:"IBM Plex Mono"; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.tcard-body h3{ font-size:1.22rem; margin:.05rem 0 0; }
.tcard-body h3 a{ color:inherit; }
.tcard-body h3 a:hover{ color:var(--accent); }
.tcard-body p{ font-size:.88rem; color:var(--muted); line-height:1.55; }
.tcard .feats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.1rem; }
.tcard .feats span{ font-size:.7rem; font-family:"IBM Plex Mono"; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:.25em .65em; }
.tcard-actions{ margin-top:auto; padding-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); }
.tcard-actions a{ font-size:.84rem; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:.4em; }
.tcard-actions a .arrow{ transition:transform var(--dur-fast) var(--ease); }
.tcard-actions a:hover .arrow{ transform:translateX(3px); }
.tcard-actions a.muted{ font-weight:500; color:var(--muted); }
.tcard-actions a.muted:hover{ color:var(--ink); }

/* ---- Category page live-preview shot ---- */
.media-shot{ position:relative; display:block; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); aspect-ratio:16/10; background:var(--surface-2); }
.media-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform var(--dur-slow) var(--ease); }
.media-shot:hover img{ transform:scale(1.03); }
.media-shot .badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); background:rgba(20,23,27,.82); color:#fff; font-size:.82rem; font-weight:600; padding:.75em 1.4em; border-radius:99px; opacity:0; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); display:inline-flex; align-items:center; gap:.5em; white-space:nowrap; }
.media-shot .badge svg{ width:.9em; height:.9em; }
.media-shot:hover .badge, .media-shot:focus-visible .badge{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- Proyectos ---- */
.projects-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:760px){ .projects-grid{ grid-template-columns:1fr; } }
.project-card{ border-radius:var(--radius-lg); overflow:hidden; background:var(--ink); position:relative; color:var(--on-dark); }
.project-card .visual{ aspect-ratio:16/10; position:relative; overflow:hidden; }
.project-card .visual .glow{ position:absolute; inset:-20%; opacity:.55; }
.project-card .visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-card .tag{ position:absolute; top:1rem; left:1rem; font-family:"IBM Plex Mono"; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(20,23,27,.55); backdrop-filter:blur(6px); color:var(--on-dark); padding:.35em .75em; border-radius:99px; border:1px solid var(--line-on-dark); }
.project-card .info{ padding:1.5rem 1.6rem 1.7rem; }
.project-card .cat{ font-family:"IBM Plex Mono"; font-size:.68rem; color:var(--on-dark-accent); text-transform:uppercase; letter-spacing:.08em; }
.project-card h3{ font-size:1.4rem; margin-top:.4rem; }
.project-card p{ color:var(--on-dark-soft); font-size:.9rem; margin-top:.5rem; line-height:1.55; }

/* ---- Proceso ---- */
.process-list{ display:flex; flex-direction:column; }
.process-item{ display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.8rem 0; border-bottom:1px solid var(--line); }
.process-item:last-child{ border-bottom:none; }
.process-item .step-num{ font-family:"Fraunces"; font-size:2.1rem; color:var(--line); font-weight:600; }
.process-item h3{ font-size:1.2rem; margin-bottom:.4rem; }
.process-item p{ color:var(--muted); font-size:.94rem; max-width:52ch; line-height:1.55; }
@media (max-width:600px){ .process-item{ grid-template-columns:3rem 1fr; } .process-item .step-num{ font-size:1.5rem; } }

/* ---- Reseñas ---- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1rem; }
.review-card .stars{ color:var(--brass); font-size:.95rem; letter-spacing:.15em; }
.review-card blockquote{ font-family:"Fraunces"; font-style:italic; font-size:1.08rem; line-height:1.5; color:var(--ink); }
.review-card .who{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.review-card .avatar{ width:2.6rem; height:2.6rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:"Fraunces"; font-weight:600; }
.review-card .who b{ display:block; font-size:.9rem; }
.review-card .who span{ font-size:.78rem; color:var(--muted); }
.review-placeholder{ border-style:dashed; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.review-placeholder .icon{ font-family:"IBM Plex Mono"; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:.5rem; }

/* ---- CTA final ---- */
.cta-final{ background:var(--ink); color:var(--on-dark); text-align:center; padding:6rem 0; position:relative; overflow:hidden; }
.cta-final h2{ font-size:clamp(2rem,4.6vw,3.2rem); max-width:20ch; margin:0 auto; }
.cta-final p{ margin:1.2rem auto 0; max-width:44ch; color:var(--on-dark-soft); font-size:1.08rem; }
.cta-final .hero-actions{ justify-content:center; margin-top:2.2rem; }
.cta-final .eyebrow{ color:var(--on-dark-accent); justify-content:center; }

.mini-banner{ padding:3.2rem 0; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mini-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.mini-banner-inner h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); margin:.4rem 0 .3rem; }
.mini-banner-inner p{ color:var(--muted); max-width:52ch; }
.mini-banner-inner .btn{ flex:none; }
@media (max-width:760px){ .mini-banner-inner{ flex-direction:column; align-items:flex-start; } .mini-banner-inner .btn{ width:100%; justify-content:center; } }

/* ---- Footer ---- */
.site-footer{ background:var(--ink); color:var(--on-dark-soft); padding:4.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-on-dark); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-logo{ color:var(--on-dark); }
.footer-brand p{ margin-top:1rem; max-width:32ch; font-size:.88rem; line-height:1.6; }
.footer-col h4{ font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.88rem; }
.footer-col a:hover{ color:var(--on-dark); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; font-size:.8rem; }
.footer-bottom .legal-links{ display:flex; gap:1.3rem; }

/* ---- Blog ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:960px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }
.post-card{ display:flex; flex-direction:column; gap:.9rem; }
.post-card .cover{ aspect-ratio:16/10; border-radius:var(--radius-md); background:var(--ink); position:relative; overflow:hidden; }
.post-card .cover .glow{ position:absolute; inset:-30%; opacity:.6; }
.post-card .cover .tag{ position:absolute; bottom:.9rem; left:.9rem; font-family:"IBM Plex Mono"; font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--on-dark); background:rgba(20,23,27,.5); border:1px solid var(--line-on-dark); padding:.3em .7em; border-radius:99px; }
.post-card h3{ font-size:1.2rem; }
.post-card .excerpt{ font-size:.9rem; color:var(--muted); line-height:1.55; }
.post-card .meta{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--muted); display:flex; gap:1rem; }
.post-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center; margin-bottom:3.5rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line); }
@media (max-width:860px){ .post-featured{ grid-template-columns:1fr; gap:1.6rem; } }
.post-featured .cover{ aspect-ratio:4/3; border-radius:var(--radius-lg); }
.post-featured h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:.6rem; }
.post-featured .excerpt{ font-size:1.02rem; margin-top:.9rem; }
.post-featured .meta{ display:flex; gap:1rem; flex-wrap:wrap; font-family:"IBM Plex Mono"; font-size:.75rem; color:var(--muted); }

/* Artículo individual */
.article-head{ max-width:var(--container-narrow); margin:0 auto 2.5rem; text-align:left; }
.article-head h1{ font-size:clamp(2rem,4.4vw,2.9rem); }
.article-head .meta{ display:flex; gap:1.3rem; flex-wrap:wrap; margin-top:1.1rem; font-family:"IBM Plex Mono"; font-size:.78rem; color:var(--on-dark-soft); }
.article-cover{ max-width:var(--container); margin:0 auto; aspect-ratio:16/9; border-radius:var(--radius-lg); background:var(--surface-2); position:relative; overflow:hidden; margin-bottom:3rem; }
.article-cover .glow{ position:absolute; inset:-30%; opacity:.6; }
.article-cover img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.post-card .cover img, .post-featured .cover img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.article-body{ max-width:var(--container-narrow); margin:0 auto; }
.article-body p{ margin-bottom:1.3rem; font-size:1.06rem; line-height:1.75; color:var(--ink-soft); }
.article-body h2{ font-size:1.55rem; margin:2.4rem 0 1rem; }
.article-body h3{ font-size:1.2rem; margin:1.8rem 0 .8rem; font-family:"Public Sans"; font-weight:700; }
.article-body ul, .article-body ol{ margin:0 0 1.3rem 1.3rem; list-style:disc; color:var(--ink-soft); }
.article-body ol{ list-style:decimal; }
.article-body li{ margin-bottom:.5rem; line-height:1.65; }
.article-body a:not(.btn):not(.btn-text){ color:var(--accent-ink); text-decoration:underline; text-underline-offset:.15em; }
.article-body strong{ color:var(--ink); }
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.4rem 1.6rem; margin:0 0 2.5rem; }
.toc-title{ font-family:"IBM Plex Mono"; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.toc ol{ list-style:decimal; margin-left:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.toc a{ font-size:.92rem; color:var(--ink-soft); }
.toc a:hover{ color:var(--accent-ink); }
.article-cta{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:3rem 0; }
.article-cta h3{ font-size:1.25rem; }
.article-cta p{ color:var(--muted); font-size:.92rem; margin-top:.3rem; }
.author-box{ display:flex; gap:1rem; align-items:center; padding-top:2.5rem; margin-top:2.5rem; border-top:1px solid var(--line); }
.author-box .avatar{ width:3.2rem; height:3.2rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:"Fraunces"; font-weight:600; flex:none; }
.author-box b{ display:block; font-size:.95rem; }
.author-box span{ font-size:.82rem; color:var(--muted); }
.related-posts h2{ font-size:1.5rem; margin-bottom:1.6rem; }

/* ---- Formularios ---- */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.84rem; font-weight:600; color:var(--ink-soft); }
.field .hint{ font-size:.78rem; color:var(--muted); }
.field input, .field textarea, .field select{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8em .95em; background:var(--surface-2);
  font-size:.95rem; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none; }
.field textarea{ resize:vertical; min-height:8rem; }
.field.has-error input, .field.has-error textarea{ border-color:var(--danger); }
.field .error-msg{ font-size:.78rem; color:var(--danger); display:none; }
.field.has-error .error-msg{ display:block; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }
.form-status{ font-size:.9rem; padding:.9em 1.1em; border-radius:var(--radius-sm); margin-top:1rem; display:none; }
.form-status.is-visible{ display:block; }
.form-status.ok{ background:var(--accent-soft); color:var(--accent-ink); }
.form-status.err{ background:rgba(161,73,58,.12); color:var(--danger); }

/* ---- Cotizador ---- */
.quiz-shell{ max-width:820px; margin:0 auto; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.quiz-progress{ height:3px; background:var(--line); position:relative; }
.quiz-progress-bar{ position:absolute; inset:0 auto 0 0; width:16.6%; background:var(--accent); transition:width var(--dur) var(--ease); }
.quiz-body{ padding:2.6rem 2.4rem; }
@media (max-width:600px){ .quiz-body{ padding:1.8rem 1.3rem; } }
.quiz-step{ display:none; }
.quiz-step.is-active{ display:block; animation:quizIn .4s var(--ease); }
@keyframes quizIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.quiz-step .step-tag{ font-family:"IBM Plex Mono"; font-size:.72rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.quiz-step h2{ font-size:1.5rem; margin-top:.5rem; margin-bottom:1.7rem; }
.quiz-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem; }
.quiz-options.single-col{ grid-template-columns:1fr; }
@media (max-width:560px){ .quiz-options{ grid-template-columns:1fr; } }
.quiz-option{
  display:flex; align-items:center; gap:.85rem; text-align:left; padding:1rem 1.15rem; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface); transition:all var(--dur-fast) var(--ease);
}
.quiz-option:hover{ border-color:var(--accent); }
.quiz-option.is-selected{ border-color:var(--accent); background:var(--accent-soft); }
.quiz-option .box{ width:1.15rem; height:1.15rem; border-radius:4px; border:1.5px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; }
.quiz-option[data-multi] .box{ border-radius:4px; }
.quiz-option:not([data-multi]) .box{ border-radius:50%; }
.quiz-option.is-selected .box{ background:var(--accent); border-color:var(--accent); }
.quiz-option .box svg{ width:.7rem; height:.7rem; color:#fff; opacity:0; }
.quiz-option.is-selected .box svg{ opacity:1; }
.quiz-option .txt b{ display:block; font-size:.94rem; }
.quiz-option .txt span{ font-size:.78rem; color:var(--muted); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.quiz-summary{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.3rem 1.5rem; margin-bottom:1.6rem; }
.quiz-summary h3{ font-family:"Public Sans"; font-weight:700; font-size:.95rem; margin-bottom:.7rem; }
.quiz-summary dl{ display:flex; flex-direction:column; gap:.45rem; }
.quiz-summary .row{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; }
.quiz-summary dt{ color:var(--muted); }
.quiz-summary dd{ font-weight:600; text-align:right; }
.quiz-estimate{ text-align:center; padding:1.8rem 0; }
.quiz-estimate .amount{ font-family:"Fraunces"; font-size:2.6rem; color:var(--accent-ink); }
.quiz-estimate .note{ font-size:.82rem; color:var(--muted); margin-top:.5rem; max-width:38ch; margin-inline:auto; }

/* ---- Genéricos de página ---- */
.prose-page{ max-width:var(--container-narrow); margin:0 auto; }
.prose-page h2{ font-size:1.4rem; margin:2.2rem 0 .9rem; }
.prose-page p, .prose-page li{ color:var(--ink-soft); line-height:1.7; margin-bottom:1rem; font-size:.98rem; }
.prose-page ul{ margin-left:1.3rem; list-style:disc; }

.error-page{ text-align:center; padding:7rem 0; }
.error-page .code{ font-family:"IBM Plex Mono"; color:var(--brass); font-size:.9rem; letter-spacing:.1em; }
.error-page h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:.8rem 0 1rem; }
.error-page p{ color:var(--muted); max-width:44ch; margin:0 auto 2rem; }

/* ---- Tarjeta genérica servicio interno ---- */
.feat-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.6rem; margin:1.6rem 0 2.4rem; }
@media (max-width:600px){ .feat-list{ grid-template-columns:1fr; } }
.feat-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.feat-list li svg{ width:1.1rem; height:1.1rem; color:var(--accent); flex:none; margin-top:.15rem; }

.split-media{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:860px){ .split-media{ grid-template-columns:1fr; gap:2rem; } }
.split-media.reverse{ direction:rtl; }
.split-media.reverse > *{ direction:ltr; }
.media-panel{ aspect-ratio:4/3; border-radius:var(--radius-lg); background:var(--ink); position:relative; overflow:hidden; }
.media-panel .glow{ position:absolute; inset:-30%; opacity:.55; }

.pricing-note{ display:flex; gap:1rem; align-items:flex-start; background:var(--brass-soft); border:1px solid rgba(166,122,36,.25); border-radius:var(--radius-md); padding:1.1rem 1.3rem; font-size:.9rem; color:var(--ink-soft); margin-top:2rem; }
.pricing-note svg{ width:1.2rem; height:1.2rem; color:var(--brass); flex:none; margin-top:.15rem; }

/* animation utility for glows */
.glow{ background:radial-gradient(circle, var(--accent-tint,var(--brand-accent-tint)) 0%, transparent 70%); }