/* ═══════════════════════════════════════════════════════════════════
   PORTADA 2026 — rediseño hecho en Claude Design (septiembre de 2026)

   Casi todo el aspecto va escrito en el propio HTML (paginas/inicio.php),
   copiado tal cual del diseño. Aquí solo está lo que no se puede escribir
   en un atributo style: tipografías, estados :hover, las animaciones, lo
   que cambia según el ancho de pantalla y las piezas de siempre (chat de
   Marcela y formulario), que se conservan.

   Esta hoja SOLO se carga en la portada. El resto de páginas siguen con
   css/styles.css, sin ningún cambio.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tipografías, alojadas en el propio servidor (licencia OFL) ── */
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
  src:url('../fuentes/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap;
  src:url('../fuentes/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fuentes/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Base del diseño ── */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:#050813; color:#EAEEF7; font-family:'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:#38BDF8; text-decoration:none; }
a:hover { color:#7DD3FC; }
summary::-webkit-details-marker { display:none; }
summary { list-style:none; cursor:pointer; }
img { max-width:100%; }
::selection { background:rgba(139,92,246,.45); color:#fff; }

/* El diseño envolvía la página en un overflow:hidden, que impide que la
   cabecera se quede fija al bajar. overflow-x:clip recorta igual sin romperla. */
.tdc-raiz { overflow-x:clip; }

@keyframes tdcDrift { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(4%,-6%,0) scale(1.15); } 100% { transform:translate3d(0,0,0) scale(1); } }
@keyframes tdcMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes tdcFloat { 0% { transform:translateY(0); } 50% { transform:translateY(-12px); } 100% { transform:translateY(0); } }
@keyframes tdcPulse { 0% { opacity:.35; transform:scale(.9); } 70% { opacity:0; transform:scale(2.2); } 100% { opacity:0; transform:scale(2.2); } }
@keyframes tdcScan { from { transform:translateY(-100%); } to { transform:translateY(900%); } }
@keyframes tdcFlow { 0% { transform:translateX(-120%); opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { transform:translateX(400%); opacity:0; } }
@keyframes tdcCaret { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }

/* ── Cabecera: escritorio o móvil (mismo corte que el diseño: 1160 px) ── */
.solo-compacto { display:none !important; }
@media (max-width:1160px) {
  .solo-ancho { display:none !important; }
  .solo-compacto { display:flex !important; }
  #tdc-menu[hidden] { display:none !important; }
}

/* ── Textos que vienen del panel con negritas ── */
.tdc-rico strong, .tdc-rico b { color:#EAEEF7; font-weight:600; }

/* ── Mapa de clientes ── */
#tdc-mapa path[data-prov] { fill:#0E1A33; stroke:rgba(56,189,248,0.38); stroke-width:.8; stroke-linejoin:round; cursor:pointer; transition:fill .25s ease, stroke .25s ease; }
#tdc-mapa path[data-prov].con-clientes { fill:rgba(255,216,115,0.32); stroke:rgba(255,216,115,0.7); }
#tdc-mapa path[data-prov].activa { fill:rgba(56,189,248,0.45); stroke:#FFD873; stroke-width:1.6; }
#tdc-mapa path[data-prov]:focus { outline:none; }
#tdc-mapa path[data-prov]:focus-visible { stroke:#FFD873; stroke-width:1.6; }

/* ── FAQ: el «+» gira al abrir ── */
details[open] > summary [data-faq-mark] { transform:rotate(45deg); opacity:.9; }

/* ── Accesibilidad ── */
.skip-link { position:absolute; left:12px; top:-100px; z-index:1200; background:#38BDF8; color:#04071C; padding:11px 20px; border-radius:0 0 10px 10px; font-weight:700; font-size:.86rem; transition:top .2s; }
.skip-link:focus { top:0; color:#04071C; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline:3px solid #7DD3FC; outline-offset:3px; border-radius:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Acceso oculto al panel: doble clic en el logotipo del pie ── */
.ft-logo { cursor:default; -webkit-user-select:none; user-select:none; transition:filter .25s, transform .25s; }
.ft-logo.abriendo { filter:drop-shadow(0 0 14px rgba(56,189,248,.55)); transform:scale(1.04); }

/* ── Estados :hover del diseño ──
   En el diseño iban como atributo; aquí se aplican con !important porque
   el estilo escrito en la etiqueta siempre gana a una clase. */
.hv1:hover,.hv1:focus-visible{color:#EAEEF7 !important}
.hv2:hover,.hv2:focus-visible{transform:translateY(-2px) !important;box-shadow:0 12px 30px rgba(139,92,246,0.32) !important}
.hv3:hover,.hv3:focus-visible{transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(245,165,36,0.44) !important;color:#120A02 !important}
.hv4:hover,.hv4:focus-visible{transform:translateY(-3px) !important;box-shadow:0 20px 44px rgba(245,165,36,0.46) !important;color:#120A02 !important}
.hv5:hover,.hv5:focus-visible{background:rgba(255,255,255,0.06) !important;border-color:rgba(255,255,255,0.3) !important;color:#EAEEF7 !important}
.hv6:hover,.hv6:focus-visible{background:rgba(56,189,248,0.2) !important;border-color:#38BDF8 !important;transform:translateY(-2px) !important}
.hv7:hover,.hv7:focus-visible{transform:translateY(-6px) !important;border-color:rgba(56,189,248,0.42) !important}
.hv8:hover,.hv8:focus-visible{transform:translateY(-7px) !important;border-color:rgba(56,189,248,0.50) !important;background:#0E142C !important;color:#EAEEF7 !important}
.hv9:hover,.hv9:focus-visible{transform:translateY(-7px) !important;border-color:rgba(56,189,248,0.42) !important}
.hv10:hover,.hv10:focus-visible{transform:translateY(-2px) !important;color:#120A02 !important}
.hv11:hover,.hv11:focus-visible{transform:translateY(-3px) !important;box-shadow:0 20px 44px rgba(245,165,36,0.50) !important;color:#120A02 !important}
.hv12:hover,.hv12:focus-visible{transform:translateY(-3px) !important;color:#120A02 !important}

/* ═══════════════════════════════════════════════════════════════════
   CHAT DE MARCELA Y FORMULARIO — las piezas de siempre, con la paleta nueva
   ═══════════════════════════════════════════════════════════════════ */
#chat { position:fixed; right:20px; bottom:88px; z-index:801; width:320px; max-width:calc(100vw - 24px);
  background:rgba(8,12,30,.97); border:1px solid rgba(255,255,255,.1); border-radius:20px; overflow:hidden;
  display:none; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.7); backdrop-filter:blur(20px); color:#EAEEF7; }
.chat-hd { padding:14px 18px; background:linear-gradient(135deg,#1E3A8A,#6D28D9); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px 10px; }
.chat-hd-l { display:flex; align-items:baseline; gap:7px; flex:1 1 auto; min-width:0; }
.chat-online { width:8px; height:8px; border-radius:50%; background:#38BDF8; box-shadow:0 0 6px #38BDF8; align-self:center; }
.chat-nombre { font-weight:700; font-size:.92rem; }
.chat-rol { font-size:.62rem; letter-spacing:.8px; text-transform:uppercase; color:#C7D2FE; font-weight:600; }
.chat-x { order:2; flex:none; background:none; border:none; color:#fff; font-size:1rem; cursor:pointer; padding:0 2px; }
.chat-wa { order:3; flex:1 0 100%; justify-content:center; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:11px 14px;
  border-radius:999px; background:rgba(255,255,255,.16); color:#fff; font-size:.78rem; font-weight:700; line-height:1; white-space:nowrap;
  border:1px solid rgba(255,255,255,.28); transition:background .2s, border-color .2s; }
.chat-wa:hover { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.5); color:#fff; }
.chat-wa .ic { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.chat-body { height:240px; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.cm { max-width:88%; padding:9px 13px; border-radius:14px; font-size:.84rem; line-height:1.5; }
.cm.b { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); align-self:flex-start; border-bottom-left-radius:4px; color:#D4DBE8; }
.cm.u { background:rgba(56,189,248,.18); border:1px solid rgba(56,189,248,.3); align-self:flex-end; border-bottom-right-radius:4px; color:#D6ECFF; }
.cm-typing { display:flex; align-items:center; gap:5px; min-height:19px; }
.cm-typing span { width:6px; height:6px; border-radius:50%; background:#38BDF8; opacity:.45; animation:cmDot 1.25s ease-in-out infinite; }
.cm-typing span:nth-child(2) { animation-delay:.16s; }
.cm-typing span:nth-child(3) { animation-delay:.32s; }
@keyframes cmDot { 0%,60%,100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-4px); opacity:1; } }
.chat-nota { font-size:.66rem; line-height:1.45; color:#8E99AE; padding:0 14px 8px; text-align:center; margin:0; }
.chat-nota a { color:#A8B2C6; text-decoration:underline; }
.chat-inp-row { display:flex; gap:6px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.08); }
.chat-inp { flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#EAEEF7; border-radius:20px; padding:9px 14px; font-size:.84rem; font-family:inherit; outline:none; }
.chat-inp:focus { border-color:#38BDF8; }
.chat-send { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#FFD873,#F5A524); border:none; color:#120A02; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-send .ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.chat-inp:disabled { opacity:.55; cursor:not-allowed; }
.chat-send:disabled { opacity:.4; cursor:not-allowed; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:1200; display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.overlay.open { display:flex; }
.mbox { background:#0B1024; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:40px; width:90%; max-width:500px; max-height:90vh; overflow-y:auto; color:#EAEEF7; }
.mbox h3 { font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-size:2rem; margin:0 0 8px; }
.mbox .msub { font-size:.9rem; color:#A8B2C6; margin:0 0 24px; line-height:1.55; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:.72rem; font-weight:700; color:#8E99AE; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.fg .opc { font-weight:500; text-transform:none; letter-spacing:0; color:#7A8498; }
.fg input, .fg textarea, .fg select { width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:11px 14px; color:#EAEEF7; font-family:inherit; font-size:.92rem; outline:none; transition:border .25s; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:#38BDF8; }
.fg textarea { height:96px; resize:vertical; }
.fg select option { background:#0B1024; }
.fg-check { display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color:#A8B2C6; line-height:1.55; margin:6px 0 4px; }
.fg-check input[type=checkbox] { width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:#38BDF8; cursor:pointer; }
.fg-check a { color:#38BDF8; text-decoration:underline; }
.f-status { font-size:.84rem; margin-top:12px; text-align:center; min-height:1.2em; }
.f-status.err { color:#FF8FA3; }
.f-status.ok { color:#34D399; }
.mbtns { display:flex; gap:12px; margin-top:22px; }
.mbtn-sub { flex:1; background:linear-gradient(135deg,#FFD873,#F5A524); border:none; color:#120A02; padding:13px; border-radius:12px; font-weight:700; font-family:inherit; cursor:pointer; font-size:.95rem; }
.mbtn-sub[aria-busy="true"] { opacity:.6; pointer-events:none; }
.mbtn-can { flex:1; background:transparent; border:1px solid rgba(255,255,255,.16); color:#A8B2C6; padding:13px; border-radius:12px; font-weight:600; font-family:inherit; cursor:pointer; font-size:.95rem; }
.mbtn-can:hover { border-color:rgba(255,255,255,.3); color:#EAEEF7; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:560px) {
  .mbox { padding:28px 22px; }
  #chat { right:12px; left:12px; width:auto; bottom:84px; }
}

/* ── Movimiento reducido: sin animaciones, todo visible ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto !important; }
}