/* ===================================================================== TOMÁS KAST — Diputado por La Araucanía, Distrito 23 Sistema visual con la identidad REAL de tomaskast.com (Elementor Global Kit, kit-43): navy + celeste + blanco, extraída del CSS servido por el sitio, no de una inspección visual aproximada. Tipografía real: Oswald (títulos) + Karla (cuerpo). El celeste literal de marca (#00BFFF) no cumple contraste como texto ni como fondo de botón con texto blanco (2.1:1, bajo el 4.5:1 de AA), así que el acento principal usa el azul medio real (#004999, el propio color de hover/gradiente de la marca, 8.7:1 de contraste) y el celeste queda para texto sobre fondo navy, donde sí rinde (6.1:1). El punto medio quedó documentado, ajustado a fin de que el texto siga siendo perfectamente legible. ===================================================================== */ :root{ --font-display:"Oswald","Arial Narrow",Arial,sans-serif; /* títulos, real */ --font-body:"Karla",-apple-system,"Segoe UI",Arial,sans-serif; /* cuerpo, real */ --stone:#FFFFFF; /* fondo principal real: no hay body{background} propio en tomaskast.com */ --stone-2:#EEF3F8; /* panel claro alterno, celeste muy pálido derivado del navy (el sitio real no alterna secciones; da aire sin salir de la familia de color) */ --basalt:#133256; /* navy real de marca, color de todos los h1-h6 y del fondo del header/hero/footer reales */ --basalt-2:#004999; /* azul medio real, salida del gradiente del hero/footer real y :hover de sus botones */ --ink:#133256; /* navy real, texto de títulos */ --muted:#666666; /* gris real del cuerpo, aplicado literalmente sobre */ --line:rgba(19,50,86,.14); --line-dark:rgba(255,255,255,.16); --cream:#FFFFFF; --araucaria:#133256; /* navy reutilizado como acento secundario (etiquetas, chips de contacto): la marca real no tiene una segunda familia de color, solo navy + azul + blanco */ --araucaria-d:#0B2036; --araucaria-l:#3D6690; --ember:#004999; /* CTA principal, ver nota de contraste arriba */ --ember-d:#00325C; --ember-l:#00BFFF; /* celeste real, solo sobre fondo navy (6.1:1) */ --accent-red:#E73223; /* rojo real, acento minoritario: borde superior del header, como en el sitio real */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--muted); background:var(--stone);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.no-scroll{overflow:hidden} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08; letter-spacing:-.01em;color:var(--ink)} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:12.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;border:1.5px solid transparent;cursor:pointer;transition:.2s; font-family:var(--font-body);border-radius:2px;white-space:nowrap} .btn .ar{transition:transform .2s} .btn:hover .ar{transform:translateX(4px)} .btn-primary{background:var(--ember);color:#fff} .btn-primary:hover{background:var(--ember-d)} .btn-outline{background:transparent;border-color:rgba(255,255,255,.42);color:var(--cream)} .btn-outline:hover{border-color:var(--cream);background:rgba(255,255,255,.08)} .btn-outline-dark{background:transparent;border-color:rgba(19,50,86,.35);color:var(--ink)} .btn-outline-dark:hover{border-color:var(--ink);background:rgba(19,50,86,.05)} .btn-araucaria{background:var(--araucaria);color:#fff} .btn-araucaria:hover{background:var(--araucaria-d)} /* ===================================================================== HEADER ===================================================================== */ .site-header{position:sticky;top:0;z-index:60;background:var(--basalt);border-bottom:1px solid var(--line-dark); border-top:4px solid var(--accent-red);transition:box-shadow .2s} .site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.28)} .header-inner{max-width:1180px;margin:0 auto;padding:0 28px;height:82px;display:flex;align-items:center; justify-content:space-between;gap:20px} .brand{display:flex;flex-direction:column;line-height:1.1;flex:none} .brand .name{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--cream);letter-spacing:.01em;white-space:nowrap} .brand .role{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-l);margin-top:4px;font-weight:600;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:0;flex:none} .nav-links a{padding:10px;font-size:12px;letter-spacing:.03em;text-transform:uppercase;font-weight:600; color:rgba(255,255,255,.72);border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;flex:none} .nav-links a:hover{color:var(--cream)} .nav-links a.active{color:var(--cream);border-color:var(--ember)} .nav-links .nav-cta{margin-left:6px;background:var(--ember);color:#fff;padding:11px 15px;border:none} .nav-links .nav-cta:hover{background:var(--ember-d)} .burger{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;position:relative} .burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--cream);transition:.2s} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px} .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .mobile-nav{display:none;background:var(--basalt-2);border-top:1px solid var(--line-dark)} .mobile-nav.open{display:block} .mobile-nav a{display:block;padding:16px 28px;font-size:14px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:rgba(255,255,255,.85);border-bottom:1px solid var(--line-dark)} .mobile-nav a.nav-cta-mobile{color:var(--cream)} /* ===================================================================== SECCIONES genéricas ===================================================================== */ .section{padding:88px 0} .section.dark{background:var(--basalt);color:var(--cream)} .section.stone2{background:var(--stone-2)} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;font-weight:700;color:var(--araucaria)} .eyebrow::before{content:"";width:9px;height:9px;background:var(--ember);flex:none} .eyebrow.on-dark{color:var(--ember-l)} .section h2{font-size:clamp(28px,4vw,44px);margin-top:14px} .section.dark h2{color:var(--cream)} .hr{height:1px;background:var(--line);margin:26px 0} .hr.on-dark{background:var(--line-dark)} .lead{font-size:18px;color:var(--muted);max-width:66ch;margin-top:16px} .lead.on-dark{color:rgba(255,255,255,.82)} .section-head{max-width:70ch} .section-head.center{text-align:center;margin:0 auto} .section-head.center .eyebrow{justify-content:center} .section-head.center .lead{margin-left:auto;margin-right:auto} .body-copy p{font-size:17px;color:var(--muted);max-width:70ch;margin-top:18px;line-height:1.7} .body-copy p b,.body-copy p strong{color:var(--ink);font-weight:700} .body-copy.on-dark p{color:rgba(255,255,255,.85)} .body-copy.on-dark p b,.body-copy.on-dark p strong{color:var(--cream)} /* ===================================================================== BREADCRUMB / kicker de página interior ===================================================================== */ .page-hero{background:var(--basalt);color:var(--cream);padding:120px 0 88px} .crumbs{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:18px} .crumbs a:hover{color:var(--ember-l)} .crumbs span{opacity:.5;margin:0 8px} .page-hero h1{font-size:clamp(32px,4.8vw,52px);max-width:22ch;line-height:1.05;letter-spacing:-.01em; text-transform:uppercase;color:var(--cream)} .page-hero .sub{margin-top:16px;font-size:19px;color:rgba(255,255,255,.82);max-width:56ch;font-style:italic; font-family:var(--font-body)} /* ===================================================================== HERO home ===================================================================== */ .hero{background:linear-gradient(175deg,var(--basalt) 0%,var(--basalt-2) 100%);color:var(--cream); position:relative;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding-top:56px;padding-bottom:56px} .kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#4DD4FF; display:flex;align-items:center;gap:10px} .kicker::before{content:"";width:26px;height:2px;background:var(--ember)} .hero h1{font-size:clamp(34px,5.6vw,64px);line-height:1.02;margin-top:18px;max-width:16ch;letter-spacing:-.01em; text-transform:uppercase;color:var(--cream)} .hero .lead-on-dark{margin-top:22px;color:rgba(255,255,255,.86);font-size:18.5px;max-width:56ch;line-height:1.65} .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero-media{position:relative;display:flex;justify-content:center} .hero-media img{display:block;width:auto;max-width:100%;max-height:620px;filter:drop-shadow(0 34px 60px rgba(0,0,0,.55))} .hero-media .plinth{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:70%;height:14px; background:radial-gradient(closest-side, rgba(0,0,0,.45), transparent)} /* ===================================================================== PILARES (dos ejes, home) ===================================================================== */ .pillars{display:grid;grid-template-columns:1fr 1fr;margin-top:52px} .pillar{min-height:440px;padding:52px 46px;display:flex;flex-direction:column;justify-content:flex-end; color:#fff;position:relative;transition:.25s} .pillar.turismo{background:var(--araucaria)} .pillar.turismo:hover{background:var(--araucaria-d)} .pillar.seguridad{background:var(--ember-d)} .pillar.seguridad:hover{background:#001d38} .pillar .num{font-family:var(--font-display);font-size:14px;opacity:.72;letter-spacing:.1em} .pillar h3{font-size:clamp(24px,3vw,34px);margin-top:10px;color:#fff} .pillar p{margin-top:14px;max-width:40ch;color:rgba(255,255,255,.9);font-size:15px} .pillar .go{margin-top:24px;font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase; display:inline-flex;gap:8px;align-items:center;transition:.2s} .pillar:hover .go{gap:12px} /* ===================================================================== FRANJA de estadísticas (turismo) ===================================================================== */ .stat-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:44px} .stat{padding:28px 24px 22px;border-left:1px solid var(--line)} .stat:first-child{border-left:none;padding-left:0} .stat .n{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,3.6vw,48px);color:var(--ember-l);line-height:1} .stat .t{margin-top:10px;font-size:14px;color:var(--cream);font-weight:700} .stat .s{margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.5} .source-note{margin-top:20px;font-size:12.5px;color:var(--muted);font-style:italic;border-left:2px solid var(--araucaria);padding-left:14px} /* ===================================================================== Lista de leyes / chips de hechos (seguridad) ===================================================================== */ .fact-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .fact-chip{border:1px solid var(--line);padding:10px 16px;font-size:13px;font-weight:700;color:var(--ink);background:#fff} .fact-list.on-dark .fact-chip{border-color:var(--line-dark);color:var(--cream);background:transparent} .data-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);margin-top:40px;border:1px solid var(--line-dark)} .data-cell{background:var(--basalt);padding:30px 26px} .data-cell .n{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.4vw,44px);color:var(--ember-l);line-height:1} .data-cell .t{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.85);font-weight:600;line-height:1.5} /* ===================================================================== Índice numerado (historia / prioridades / demo) ===================================================================== */ .idx-list{margin-top:38px;border-top:1px solid var(--line)} .idx-list.on-dark{border-top:1px solid var(--line-dark)} .idx-row{display:grid;grid-template-columns:74px 1fr;gap:22px;padding:32px 0;border-bottom:1px solid var(--line)} .idx-list.on-dark .idx-row{border-bottom:1px solid var(--line-dark)} .idx-row .num{font-family:var(--font-display);font-weight:600;font-size:27px;color:rgba(19,50,86,.28)} .idx-list.on-dark .idx-row .num{color:rgba(255,255,255,.28)} .idx-row h3{font-size:20px} .idx-list.on-dark .idx-row h3{color:var(--cream)} .idx-row p{margin-top:9px;color:var(--muted);font-size:15px;max-width:68ch;line-height:1.6} .idx-list.on-dark .idx-row p{color:rgba(255,255,255,.75)} /* ===================================================================== Cita ===================================================================== */ .quote{max-width:900px;margin:0 auto;text-align:center} .quote p{font-family:var(--font-display);font-weight:500;font-size:clamp(23px,3.1vw,36px);line-height:1.28; letter-spacing:-.005em;color:var(--ink);text-wrap:balance} .section.dark .quote p{color:var(--cream)} .quote .who{margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .section.dark .quote .who{color:rgba(255,255,255,.6)} /* ===================================================================== Feature (foto + texto) ===================================================================== */ .feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center} .feature .ph{width:100%;display:block;border:1px solid var(--line)} .feature.invert{grid-template-columns:1.15fr .85fr} .feature.invert .ph{order:2} .feature h3{font-size:clamp(24px,2.8vw,34px);margin-top:14px} .feature p{margin-top:16px;color:var(--muted);font-size:16px;max-width:48ch;line-height:1.65} /* ===================================================================== CTA final ===================================================================== */ .cta-band{background:var(--basalt);color:var(--cream);padding:96px 0;text-align:center} .cta-band h2{color:var(--cream)} .cta-band p{color:rgba(255,255,255,.85);max-width:58ch;margin:16px auto 30px;font-size:17px} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ===================================================================== Contacto ===================================================================== */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .contact-list{margin-top:24px;border-top:1px solid var(--line)} .contact-row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline} .contact-row .lb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--araucaria);font-weight:700} .contact-row .vl{font-size:16px;color:var(--ink)} .contact-row .vl a{border-bottom:1px solid var(--araucaria);padding-bottom:1px;font-weight:600} .social-row{display:flex;gap:10px;margin-top:10px} .social-row a{width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;transition:.2s} .social-row a:hover{border-color:var(--araucaria);background:var(--araucaria);color:#fff} .social-row svg{width:18px;height:18px} .note-box{border:1px solid var(--line);background:var(--stone-2);padding:26px 28px;font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:28px} /* ===================================================================== CHAT — Gestión en Terreno (asistente conversacional) ===================================================================== */ .chat-shell{max-width:660px;margin:0 auto;border:1px solid var(--line);background:#fff;box-shadow:0 24px 60px rgba(19,50,86,.12)} .chat-topbar{background:var(--basalt);color:var(--cream);padding:18px 22px;display:flex;align-items:center;gap:12px} .chat-topbar .dot{width:9px;height:9px;border-radius:50%;background:#4CAF6A;flex:none;box-shadow:0 0 0 3px rgba(76,175,106,.25)} .chat-topbar .who{display:flex;flex-direction:column;line-height:1.2} .chat-topbar .who b{font-size:14.5px;font-weight:700} .chat-topbar .who span{font-size:11.5px;color:rgba(255,255,255,.65)} .chat-topbar .reset{margin-left:auto;background:transparent;border:1px solid var(--line-dark);color:rgba(255,255,255,.75); font-size:11.5px;padding:8px 12px;cursor:pointer;letter-spacing:.04em;text-transform:uppercase} .chat-topbar .reset:hover{color:var(--cream);border-color:rgba(255,255,255,.5)} .chat-window{height:460px;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px;background:#F6F9FC} .msg{max-width:82%;padding:12px 16px;font-size:14.5px;line-height:1.55;border-radius:2px} .msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink)} .msg.user{align-self:flex-end;background:var(--araucaria);color:#fff} .msg b{font-weight:700} .msg.folio{border:1.5px solid var(--ember);background:#fff} .msg.folio .folio-code{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ember-d); display:block;margin:6px 0 2px;letter-spacing:.02em} .quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 22px 18px;background:#F6F9FC} .quick button{border:1.5px solid var(--araucaria);color:var(--araucaria);background:#fff;padding:9px 15px; font-size:13px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit} .quick button:hover{background:var(--araucaria);color:#fff} .chat-form{display:flex;border-top:1px solid var(--line)} .chat-form input{flex:1;border:none;padding:17px 18px;font-size:14.5px;font-family:inherit;color:var(--ink)} .chat-form input:focus{outline:none} .chat-form button{width:58px;border:none;background:var(--ember);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.15s} .chat-form button:hover{background:var(--ember-d)} .chat-form button svg{width:19px;height:19px} .typing{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:#fff;border:1px solid var(--line)} .typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;animation:tblink 1.2s infinite} .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s} @keyframes tblink{0%,80%,100%{opacity:.3}40%{opacity:1}} /* ===================================================================== MANTENTE INFORMADO (boletín, home) — reusa .section-head, .btn-primary y .source-note; solo se agregan el grid de inputs y su fila. ===================================================================== */ .newsletter-form{max-width:760px;margin:38px auto 0} .newsletter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .newsletter-row input{border:1px solid var(--line);background:#fff;padding:15px 16px; font-size:14.5px;font-family:inherit;color:var(--ink);width:100%} .newsletter-row input::placeholder{color:var(--muted)} .newsletter-row input:focus{outline:none;border-color:var(--ember)} .newsletter-form .btn{margin-top:18px} .newsletter-note{max-width:760px;margin:18px auto 0} /* ===================================================================== SÍGUEME (home) — reusa .idx-list/.idx-row, el título de cada fila queda envuelto en un link real al canal. ===================================================================== */ .idx-row a.chan{color:inherit} .idx-row a.chan:hover h3{color:var(--ember-d)} .idx-row a.chan h3{transition:.15s} /* ===================================================================== BOTÓN FLOTANTE — "Reportar un problema", inyectado por main.js en todas las páginas salvo Gestión en Terreno. Mismo .btn.btn-primary del resto del sitio, solo se agrega la posición fija. ===================================================================== */ .floating-report{position:fixed;right:22px;bottom:22px;z-index:70; box-shadow:0 10px 28px rgba(19,50,86,.4);transition:opacity .2s,transform .2s} .floating-report svg{width:16px;height:16px;flex:none} .floating-report.is-hidden{opacity:0;transform:translateY(8px);pointer-events:none} @media(max-width:640px){ .floating-report{right:14px;bottom:14px;padding:12px 15px;font-size:10.5px;gap:7px} } /* ===================================================================== FOOTER ===================================================================== */ .site-footer{background:var(--basalt);color:rgba(255,255,255,.72);padding:64px 0 28px;font-size:14px; border-top:1px solid var(--line-dark)} .site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:42px;align-items:start} .site-footer .fbrand{font-family:var(--font-display);font-size:20px;color:var(--cream);font-weight:700} .site-footer .frole{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-l);margin-top:6px;font-weight:600} .site-footer .fdesc{margin-top:16px;max-width:34ch;line-height:1.65;color:rgba(255,255,255,.62)} .site-footer h4{color:var(--cream);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:700} .site-footer a{display:block;margin-bottom:11px;transition:.2s} .site-footer a:hover{color:var(--ember-l)} .site-footer .fsoc{display:flex;gap:8px;margin-top:4px} .site-footer .fsoc a{width:38px;height:38px;border:1px solid var(--line-dark);display:grid;place-items:center;margin:0} .site-footer .fsoc a:hover{background:var(--ember);border-color:var(--ember);color:#fff} .site-footer .fsoc svg{width:16px;height:16px} .site-footer .bottom{border-top:1px solid var(--line-dark);margin-top:46px;padding-top:22px;display:flex; justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:8px} /* Página legal (privacidad): escala tipográfica propia */ .legal-copy h2{font-size:21px;margin:40px 0 4px} .legal-copy p{margin-top:12px;font-size:15.5px;line-height:1.7} .legal-copy p code{font-size:13.5px} /* ===================================================================== Responsive ===================================================================== */ @media(max-width:1180px){ .nav-links{display:none} .burger{display:block} } @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px} .hero-media{padding-top:30px} .hero-media img{max-width:280px} .pillars{grid-template-columns:1fr} .pillar{min-height:300px} .stat-row{grid-template-columns:1fr 1fr} .stat{border-left:none;padding-left:0} .stat:nth-child(2n){border-left:1px solid var(--line);padding-left:24px} .data-row{grid-template-columns:1fr} .feature,.feature.invert{grid-template-columns:1fr} .feature .ph,.feature.invert .ph{order:-1} .contact-grid{grid-template-columns:1fr;gap:36px} .site-footer .cols{grid-template-columns:1fr 1fr} .idx-row{grid-template-columns:52px 1fr;gap:16px} .section{padding:60px 0} .page-hero{padding:96px 0 64px} .cta-band{padding:64px 0} .newsletter-row{grid-template-columns:1fr} } @media(max-width:640px){ .header-inner{height:72px} .stat-row{grid-template-columns:1fr 1fr} .site-footer .cols{grid-template-columns:1fr} .contact-row{grid-template-columns:1fr;gap:4px} .chat-window{height:420px} .msg{max-width:92%} }