/* ==========================================================================
7Soft — hoja de estilos compartida
Tema: "orden de servicio" — grafito industrial + naranja de seguridad
VERSIÓN: 1.9.0.260826
(Formato: [versión].[AAMMDD]. Este número debe coincidir con el que
aparece en el footer de cada página y con el "?v=" del de este
archivo en el . Súbelos los tres juntos cada vez que publiques
cambios — ver README.md.)
========================================================================== */
:root{
--ink:#12161a;
--ink-2:#1b2126;
--ink-3:#242c32;
--paper:#e9e3d1;
--paper-2:#dfd8c2;
--paper-ink:#1c1a12;
--paper-muted:#6b6550;
--orange:#ff5a1f;
--orange-2:#ff7a45;
--amber:#ffb100;
--green:#4caf6d;
--line:rgba(255,255,255,0.12);
--line-soft:rgba(255,255,255,0.07);
--text:#e9e6df;
--text-muted:#9aa2a8;
--header-bg:rgba(18,22,26,0.92);
--footer-bg:#0c0f12;
--hero-glow:rgba(255,90,31,0.18);
--card-elevated:#333e47;
--radius:2px;
--maxw:1180px;
color-scheme: dark;
}
/* ---------- Tema claro/oscuro ----------
Por defecto, el sitio sigue la preferencia de sistema/navegador del
visitante (prefers-color-scheme) — funciona incluso sin JavaScript.
El botón de tema (con un poco de JS) puede además FORZAR un tema
específico agregando data-theme="light" o data-theme="dark" al ,
lo cual tiene prioridad sobre la preferencia del sistema. Si el
visitante nunca toca el botón, o si el JS no carga por alguna razón,
el sitio simplemente sigue el modo del sistema — nunca se rompe. */
/* 1) Automático por sistema, salvo que se haya forzado el oscuro */
@media (prefers-color-scheme: light){
:root:not([data-theme="dark"]){
--ink:#f3f0e6;
--ink-2:#e9e4d5;
--ink-3:#ffffff;
--line:rgba(28,26,18,0.12);
--line-soft:rgba(28,26,18,0.07);
--text:#1c1a12;
--text-muted:#655f4c;
--header-bg:rgba(243,240,230,0.9);
--footer-bg:#e7e1cf;
--hero-glow:rgba(255,90,31,0.12);
--card-elevated:#ffffff;
color-scheme: light;
}
:root:not([data-theme="dark"]) .clients-logo img{ opacity:0.6; }
:root:not([data-theme="dark"]) .comp-card .thumb{ background:#fdfcf8; border-bottom:1px solid var(--line); }
:root:not([data-theme="dark"]) .logo-on-dark{ display:none; }
:root:not([data-theme="dark"]) .logo-on-light{ display:block; }
:root:not([data-theme="dark"]) .theme-icon{ color:var(--orange); }
:root:not([data-theme="dark"]) .theme-icon .icon-moon{ display:none; }
:root:not([data-theme="dark"]) .theme-icon .icon-sun{ display:block; }
}
/* 2) Forzado a claro con el botón, sin importar el sistema */
[data-theme="light"]{
--ink:#f3f0e6;
--ink-2:#e9e4d5;
--ink-3:#ffffff;
--line:rgba(28,26,18,0.12);
--line-soft:rgba(28,26,18,0.07);
--text:#1c1a12;
--text-muted:#655f4c;
--header-bg:rgba(243,240,230,0.9);
--footer-bg:#e7e1cf;
--hero-glow:rgba(255,90,31,0.12);
--card-elevated:#ffffff;
color-scheme: light;
}
[data-theme="light"] .clients-logo img{ opacity:0.6; }
[data-theme="light"] .comp-card .thumb{ background:#fdfcf8; border-bottom:1px solid var(--line); }
[data-theme="light"] .logo-on-dark{ display:none; }
[data-theme="light"] .logo-on-light{ display:block; }
[data-theme="light"] .theme-icon{ color:var(--orange); }
[data-theme="light"] .theme-icon .icon-moon{ display:none; }
[data-theme="light"] .theme-icon .icon-sun{ display:block; }
.logo-on-light{ display:none; }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }
body{
margin:0;
background:var(--ink);
color:var(--text);
font-family:'Inter',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
line-height:1.55;
transition:background-color .2s ease, color .2s ease;
}
section, .pcard, .comp-card, .diag-card, .feature-media, .cta-band, .field input, .field textarea, .faq-item{
transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
h1,h2,h3,h4{
font-family:'Archivo',sans-serif;
font-weight:900;
letter-spacing:-0.01em;
margin:0;
text-wrap:balance;
}
.mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
font-family:'IBM Plex Mono',monospace;
font-size:12px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--orange);
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
}
.eyebrow::before{
content:"";
width:18px; height:2px;
background:var(--orange);
display:inline-block;
}
.eyebrow.on-paper{ color:#b5501f; }
/* ---------- Botones ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:10px;
font-family:'IBM Plex Mono',monospace;
font-size:13px;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
text-decoration:none;
padding:14px 22px;
border-radius:var(--radius);
border:1px solid transparent;
cursor:pointer;
transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#181008; }
.btn-primary:hover{ background:var(--orange-2); }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-2); }
.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-dark:hover{ background:#000; }
.btn svg{ width:14px; height:14px; }
/* ---------- Header ---------- */
header{
position:sticky; top:0; z-index:50;
background:var(--header-bg);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line-soft);
transition:background .2s ease, border-color .2s ease;
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 24px;
max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo{ height:32px; width:auto; }
.brand-logo.logo-on-light{ height:38px; border-radius:4px; }
.navlinks{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.navlinks a{
font-family:'IBM Plex Mono',monospace;
font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em;
text-decoration:none; color:var(--text-muted);
padding:10px 14px; border-radius:20px;
display:flex; align-items:center; gap:8px;
transition:color .15s ease, background .15s ease;
}
.navlinks a:hover, .navlinks a.active{ color:var(--text); background:var(--ink-3); }
.navlinks .dot{ width:6px; height:6px; border-radius:50%; background:#3c454c; display:inline-block; }
.navlinks a:hover .dot, .navlinks a.active .dot{ background:var(--orange); }
.navcta{ display:flex; align-items:center; gap:14px; }
/* ---------- Interruptor de tema (con JS mínimo) ---------- */
.theme-toggle{
display:flex; align-items:center; gap:9px;
background:var(--ink-2); border:1px solid var(--line); border-radius:20px;
padding:8px 14px; cursor:pointer; color:var(--text);
font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
transition:background .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ border-color:var(--orange); }
.theme-icon{ display:flex; align-items:center; justify-content:center; width:15px; height:15px; color:var(--amber); }
.theme-icon svg{ width:15px; height:15px; display:block; }
.theme-icon .icon-sun{ display:none; }
.theme-icon .icon-moon{ display:block; }
/* ---------- Menú móvil 100% CSS (sin JavaScript) ---------- */
.nav-check{ position:absolute; opacity:0; pointer-events:none; }
.burger{
display:none; position:relative;
background:none; border:1px solid var(--line); color:var(--text);
width:40px; height:40px; border-radius:8px; cursor:pointer;
}
.burger::before{
content:"☰"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.nav-check:checked ~ nav .burger::before{ content:"✕"; }
.mobile-panel{ display:none; }
.mobile-panel-overlay{ display:none; }
@media (max-width: 980px){
.navlinks{ display:none; }
.burger{ display:block; }
.navcta .btn-ghost, .navcta .btn-primary{ display:none; }
.navcta .theme-toggle{ padding:8px 10px; gap:6px; }
.navcta .theme-toggle .theme-label{ display:none; }
.nav-check:checked ~ .mobile-panel-overlay{
display:block; position:fixed; inset:0; z-index:40;
background:rgba(0,0,0,0.4);
}
.nav-check:checked ~ .mobile-panel{
display:flex; flex-direction:column; gap:2px;
padding:10px 24px 18px; border-top:1px solid var(--line-soft);
position:relative; z-index:41; background:var(--header-bg); backdrop-filter:blur(10px);
}
.mobile-panel a{
font-family:'IBM Plex Mono',monospace; text-transform:uppercase; font-size:13px; letter-spacing:0.05em;
text-decoration:none; color:var(--text); padding:12px 6px; border-bottom:1px solid var(--line-soft);
}
.mobile-panel a.active{ color:var(--orange-2); }
.mobile-panel .btn-primary{
margin-top:16px; justify-content:center; border:none;
}
}
/* ---------- Hero genérico de páginas internas ---------- */
.page-hero{
position:relative;
padding:70px 0 60px;
overflow:hidden;
background:
radial-gradient(circle at 85% 0%, var(--hero-glow), transparent 45%),
var(--ink);
}
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:clamp(32px,4.6vw,50px); line-height:1.05; max-width:20ch; }
.page-hero p.lead{ font-size:17px; color:var(--text-muted); max-width:60ch; margin-top:18px; }
.hazard-strip{
height:8px; width:100%;
background:repeating-linear-gradient(-45deg, var(--amber) 0 14px, var(--ink) 14px 28px);
}
/* ---------- Hero home ---------- */
.hero{
position:relative;
padding:96px 0 70px;
overflow:hidden;
background:
radial-gradient(circle at 85% 0%, var(--hero-glow), transparent 45%),
var(--ink);
}
.hero-grid{
display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
@media (max-width: 860px){
.hero-grid{ grid-template-columns:1fr; gap:44px; }
.hero-grid > div:last-child{ max-width:420px; margin:0 auto; }
}
.hero h1{ font-size:clamp(32px,8vw,60px); line-height:1.08; }
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero p.lead{ font-size:18px; color:var(--text-muted); max-width:46ch; margin-top:22px; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:48px; flex-wrap:wrap; }
.hero-stats div{ font-family:'IBM Plex Mono',monospace; }
.hero-stats b{ display:block; font-family:'Archivo',sans-serif; font-size:26px; color:var(--text); }
.hero-stats span{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; }
/* Ticket visual — elemento de firma */
.ticket{
background:var(--paper);
color:var(--paper-ink);
border-radius:6px;
position:relative;
padding:26px 26px 22px;
box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
transform:rotate(-2.2deg);
}
.ticket::before,.ticket::after{
content:""; position:absolute; width:22px; height:22px; background:var(--ink); border-radius:50%;
top:50%; transform:translateY(-50%);
}
.ticket::before{ left:-11px; }
.ticket::after{ right:-11px; }
.ticket-perf{
position:absolute; left:14px; right:14px; top:64px; height:0;
border-top:2px dashed rgba(0,0,0,0.22);
}
.ticket-head{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:16px; }
.ticket-head .no{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper-muted); }
.ticket-stamp{
font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.08em;
color:var(--green); border:1.5px solid var(--green); padding:3px 8px; border-radius:3px; transform:rotate(6deg);
}
.ticket-body{ padding-top:30px; }
.ticket-body h3{ font-size:22px; color:var(--paper-ink); }
.ticket-body p{ font-size:14px; color:var(--paper-muted); margin-top:8px; }
.ticket-body .barcode{ margin-top:18px; height:26px; background:repeating-linear-gradient(90deg, var(--paper-ink) 0 2px, transparent 2px 5px, var(--paper-ink) 5px 6px, transparent 6px 10px); opacity:0.75; }
/* ---------- Sections generic ---------- */
section{ padding:110px 0; position:relative; }
.on-dark{ background:var(--ink); }
.on-panel{ background:var(--ink-2); }
.on-paper{ background:var(--paper); color:var(--paper-ink); }
.section-head{ max-width:640px; margin-bottom:60px; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); }
.on-paper .section-head p{ color:var(--paper-muted); }
.section-head p{ color:var(--text-muted); margin-top:14px; font-size:17px; }
/* ---------- Product overview cards ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr; } }
.pcard{
background:var(--card-elevated);
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
text-decoration:none;
color:var(--text);
display:flex; flex-direction:column;
box-shadow:0 14px 30px -18px rgba(0,0,0,0.55);
transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.pcard:hover{ border-color:var(--orange); transform:translateY(-4px); box-shadow:0 22px 40px -16px rgba(0,0,0,0.6); }
.pcard .thumb{ aspect-ratio:16/11; background:var(--ink); overflow:hidden; position:relative; }
.pcard .thumb img{ width:100%; height:100%; object-fit:cover; }
.pcard .tag{
position:absolute; top:12px; left:12px;
font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em;
background:rgba(18,22,26,0.82); border:1px solid rgba(255,255,255,0.14); padding:4px 8px; border-radius:20px; color:var(--amber);
}
.pcard .body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard h3{ font-size:19px; }
.pcard p{ font-size:14px; color:var(--text-muted); flex:1; }
.pcard .go{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; color:var(--orange-2); display:flex; align-items:center; gap:6px; }
/* ---------- Feature row (numbered) ---------- */
.feature-block{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; margin-bottom:120px; }
.feature-block:last-child{ margin-bottom:0; }
.feature-block.reverse{ direction:rtl; }
.feature-block.reverse > *{ direction:ltr; }
@media (max-width:900px){ .feature-block, .feature-block.reverse{ grid-template-columns:1fr; direction:ltr; } }
.feature-media{
border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--ink-2);
}
.feature-media img{ width:100%; display:block; }
.feature-list{ display:flex; flex-direction:column; gap:26px; }
/* Título destacado de cada módulo (TallerSync) */
.block-title{ margin-bottom:4px; }
.block-title-eyebrow{
display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
letter-spacing:0.14em; text-transform:uppercase; color:var(--orange);
margin-bottom:10px;
}
.block-title h3{
font-size:26px; line-height:1.2;
padding-left:16px; border-left:4px solid var(--orange);
}
.feature-item{ display:flex; gap:18px; }
.feature-num{
font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; color:var(--ink);
background:var(--orange); width:32px; height:32px; min-width:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.on-paper .feature-num{ background:var(--paper-ink); color:var(--paper); }
.feature-item h4{ font-size:16.5px; font-family:'Inter',sans-serif; font-weight:700; }
.feature-item p{ font-size:14.5px; color:var(--text-muted); margin-top:6px; }
.on-paper .feature-item p{ color:var(--paper-muted); }
/* Panel de diagnóstico TallerSync (antes: tabla de preguntas) */
.diag-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:36px; flex-wrap:wrap; }
.diag-head h3{ font-size:26px; }
.diag-head .diag-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-muted); letter-spacing:0.06em; }
.diag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .diag-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .diag-grid{ grid-template-columns:1fr; } }
.diag-card{
background:var(--ink-2);
border:1px solid var(--line);
border-radius:12px;
padding:26px 24px 24px;
position:relative;
transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.diag-card:hover{ transform:translateY(-5px); border-color:var(--orange); box-shadow:0 20px 40px -24px rgba(0,0,0,0.5); }
.diag-card .diag-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.diag-icon{
width:44px; height:44px; border-radius:10px;
background:rgba(255,90,31,0.12);
display:flex; align-items:center; justify-content:center;
color:var(--orange);
}
.diag-icon svg{ width:22px; height:22px; }
.diag-card .diag-idx{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted); letter-spacing:0.08em; }
.diag-card .q{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16.5px; color:var(--text); margin-bottom:10px; line-height:1.25; }
.diag-card p{ font-size:14px; color:var(--text-muted); margin:0; }
.diag-card strong{ color:var(--orange-2); }
/* ---------- CTA banda ---------- */
.cta-band{
background:linear-gradient(120deg, var(--ink-2), var(--ink-3));
border:1px solid var(--line);
border-radius:14px;
padding:56px;
display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
position:relative; overflow:hidden;
}
.cta-band::before{
content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
background:radial-gradient(circle, rgba(255,90,31,0.25), transparent 70%);
}
.cta-band h3{ font-size:26px; max-width:420px; }
.cta-band .price-note{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--amber); margin-top:10px; display:block; }
/* ---------- Computers ---------- */
.comp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .comp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .comp-grid{ grid-template-columns:1fr; } }
.comp-card{ background:var(--ink-2); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.comp-card .thumb{ aspect-ratio:4/3; background:#fff; }
.comp-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.comp-card .info{ padding:16px 18px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); }
.comp-card .info .lbl{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.comp-card .info a{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; color:var(--orange-2); text-decoration:none; }
/* ---------- Clientes (carrusel) ---------- */
.clients-carousel{ display:flex; align-items:center; gap:14px; padding:34px 0; }
.clients-track{
display:flex; align-items:center; gap:14px;
flex:1 1 auto; min-width:0;
overflow-x:auto; scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none; -ms-overflow-style:none;
padding:14px 2px;
-webkit-overflow-scrolling:touch;
}
.clients-track::-webkit-scrollbar{ display:none; }
.clients-logo{
flex:0 0 auto; scroll-snap-align:start;
width:110px; height:64px;
display:flex; align-items:center; justify-content:center;
border-radius:10px;
cursor:pointer;
transition:width .22s ease, height .22s ease;
}
.clients-logo img{
max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
opacity:0.75; filter:grayscale(1);
transition:opacity .2s ease, filter .2s ease;
}
.clients-logo:hover,
.clients-logo:focus-visible,
.clients-logo.is-active{
width:150px; height:88px;
}
.clients-logo:hover img,
.clients-logo:focus-visible img,
.clients-logo.is-active img{
opacity:1; filter:grayscale(0);
}
.clients-arrow{
flex:0 0 auto;
width:40px; height:40px; border-radius:50%;
background:var(--ink-3); border:1px solid var(--line); color:var(--text);
display:flex; align-items:center; justify-content:center;
font-size:20px; line-height:1; cursor:pointer;
touch-action:manipulation;
transition:border-color .15s ease, color .15s ease;
}
.clients-arrow:hover{ border-color:var(--orange); color:var(--orange-2); }
@media (max-width:640px){
.clients-logo{ width:88px; height:52px; }
.clients-logo:hover, .clients-logo:focus-visible, .clients-logo.is-active{ width:118px; height:70px; }
}
/* ---------- PQRS accordion (nativo , sin JavaScript) ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--paper-2); border:1px solid rgba(0,0,0,0.08); border-radius:8px; overflow:hidden; }
.faq-item summary{
width:100%; text-align:left; cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:20px 22px; font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; color:var(--paper-ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-q-text{ display:flex; align-items:center; }
.faq-q-text .idx{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12px; color:#b5501f; margin-right:10px; }
.faq-item .chev{ min-width:22px; height:22px; border-radius:50%; border:1.5px solid var(--paper-ink); display:flex; align-items:center; justify-content:center; font-size:14px; transition:transform .2s ease; }
.faq-item[open] .chev{ transform:rotate(45deg); }
.faq-a-in{ padding:0 22px 22px 54px; font-size:14.5px; color:var(--paper-muted); }
.faq-a-in b{ color:var(--paper-ink); }
/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px; }
.field input, .field textarea{
width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:6px;
padding:13px 14px; color:var(--text); font-family:'Inter',sans-serif; font-size:14.5px;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:110px; }
.contact-info-list{ display:flex; flex-direction:column; gap:22px; margin-top:30px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-item .ic{ width:40px; height:40px; min-width:40px; border-radius:8px; background:var(--ink-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--orange); }
.contact-info-item a{ text-decoration:none; color:var(--text); }
.contact-info-item span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.06em; margin-bottom:3px; }
/* ---------- Footer ---------- */
footer{ background:var(--footer-bg); border-top:1px solid var(--line-soft); padding:60px 0 30px; transition:background .2s ease, border-color .2s ease; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-grid h5{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:16px; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-grid a{ text-decoration:none; color:var(--text); font-size:14.5px; }
.foot-grid a:hover{ color:var(--orange-2); }
.foot-bottom{ border-top:1px solid var(--line-soft); padding-top:24px; text-align:center; }
.foot-bottom p{ margin:0; font-size:13px; color:var(--text-muted); font-family:'IBM Plex Mono',monospace; }
.version-tag{ opacity:0.6; letter-spacing:0.04em; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text); transition:border-color .15s ease, color .15s ease; }
.social-row a:hover{ border-color:var(--orange); color:var(--orange-2); }
/* El contenido SIEMPRE es visible por defecto. La animación de aparición
es solo una mejora progresiva: únicamente se activa si el JavaScript
carga correctamente y agrega la clase .js-ready al . Así, si por
cualquier razón main.js no carga en el hosting, el sitio nunca se ve
con secciones en blanco. */
.reveal{ opacity:1; transform:none; }
.js-ready .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js-ready .reveal.show{ opacity:1; transform:none; }
::selection{ background:var(--orange); color:#181008; }