/* ============================================================================= FACILITADOR ELÉCTRICO — Sistema de diseño Tema: ingeniería eléctrica moderna, modo oscuro por defecto. Para cambiar colores globales, edita las variables en :root de más abajo. ============================================================================= */ /* ---- Fuentes (se cargan desde con ) --------------------------- */ :root { /* Paleta */ --bg-deep: #0A0E1A; /* fondo principal, casi negro azulado */ --bg-panel: #0F1B33; /* paneles y tarjetas */ --bg-panel-2: #12224180; /* panel translúcido */ --primary: #2563EB; /* azul eléctrico */ --cyan: #22D3EE; /* cian energía */ --signal: #F5B301; /* amarillo señal */ --text: #E6ECF5; /* texto claro */ --text-dim: #94A3B8; /* texto tenue */ --line: #1E2D4D; /* bordes y líneas */ --line-soft: #16223f; /* Tipografía */ --font-sans: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Medidas */ --nav-h: 68px; --wrap: 1160px; --radius: 14px; --radius-lg: 22px; --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); --glow-cyan: 0 0 24px -4px rgba(34, 211, 238, 0.55); --glow-blue: 0 0 24px -4px rgba(37, 99, 235, 0.55); color-scheme: dark; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg-deep); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } /* ---- Fondo técnico global (grilla + viñeta) ------------------------------- */ .tech-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: var(--bg-deep); background-image: linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px); background-size: 44px 44px; } .tech-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37, 99, 235, 0.18), transparent 70%); } /* ---- Layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .section { padding-block: clamp(56px, 9vw, 110px); } .section-sm { padding-block: clamp(40px, 6vw, 72px); } .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; display: inline-flex; gap: 8px; align-items: center; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--cyan); } h1, h2, h3 { line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); } h3 { font-size: 1.22rem; } .lead { font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: var(--text-dim); max-width: 62ch; } .mono { font-family: var(--font-mono); } /* ---- Botones -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: 0.98rem; border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--glow-blue); } .btn-primary:hover { background: #1d4fd8; } .btn-cyan { background: var(--cyan); color: #04121a; box-shadow: var(--glow-cyan); } .btn-cyan:hover { background: #4ee0f5; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); } .btn-wa { background: #25D366; color: #05270f; } .btn-wa:hover { background: #2fe673; } .btn svg { width: 18px; height: 18px; } /* ---- Tarjetas ------------------------------------------------------------- */ .card { position: relative; background: linear-gradient(160deg, var(--bg-panel), #0b1428); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: border-color .25s, transform .25s, box-shadow .25s; overflow: hidden; } .card:hover { border-color: rgba(34, 211, 238, 0.4); transform: translateY(-4px); box-shadow: var(--shadow); } /* nodo luminoso en la esquina */ .card::before { content: ''; position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); opacity: .0; transition: opacity .25s; } .card:hover::before { opacity: 1; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); background: #0b1card; } .chip-cyan { color: var(--cyan); border-color: rgba(34,211,238,.35); } .chip-blue { color: #7ea6ff; border-color: rgba(37,99,235,.4); } .chip-signal { color: var(--signal); border-color: rgba(245,179,1,.4); } .icon-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.3); color: var(--cyan); margin-bottom: 16px; } .icon-badge svg { width: 22px; height: 22px; } /* ============================================================================= NAVBAR ============================================================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(10, 14, 26, 0.72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.scrolled { border-bottom-color: var(--line); background: rgba(10, 14, 26, 0.9); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.14rem; letter-spacing: -0.02em; } .brand .logo { width: 34px; height: 34px; } .brand b { color: var(--cyan); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { padding: 9px 13px; border-radius: 9px; font-size: 0.95rem; color: var(--text-dim); transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,0.05); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px; color: var(--text); } .nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 940px) { .nav-links, .nav-cta .btn-desktop { display: none; } .nav-toggle { display: inline-flex; } .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(10, 14, 26, 0.98); border-bottom: 1px solid var(--line); padding: 12px 22px 20px; } .nav-links.open a { padding: 13px; } } /* ============================================================================= HERO ============================================================================= */ .hero { position: relative; padding-top: calc(var(--nav-h) + 40px); min-height: 92vh; display: flex; align-items: center; } .hero-canvas { position: absolute; inset: 0; z-index: 0; } .hero-canvas canvas { width: 100% !important; height: 100% !important; } .hero-poster { position: absolute; inset: 0; z-index: 0; object-fit: cover; opacity: .6; } .hero .wrap { position: relative; z-index: 2; } .hero-inner { max-width: 720px; } .hero h1 { margin-bottom: 20px; } .hero h1 .accent { color: var(--cyan); } .hero .lead { margin-bottom: 30px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; z-index: 1; background: linear-gradient(transparent, var(--bg-deep)); pointer-events: none; } /* ---- Lista "tipos de proyecto" dentro de las tarjetas de servicio ---------- */ .tipos { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; } .tipos h4 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 8px; font-weight: 500; } .tipos ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; } .tipos li { font-size: 0.84rem; color: var(--text-dim); padding-left: 16px; position: relative; } .tipos li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--cyan); opacity: .7; } /* ============================================================================= PLAZOS (gráfica de barras por fase del trámite) ============================================================================= */ .plazo-leyenda { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; font-size: 0.85rem; color: var(--text-dim); } .plazo-leyenda span { display: inline-flex; align-items: center; gap: 7px; } .plazo-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .dot-nos { background: var(--cyan); } .dot-sec { background: var(--primary); } .dot-dis { background: var(--signal); } .dot-inst { background: #64748B; } .plazo-fase { margin-bottom: 14px; } .plazo-nombre { font-size: 0.88rem; color: var(--text); margin-bottom: 5px; } .plazo-barra { display: flex; align-items: center; gap: 10px; } .plazo-barra i { height: 12px; border-radius: 6px; flex-shrink: 0; transition: width .6s ease; } .plazo-barra .mono { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; } .bar-nos { background: linear-gradient(90deg, var(--cyan), #4ee0f5); box-shadow: 0 0 12px -3px rgba(34,211,238,.6); } .bar-sec { background: linear-gradient(90deg, var(--primary), #4d7ef0); box-shadow: 0 0 12px -3px rgba(37,99,235,.6); } .bar-dis { background: linear-gradient(90deg, var(--signal), #ffcd45); box-shadow: 0 0 12px -3px rgba(245,179,1,.5); } .bar-inst { background: #64748B; } .bar-var { background: repeating-linear-gradient(45deg, #64748B 0 6px, #475569 6px 12px); } /* ============================================================================= FRANJA DE STATS ============================================================================= */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .stat { text-align: center; padding: 22px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel-2); } .stat .num { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; color: var(--cyan); line-height: 1; } .stat .lbl { color: var(--text-dim); font-size: 0.9rem; margin-top: 8px; } @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================= TIMELINE (cómo trabajamos) ============================================================================= */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .timeline.cols-3 { grid-template-columns: repeat(3, 1fr); } .tl-step { position: relative; padding-top: 34px; } .tl-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.85rem; color: #04121a; font-weight: 700; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; box-shadow: var(--glow-cyan); } .tl-step::after { content: ''; position: absolute; top: 15px; left: 34px; right: -20px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); } .tl-step:last-child::after { display: none; } .tl-step h3 { font-size: 1.05rem; margin-bottom: 8px; } .tl-step p { color: var(--text-dim); font-size: 0.94rem; } @media (max-width: 820px) { .timeline, .timeline.cols-3 { grid-template-columns: 1fr; } .tl-step { padding-left: 46px; padding-top: 0; min-height: 40px; } .tl-step::before { top: 2px; } .tl-step::after { top: 32px; left: 14px; right: auto; bottom: -22px; width: 1px; height: auto; background: linear-gradient(var(--cyan), transparent); } } /* ============================================================================= CTA FINAL ============================================================================= */ .cta-band { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(34px, 6vw, 64px); text-align: center; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.22), var(--bg-panel)); } .cta-band h2 { margin-bottom: 14px; } .cta-band .lead { margin: 0 auto 26px; } .cta-band .hero-cta { justify-content: center; } /* ============================================================================= FOOTER ============================================================================= */ .footer { border-top: 1px solid var(--line); background: #070a14; padding-block: 52px 30px; margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; margin-bottom: 34px; } .footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 14px; font-family: var(--font-mono); } .footer a { color: var(--text-dim); display: block; padding: 4px 0; transition: color .2s; } .footer a:hover { color: var(--cyan); } .footer .brand { margin-bottom: 14px; } .footer .socials { display: flex; gap: 10px; margin-top: 14px; } .footer .socials a { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; } .footer .socials a:hover { border-color: var(--cyan); } .legal-note { font-size: 0.8rem; color: var(--text-dim); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px; background: rgba(245,179,1,0.03); border-left: 3px solid var(--signal); margin-bottom: 24px; } .footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-dim); border-top: 1px solid var(--line-soft); padding-top: 20px; } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================================= BOTONES FLOTANTES (WhatsApp + Chat) ============================================================================= */ .float-wa { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #05270f; display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(37,211,102,.6); transition: transform .2s; } .float-wa:hover { transform: scale(1.08); } .float-wa svg { width: 30px; height: 30px; } .float-chat { position: fixed; left: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 600; box-shadow: var(--glow-blue); border: 1px solid rgba(255,255,255,.14); transition: transform .2s; } .float-chat:hover { transform: translateY(-2px); } .float-chat svg { width: 20px; height: 20px; } /* Panel del chatbot */ .chat-panel { position: fixed; left: 20px; bottom: 20px; z-index: 95; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px)); background: var(--bg-panel); border: 1px solid var(--line); border-radius: 18px; display: none; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); } .chat-panel.open { display: flex; } .chat-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg, rgba(37,99,235,.2), transparent); } .chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; } .chat-head b { font-size: 0.98rem; } .chat-head small { color: var(--text-dim); font-size: 0.75rem; display: block; } .chat-head .close { margin-left: auto; background: none; border: none; color: var(--text-dim); padding: 4px; } .chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 84%; padding: 10px 13px; border-radius: 13px; font-size: 0.92rem; line-height: 1.5; } .msg.bot { background: #0c1730; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; } .msg.user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .msg.bot a { color: var(--cyan); text-decoration: underline; } .chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; } .chat-suggest button { font-size: 0.78rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: #0c1730; color: var(--text-dim); } .chat-suggest button:hover { border-color: var(--cyan); color: var(--cyan); } .chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat-form input { flex: 1; background: #0c1730; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--text); font: inherit; font-size: 0.9rem; } .chat-form input:focus { outline: none; border-color: var(--cyan); } .chat-form button { background: var(--cyan); color: #04121a; border: none; border-radius: 10px; padding: 0 14px; display: grid; place-items: center; } .chat-form button svg { width: 18px; height: 18px; } .chat-disclaimer { font-size: 0.7rem; color: var(--text-dim); text-align: center; padding: 0 12px 10px; } .typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); margin: 0 1px; animation: blink 1.2s infinite; } .typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s} @keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} } /* ============================================================================= PÁGINAS INTERNAS ============================================================================= */ .page-head { padding-top: calc(var(--nav-h) + 54px); padding-bottom: 20px; } .page-head h1 { margin-bottom: 14px; } /* Filtros de proyectos */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .filter-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); font-size: 0.9rem; transition: all .2s; } .filter-btn:hover { border-color: var(--cyan); color: var(--text); } .filter-btn.active { background: var(--cyan); color: #04121a; border-color: var(--cyan); font-weight: 600; } .project-card .plan-thumb { aspect-ratio: 16/10; border-radius: 12px; margin-bottom: 16px; background: #0a1428; border: 1px solid var(--line); position: relative; overflow: hidden; } .project-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .project-result { color: var(--signal); font-family: var(--font-mono); font-size: 0.85rem; } /* Regiones */ .region-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .region-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-panel-2); } .region-item .n { font-family: var(--font-mono); color: var(--cyan); font-weight: 700; } /* Blog */ .post-card { display: flex; flex-direction: column; } .post-card .meta { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 10px; font-family: var(--font-mono); } .post-card h3 { margin-bottom: 10px; } .post-card p { color: var(--text-dim); font-size: 0.95rem; flex: 1; } .post-card .read { color: var(--cyan); font-size: 0.9rem; margin-top: 14px; display: inline-flex; gap: 6px; align-items: center; } /* Artículo */ .article { max-width: 760px; margin-inline: auto; } .article-body { font-size: 1.05rem; line-height: 1.8; } .article-body h2 { margin: 40px 0 16px; } .article-body h3 { margin: 28px 0 12px; } .article-body p { margin-bottom: 18px; color: #cdd7e8; } .article-body ul, .article-body ol { margin: 0 0 18px 22px; color: #cdd7e8; } .article-body li { margin-bottom: 8px; } .article-body strong { color: var(--text); } .toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--bg-panel-2); margin-bottom: 30px; } .toc h4 { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin-bottom: 10px; } .toc a { display: block; color: var(--text-dim); padding: 4px 0; font-size: 0.94rem; } .toc a:hover { color: var(--cyan); } /* ============================================================================= HERRAMIENTAS (calculadoras) ============================================================================= */ .tool { background: linear-gradient(160deg, var(--bg-panel), #0b1428); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; } .tool h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .tool > p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 18px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; } .field input, .field select { width: 100%; background: #0a1428; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--text); font: inherit; font-family: var(--font-mono); font-size: 0.95rem; } .field input:focus, .field select:focus { outline: none; border-color: var(--cyan); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .result { margin-top: 18px; padding: 16px; border-radius: 12px; background: #0a1428; border: 1px solid var(--line); border-left: 3px solid var(--cyan); } .result.warn { border-left-color: var(--signal); } .result.bad { border-left-color: #ef4444; } .result .r-main { font-family: var(--font-mono); font-size: 1.3rem; color: var(--cyan); font-weight: 700; } .result .r-line { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 4px 0; color: var(--text-dim); border-bottom: 1px dashed var(--line-soft); } .result .r-line b { color: var(--text); font-family: var(--font-mono); } .result .r-note { font-size: 0.82rem; margin-top: 10px; } .result .r-note.ok { color: #4ade80; } .result .r-note.no { color: #f87171; } .tool .ask-wa { margin-top: 14px; font-size: 0.85rem; } /* Acordeón FAQ */ .acc-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--bg-panel-2); } .acc-q { width: 100%; text-align: left; padding: 16px 18px; background: none; border: none; color: var(--text); font-weight: 600; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .acc-q svg { width: 18px; height: 18px; transition: transform .25s; flex-shrink: 0; color: var(--cyan); } .acc-item.open .acc-q svg { transform: rotate(45deg); } .acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .acc-a-inner { padding: 0 18px 16px; color: var(--text-dim); font-size: 0.95rem; } /* Formulario de contacto */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } } .form-msg { padding: 14px 16px; border-radius: 10px; margin-top: 14px; font-size: 0.9rem; display: none; } .form-msg.ok { display: block; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #86efac; } .form-msg.err { display: block; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } textarea { resize: vertical; min-height: 120px; } /* Utilidades */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .center { text-align: center; } .mt { margin-top: 40px; } .mt-sm { margin-top: 20px; } .text-dim { color: var(--text-dim); } .divider { height: 1px; background: var(--line); border: none; margin: 40px 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }