/* ═══════════════════════════════════════════════════════════════════════════ 1-CONTROL-GLOBAL.css · ElConta.online ─────────────────────────────────────────────────────────────────────────── ESTE ES EL TABLERO DE MANDO DE TODA LA WEB. Lo que cambies AQUÍ cambia en las 5 páginas al mismo tiempo. Regla para reconocer las variables en todo el sitio: --MAYUSCULAS → globales (viven aquí, afectan todo) --minusculas → locales (viven en cada bloque, afectan solo ese bloque) Cómo usarlo: · ¿Quieres otro verde de marca? Cambia --VERDE (una línea) y listo. · ¿Otra tipografía? Cambia --LETRA-TITULOS o --LETRA-TEXTO. · ¿Botones menos redondos? Baja --REDONDEO-BOTON. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ─── 1. COLORES DE MARCA (el verde ElConta) ────────────────────────────── Estos 5 verdes son toda la identidad. El primero es EL importante. */ --VERDE: #15803d; /* verde principal: botones, palabra en cursiva de los títulos, líneas */ --VERDE-OSCURO: #166534; /* SOLO para el hover (cuando pasas el mouse) de los botones verdes */ --VERDE-BRILLANTE: #22c55e; /* palomitas ✓ y acentos que van sobre fondo NEGRO */ --VERDE-SUAVE: #f0fdf4; /* relleno muy claro: fondo de una tarjeta al pasar el mouse */ --VERDE-BORDE: #bbf7d0; /* borde verde claro de una tarjeta al pasar el mouse */ /* ─── 2. COLORES NEUTROS (negros y grises) ──────────────────────────────── De más oscuro a más claro. Cada gris tiene UN trabajo concreto. */ --NEGRO: #111111; /* títulos, botones oscuros, banners de cierre */ --NEGRO-SUAVE: #1c1c1c; /* el negro un poco más claro de la tarjeta "destacada" de planes */ --BLANCO: #ffffff; --GRIS-BORDE: #e5e7eb; /* borde gris de TODAS las tarjetas en reposo */ --GRIS-LINEA: #e8e8e8; /* líneas divisorias y bordes muy tenues */ --GRIS-FONDO: #f9fafb; /* fondo de las secciones "alternas" (gris muy claro) */ --GRIS-CLARO: #d1d5db; /* texto casi apagado: "No incluye", números decorativos */ --GRIS-SUAVE: #9ca3af; /* etiquetas pequeñas: "planes disponibles", subtítulos */ --GRIS-TEXTO: #6b7280; /* color de los PÁRRAFOS descriptivos (el más usado en texto) */ --GRIS-FUERTE: #374151; /* texto de los ítems de las listas (más legible) */ /* ─── 3. TIPOGRAFÍAS ────────────────────────────────────────────────────── Solo dos familias. Se cargan desde el de cada página (Google Fonts).*/ --LETRA-TITULOS: 'Fraunces', Georgia, serif; /* títulos grandes y números elegantes */ --LETRA-TEXTO: 'Outfit', system-ui, sans-serif; /* absolutamente todo lo demás */ /* ─── 4. TAMAÑOS DE TÍTULO ──────────────────────────────────────────────── El tamaño en escritorio. En móvil cada bloque los reduce solo. (No cabe todo aquí: cada bloque tiene además sus tamaños propios, locales.)*/ --TITULO-HERO: 72px; /* el título GIGANTE que abre cada página */ --TITULO-SECCION: 52px; /* títulos de sección: "Servicios especializados" */ --TITULO-MEDIO: 48px; /* títulos de sección un poco menores */ --TITULO-BANNER: 36px; /* el título dentro del banner negro de cierre */ /* ─── 5. REDONDEO DE ESQUINAS ─────────────────────────────────────────────*/ --REDONDEO-BOTON: 100px; /* botones tipo píldora (totalmente redondos a los lados) */ --REDONDEO-TARJETA: 20px; /* tarjetas grandes de planes y banners */ --REDONDEO-CAJA: 16px; /* tarjetas de servicios (más pequeñas) */ --REDONDEO-CHICO: 12px; /* cajitas internas, tips, opciones */ /* ─── 6. MEDIDAS DE ESPACIO ───────────────────────────────────────────────*/ --ANCHO-MAXIMO: 1300px; /* el contenido nunca se estira más que esto */ --ANCHO-LECTURA: 1200px; /* ancho más angosto para secciones de solo texto */ --ESPACIO-SECCION: 72px 6%; /* aire alrededor de cada sección: arriba/abajo 72px, laterales 6% */ /* ─── 7. TRANSICIONES (velocidad de las animaciones) ──────────────────────*/ --SUAVE: .22s; /* velocidad estándar de hover y cambios */ /* NOTA sobre MÓVIL: Los puntos de quiebre (breakpoints) NO pueden ser variables en CSS. Van escritos dentro de cada archivo, pero SIEMPRE son estos dos: @media(max-width:900px) → las columnas dobles pasan a una sola @media(max-width:500px) → se achican los títulos más grandes */ } /* ─── RESET MÍNIMO Y BASE DE TODO EL SITIO ────────────────────────────────── Reemplaza a los viejos parches "!important" que necesitaba Elementor. Aquí ya no hay Elementor, así que basta con un reset limpio y normal. */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; /* al hacer clic en anclas, baja suave */ -webkit-text-size-adjust:100%; /* evita que iOS agrande la letra solo */ } body{ font-family:var(--LETRA-TEXTO); color:var(--NEGRO); background:var(--BLANCO); line-height:1.6; -webkit-font-smoothing:antialiased; /* letras más finas en Mac/iOS */ text-rendering:optimizeLegibility; } /* Enlaces: por defecto SIN subrayado y heredan el color del texto. Vuelven a ser normales (Google los sigue; los viejos onclick no). */ a{ color:inherit; text-decoration:none; } img{ max-width:100%; /* ninguna imagen se sale de su contenedor en móvil */ height:auto; display:block; } /* Clase de ayuda: contenido centrado con el ancho máximo del sitio. Úsala en cualquier sección nueva para que quede alineada con el resto. */ .contenedor{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }