/* ========================================================================== dudsonenterprise.com — hoja de la portada (es y en) Identidad v2 (manual 2026-08-14): marfil de día, carbón de noche, Fraunces, naranja eléctrico como único acento. Exclusiva de este dominio. ATENCIÓN: AL TOCAR ESTE ARCHIVO, SUBIR EL ?v= EN LAS DOS PORTADAS: /index.html y /en/index.html El .htaccess fuerza no-cache en el HTML pero NO en el CSS. Los tokens repiten NOMBRE y VALOR con assets/servicios.css. Si un valor cambia, cambia en las dos hojas o los dos mundos dejan de parecerse. Contrastes MEDIDOS el 2026-08-14, AA en día y en noche: --acc de día es el naranja oscurecido #B23A05 (el pleno #FF5C1F da 2,74:1 sobre marfil y NO puede ser texto de día); el pleno vive en --naranja para botones (texto tinta, 5,8:1) y resplandores. No «corregirlo» a ojo. ========================================================================== */ :root{ --ink:#F5F1E8; --panel:#FDFBF6; --panel-2:#F8F3E7; --line:#E4DECE; --line-hi:#C7BFA9; --text:#16171A; --muted:#44474F; --dim:#5F626B; --acc:178,58,5; /* naranja tinta #B23A05: texto y gráficos con AA de día */ --naranja:#FF5C1F; /* naranja eléctrico pleno: botones y resplandor */ --apoyo:#1F4E5F; /* azul petróleo, apoyo puntual */ --malo:#A9271F; --nav-fondo:rgba(245,241,232,.82); --serif:"Fraunces",Lora,Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --ink:#0E0E10; --panel:#16171A; --panel-2:#1B1D21; --line:#24262B; --line-hi:#39414A; --text:#F4F4F5; --muted:#9AA0A6; --dim:#7E868E; --acc:255,92,31; --apoyo:#8FBECD; --malo:#FF9E9E; --nav-fondo:rgba(14,14,16,.78); } } :root[data-tema="oscuro"]{ --ink:#0E0E10; --panel:#16171A; --panel-2:#1B1D21; --line:#24262B; --line-hi:#39414A; --text:#F4F4F5; --muted:#9AA0A6; --dim:#7E868E; --acc:255,92,31; --apoyo:#8FBECD; --malo:#FF9E9E; --nav-fondo:rgba(14,14,16,.78); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; overflow-x:hidden; color:var(--text); font-family:var(--sans); font-size:16px; /* El halo va en PÍXELES: los % del fondo de body se resuelven contra entero y el halo caería fuera de la pantalla (lección medida de la v1). */ background: radial-gradient(920px 480px at 14% -80px, rgba(255,92,31,.06), transparent 62%), var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wrap{ max-width:1060px; margin:0 auto; padding:0 28px; } @media (max-width:600px){ .wrap{ padding:0 20px; } } section{ position:relative; z-index:2; } ::selection{ background:rgba(255,92,31,.28); } /* ═════ NAV ═════ */ nav.top{ position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); background:var(--nav-fondo); border-bottom:1px solid var(--line); } nav.top .wrap{ display:flex; align-items:center; gap:16px; height:66px; } .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); } .logo img{ height:26px; width:auto; display:block; } .logo .logo-noche{ display:none; } :root[data-tema="oscuro"] .logo .logo-dia{ display:none; } :root[data-tema="oscuro"] .logo .logo-noche{ display:block; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) .logo .logo-dia{ display:none; } :root:not([data-tema="claro"]) .logo .logo-noche{ display:block; } } .nav-links{ margin-left:auto; display:flex; align-items:center; gap:20px; } /* :not(.btn) obligatorio: sin él «.nav-links a» pinta el botón de gris (v1). */ .nav-links a:not(.btn){ font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s; } .nav-links a:not(.btn):hover{ color:var(--text); } .tema{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:100px; cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--muted); transition:color .2s, border-color .2s; } .tema:hover{ color:var(--text); border-color:var(--line-hi); } .tema svg{ display:block; } .tema .sol{ display:none; } :root[data-tema="oscuro"] .tema .luna{ display:none; } :root[data-tema="oscuro"] .tema .sol{ display:block; } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) .tema .luna{ display:none; } :root:not([data-tema="claro"]) .tema .sol{ display:block; } } .lang{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); border-radius:100px; padding:6px 11px; } .lang b{ color:var(--text); font-weight:500; } .nav-links span.lang a{ color:var(--muted); text-decoration:none; transition:color .2s; } .nav-links span.lang a:hover{ color:rgb(var(--acc)); } .lang a{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px; margin:-4px 0; } .btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:14px; font-weight:600; border-radius:100px; padding:12px 22px; background:var(--naranja); color:#16171A; border:1px solid rgba(22,23,26,.30); transition:transform .2s ease, box-shadow .2s ease; } .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(255,92,31,.85); } .btn:active{ transform:translateY(0) scale(.98); } .btn.ghost{ background:transparent; color:var(--text); border-color:var(--line-hi); } .btn.ghost:hover{ border-color:rgb(var(--acc)); box-shadow:none; } @media (max-width:760px){ .nav-links > a:not(.btn){ display:none; } } @media (max-width:560px){ .logo img{ height:24px; } .nav-links{ gap:12px; } } /* En pantallas estrechas cede el nombre, no el botón: el logotipo entero se sustituye por el isotipo (la D sola), cada uno con su par día/noche. */ .logo .iso-dia, .logo .iso-noche{ display:none; } @media (max-width:420px){ .logo .logo-dia, .logo .logo-noche{ display:none !important; } .logo .iso-dia{ display:block; height:26px; } :root[data-tema="oscuro"] .logo .iso-dia{ display:none; } :root[data-tema="oscuro"] .logo .iso-noche{ display:block; height:26px; } } @media (max-width:420px) and (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) .logo .iso-dia{ display:none; } :root:not([data-tema="claro"]) .logo .iso-noche{ display:block; height:26px; } } /* ═════ HERO ═════ */ .hero{ padding:104px 0 88px; } @media (max-width:600px){ .hero{ padding:64px 0 56px; } } .eyebrow{ margin:0 0 22px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); } h1{ margin:0; font-family:var(--serif); font-weight:560; font-size:clamp(42px,7.2vw,80px); line-height:1.02; letter-spacing:-.02em; color:var(--text); max-width:15ch; font-variation-settings:"opsz" 144; } /* El énfasis del h1: cursiva de la MISMA familia, subrayada con el naranja pleno. El color del texto no cambia: así el énfasis pasa AA hasta de día. */ h1 em{ font-style:italic; color:inherit; text-decoration:underline; text-decoration-color:var(--naranja); text-decoration-thickness:.06em; text-underline-offset:.08em; } .hero h2.sub{ margin:20px 0 0; font-family:var(--sans); font-weight:500; font-size:clamp(17px,2.3vw,21px); line-height:1.42; letter-spacing:-.005em; color:var(--text); max-width:34ch; } .hero p.lead{ margin:22px 0 0; font-size:clamp(16px,2.1vw,19px); line-height:1.62; color:var(--muted); max-width:52ch; } .hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:36px; } .stack-label{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin:46px 0 12px; } .stack{ display:flex; flex-wrap:wrap; gap:9px; margin-top:0; } .pill{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:7px 12px; } /* ═════ SECCIONES ═════ */ .sec{ padding:84px 0; border-top:1px solid var(--line); } @media (max-width:600px){ .sec{ padding:58px 0; } } .sec-label{ margin:0 0 16px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--acc)); } h2{ margin:0 0 18px; font-family:var(--serif); font-weight:560; font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-.018em; color:var(--text); max-width:22ch; font-variation-settings:"opsz" 90; } h3{ font-family:var(--serif); font-weight:600; color:var(--text); letter-spacing:-.012em; } .sec > .wrap > p.intro{ margin:0; font-size:16.5px; line-height:1.66; color:var(--muted); max-width:56ch; } /* Problema: lista con filete, sin cajas — respira distinto que las tarjetas. */ .pain{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:12px; } .pain li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; line-height:1.58; color:var(--muted); border-left:2px solid var(--line-hi); padding:4px 0 4px 18px; } .pain li b{ color:var(--text); font-weight:600; } /* ═════ MÉTODO DUDSON — solo el concepto, nunca el desglose ═════ */ .metodo{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; margin-top:38px; align-items:start; } @media (max-width:820px){ .metodo{ grid-template-columns:1fr; gap:24px; } } .metodo .prosa p{ margin:0 0 14px; font-size:15.5px; line-height:1.68; color:var(--muted); max-width:56ch; } .metodo .prosa p b{ color:var(--text); font-weight:600; } .metodo-ficha{ border:1px solid var(--line); border-radius:18px; padding:26px 28px; background:var(--panel); } .metodo-ficha .et{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--acc)); margin:0 0 14px; } .metodo-ficha ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .metodo-ficha li{ display:flex; gap:11px; font-size:14px; line-height:1.55; color:var(--muted); } .metodo-ficha li svg{ flex:none; margin-top:3px; color:rgb(var(--acc)); } .metodo-ficha li b{ color:var(--text); font-weight:600; } /* ═════ EL DIAGNÓSTICO — la tarjeta destacada con el resplandor de la casa ═════ */ .oferta{ margin-top:40px; border:1px solid rgba(255,92,31,.36); border-radius:22px; overflow:hidden; background:linear-gradient(180deg, rgba(255,92,31,.055), rgba(255,92,31,.012)), var(--panel); box-shadow:0 0 0 1px rgba(255,92,31,.10), 0 0 44px -14px rgba(255,92,31,.55); } .oferta-cuerpo{ display:grid; grid-template-columns:1fr 300px; gap:36px; padding:34px 36px 30px; } @media (max-width:820px){ .oferta-cuerpo{ grid-template-columns:1fr; padding:26px 24px 22px; } } .oferta h3{ margin:0 0 12px; font-size:clamp(23px,3vw,30px); line-height:1.12; } .oferta .que{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:11px; } .oferta .que li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:var(--muted); } .oferta .que li svg{ flex:none; margin-top:3px; color:rgb(var(--acc)); } .oferta .que li b{ color:var(--text); font-weight:600; } .oferta-precio{ text-align:left; } .oferta-precio .cifra{ font-family:var(--serif); font-weight:560; font-size:52px; line-height:1; color:var(--text); margin:2px 0 6px; } .oferta-precio .cifra small{ font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:400; } .oferta-precio .meta{ font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--muted); margin:0 0 18px; } .oferta-precio .btn{ width:100%; justify-content:center; } .oferta-bonif{ border-top:1px solid var(--line); padding:18px 36px 20px; font-size:14px; line-height:1.66; color:var(--muted); } @media (max-width:820px){ .oferta-bonif{ padding:16px 24px 18px; } } .oferta-bonif b{ color:var(--text); font-weight:600; } .plan-note{ margin:22px 0 0; font-size:13.5px; line-height:1.68; color:var(--muted); max-width:74ch; } .plan-note b{ color:var(--text); font-weight:600; } .plan-note a{ color:rgb(var(--acc)); text-decoration:none; border-bottom:1px solid rgba(var(--acc),.35); } .plan-note a:hover{ border-bottom-color:rgb(var(--acc)); } /* ═════ CASO REAL ═════ */ .case{ margin-top:40px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel); } .case-head{ padding:30px 30px 0; } .case-head .tagline{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--apoyo); margin:0 0 10px; } .case-head h3{ margin:0 0 12px; font-family:var(--serif); font-weight:560; font-size:27px; line-height:1.18; color:var(--text); letter-spacing:-.012em; max-width:26ch; } .case-head p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--muted); max-width:60ch; } .case-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:30px; border-top:1px solid var(--line); } @media (max-width:640px){ .case-metrics{ grid-template-columns:1fr; } } .metric{ background:var(--panel-2); padding:22px 24px; } .metric b{ display:block; font-family:var(--serif); font-size:30px; font-weight:560; color:rgb(var(--acc)); line-height:1; margin-bottom:7px; } .metric span{ font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); } /* ═════ PROCESO ═════ */ .steps{ counter-reset:s; display:grid; gap:16px; margin-top:40px; } .step{ display:flex; gap:20px; align-items:flex-start; border:1px solid var(--line); border-radius:16px; padding:24px 26px; background:var(--panel); } .step::before{ counter-increment:s; content:"0" counter(s); font-family:var(--mono); font-size:12px; color:rgb(var(--acc)); padding-top:4px; flex:none; } .step h3{ margin:0 0 7px; font-size:22px; } .step p{ margin:0; font-size:14px; line-height:1.62; color:var(--muted); max-width:60ch; } /* ═════ CTA FINAL ═════ */ .final{ margin:0 0 80px; border:1px solid var(--line); border-radius:22px; padding:56px 44px; text-align:center; background: radial-gradient(600px 260px at 50% 0%, rgba(255,92,31,.06), transparent 70%), var(--panel); } @media (max-width:600px){ .final{ padding:40px 24px; } } .final h2{ margin:0 auto 14px; max-width:18ch; } .final p{ margin:0 auto 30px; font-size:16px; line-height:1.62; color:var(--muted); max-width:48ch; } footer{ border-top:1px solid var(--line); padding:34px 0 44px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim); } footer .wrap{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; } footer a{ color:var(--muted); text-decoration:none; display:inline-block; padding:5px 0; } footer a:hover{ color:var(--text); } a:focus-visible, .btn:focus-visible, button:focus-visible{ outline:2px solid rgb(var(--acc)); outline-offset:3px; border-radius:6px; } /* Se apaga el movimiento automático, NO los hover: en Windows esta preferencia viene activada de fábrica en muchos equipos (lección v1, no repetirla). */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; } html{ scroll-behavior:auto; } } /* ═════ FORMULARIO DE DIAGNÓSTICO — bloque #contacto ═════ */ .diag{ max-width:560px; margin:34px auto 0; text-align:left; } .diag .fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:560px){ .diag .fila{ grid-template-columns:1fr; } } .campo{ display:block; margin-bottom:18px; } .campo span{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; } .campo input, .campo select, .campo textarea{ width:100%; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; border:1px solid var(--line-hi); border-radius:12px; padding:12px 14px; } .campo textarea{ min-height:120px; resize:vertical; } .campo select{ appearance:none; -webkit-appearance:none; cursor:pointer; } .campo input::placeholder, .campo textarea::placeholder{ color:var(--dim); } .campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:rgb(var(--acc)); box-shadow:0 0 0 3px rgba(var(--acc),.16); } /* El desplegable arranca sin nada elegido; su texto guía va apagado. */ .campo select:invalid{ color:var(--dim); } /* Cebo para robots: fuera de pantalla, nunca display:none. */ .trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .enviar{ width:100%; justify-content:center; border-width:1px; cursor:pointer; font-family:var(--sans); } .enviar[disabled]{ opacity:.55; cursor:progress; } .aviso{ margin:16px 0 0; font-size:14px; line-height:1.6; color:var(--muted); text-align:left; } .aviso b{ color:var(--text); font-weight:600; } .aviso.malo b{ color:var(--malo); } .diag-nota{ margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--dim); text-align:left; } .diag-nota a{ color:rgb(var(--acc)); } .recibido{ margin:34px auto 0; max-width:560px; text-align:left; border:1px solid rgba(var(--acc),.34); border-radius:16px; padding:24px 26px; background:linear-gradient(180deg, rgba(var(--acc),.07), rgba(var(--acc),.02)); } .recibido .et{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--acc)); margin:0 0 8px; } .recibido h3{ margin:0 0 10px; font-size:22px; } .recibido p{ margin:0; font-size:14.5px; line-height:1.68; color:var(--muted); } /* ═════ ASISTENTE — burbuja y panel del Diagnóstico exprés ═════ */ .chat{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; } .chat-burbuja{ position:relative; width:56px; height:56px; flex:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--naranja); color:#16171A; border:1px solid rgba(22,23,26,.30); box-shadow:0 14px 34px -12px rgba(255,92,31,.7), 0 2px 8px rgba(0,0,0,.25); transition:transform .2s, box-shadow .2s; } .chat-burbuja:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(255,92,31,.85); } .chat-burbuja:focus-visible{ outline:2px solid rgb(var(--acc)); outline-offset:3px; } .chat-burbuja svg{ display:block; } .chat-burbuja .cerrar{ display:none; } .chat[data-abierto="1"] .chat-burbuja .abrir{ display:none; } .chat[data-abierto="1"] .chat-burbuja .cerrar{ display:block; } /* Punto de aviso: solo hasta que se abre por primera vez. */ .chat-punto{ position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:var(--apoyo); border:2px solid var(--ink); } .chat[data-abierto="1"] .chat-punto, .chat[data-visto="1"] .chat-punto{ display:none; } .chat-panel{ width:min(380px, calc(100vw - 40px)); max-height:min(620px, calc(100vh - 120px)); display:flex; flex-direction:column; overflow:hidden; background:var(--panel); border:1px solid var(--line-hi); border-radius:18px; box-shadow:0 30px 70px -24px rgba(14,14,16,.5); transform-origin:bottom right; } .chat-panel[hidden]{ display:none; } .chat-cab{ flex:none; padding:16px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(var(--acc),.08), transparent); } .chat-cab h2{ margin:0; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--text); max-width:none; } .chat-cab p{ margin:3px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted); } .chat-hilo{ flex:1 1 auto; min-height:180px; overflow-y:auto; overscroll-behavior:contain; padding:18px; display:flex; flex-direction:column; gap:12px; } .chat-msg{ max-width:88%; } .chat-msg p{ margin:0; padding:11px 14px; font-size:14px; line-height:1.6; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; } .chat-msg.bot{ align-self:flex-start; } .chat-msg.bot p{ background:var(--panel-2); border:1px solid var(--line); color:var(--muted); border-bottom-left-radius:5px; } .chat-msg.bot p b{ color:var(--text); font-weight:600; } .chat-msg.yo{ align-self:flex-end; } .chat-msg.yo p{ background:linear-gradient(160deg, rgba(var(--acc),.16), rgba(var(--acc),.08)); border:1px solid rgba(var(--acc),.34); color:var(--text); border-bottom-right-radius:5px; } /* Los tres puntos mientras piensa. Se apagan solos con prefers-reduced-motion por la regla general (animation:none). */ .chat-puntos{ display:flex; gap:5px; padding:14px; } .chat-puntos span{ width:7px; height:7px; border-radius:50%; background:var(--dim); animation:chat-latido 1.3s ease-in-out infinite; } .chat-puntos span:nth-child(2){ animation-delay:.18s; } .chat-puntos span:nth-child(3){ animation-delay:.36s; } @keyframes chat-latido{ 0%,60%,100%{ opacity:.28; } 30%{ opacity:1; } } .chat-fin{ margin:2px 0 0; padding:14px 16px; border-radius:14px; border:1px solid rgba(var(--acc),.32); background:linear-gradient(180deg, rgba(var(--acc),.07), rgba(var(--acc),.02)); font-size:13.5px; line-height:1.62; color:var(--muted); } .chat-fin b{ color:var(--text); font-weight:600; } .chat-fin a{ color:rgb(var(--acc)); } .chat-fin.malo{ border-color:rgba(var(--acc),.2); background:var(--panel-2); } .chat-fin.malo b{ color:var(--malo); } .chat-nota{ flex:none; margin:0; padding:0 18px 12px; font-size:12px; line-height:1.55; color:var(--dim); } .chat-nota a{ color:rgb(var(--acc)); } /* La entrada. La clase del HTML es .chat-forma; la v1 estilaba .chat-form y este bloque nunca aplicó. Corregido el 2026-08-14: nombrar la clase REAL. */ .chat-forma{ flex:none; display:flex; gap:10px; align-items:flex-end; padding:14px 16px; border-top:1px solid var(--line); background:var(--panel-2); } .chat-forma[hidden]{ display:none; } .chat-forma textarea{ flex:1 1 auto; min-height:44px; max-height:120px; resize:none; font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--text); background:var(--ink); border:1px solid var(--line-hi); border-radius:12px; padding:11px 13px; transition:border-color .2s; } .chat-forma textarea::placeholder{ color:var(--dim); } .chat-forma textarea:focus{ outline:none; border-color:rgb(var(--acc)); } .chat-forma textarea:disabled{ opacity:.5; cursor:progress; } .chat-enviar{ flex:none; width:44px; height:44px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--naranja); color:#16171A; border:1px solid rgba(22,23,26,.30); transition:transform .2s, opacity .2s; } .chat-enviar:hover:not(:disabled){ transform:translateY(-1px); } .chat-enviar:disabled{ opacity:.4; cursor:not-allowed; } .chat-enviar:focus-visible{ outline:2px solid rgb(var(--acc)); outline-offset:2px; } .chat-oculto{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (max-width:520px){ .chat{ right:14px; bottom:14px; left:14px; align-items:flex-end; } .chat-panel{ width:100%; max-height:calc(100vh - 110px); } } @media (max-height:520px){ .chat-panel{ max-height:calc(100vh - 90px); } .chat-hilo{ min-height:110px; } } @media (prefers-reduced-motion:reduce){ .chat-burbuja, .chat-enviar{ transition:none; } .chat-burbuja:hover, .chat-enviar:hover:not(:disabled){ transform:none; } }