/* Resolvamus — sistema de diseño del sitio multipágina (2026-08). Evolución de la "versión B": Space Grotesk + Inter self-hosted, azul/verde de marca, bloques navy. Cada página de industria define su acento con .sector-* en . */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-600.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-700.woff2") format("woff2"); } :root { --paper: #ffffff; --wash: #f5f7fb; --ink: #0f172a; --ink-2: #475569; --line: #e2e8f0; --accent: #2563eb; --accent-deep: #1e40af; --accent-soft: #dbeafe; --verde: #10b981; --navy: #0b1220; --navy-2: #070d18; --radius: 18px; /* Acento de sector: la portada usa el azul de marca; cada industria lo redefine */ --sector: var(--accent); --sector-deep: var(--accent-deep); --sector-soft: var(--accent-soft); } .sector-salud { --sector: #059669; --sector-deep: #065f46; --sector-soft: #d1fae5; } .sector-telecom { --sector: #7c3aed; --sector-deep: #5b21b6; --sector-soft: #ede9fe; } .sector-energia { --sector: #d97706; --sector-deep: #92400e; --sector-soft: #fef3c7; } .sector-financiero { --sector: #1e40af; --sector-deep: #1e3a8a; --sector-soft: #dbeafe; } .sector-retail { --sector: #be123c; --sector-deep: #9f1239; --sector-soft: #ffe4e6; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); } h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 .5em; text-wrap: balance; } .container { width: min(1080px, 92vw); margin-inline: auto; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .cta :focus-visible, footer :focus-visible, .oscuro :focus-visible, .step :focus-visible { outline-color: var(--accent-soft); } /* ---------- Header ---------- */ header { padding: 1.3rem 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .wordmark { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.5rem; text-decoration: none; color: var(--ink); } .wordmark b { color: var(--accent); font-weight: 700; } .header-nav { display: flex; align-items: center; gap: 1.4rem; font-size: .95rem; } .header-nav a { color: var(--ink-2); text-decoration: none; } .header-nav a:hover { color: var(--accent); } .header-nav a.btn-accent { color: #fff; padding: .6em 1.2em; font-size: .9rem; } .header-nav a.btn-accent:hover { color: #fff; } @media (max-width: 760px) { .header-nav .solo-desktop { display: none; } } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; font-family: "Space Grotesk", sans-serif; font-weight: 600; padding: .9em 1.6em; border-radius: 999px; text-decoration: none; transition: transform .18s ease, background .18s ease; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); transform: translateY(-2px); } .btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: #fff; } .btn-line:hover { background: var(--ink); color: #fff; transform: translateY(-2px); } /* ---------- Héroe ---------- */ .hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); background: radial-gradient(900px 420px at 88% -10%, var(--sector-soft), transparent 60%), var(--wash); } .hero-inner { display: flex; align-items: center; gap: clamp(1.8rem, 5vw, 4rem); } .hero-text { flex: 1 1 55%; min-width: 0; } .hero-aside { flex: 1 1 45%; min-width: 0; max-width: 460px; } @media (max-width: 820px) { .hero-inner { flex-direction: column; align-items: flex-start; } .hero-aside { max-width: 100%; width: 100%; } } .pill { display: inline-flex; align-items: center; gap: .5em; background: var(--sector-soft); color: var(--sector-deep); font-size: .82rem; font-weight: 600; padding: .45em 1em; border-radius: 999px; margin-bottom: 1.4rem; } .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sector); } .hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); max-width: 20ch; } .hero h1 .marca { background: linear-gradient(transparent 62%, var(--sector-soft) 62%, var(--sector-soft) 94%, transparent 94%); padding-inline: .05em; } .lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-2); max-width: 58ch; } .acciones { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; } .confianza { margin-top: 1.4rem; font-size: .88rem; color: var(--ink-2); } .confianza .ok { color: var(--verde); font-weight: 700; } /* ---------- Expediente (firma del sitio): la tarjeta de reclamo con su reloj regulatorio ---------- */ .expediente { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 50px rgba(15,23,42,.12); overflow: hidden; } .exp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.3rem; background: var(--wash); border-bottom: 1px solid var(--line); font-size: .82rem; } .exp-id { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--ink); } .exp-canal { color: var(--ink-2); } .exp-canal b { color: var(--sector-deep); font-weight: 600; } .exp-cuerpo { padding: 1.2rem 1.3rem 1.3rem; } .exp-texto { margin: 0 0 1rem; font-size: .95rem; color: var(--ink); font-style: italic; } .exp-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0; } .exp-datos > div { background: var(--wash); border-radius: 10px; padding: .55rem .7rem; min-width: 0; } .exp-datos dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .exp-datos dd { margin: .15em 0 0; font-size: .84rem; font-weight: 600; color: var(--ink); } .exp-datos dd.neg { color: #b91c1c; } .exp-datos dd.alta { color: #c2410c; } @media (max-width: 380px) { .exp-datos { grid-template-columns: 1fr 1fr; } } .exp-plazo { margin-top: 1rem; } .exp-plazo-linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; margin-bottom: .4rem; } .exp-plazo-linea .regla { color: var(--ink-2); } .exp-plazo-linea .quedan { font-weight: 600; color: var(--sector-deep); } .exp-barra { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .exp-barra i { display: block; height: 100%; border-radius: 999px; background: var(--sector); } .exp-estado { display: flex; align-items: center; gap: .55em; margin: 1rem 0 0; font-size: .86rem; font-weight: 600; color: var(--ink); } .exp-estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); animation: latido 2.4s ease-in-out infinite; } @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- Franja de reguladores ---------- */ .reguladores { border-block: 1px solid var(--line); background: var(--paper); padding: clamp(1.4rem, 3.5vw, 2rem) 0; } .reguladores-inner { display: flex; align-items: center; gap: 1rem 1.8rem; flex-wrap: wrap; } .reguladores .etiqueta { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .reguladores ul { display: flex; gap: .6rem 1.6rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .reguladores li { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink); white-space: nowrap; } /* ---------- Secciones ---------- */ section { padding: clamp(3rem, 7vw, 5.5rem) 0; } section.compacta { padding-top: 0; } .kicker { font-family: "Inter", system-ui, sans-serif; display: inline-flex; align-items: center; gap: .55em; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1em; } .kicker::before { content: ""; width: 13px; height: 13px; background: var(--sector); border-radius: 4px; } .titulo { font-size: clamp(1.7rem, 3.8vw, 2.5rem); } /* ---------- Cards ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.1rem; } @media (max-width: 430px) { .grid-2 { grid-template-columns: 1fr; } } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.6rem; background: #fff; } .card h3 { font-size: 1.15rem; } .card p { margin: 0; color: var(--ink-2); font-size: .96rem; } .card .marcador { width: 34px; height: 34px; border-radius: 10px; background: var(--sector-soft); color: var(--sector-deep); display: grid; place-items: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; margin-bottom: 1rem; font-size: .9rem; } .card ul { margin: .9rem 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .93rem; } .card ul li { padding-left: 1.4em; position: relative; margin-top: .4em; } .card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; } /* ---------- Bloque oscuro y pasos ---------- */ .duo { display: flex; align-items: center; gap: clamp(1.8rem, 5vw, 4rem); } .duo > * { flex: 1 1 50%; min-width: 0; } .duo-img { width: 100%; max-width: 520px; height: auto; border-radius: var(--radius); border: 1px solid var(--line); } @media (max-width: 760px) { .duo { flex-direction: column; align-items: flex-start; } } .oscuro { background: var(--navy); color: #e7ecf5; border-radius: var(--radius); padding: 2rem 1.8rem; } .oscuro h3 { color: #fff; font-size: 1.25rem; } .oscuro ol { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: item; } .oscuro ol li { counter-increment: item; padding-left: 2.2em; position: relative; margin-top: 1em; color: #aab6c9; font-size: .95rem; } .oscuro ol li::before { content: counter(item); position: absolute; left: 0; top: .05em; width: 1.55em; height: 1.55em; border-radius: 8px; background: var(--sector); color: #fff; font-family: "Space Grotesk", sans-serif; font-weight: 700; display: grid; place-items: center; font-size: .9em; } .oscuro b { color: #fff; display: block; margin-bottom: .15em; } .steps { counter-reset: paso; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; } .step { background: var(--navy); color: #e7ecf5; border-radius: var(--radius); padding: 1.6rem 1.4rem; } .step::before { counter-increment: paso; content: counter(paso); display: block; font-family: "Space Grotesk", sans-serif; font-size: 2.2rem; font-weight: 700; color: #7ba3f7; line-height: 1; margin-bottom: .7rem; } .step h3 { color: #fff; font-size: 1.02rem; } .step p { margin: 0; color: #aab6c9; font-size: .9rem; } .img-ancho { display: block; width: 100%; max-width: 760px; height: auto; margin: clamp(2rem, 5vw, 3rem) auto 0; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.10); } /* ---------- Industrias ---------- */ .industrias { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; } a.industria { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.6rem; background: #fff; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.industria:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,23,42,.10); border-color: var(--sector); } .industria .chip { align-self: flex-start; font-size: .78rem; font-weight: 600; padding: .35em .9em; border-radius: 999px; background: var(--sector-soft); color: var(--sector-deep); margin-bottom: 1rem; } .industria h3 { font-size: 1.2rem; margin-bottom: .35em; } .industria p { margin: 0 0 1rem; color: var(--ink-2); font-size: .93rem; flex: 1; } .industria .ver { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .92rem; color: var(--sector-deep); } .industria .ver::after { content: " →"; } /* ---------- Datos del sector (páginas de industria) ---------- */ .dato-clave { border-left: 4px solid var(--sector); background: var(--wash); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.3rem 1.6rem; margin-top: 1.8rem; font-size: .98rem; color: var(--ink); } .dato-clave b { color: var(--sector-deep); } /* ---------- CTA y footer ---------- */ .cta { background: var(--navy); color: #e7ecf5; } .cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 24ch; } .cta p { color: #aab6c9; max-width: 58ch; } .cta .kicker { color: #8fa1bd; } .cta .kicker::before { background: var(--sector); } .otras { border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 3rem) 0; } .otras .etiqueta { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 1em; } .otras ul { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .otras a { display: inline-block; text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .5em 1.1em; transition: border-color .18s ease, color .18s ease; } .otras a:hover { border-color: var(--accent); color: var(--accent); } footer { background: var(--navy-2); color: #8494ad; padding: 2.2rem 0; font-size: .88rem; } footer a { color: #b9c5d8; text-decoration: none; } footer a:hover { color: #7ba3f7; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .exp-estado::before { animation: none; } .btn, a.industria { transition: none; } }