/* =========================================================
   OMNIA — CSS HEREDADO (TEMPORAL)

   Reúne el CSS que hoy está repartido en dos sitios:
     1. style.css del child theme
     2. Apariencia > Personalizar > CSS adicional

   Ambos duplicaban las mismas reglas del formulario. Aquí quedan unificados.
   Conforme cada plantilla pase a PHP con su hoja propia, se van borrando
   bloques de este archivo. No añadir nada nuevo aquí.

   Los estilos del formulario de contacto (.cf7-*) NO están aquí a propósito:
   se gestionan fuera del theme. No los añadas.

   IMPORTANTE: al activar el theme hay que VACIAR el "CSS adicional" del
   Customizer, o el resto de reglas se aplicarán dos veces.
   ========================================================= */

/* --- 1. GENERAL / RESET --- */
body { overflow-x: hidden; }
.elementor-button { background: transparent; font-size: 14px; font-family: "matter", sans-serif; text-transform: uppercase; font-weight: 500; }
.cky-btn-revisit-wrapper { visibility: hidden !important; }
.grecaptcha-badge { visibility: hidden; }
div#snippet-box { display: none; }

/* --- 2. COMPONENTES GLOBALES --- */

/* Cookies */
.btn-cookies { background: #2a2aca !important; color: #fff !important; padding: 5px 20px; border: 1px solid #2a2aca !important; }
.btn-cookies:hover { background: #fb4601 !important; color: #fff !important; border: 1px solid #fb4601 !important; margin-left: 5px; }

/* Botón flotante de teléfono */
.btn-flotante-telefono { position: fixed; bottom: 20px; right: 20px; z-index: 9999; visibility: hidden; background-color: #2a2aca; width: 50px; height: 50px; border-radius: 2px; display: flex; justify-content: center; align-items: center; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
.btn-flotante-telefono:hover { background-color: #1c1c9b; transform: scale(1.05); }
.btn-flotante-telefono img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

/* RRSS y etiquetas */
.redes-sociales-botones { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-estilo-outline { display: inline-block; background-color: transparent; color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 12px 12px 8px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; transition: all 0.3s ease; }
.btn-estilo-outline svg { width: 24px; height: 24px; fill: currentColor; transition: all 0.3s ease; }
.btn-estilo-outline:hover, .btn-estilo-outline:focus { background-color: #fff; color: #000 !important; }
.servicios-etiquetas-contenedor { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.btn-estilo-solido { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background-color: #1f1f1f; color: #fff; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 400; font-size: 12px; }

/* --- 3. SECCIONES ESPECÍFICAS --- */
.inicio-h1 big { font-size: 64px; }
.inicio-h1 small { font-size: 24px; font-family: "matter", sans-serif; font-weight: 600; }
.textos-compromiso h3 { font-size: 24px !important; font-weight: 500; font-family: matter !important; }
.precio strong { font-weight: 600; }

/* --- 4. MÓDULO PROYECTOS ---
   Se irá vaciando al montar single-portfolio.php. */
.lista-proyectos { white-space: pre-line; }
.color-info { color: #fff; font-weight: 400; }
.color-info p { margin: 0.3em 0; line-height: 1.4; }
.logo-dinamico svg { width: 100%; }
.proyectos h2 { font-family: poppins !important; font-size: 1.5rem; }
.logo-ce { filter: brightness(10); }

.seccion-resultados-impacto { background-color: #000; color: #fff; padding: 40px 20px; }
.seccion-resultados-impacto h2 { text-align: center; color: #fff; font-size: 32px; font-weight: 500; margin: 0 0 40px; }
.grid-estadisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; }
.tarjeta-estadistica { border: 1px solid #fff; border-radius: 8px; padding: 30px 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; box-sizing: border-box; }
.tarjeta-estadistica .stat-valor { font-size: 32px; font-weight: 700; margin: 0; line-height: 1.2; }
.tarjeta-estadistica .stat-desc { font-size: 14px; line-height: 1.5; margin: 0; }

.descripcion-corta-proyecto h2, .explicacion-larga-proyecto h2 { font-family: "matter"; font-size: 24px; }
.descripcion-corta-proyecto p, .explicacion-larga-proyecto p { color: #b4b4b4; }
.propuestas-valor-lista { list-style: none; padding: 0; margin: 0; width: 100% !important; counter-reset: propuesta-counter; }
.propuestas-valor-lista li { color: #fff; font-size: 16px; padding: 16px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; }
.propuestas-valor-lista li::before { counter-increment: propuesta-counter; content: "0" counter(propuesta-counter); margin-right: 16px; font-size: 12px; color: #b4b4b4; font-weight: 600; }
.propuestas-valor-lista li:last-child { border-bottom: 1px solid rgba(255,255,255,0.2); }

.btn-proyecto-web { display: inline-block; background-color: transparent; color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 16px 32px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; transition: all 0.3s ease; }
.btn-proyecto-web:hover { border-color: #fff; background-color: rgba(255,255,255,0.1); }
.imagen-principal-proyecto { width: 100%; height: auto; border-radius: 8px !important; display: block; object-fit: cover; }
.galeria-masonry-proyecto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; margin: 20px 0; }
.galeria-masonry-item img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover !important; }
.seccion-colores-proyecto { width: 100%; margin: 40px 0; }
.contenedor-colores { display: grid; grid-template-columns: repeat(var(--num-colores, 3), 1fr); gap: 20px; width: 100%; }
.tarjeta-color { border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; box-sizing: border-box; }
.muestra-color { width: 100%; height: 200px; border-radius: 8px; margin: 0; }

.seccion-tipografias-proyecto { width: 100%; margin: 40px 0; }
.contenedor-tipografias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; }
.contenedor-tipografias.una-sola-columna { grid-template-columns: 1fr; max-width: 600px; }
.caja-tipografia { background-color: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; justify-content: center !important; align-items: center !important; box-sizing: border-box; }
.titulo-tipografia { color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 24px; text-align: center; }
.img-tipografia { max-width: 100% !important; height: auto; object-fit: contain; }

.galeria-mockups-proyecto { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; margin: 40px 0; }
.galeria-mockups-item img { width: 100%; height: auto; display: block; border-radius: 10px !important; object-fit: cover !important; }
.seccion-ce-resultados { margin: 60px 0; }
.titulo-ce { color: #fff; font-size: 32px; font-weight: 500; margin-bottom: 30px; }
.grid-ce-resultados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta-ce-resultado { border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 30px 24px; display: flex; flex-direction: column; justify-content: center; }
.valor-resultado { font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.1; }
.desc-resultado { font-size: 15px; color: #b4b4b4; line-height: 1.5; }
.seccion-ce-objetivos { margin: 20px 0; }
.contenido-objetivos { color: #b4b4b4; font-size: 16px; max-width: 900px; }
.seccion-ce-trabajo { margin: 60px 0; }
.grid-ce-trabajo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
.tarjeta-ce-trabajo { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 32px; }
.titulo-trabajo { color: #fff; font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.texto-trabajo { color: #fff; font-size: 16px; line-height: 1.6; }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .grid-estadisticas { grid-template-columns: repeat(2, 1fr); }
  .tarjeta-estadistica { min-height: 200px; }
  .galeria-masonry-proyecto, .galeria-mockups-proyecto { column-count: 2; display: block; }
  .contenedor-colores { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .grid-ce-resultados { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .contenedor-colores { grid-template-columns: repeat(2, 1fr); }
  .muestra-color { height: 150px; }
  .contenedor-tipografias { grid-template-columns: 1fr; }
  .caja-tipografia { padding: 20px; }
  .grid-ce-trabajo { grid-template-columns: 1fr; }
  .tarjeta-ce-trabajo { padding: 24px; }
  .btn-flotante-telefono { visibility: visible; }
}

@media (max-width: 767px) {
  .inicio-h1 big { font-size: 40px; }
  .inicio-h1 small { font-size: 20px; }
}

@media (max-width: 576px) {
  .seccion-resultados-impacto h2 { font-size: 26px; }
  .grid-estadisticas { grid-template-columns: 1fr; }
  .galeria-masonry-proyecto, .galeria-mockups-proyecto { column-count: 1; }
  .grid-ce-resultados { grid-template-columns: 1fr; }
  .titulo-ce { font-size: 26px; }
}

@media (max-width: 480px) {
  .contenedor-colores { grid-template-columns: 1fr; }
}