/*═══════════════════════════════════════════════════════════════
    Diseminado Comunicación - Dpto. Desarrollo Web
    https://dscomunicacion.es

    Copyright (c) 2026 David Carlos Soler Domínguez.

    dlys v6.0 by Estudio LTV
    ─────────────────────────────────────────────────────────────
    CSS - Mobile First páginas de servicios
    ../css/servicios.css
═══════════════════════════════════════════════════════════════*/

/* ──────────────────────────────────────────────────────────────
    HERO
────────────────────────────────────────────────────────────── */
.pag-servicios {
    background-color: rgb(var(--color-primario) / 0.5);
    border: 2px solid rgb(var(--color-primario));
}

.pag-web {
    background-color: rgb(var(--color-web) / 0.5);
    border: 2px solid rgb(var(--color-web));
}

.pag-seo {
    background-color: rgb(var(--color-seo) / 0.5);
    border: 2px solid rgb(var(--color-seo));
}

.pag-redes {
    background-color: rgb(var(--color-redes) / 0.5);
    border: 2px solid rgb(var(--color-redes));
}

.pag-branding {
    background-color: rgb(var(--color-branding) / 0.5);
    border: 2px solid rgb(var(--color-branding));
}

.pag-sem {
    background-color: rgb(var(--color-sem) / 0.5);
    border: 2px solid rgb(var(--color-sem));
}

.pag-marketing {
    background-color: rgb(var(--color-marketing) / 0.5);
    border: 2px solid rgb(var(--color-marketing));
}

/* ──────────────────────────────────────────────────────────────
    SERVICIOS
────────────────────────────────────────────────────────────── */
.servicio { min-width: 300px; }












/* ──────────────────────────────────────────────────────────────
    ORIENTACIÓN Y RESULTADOS
────────────────────────────────────────────────────────────── */
/*.linea-base {
    display: flex;
    width: 100%;
    gap: var(--espacio-4);
    border: 2px solid rgb(var(--color-borde));
    border-radius: var(--radio-lg);
    padding: var(--espacio-4) var(--espacio-5);
    align-items: flex-start;
}

.linea-base p strong { font-size: var(--texto-xl); }

.orientacion .linea-base .icon { 
    font-size: var(--texto-4xl);
    flex-shrink: 0; 
}*/

/*.porcentaje { 
    display: flex;
  align-items: center;     /* Centrado Vertical */
  /*justify-content: center; /* Centrado Horizontal */
  /*min-height: 100px;
  max-height: 100vh;
}*/

/* ──────────────────────────────────────────────────────────────
    EXPLICACIÓN
────────────────────────────────────────────────────────────── */
/*.explicacion-seo .caja-base h3 { margin-top: var(--espacio-5); }

.caja-alerta {
    border: 1px solid rgb(var(--color-borde));
    border-left: 4px solid rgb(var(--color-primario)); 
    padding: 12px 20px; 
    margin-bottom: 20px; 
    border-radius: 4px; 
    display: inline-block;
} 
.caja-alerta p {
    margin: 0; 
    color: rgb(var(--color-oscuro)); 
    font-size: 0.9rem;
}*/


/* ──────────────────────────────────────────────────────────────
  CÓMO TRABAJAMOS
────────────────────────────────────────────────────────────── */
/*.proceso-trabajo, .plazos-entrega {
  display: grid; 
  gap: 10px; 
  margin-top: var(--espacio-12);
} 

.proceso-trabajo-fila, .plazos-entrega-fila {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 15px;
  position: relative;
} 

.proceso-trabajo-insignia, .plazos-entrega-insignia {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  width: 40px; 
  flex-shrink: 0;
} 

.proceso-trabajo-texto, .plazos-entrega-texto { word-wrap: break-word; } 

.proceso-trabajo-texto .titulo, .plazos-entrega-texto .titulo {    
    font-weight: 700;
    font-size: var(--texto-xl);
}*/

.trabajo-social-media .cuadricula, .resultados-social-media .cuadricula { margin-top: var(--espacio-5); }

.resultados-social-media .caja-base { border: 2px solid rgb(var(--color-borde)); }



/* ──────────────────────────────────────────────────────────────
  DESTINATARIOS
────────────────────────────────────────────────────────────── */
.destinatarios-web .caja-base { 
    background-color: rgb(var(--color-bg));
    border: 2px solid rgb(var(--color-borde));
}

.destinatarios-seo .caja-base { border: 2px solid rgb(var(--color-borde)); }

.destinatarios-web .caja-base .icon, .destinatarios-seo .caja-base .icon { 
    font-size: var(--texto-4xl); 
    text-align: center;
}

.destinatarios-web .caja-base h3, .destinatarios-seo .caja-base h3 {
    margin-top: var(--espacio-1);
    font-size: var(--texto-xl);
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────
  PRECIOS
────────────────────────────────────────────────────────────── */
/*.caja-precio {
    padding: var(--espacio-4) var(--espacio-8);
    border: 2px solid rgb(var(--color-borde)); 
    border-radius: var(--radio-lg); 
    flex: 1 1 300px; 
    max-width: 320px; 
    text-align: center; 
    position: relative;
    box-shadow: var(--sombra-oscura);
}


.caja-unica-precio {    
    padding: var(--espacio-5); 
    border-radius: var(--radio-lg); 
    flex: 1 1 300px; 
    max-width: 1100px; 
    text-align: center; 
    position: relative; 
    border: 2px solid rgb(var(--color-borde));
}

.caja-unica-precio .precio { 
    font-size: var(--texto-2xl); 
    font-weight: 700;
}

.precios-seo .caja-unica-precio ul li { color: rgb(var(--color-bg)); }
*/
.precios-social-media .caja-unica-precio { 
    background-color: rgb(var(--color-bg));
    box-shadow: var(--sombra-oscura); 
}