/* ============================================================================= recursos-telefonia-control-de-gasto-y-fraude.css - Carrasco TI Group Proposito: Estilos de la pagina. Externalizado desde el HTML el 2026-08-25 para poder retirar 'unsafe-inline' de style-src. Autor: Desiderio Carrasco - CTG ============================================================================= */ :root{ --grafito:#1C2630; --acero:#5C6B78; --acero-soft:#69757F; --lienzo:#FFFFFF; --panel:#F6F7F8; --line:#DDE2E6; --bronce:#A67C3D; --bronce-deep:#8B6530; --radius:2px; } .sr-only-c{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } a, button, [role='button']{ touch-action: manipulation; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background-color:var(--lienzo); background-image: linear-gradient(rgba(92,107,120,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(92,107,120,0.05) 1px, transparent 1px); background-size:44px 44px; color:var(--grafito); font-family:'Source Serif 4', serif; line-height:1.7; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img,svg{ display:block; max-width:100%; } .display{ font-family:'Space Grotesk', sans-serif; } .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.06em; } .wrap{ max-width:720px; margin:0 auto; padding:0 28px; } :focus-visible{ outline:2px solid var(--grafito); outline-offset:3px; } /* NAV */ header.site{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1120px; margin:0 auto; } .brand{ display:flex; align-items:center; gap:0; } .brand-name{ margin-left:-5px; } .brand-icon{ height:30px; width:30px; } .brand-name{ font-weight:700; font-size:1.1rem; letter-spacing:-0.01em; color:var(--grafito); } .back-link{ font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--acero); display:flex; align-items:center; gap:8px; } .back-link:hover{ color:var(--grafito); } /* ARTICLE */ article{ padding:64px 0 0; } .eyebrow{ font-size:.74rem; letter-spacing:.12em; color:var(--bronce-deep); text-transform:uppercase; display:flex; align-items:center; gap:9px; margin-bottom:22px; } .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--bronce); display:block; } h1.title{ font-weight:700; font-size:clamp(1.9rem,4.4vw,2.7rem); line-height:1.15; letter-spacing:-0.01em; color:var(--grafito); max-width:18ch; } @media (max-width:520px){ .meta{ gap:4px 12px; } .meta .sep{ display:none; } } .meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 18px; color:var(--acero-soft); font-size:.78rem; } .newsletter-note{ margin-top:26px; text-align:center; font-size:.78rem; color:var(--acero-soft); } .newsletter-link{ color:var(--grafito); border-bottom:1px solid var(--line); padding-bottom:1px; } .newsletter-link:hover{ border-color:var(--grafito); } .lede{ margin-top:40px; font-size:1.2rem; line-height:1.6; color:var(--grafito); font-weight:400; } .prose{ margin-top:30px; font-size:1.05rem; color:var(--grafito); } .prose p{ margin-bottom:26px; } .prose strong{ color:var(--grafito); font-weight:600; } .question-block{ margin:36px 0; padding:28px 30px; background:var(--panel); border-left:3px solid var(--bronce); font-family:'Space Grotesk',sans-serif; font-size:1.08rem; line-height:1.6; color:var(--grafito); } .question-block p{ margin-bottom:14px; } .question-block p:last-child{ margin-bottom:0; } .mini-cta{ margin:32px 0; padding:18px 22px; border-left:3px solid var(--acero); background:var(--panel); font-size:.96rem; } .mini-cta strong{ color:var(--grafito); } .mini-cta a{ color:var(--grafito); border-bottom:1px solid var(--acero); padding-bottom:1px; } .mini-cta a:hover{ border-color:var(--grafito); } .callout{ margin:36px 0; padding:30px; border:1px solid var(--line); background:var(--lienzo); } .callout-label{ font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:.7rem; letter-spacing:.1em; color:var(--acero); text-transform:uppercase; margin:0 0 14px; display:block; } .callout ul{ list-style:none; display:flex; flex-direction:column; gap:12px; } .callout li{ padding-left:20px; position:relative; color:var(--grafito); font-size:1rem; } .callout li::before{ content:'—'; position:absolute; left:0; color:var(--bronce); } .tagline-block{ margin:48px 0; text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.5rem; color:var(--grafito); padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* CTA */ .cta-panel{ margin:48px 0 0; background:var(--grafito); color:var(--lienzo); padding:44px 38px; border-radius:var(--radius); } .cta-panel h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.4rem; margin-bottom:14px; } .cta-panel p{ color:#A9C0CE; font-size:.96rem; line-height:1.6; max-width:48ch; margin-bottom:26px; } .btn{ font-family:'IBM Plex Mono', monospace; font-size:.82rem; letter-spacing:.05em; padding:14px 26px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:12px; background:var(--bronce); color:var(--lienzo); font-weight:500; transition:background .2s ease; } .btn-icon{ width:21px; height:21px; flex-shrink:0; } .cta-note{ display:block; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-weight:300; font-size:.72rem; letter-spacing:.06em; color:#8FA6B4; } /* Hover solo en dispositivos que realmente lo tienen: en táctil puede quedarse "pegado" tras el toque y confundir el estado. */ @media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--bronce-deep); } .footer-social a:hover{ color:var(--grafito); transform:translateY(-1px); } } .reading-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--acero); z-index:100; transition:width .1s linear; } @media (prefers-reduced-motion:reduce){ .reading-progress{ transition:none; } } footer{ border-top:1px solid var(--line); padding-top:40px; margin-top:64px; } .footer-compact{ max-width:1120px; margin:0 auto; padding:0 28px 28px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:28px; } .footer-compact-brand{ display:flex; flex-direction:column; gap:10px; max-width:32ch; } .footer-compact-lockup{ display:flex; align-items:center; gap:0; } .footer-compact-icon{ height:26px; width:26px; flex-shrink:0; } .footer-compact-name{ margin-left:-4px; font-weight:700; font-size:1rem; letter-spacing:-0.01em; color:var(--grafito); } .footer-compact-note{ font-size:.74rem; color:var(--acero); } .footer-compact-nav{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.78rem; } .footer-compact-nav a{ color:var(--acero); transition:color .2s ease; } .footer-compact-nav a:hover{ color:var(--grafito); } .footer-social{ display:flex; gap:2px; margin-left:-10px; } .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--acero); transition:color .2s ease, transform .2s ease; } .footer-social svg{ width:17px; height:17px; } .footer-compact-bottom{ max-width:1120px; margin:0 auto; padding:20px 28px 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:'Source Serif 4', serif; font-size:.74rem; color:var(--acero); } .footer-compact-bottom a{ color:var(--acero); border-bottom:1px solid var(--line); transition:color .2s ease, border-color .2s ease; } .footer-compact-bottom a:hover{ color:var(--grafito); border-color:var(--grafito); } @media (max-width:640px){ .footer-compact{ flex-direction:column; } } .hero-image{ margin-top:36px; border:1px solid var(--line); aspect-ratio: 2 / 1; overflow:hidden; } .hero-image img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; } @media (max-width:480px){ .hero-image{ aspect-ratio: 4 / 3; } } @media (max-width:600px){ .cta-panel{ padding:32px 24px; } .cta-panel .btn{ width:100%; justify-content:center; padding-left:18px; padding-right:18px; } article{ padding-top:44px; } } .prose-h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; color:var(--grafito); margin:40px 0 14px; } .signal-list{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:16px 0 24px; padding-left:18px; } .signal-list li{ position:relative; color:var(--grafito); font-size:1rem; } .signal-list li::before{ content:'\2192'; position:absolute; left:-18px; color:var(--acero); } /* Barra de utilidades de lectura: una sola familia visual */ .utilbar{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; } .utilbar .util{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-family:'IBM Plex Mono',monospace; font-weight:300; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--acero); background:none; border:none; padding:0; cursor:pointer; transition:color .2s ease; } .utilbar .util svg{ width:17px; height:17px; flex-shrink:0; } .utilbar .util:hover{ color:var(--grafito); } .utilbar .util span{ border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s ease; } .utilbar .util:hover span{ border-color:var(--acero); } @media (max-width:520px){ .utilbar{ gap:4px 20px; } } .faq-section{ margin:52px 0; } .faq-title{ font-size:clamp(1.2rem,2.4vw,1.45rem); color:var(--grafito); margin-bottom:18px; } .faq-item{ margin:0; padding:0; border-bottom:1px solid var(--line); } .faq-item:first-of-type{ border-top:1px solid var(--line); } .faq-q{ margin:0; } .faq-toggle{ width:100%; min-height:64px; padding:18px 0; border:0; background:none; display:flex; align-items:center; justify-content:space-between; gap:24px; text-align:left; font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:600; line-height:1.4; color:var(--grafito); } .faq-js .faq-toggle{ cursor:pointer; } .faq-symbol{ display:none; flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:1.15rem; font-weight:300; color:var(--bronce-deep); transition:color .2s ease; } .faq-js .faq-symbol{ display:block; } /* solo aparece si el JS puede plegar */ .faq-toggle:hover .faq-symbol, .faq-toggle:focus-visible .faq-symbol{ color:var(--grafito); } .faq-panel{ padding:0 42px 22px 0; } .faq-a{ margin:0; color:var(--acero-soft); font-size:.96rem; line-height:1.7; } @media (max-width:600px){ .faq-toggle{ min-height:58px; padding:16px 0; gap:16px; } .faq-panel{ padding:0 0 20px; } } .author-cred{ font-size:.73rem; color:var(--acero); margin-top:8px; } .tldr-block{ margin-top:22px; padding:24px 30px 26px; background:var(--panel); border-top:2px solid var(--grafito); } .tldr-block .callout-label{ color:var(--bronce-deep); margin-bottom:12px; } .tldr-block p:first-of-type{ font-size:1.06rem; } .tldr-block p{ font-size:1rem; line-height:1.6; color:var(--grafito); margin:0; } /* --- clases que sustituyen a los antiguos atributos style=" ------------- Movidas aqui el 2026-08-25: una CSP por hash NO cubre los atributos style=", solo los bloques